/* ============================================================
   screens-intro.jsx — Home (hero variants) + What is AML/CFT
   ============================================================ */

const PILLAR_LIST = [
  { key: "whatis",  n: "01", label: "What is AML/CFT", sub: "The work, in plain English" },
  { key: "system",  n: "02", label: "How the system works", sub: "Three agencies, one system" },
  { key: "work",    n: "03", label: "The work", sub: "A day in the life" },
  { key: "quiz",    n: "04", label: "Where you fit", sub: "Take the 8-question quiz" },
  { key: "next",    n: "05", label: "What's next", sub: "Real roles & pathways" },
];

function JourneyPath({ go, current }) {
  return (
    <div className="row wrapw" style={{ gap: 12 }}>
      {PILLAR_LIST.map((p, i) => (
        <React.Fragment key={p.key}>
          <button className="wbox" onClick={() => go(p.key)}
            style={{ padding: "12px 16px", textAlign: "left", cursor: "pointer", background: current === p.key ? "var(--accent-soft)" : "var(--paper-2)", flex: "1 1 150px" }}>
            <div className="disp" style={{ fontSize: 24, color: "var(--ink-3)" }}>{p.n}</div>
            <div style={{ fontWeight: 700, fontSize: 16, marginTop: 2 }}>{p.label}</div>
          </button>
          {i < PILLAR_LIST.length - 1 && <div className="disp" style={{ fontSize: 30, alignSelf: "center", color: "var(--ink-3)" }}>→</div>}
        </React.Fragment>
      ))}
    </div>
  );
}

function Hero({ t, go, nav }) {
  const headline = (
    <h1 className="disp" style={{ fontSize: "clamp(42px, 6.4vw, 82px)", letterSpacing: "-1px", lineHeight: 1.04 }}>
      Most people never see<br />the work that <span className="mark">stops the harm.</span>
    </h1>
  );
  const lede = (
    <p style={{ fontSize: 21, maxWidth: 560, marginTop: 18 }}>
      Behind every laundered dollar is someone who followed the thread. AML/CFT is how Aotearoa keeps dirty
      money out — and there's a place in it for the way <em>you</em> think.
    </p>
  );
  const primaryLabel = nav === "quizfirst" ? "Find where you fit  →" : (nav === "linear" ? "Start the journey  →" : "Take the quiz  →");
  const primaryGo = nav === "linear" ? "whatis" : "quiz";
  const ctas = (
    <div className="row wrapw" style={{ gap: 14, marginTop: 28 }}>
      <button className="wbtn accent big" onClick={() => go(primaryGo)}>{primaryLabel}</button>
      <button className="wbtn big" onClick={() => go("whatis")}>Explore the work</button>
    </div>
  );

  let body;
  if (t.hero === "split") {
    body = (
      <div className="row wrapw" style={{ gap: 36, alignItems: "center" }}>
        <div style={{ flex: "1 1 440px" }}>
          <div className="kicker" style={{ marginBottom: 14 }}>A cross-agency career portal · DIA · MoJ · Police</div>
          {headline}{lede}{ctas}
        </div>
        <div style={{ flex: "1 1 380px", position: "relative" }}>
          <Ph label="Hero video" play style={{ aspectRatio: "4/3", minWidth: 320 }} />
          <Anno flip style={{ position: "absolute", top: -22, right: 6 }}>2–3 min animated explainer ↘</Anno>
        </div>
      </div>
    );
  } else if (t.hero === "fullbleed") {
    body = (
      <div>
        <div style={{ position: "relative" }}>
          <Ph label="Full-bleed hero video" play style={{ height: "min(58vh, 460px)" }} />
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center", padding: 24 }}>
            <div style={{ background: "color-mix(in srgb, var(--paper) 78%, transparent)", padding: "22px 26px", borderRadius: 18, maxWidth: 760 }}>
              <div className="kicker" style={{ marginBottom: 10 }}>DIA · MoJ · Police — one system</div>
              {headline}
            </div>
          </div>
        </div>
        <div className="row wrapw center between" style={{ marginTop: 22, gap: 18 }}>
          {lede}{ctas}
        </div>
      </div>
    );
  } else { // centered
    body = (
      <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "stretch" }}>
        <div className="kicker" style={{ marginBottom: 16 }}>A cross-agency career portal · DIA · MoJ · Police</div>
        <div style={{ width: "100%", maxWidth: 820, margin: "0 auto" }}>{headline}</div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 8 }}>{lede}</div>
        <div style={{ display: "flex", justifyContent: "center" }}>{ctas}</div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Ph label="Hero video" play style={{ width: "100%", maxWidth: 820, aspectRatio: "16/8", marginTop: 34 }} />
        </div>
      </div>
    );
  }
  return body;
}

