// Shop / Question Banks page

function ShopPage({ cart, fmt, ccy }) {
  const [filter, setFilter] = useState("all");
  const [search, setSearch] = useState("");
  const [selectedCo, setSelectedCo] = useState(null);

  const filtered = D.companies.filter(c => {
    if (filter !== "all" && c.c !== filter) return false;
    if (search && !`${c.n} ${c.t}`.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const cats = [{ id: "all", label: "All", short: "ALL" }, ...Object.values(D.cat)];

  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="eyebrow" style={{ marginBottom: 22 }}>QUESTION BANKS · 83 FIRMS · 240+ ROLES</div>
        <h1 className="h-section" style={{ margin: 0, maxWidth: 1080 }}>
          The catalogue. <em>Every firm new grads apply to.</em>
        </h1>
        <p style={{ marginTop: 24, fontSize: 17, color: "var(--text-2)", maxWidth: 620, lineHeight: 1.55 }}>
          Each firm lists every role we currently cover, with three variants per role: OT, VI, or the Full Pack with assessment centre.
        </p>
      </section>

      {/* Filter bar */}
      <section style={{ position: "sticky", top: 68, zIndex: 30, background: "color-mix(in oklab, var(--bg) 92%, transparent)", backdropFilter: "blur(12px)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="container" style={{ paddingTop: 18, paddingBottom: 18, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
            {cats.map(c => (
              <button key={c.id} onClick={() => setFilter(c.id)} style={{
                padding: "8px 14px",
                borderRadius: 999,
                fontSize: 13,
                background: filter === c.id ? "var(--text)" : "transparent",
                color: filter === c.id ? "var(--bg)" : "var(--text-2)",
                fontWeight: filter === c.id ? 500 : 400,
                transition: "all 0.15s",
              }}>
                {c.label}
              </button>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <input
              className="input"
              placeholder="Search firms or tickers…"
              value={search}
              onChange={e => setSearch(e.target.value)}
              style={{ width: 240, padding: "8px 14px", fontSize: 13 }}
            />
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)", letterSpacing: "0.08em" }}>
              {filtered.length.toString().padStart(2, "0")} FIRMS
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="container" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16 }}>
          {filtered.map(c => (
            <CompanyCard key={c.t} c={c} fmt={fmt} onSelect={() => setSelectedCo(c)} />
          ))}
        </div>
        {filtered.length === 0 && (
          <div style={{ textAlign: "center", padding: "100px 0", color: "var(--text-3)" }}>
            <div className="serif-italic" style={{ fontSize: 32 }}>No firms match that filter.</div>
            <div style={{ fontSize: 14, marginTop: 12 }}>Request one at hi@forbestoffer.co — we add new banks weekly.</div>
          </div>
        )}
      </section>

      {selectedCo && (
        <CompanyDetail co={selectedCo} cart={cart} fmt={fmt} onClose={() => setSelectedCo(null)} />
      )}
    </div>
  );
}

function ServiceCard({ s, fmt, cart }) {
  return (
    <div style={{
      position: "relative",
      background: s.popular ? "linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%)" : "var(--surface)",
      border: "1px solid",
      borderColor: s.popular ? "var(--accent-dim)" : "var(--border)",
      borderRadius: 12, padding: 22,
      display: "flex", flexDirection: "column", gap: 12,
    }}>
      {s.popular && <span style={{ position: "absolute", top: -10, right: 14, fontSize: 9, padding: "2px 9px", borderRadius: 999, background: "var(--accent)", color: "var(--accent-fg)", fontFamily: "var(--mono)", letterSpacing: "0.08em", fontWeight: 600 }}>POPULAR</span>}
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div className="placeholder-img" style={{ width: 44, height: 44, fontSize: 10, background: "linear-gradient(135deg, rgba(212,160,74,0.15), transparent)", borderColor: "var(--accent-dim)", color: "var(--accent)" }}>{s.ticker}</div>
        <span className="chip">SERVICE</span>
      </div>
      <div>
        <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.15, marginBottom: 4 }}>{s.name}</div>
        <div style={{ fontSize: 11.5, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>{s.sub.toUpperCase()}</div>
      </div>
      <p style={{ margin: 0, color: "var(--text-2)", fontSize: 12.5, lineHeight: 1.55, minHeight: 64 }}>{s.desc}</p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid var(--border)" }}>
        <span className="mono" style={{ fontSize: 18 }}>{fmt(s.gbp)}</span>
        <button onClick={() => cart.addService(s)} className={s.popular ? "btn btn-primary btn-sm" : "btn btn-dark btn-sm"}>
          Book →
        </button>
      </div>
    </div>
  );
}

function CompanyCard({ c, fmt, onSelect }) {
  const cat = D.cat[c.c];
  return (
    <button onClick={onSelect} className="card" style={{
      textAlign: "left",
      padding: 22,
      cursor: "pointer",
      transition: "all 0.2s",
      position: "relative",
    }}
      onMouseOver={e => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseOut={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.transform = "translateY(0)"; }}>
      {c.hot && (
        <span style={{ position: "absolute", top: 18, right: 18, fontSize: 9, color: "var(--accent)", fontFamily: "var(--mono)", letterSpacing: "0.1em", padding: "2px 8px", border: "1px solid var(--accent-dim)", borderRadius: 999 }}>★ HOT</span>
      )}
      <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 22 }}>
        <div className="placeholder-img" style={{ width: 48, height: 48, fontSize: 11, fontWeight: 500 }}>{c.t}</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.2 }}>{c.n}</div>
          <div className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.08em", marginTop: 4 }}>{cat.short} · {c.t}</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 18, minHeight: 24 }}>
        {c.roles.slice(0, 2).map((r, i) => (
          <span key={i} className="chip" style={{ fontSize: 10, padding: "3px 8px" }}>{r}</span>
        ))}
        {c.roles.length > 2 && <span className="chip" style={{ fontSize: 10, padding: "3px 8px", color: "var(--text-3)" }}>+{c.roles.length - 2}</span>}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid var(--border)" }}>
        <span style={{ fontSize: 11, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>{c.roles.length} {c.roles.length === 1 ? "role" : "roles"} · 3 variants</span>
        <span style={{ fontSize: 12, color: "var(--accent)" }}>From {fmt(15)} →</span>
      </div>
    </button>
  );
}

function CompanyDetail({ co, cart, fmt, onClose }) {
  const cat = D.cat[co.c];
  const [selectedRole, setSelectedRole] = useState(co.roles[0]);
  useEffect(() => {
    const esc = e => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", esc);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, []);

  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", backdropFilter: "blur(6px)", zIndex: 110, animation: "fadeIn 0.2s" }} />
      <div style={{
        position: "fixed", top: "5vh", left: "50%", transform: "translateX(-50%)",
        width: "min(960px, 94vw)", maxHeight: "90vh", overflow: "auto",
        background: "var(--bg-soft)", border: "1px solid var(--border-strong)", borderRadius: 16,
        zIndex: 120, boxShadow: "var(--shadow-2)",
      }}>
        <div style={{ padding: "32px 40px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ display: "flex", gap: 22, alignItems: "center" }}>
            <div className="placeholder-img" style={{ width: 64, height: 64, fontSize: 13, fontWeight: 600 }}>{co.t}</div>
            <div>
              <div className="eyebrow">{cat.label}</div>
              <h2 className="serif-italic" style={{ fontSize: 40, margin: "6px 0 2px", lineHeight: 1 }}>{co.n}</h2>
              <div style={{ color: "var(--text-3)", fontSize: 12.5, fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>
                Ticker {co.t} · {co.roles.length} active roles · Updated 14 days ago
              </div>
            </div>
          </div>
          <button onClick={onClose} style={{ color: "var(--text-2)", fontSize: 22, lineHeight: 1 }}>×</button>
        </div>

        <div style={{ padding: "32px 40px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>SELECT ROLE</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 36 }}>
            {co.roles.map(r => (
              <button key={r} onClick={() => setSelectedRole(r)} style={{
                padding: "10px 16px", borderRadius: 999,
                border: "1px solid",
                borderColor: r === selectedRole ? "var(--accent)" : "var(--border)",
                background: r === selectedRole ? "rgba(212,160,74,0.08)" : "transparent",
                color: r === selectedRole ? "var(--text)" : "var(--text-2)",
                fontSize: 13,
                transition: "all 0.15s",
              }}>
                {r}
              </button>
            ))}
          </div>

          <div className="eyebrow" style={{ marginBottom: 14 }}>CHOOSE A VARIANT</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            {D.variants.map(v => (
              <div key={v.id} style={{
                background: v.popular ? "var(--surface)" : "var(--bg)",
                border: "1px solid",
                borderColor: v.popular ? "var(--accent-dim)" : "var(--border)",
                borderRadius: 12, padding: 22,
                position: "relative",
                display: "flex", flexDirection: "column",
              }}>
                {v.popular && (
                  <span style={{ position: "absolute", top: -10, right: 16, fontSize: 10, padding: "3px 9px", borderRadius: 999, background: "var(--accent)", color: "var(--accent-fg)", fontFamily: "var(--mono)", letterSpacing: "0.08em", fontWeight: 600 }}>BEST VALUE</span>
                )}
                <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.1em", marginBottom: 10 }}>{v.id.toUpperCase()}</div>
                <div className="serif-italic" style={{ fontSize: 24, marginBottom: 10 }}>{v.name}</div>
                <p style={{ color: "var(--text-2)", fontSize: 13, lineHeight: 1.5, margin: 0, flex: 1 }}>{v.desc}</p>
                <div style={{ marginTop: 22, display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                  <span className="mono" style={{ fontSize: 22 }}>{fmt(v.gbp)}</span>
                  <span style={{ fontSize: 10, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>£{v.gbp} GBP</span>
                </div>
                <button onClick={() => cart.add(co, selectedRole, v)}
                  className={v.popular ? "btn btn-primary" : "btn btn-ghost"}
                  style={{ width: "100%", justifyContent: "center", marginTop: 16, fontSize: 13, padding: "11px 18px" }}>
                  Add to cart
                </button>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 36, padding: 24, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 12 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>WHAT'S INSIDE THE FULL PACK</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
              {[
                { t: "OT — Online Test", l: ["Numerical (40 Q)", "Verbal (30 Q)", "Logical (25 Q)", "Situational (20 Q)", "Full walkthroughs"] },
                { t: "VI — Video Interview", l: ["12–18 verbatim prompts", "Scoring rubric", "Sample structured answers", "Camera & pacing guide"] },
                { t: "AC — Assessment Centre", l: ["Group case brief", "Written case dossier", "Partner round prompts", "Numerical re-test (if applicable)"] },
              ].map((s, i) => (
                <div key={i}>
                  <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 10, color: "var(--accent)" }}>{s.t}</div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                    {s.l.map((x, j) => (
                      <li key={j} style={{ color: "var(--text-2)", fontSize: 12.5, display: "flex", gap: 8 }}>
                        <span style={{ color: "var(--accent)", flexShrink: 0 }}>·</span>{x}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { ShopPage });