// 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>
  );
}

// ── Onboarding tour (modal, first-signed-in only) ──────────────────
function OnboardingTour({ open, onClose, setPage }) {
  const [step, setStep] = useState(0);
  const steps = [
    { n: "01", t: "Your library is your home base.", d: "Every bank you buy lives here. Every quarterly refresh lands automatically. You can access from any device — no extra licence needed." },
    { n: "02", t: "Pick the firm, not the platform.", d: "Browse 83 companies × 240+ roles. Three variants per role: OT, VI, or the Full Pack with assessment centre." },
    { n: "03", t: "Pair a bank with a coach.", d: "The highest hit-rate we see: question bank + a single 90-minute mock the week before AC. Add both to the same cart at checkout." },
  ];
  if (!open) return null;
  const last = step === steps.length - 1;
  const cur = steps[step];
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", backdropFilter: "blur(6px)", zIndex: 200 }} />
      <div style={{
        position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
        width: "min(560px, 92vw)", background: "var(--bg-soft)",
        border: "1px solid var(--border-strong)", borderRadius: 16, zIndex: 210,
        boxShadow: "var(--shadow-2)", overflow: "hidden",
      }}>
        <div style={{ padding: "28px 32px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="eyebrow">QUICK START · {step + 1} / {steps.length}</div>
          <button onClick={onClose} style={{ color: "var(--text-3)", fontSize: 20 }}>×</button>
        </div>
        <div style={{ padding: "20px 32px 32px" }}>
          <div className="serif-italic" style={{ fontSize: 80, color: "var(--accent)", lineHeight: 0.9, marginBottom: 6 }}>{cur.n}</div>
          <h2 className="serif" style={{ fontSize: 32, lineHeight: 1.15, margin: "0 0 16px", letterSpacing: "-0.02em" }}>{cur.t}</h2>
          <p style={{ color: "var(--text-2)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>{cur.d}</p>
        </div>
        <div style={{ padding: "18px 32px", background: "var(--bg)", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", gap: 6 }}>
            {steps.map((_, i) => <span key={i} style={{ width: i === step ? 22 : 6, height: 3, background: i === step ? "var(--accent)" : "var(--border-strong)", transition: "all 0.2s" }} />)}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {step > 0 && <button className="btn btn-dark btn-sm" onClick={() => setStep(step - 1)}>← Back</button>}
            {!last  && <button className="btn btn-primary btn-sm" onClick={() => setStep(step + 1)}>Next →</button>}
            {last   && <button className="btn btn-primary btn-sm" onClick={() => { onClose(); setPage("shop"); }}>Browse 83 firms →</button>}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

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