import Link from 'next/link';
import Wordmark from '@/components/Wordmark';

export const metadata = {
  title: '404 — Signal Lost',
};

export default function NotFound() {
  return (
    <section
      className="tex-scan"
      style={{
        minHeight: 'calc(100vh - 144px)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 24,
        padding: '32px 16px',
        textAlign: 'center',
      }}
    >
      <Wordmark size={28} />
      <p className="lbl" style={{ color: 'var(--grade-c)' }}>TRANSMISSION INTERRUPTED</p>
      <h1
        className="num"
        style={{
          fontSize: 'clamp(80px, 16vw, 160px)',
          fontWeight: 800,
          color: 'var(--grade-c)',
          textShadow: '0 0 24px rgba(255, 179, 71, 0.6), 0 0 48px rgba(255, 179, 71, 0.25)',
          lineHeight: 0.9,
          letterSpacing: '-0.04em',
        }}
      >
        404
      </h1>
      <p style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', maxWidth: 480 }}>
        This page doesn&apos;t exist. The signal was lost.
      </p>
      <p style={{ color: 'var(--text-1)', fontSize: 14, maxWidth: 480 }}>
        Check the URL, head back to the slate, or open the Ledger to review past grades.
      </p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
        <Link href="/dashboard" className="btn-primary">Back to Dashboard →</Link>
        <Link href="/ledger" className="btn-ghost">Open the Ledger</Link>
      </div>
    </section>
  );
}