import Link from 'next/link'

export default function NotFound() {
  return (
    <div style={styles.container}>
      <div style={styles.overlay}></div>
      <h2 style={styles.title}>Whoops!</h2>
      <p style={styles.message}>Sorry, the page you're looking for doesn't exist.</p>
      <Link href="/" style={styles.link}>Go Home</Link>
    </div>
  )
}

const styles = {
  container: {
    position: 'absolute',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100dvh',
    width:'100dvw',
    top:'0',
    textAlign: 'center',
    color: 'white',
    padding: '20px',
    overflow: 'hidden',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'url("/404_bg.jpg") no-repeat center center/cover',
    filter: 'blur(5px)',
    zIndex: -1, // Sends the overlay behind the text
  },
  title: {
    fontSize: '3rem',
    fontWeight: 'bold',
    textShadow: '2px 2px 4px rgba(0, 0, 0, 0.7)',
  },
  message: {
    fontSize: '1.5rem',
    margin: '20px 0',
    textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
  },
  link: {
    marginTop: '20px',
    padding: '12px 20px',
    backgroundColor: 'var(--bg-primary)', // Semi-transparent red
    color: 'white',
    textDecoration: 'none',
    borderRadius: '5px',
    border: '2px solid var(--primary-special-color)',
    transition: 'background-color 0.3s ease',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
  },
}