// ui_kits/site/NotFound.jsx — 404 page. dry, a little weird.
// Coming-soon copy keyed by route — the three doors lead here intentionally.
const SOON_COPY = {
  '/about':       { eyebrow: '→ status: building',  big: 'soon.',   sub: 'the longer version is being written. resume in the meantime?' },
  '/experiments': { eyebrow: '→ status: cooking',   big: 'shh.',    sub: 'experiments live here. they\'re half-built. come back.' },
  '/fun':         { eyebrow: '→ status: assembling',big: 'almost.', sub: 'games and toys. nothing here yet. patience.' },
};

const NotFound = ({ setRoute, route }) => {
  const isSoon = !!SOON_COPY[route];
  const copy = SOON_COPY[route] || { eyebrow: '→ status: 404', big: 'lost?', sub: 'so is the page you were looking for.' };
  const wrapRef = React.useRef(null);
  // Subtle text-glitch on hover
  React.useEffect(() => {
    const el = wrapRef.current?.querySelector('.nf-big');
    if (!el) return;
    let raf;
    const tick = () => {
      const t = performance.now() / 1000;
      el.style.setProperty('--gx', `${Math.sin(t * 1.7) * 3}px`);
      el.style.setProperty('--gy', `${Math.cos(t * 2.3) * 2}px`);
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section ref={wrapRef} className="koa-nf">
      <div className="wrap nf-inner">
        <span className="t-eyebrow">{copy.eyebrow}</span>
        <h1 className="nf-big">
          <span className="nf-layer nf-layer-a">{copy.big}</span>
          <span className="nf-layer nf-layer-b">{copy.big}</span>
          <span className="nf-layer nf-layer-c">{copy.big}</span>
        </h1>
        <p className="nf-sub">{copy.sub}</p>
        {!isSoon && (
          <pre className="nf-trace"><span className="t-eyebrow">→ stack trace</span>{`

  Error: page not found
    at Router.resolve (koa.codes:?)
    at you (browser:somewhere)
    at curiosity (good thing, keep it)
`}</pre>
        )}
        <div className="nf-cta">
          <a className="btn primary" href="#/" onClick={(e) => { e.preventDefault(); setRoute('/'); }}>
            ← go home
          </a>
          <a className="btn ghost" href="#/work">browse work</a>
        </div>
      </div>
      <style>{`
        .koa-nf { min-height: 100vh; display: flex; align-items: center; padding-top: 100px; }
        .nf-inner { display: flex; flex-direction: column; gap: var(--s-4); }
        .nf-big {
          font-family: var(--font-display); font-weight: 700; font-weight: 400;
          font-size: clamp(96px, 22vw, 320px); line-height: 0.9; margin: 0; letter-spacing: -0.05em;
          position: relative; isolation: isolate;
        }
        .nf-layer { position: relative; display: inline-block; }
        .nf-layer-b, .nf-layer-c { position: absolute; left: 0; top: 0; }
        .nf-layer-a { color: var(--fg); }
        .nf-layer-b { color: var(--accent);   mix-blend-mode: difference; transform: translate(var(--gx, 0), var(--gy, 0)); }
        .nf-layer-c { color: var(--accent-2); mix-blend-mode: difference; transform: translate(calc(var(--gx, 0) * -1), calc(var(--gy, 0) * -1)); }
        .nf-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 32px); color: var(--fg-muted); margin: 0; max-width: 30ch; }
        .nf-trace {
          font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
          background: var(--bg-elev); padding: var(--s-4); border-radius: var(--r-3);
          border: 1px solid var(--border); max-width: 520px;
          margin: var(--s-3) 0 0;
        }
        .nf-cta { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
      `}</style>
    </section>
  );
};

window.NotFound = NotFound;