function ScreenHome({ t, go, nav }) {
  return (
    <div className="screen-enter">
      <section style={{ padding: "40px 0 18px" }}>
        <Hero t={t} go={go} nav={nav} />
      </section>

      {/* stats */}
      <section style={{ padding: "26px 0" }}>
        <div className="row wrapw" style={{ gap: 16 }}>
          {window.STATS.map((s, i) => <Stat key={i} {...s} />)}
        </div>
      </section>

      {/* nav-model dependent block */}
      {nav === "hub" ? (
        <section style={{ padding: "20px 0 40px" }}>
          <SectionHead kicker="Where to start" title="Five steps, your order"
            anno="pick any door ↘" lede="This isn't a brochure. Wander the system, or let the quiz point you." />
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
            {PILLAR_LIST.map((p) => (
              <button key={p.key} className="wbox dbl" onClick={() => go(p.key)}
                style={{ padding: "22px 20px", textAlign: "left", cursor: "pointer", minHeight: 150, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div className="disp" style={{ fontSize: 38, color: "var(--ink-3)" }}>{p.n}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 21 }}>{p.label}</div>
                  <p className="muted" style={{ fontSize: 15, marginTop: 4 }}>{p.sub}</p>
                </div>
              </button>
            ))}
          </div>
        </section>
      ) : (
        <section style={{ padding: "20px 0 40px" }}>
          <div style={{ marginBottom: 20 }}>
            <h3 className="disp" style={{ fontSize: 32 }}>The journey</h3>
            {nav === "linear" && <Anno style={{ marginTop: 4 }}>follow it top-to-bottom, or jump around →</Anno>}
          </div>
          <JourneyPath go={go} current="home" />
        </section>
      )}
    </div>
  );
}

/* ---------------- What is AML/CFT ---------------- */
function JargonCard({ item }) {
  const [on, setOn] = React.useState(false);
  return (
    <button onClick={() => setOn(v => !v)}
      className="wbox jcard"
      style={{ height: 124, width: "100%", textAlign: "left", padding: "16px 18px", cursor: "pointer",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        background: on ? "var(--accent-soft)" : "var(--paper-2)" }}>
      <span className="kicker">{on ? "in plain english" : "jargon"}</span>
      <strong key={on ? "p" : "t"} className="jflip" style={{ fontSize: 18, lineHeight: 1.18 }}>
        {on ? item.plain : item.term}
      </strong>
      <span className="muted" style={{ fontSize: 13 }}>{on ? "tap to flip back ↺" : "tap to translate ↻"}</span>
    </button>
  );
}

function ScreenWhatIs({ go }) {
  return (
    <div className="screen-enter">
      <SectionHead kicker="01 · What is AML/CFT"
        title="Stopping harm. Not meeting requirements."
        anno="the whole narrative ↘"
        lede="Anti-money laundering work isn't about ticking boxes. It's about stopping the money that funds drugs, exploitation and terror from moving through everyday business." />

      {/* three-beat narrative */}
      <div className="row wrapw" style={{ gap: 16, marginBottom: 46 }}>
        {[
          { h: "What it is", p: "Spotting and stopping dirty money before it disappears into the real economy." },
          { h: "Why it matters", p: "That money is the proceeds of real harm — and following it is how we undo it." },
          { h: "Why consider it", p: "It rewards curious, sharp people from all kinds of backgrounds. Maybe yours." },
        ].map((b, i) => (
          <div key={i} className="wbox" style={{ flex: "1 1 240px", padding: "20px 22px" }}>
            <div className="disp" style={{ fontSize: 30, color: "var(--ink-3)" }}>{String(i + 1).padStart(2, "0")}</div>
            <h3 style={{ fontSize: 22, marginTop: 4 }}>{b.h}</h3>
            <p style={{ fontSize: 16, marginTop: 8 }}>{b.p}</p>
          </div>
        ))}
      </div>

      {/* explainer cut-downs */}
      <div className="row between center wrapw" style={{ marginBottom: 16, gap: 10 }}>
        <h3 className="disp" style={{ fontSize: 32, flex: "1 1 280px" }}>See how it actually works</h3>
        <Anno flip>short animated explainers</Anno>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", marginBottom: 48 }}>
        {window.EXPLAINERS.map((e) => (
          <div key={e.n} className="wbox" style={{ padding: 14 }}>
            <Ph label={"Explainer · " + e.len} play style={{ aspectRatio: "16/9", marginBottom: 12 }} />
            <div className="row center" style={{ gap: 10 }}>
              <span className="disp" style={{ fontSize: 26, color: "var(--ink-3)" }}>{e.n}</span>
              <strong style={{ fontSize: 17, lineHeight: 1.15 }}>{e.title}</strong>
            </div>
          </div>
        ))}
      </div>

      {/* jargon flip */}
      <div style={{ marginBottom: 16 }}>
        <h3 className="disp" style={{ fontSize: 32 }}>Speak human, not compliance</h3>
        <p className="muted" style={{ fontSize: 16, marginTop: 6 }}>Every bit of jargon hides a plain idea. Flip a card.</p>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
        {window.JARGON.map((j, i) => <JargonCard key={i} item={j} />)}
      </div>

      <div className="row" style={{ marginTop: 44, justifyContent: "flex-end" }}>
        <button className="wbtn accent" onClick={() => go("system")}>Next: how the system works  →</button>
      </div>
    </div>
  );
}

Object.assign(window, { PILLAR_LIST, JourneyPath, ScreenHome, ScreenWhatIs });