/* ============================================================
   screens-next.jsx — What's next (vacancies, pathways, more)
   ============================================================ */

function ScreenNext({ go }) {
  const [filter, setFilter] = React.useState("all");
  const list = filter === "all" ? window.VACANCIES : window.VACANCIES.filter(v => v.agency === filter);

  return (
    <div className="screen-enter">
      <SectionHead kicker="05 · What's next"
        title="Curiosity → conversion"
        anno="all three agencies, one place ↘"
        lede="No bouncing between three careers sites. Live roles from DIA, MoJ and Police — graduate through to senior — in one feed." />

      {/* filter */}
      <div className="row wrapw center" style={{ gap: 10, marginBottom: 18 }}>
        <span className="kicker" style={{ marginRight: 4 }}>filter</span>
        <button className={"wbtn sm" + (filter === "all" ? " accent" : "")} onClick={() => setFilter("all")}>All roles</button>
        {window.AGENCY_ORDER.map(k => (
          <button key={k} className={"wbtn sm" + (filter === k ? " accent" : "")} onClick={() => setFilter(k)}>{window.AGENCIES[k].short}</button>
        ))}
      </div>

      {/* vacancies */}
      <div className="col" style={{ gap: 12, marginBottom: 48 }}>
        {list.map((v, i) => {
          const a = window.AGENCIES[v.agency];
          return (
            <div key={i} className="wbox" style={{ padding: "16px 20px", display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
              <div style={{ width: 6, alignSelf: "stretch", background: a.color, borderRadius: 999, minHeight: 44 }} />
              <div style={{ flex: "1 1 280px" }}>
                <strong style={{ fontSize: 20 }}>{v.title}</strong>
                <div className="row wrapw center" style={{ gap: 8, marginTop: 6 }}>
                  <span className={"pill " + a.cls} style={{ fontSize: 12 }}>{a.short}</span>
                  <span className="muted" style={{ fontSize: 15 }}>· {v.loc} · {v.level}</span>
                </div>
              </div>
              <button className="wbtn sm">View role →</button>
            </div>
          );
        })}
      </div>

      {/* career pathway */}
      <h3 className="disp" style={{ fontSize: 32, marginBottom: 4 }}>Where it can go</h3>
      <p className="muted" style={{ fontSize: 16, marginBottom: 18 }}>A pathway from graduate to senior — across the system, not just one rung.</p>
      <div className="row wrapw center" style={{ gap: 8, marginBottom: 46 }}>
        {window.PATHWAY.map((p, i) => (
          <React.Fragment key={p}>
            <div className="wbox" style={{ padding: "12px 16px", flex: "1 1 130px", textAlign: "center" }}>
              <div className="disp" style={{ fontSize: 22, color: "var(--ink-3)" }}>{String(i + 1).padStart(2, "0")}</div>
              <div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>{p}</div>
            </div>
            {i < window.PATHWAY.length - 1 && <div className="disp" style={{ fontSize: 26, color: "var(--ink-3)", alignSelf: "center" }}>→</div>}
          </React.Fragment>
        ))}
      </div>

      {/* supporting cards */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(240px,1fr))", marginBottom: 40 }}>
        {[
          { h: "Secondments", p: "Try another agency without leaving your career. Move between policy, supervision and enforcement." },
          { h: "Online courses", p: "Short, free primers to build confidence before you apply — no prior AML knowledge needed." },
          { h: "Talk to a human", p: "Questions about a career change? A named contact from each agency, ready to chat." },
        ].map((c, i) => (
          <div key={i} className="wbox dbl" style={{ padding: "20px 22px" }}>
            <h4 style={{ fontSize: 21 }}>{c.h}</h4>
            <p style={{ fontSize: 16, marginTop: 8 }}>{c.p}</p>
            <button className="wbtn sm ghost" style={{ marginTop: 14 }}>Learn more →</button>
          </div>
        ))}
      </div>

      {/* closing CTA */}
      <div className="wbox fill" style={{ padding: "34px 30px", textAlign: "center" }}>
        <h3 className="disp" style={{ fontSize: "clamp(32px,5vw,52px)" }}>Still curious? Start with the quiz.</h3>
        <p style={{ fontSize: 18, marginTop: 10, maxWidth: 520, marginInline: "auto" }}>Two minutes to see where you'd fit across the system.</p>
        <button className="wbtn accent big" style={{ marginTop: 22 }} onClick={() => go("quiz")}>Find where you fit  →</button>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenNext });