/* global React */

// ─────────────────────────────────────────────────────────────
// 404 — branded not-found screen for unknown routes.
// ─────────────────────────────────────────────────────────────

const NotFoundScreen = ({ navigate }) => {
  return (
    <main data-screen-label="404" style={{ minHeight: '72vh', display: 'flex', alignItems: 'center' }}>
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '96px 48px', width: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Off-stage <Slash /> Page not found</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>Error 404</span>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 'clamp(72px, 16vw, 280px)', letterSpacing: '-0.04em', lineHeight: 0.82,
          margin: 0, color: 'var(--ink)',
        }}>
          4<span style={{ display: 'inline-block', transform: 'skewX(-12deg)', color: 'var(--mid-soft)' }}>0</span>4
        </h1>

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'flex-end' }}>
          <p style={{ fontSize: 21, lineHeight: 1.5, color: 'var(--ink)', margin: 0, maxWidth: '46ch' }}>
            This one missed its cue. The page you were after has moved, been renamed, or never made it to the stage. Let's get you back to the action.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
            <Button onClick={(e) => { e.preventDefault(); navigate('home'); }}>Back to home</Button>
            <Button variant="secondary" onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Contact us</Button>
          </div>
        </div>

        {/* Quick links */}
        <div style={{ marginTop: 80, borderTop: '1px solid var(--hairline)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
            {[
              { id: 'about',  label: 'Who we are',        note: 'The agency' },
              { id: 'youth',  label: 'Youth · 4–16',      note: 'Sign up' },
              { id: 'pro',    label: 'Professional · 17+', note: 'Sign up' },
              { id: 'podcast',label: 'Podcast',           note: 'Listen now' },
            ].map((l, i) => (
              <a key={l.id} href={csHref(l.id)} onClick={(e) => { e.preventDefault(); navigate(l.id); }}
                 style={{
                   padding: '32px 28px 28px',
                   borderLeft: i === 0 ? '0' : '1px solid var(--hairline)',
                   borderBottom: '1px solid var(--hairline)',
                   textDecoration: 'none', color: 'var(--ink)',
                   display: 'flex', flexDirection: 'column', gap: 10,
                   transition: 'background 200ms var(--ease-stage)',
                 }}
                 onMouseEnter={e => { e.currentTarget.style.background = 'var(--paper-deep)'; }}
                 onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
              >
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{l.note}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(22px, 2.2vw, 30px)', letterSpacing: '-0.02em', lineHeight: 1 }}>
                  {l.label}
                </span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)' }}>→</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { NotFoundScreen });