// 404, cookie banner, onboarding tour

function NotFoundPage({ setPage }) {
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 100, paddingBottom: 140, position: "relative", overflow: "hidden" }}>
        <div className="grid-lines" style={{ position: "absolute", inset: 0, opacity: 0.6, pointerEvents: "none" }} />
        <div style={{ position: "relative", maxWidth: 880 }}>
          <div className="eyebrow-rule">ERROR 404 · PAGE NOT FOUND</div>
          <div className="serif-italic" style={{ fontSize: "clamp(120px, 22vw, 280px)", color: "var(--accent)", letterSpacing: "-0.04em", lineHeight: 0.85, marginTop: 32 }}>
            404.
          </div>
          <h1 className="h-section" style={{ margin: "32px 0 0", maxWidth: 700 }}>
            That page didn't make the catalogue.
          </h1>
          <p style={{ marginTop: 24, fontSize: 17, color: "var(--text-2)", maxWidth: 540, lineHeight: 1.55 }}>
            Either it never existed, was archived after a refresh, or you typed it wrong. Try one of the routes below — they all go somewhere real.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 36, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => setPage("home")}>← Back to the front page</button>
            <button className="btn btn-ghost"   onClick={() => setPage("shop")}>Browse 83 firms</button>
            <button className="btn btn-ghost"   onClick={() => setPage("coaching")}>1:1 coaching</button>
            <button className="btn btn-ghost"   onClick={() => setPage("blog")}>The journal</button>
          </div>

          <div style={{ marginTop: 80, paddingTop: 28, borderTop: "1px solid var(--border)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, maxWidth: 720 }} data-mobile="stack">
            <Crumb label="POPULAR FIRM" value="Goldman Sachs" onClick={() => setPage("shop")} />
            <Crumb label="POPULAR FIRM" value="McKinsey & Co" onClick={() => setPage("shop")} />
            <Crumb label="POPULAR FIRM" value="Optiver" onClick={() => setPage("shop")} />
          </div>
        </div>
      </section>
    </div>
  );
}
function Crumb({ label, value, onClick }) {
  return (
    <button onClick={onClick} style={{ textAlign: "left", padding: "16px 18px", border: "1px solid var(--border)", borderRadius: 8, background: "var(--surface)" }}>
      <div className="eyebrow">{label}</div>
      <div className="serif-italic" style={{ fontSize: 20, marginTop: 6 }}>{value} →</div>
    </button>
  );
}

// ── Cookie banner ──────────────────────────────────────────────────
function CookieBanner() {
  const [open, setOpen] = useState(() => !localStorage.getItem("fbo-cookies"));
  const [showOpts, setShowOpts] = useState(false);
  if (!open) return null;
  const decide = (val) => { localStorage.setItem("fbo-cookies", val); setOpen(false); };
  return (
    <div style={{
      position: "fixed", bottom: 20, left: 20, right: 20, zIndex: 80,
      maxWidth: 760, marginInline: "auto",
      background: "var(--bg)", border: "1px solid var(--border-strong)", borderRadius: 12,
      boxShadow: "var(--shadow-2)",
      padding: 24,
      display: "flex", flexDirection: "column", gap: 16,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>COOKIE NOTICE</div>
          <div style={{ fontSize: 14, color: "var(--text-2)", lineHeight: 1.55 }}>
            We use a single first-party cookie to keep you signed in and a cookieless analytics tool (Plausible) to count visits. No advertising, no remarketing, no tracking.
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button className="btn btn-dark btn-sm" onClick={() => setShowOpts(s => !s)}>Preferences</button>
          <button className="btn btn-dark btn-sm" onClick={() => decide("essential")}>Essential only</button>
          <button className="btn btn-primary btn-sm" onClick={() => decide("all")}>Accept all</button>
        </div>
      </div>
      {showOpts && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, paddingTop: 14, borderTop: "1px solid var(--border)" }} data-mobile="stack">
          {[
            { t: "Strictly necessary", v: "Always on",  d: "Sign-in, cart, currency preference." },
            { t: "Analytics",          v: "Optional",   d: "Plausible — cookieless, no tracking." },
            { t: "Marketing",          v: "We don't",   d: "We do not run advertising trackers." },
          ].map(p => (
            <div key={p.t} style={{ padding: 14, background: "var(--bg-soft)", border: "1px solid var(--border)", borderRadius: 8 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{p.t}</div>
              <div style={{ fontSize: 11, color: "var(--accent)", fontFamily: "var(--mono)", letterSpacing: "0.06em", marginTop: 4 }}>{p.v.toUpperCase()}</div>
              <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 8, lineHeight: 1.5 }}>{p.d}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { NotFoundPage, CookieBanner });