import { Wordmark } from '@/components/vyndr';
import NotFoundActions from '@/components/vyndr/NotFoundActions';

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

/**
 * The north star (§3). The brand distilled: full-page scanlines, the glitch
 * wordmark, system language ("TRANSMISSION INTERRUPTED"), a giant glowing amber
 * 404, and a CRT sweep on load. Every page should aspire to this intentionality.
 */
export default function NotFound() {
  return (
    <section
      className="scanlines"
      style={{
        minHeight: 'calc(100vh - 140px)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 0,
        padding: '40px 24px',
        textAlign: 'center',
        position: 'relative',
      }}
    >
      {/* CRT sweep — fires its 0.7s animation once on mount */}
      <div className="crt-sweep" />

      <div style={{ marginBottom: 22 }}>
        <Wordmark size="lg" cursor beta />
      </div>

      <div
        className="mono amber-glow"
        style={{ fontSize: 13, letterSpacing: '0.28em', color: 'var(--amber)', marginBottom: 22 }}
      >
        TRANSMISSION INTERRUPTED
      </div>

      <div
        className="wm"
        data-text="404"
        style={{
          fontSize: 'clamp(96px, 16vw, 150px)',
          fontWeight: 800,
          color: 'var(--amber)',
          textShadow: '0 0 24px rgba(255,179,71,.6), 0 0 60px rgba(255,179,71,.3)',
          lineHeight: 1,
          letterSpacing: '-0.02em',
        }}
      >
        404
      </div>

      <h1 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em', margin: '26px 0 0', color: 'var(--text-0)' }}>
        This page doesn&apos;t exist.
      </h1>
      <p className="mono" style={{ fontSize: 13.5, color: 'var(--text-1)', marginTop: 10 }}>
        The signal was lost.
      </p>

      <NotFoundActions />
    </section>
  );
}
