import { Link } from 'react-router-dom';

export default function NotFoundPage() {
  return (
    <div
      style={{
        minHeight: 'calc(100vh - 56px)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '4rem 1.5rem',
        textAlign: 'center',
      }}
    >
      <div>
        <div
          className="glow-green flicker"
          style={{
            fontFamily: 'var(--font-heading)',
            color: 'var(--color-green)',
            fontSize: 'clamp(5rem, 20vw, 12rem)',
            lineHeight: 1,
            marginBottom: '1rem',
          }}
        >
          404
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.9rem', letterSpacing: '0.2em', marginBottom: '1.5rem' }}>
          SECTOR NOT FOUND
        </div>
        <p style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.85rem', maxWidth: '400px', margin: '0 auto 2rem', lineHeight: 1.8 }}>
          The page you're looking for doesn't exist, has been moved, or was redacted by{' '}
          <span style={{ background: '#6b7280', padding: '0 4px', color: 'transparent', border: '1px solid var(--color-red)' }}>
            AMALGAM CORP
          </span>.
        </p>
        <Link to="/" className="btn-terminal">&gt; Return to Base</Link>
      </div>
    </div>
  );
}