/* ============================================================
   screens-system.jsx — How the system works (map: orbit/flow/grid)
   + The work (day in the life)
   ============================================================ */

function AgencyNode({ k, active, onClick, style }) {
  const a = window.AGENCIES[k];
  return (
    <button onClick={() => onClick({ type: "agency", key: k })}
      className={"wbox dbl " + a.cls}
      style={{ padding: "16px 18px", textAlign: "left", cursor: "pointer", width: "100%",
        background: active ? "color-mix(in srgb, " + a.color + " 24%, var(--paper-2))" : "var(--paper-2)",
        borderColor: a.color, borderWidth: active ? 3.5 : 2.5, ...style }}>
      <div className="row center between">
        <strong style={{ fontSize: 19 }}>{a.short}</strong>
        <span className="pill" style={{ borderColor: a.color, fontSize: 12, padding: "3px 9px" }}>{a.role}</span>
      </div>
      <p style={{ fontSize: 14, marginTop: 8 }}>{a.verb}.</p>
    </button>
  );
}

function SectorChip({ s, active, onClick }) {
  return (
    <button onClick={() => onClick({ type: "sector", key: s.name })}
      className="pill" style={{ cursor: "pointer", fontSize: 15, padding: "7px 14px",
        background: active ? "var(--accent-soft)" : "var(--paper-2)",
        borderColor: active ? "color-mix(in srgb, var(--accent) 60%, var(--line))" : "var(--line)" }}>
      {s.name}
    </button>
  );
}

function SystemDetail({ sel }) {
  let content;
  if (!sel) {
    content = (
      <div>
        <span className="kicker">tap any piece</span>
        <p style={{ fontSize: 18, marginTop: 10 }}>Three agencies, one connected system — not three separate employers. Tap an agency to see its job, or a regulated sector to see how it gets exploited.</p>
      </div>
    );
  } else if (sel.type === "fatf") {
    content = (
      <div>
        <span className="kicker">global standard-setter</span>
        <h3 className="disp" style={{ fontSize: 30, marginTop: 6 }}>FATF</h3>
        <p style={{ fontSize: 17, marginTop: 8 }}>The Financial Action Task Force sets the global rules NZ signs up to. Everything below exists to meet — and enforce — them.</p>
      </div>
    );
  } else if (sel.type === "agency") {
    const a = window.AGENCIES[sel.key];
    content = (
      <div>
        <span className="kicker" style={{ color: a.color }}>{a.role}</span>
        <h3 className="disp" style={{ fontSize: 32, marginTop: 6 }}>{a.name}</h3>
        <p style={{ fontSize: 17, marginTop: 8 }}>{a.blurb}</p>
        <div className="row wrapw" style={{ gap: 8, marginTop: 14 }}>
          {a.skills.map(s => <span key={s} className="pill" style={{ fontSize: 13 }}>{s}</span>)}
        </div>
      </div>
    );
  } else {
    const s = window.SECTORS.find(x => x.name === sel.key);
    content = (
      <div>
        <span className="kicker" style={{ color: "var(--accent)" }}>regulated sector · how it's exploited</span>
        <h3 className="disp" style={{ fontSize: 32, marginTop: 6 }}>{s.name}</h3>
        <p style={{ fontSize: 18, marginTop: 8 }}>{s.how}</p>
        <p className="muted" style={{ fontSize: 14, marginTop: 12 }}>Work in this sector already? You're closer to this career than you think.</p>
      </div>
    );
  }
  return <div className="wbox fill" style={{ padding: "22px 24px", minHeight: 200 }}>{content}</div>;
}

function ScreenSystem({ t, go }) {
  const [sel, setSel] = React.useState(null);
  const layout = t.mapLayout || "flow";
  const isA = (k) => sel && sel.type === "agency" && sel.key === k;

  const fatf = (
    <button onClick={() => setSel({ type: "fatf" })} className="wbox"
      style={{ padding: "10px 18px", cursor: "pointer", background: sel && sel.type === "fatf" ? "var(--accent-soft)" : "var(--paper)", display: "inline-flex", flexDirection: "column", alignItems: "center" }}>
      <span className="kicker">sets global standards</span>
      <strong style={{ fontSize: 20 }}>FATF</strong>
    </button>
  );

  let map;
  if (layout === "grid") {
    map = (
      <div className="col" style={{ gap: 16 }}>
        <div style={{ display: "flex", justifyContent: "center" }}>{fatf}</div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px,1fr))" }}>
          {window.AGENCY_ORDER.map(k => <AgencyNode key={k} k={k} active={isA(k)} onClick={setSel} />)}
        </div>
      </div>
    );
  } else if (layout === "orbit") {
    map = (
      <div style={{ position: "relative", height: 430, maxWidth: 560, margin: "0 auto" }}>
        <svg viewBox="0 0 560 430" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <line x1="280" y1="215" x2="280" y2="80"  stroke="var(--line)" strokeWidth="2.5" strokeDasharray="6 7" />
          <line x1="280" y1="215" x2="110" y2="330" stroke="var(--line)" strokeWidth="2.5" strokeDasharray="6 7" />
          <line x1="280" y1="215" x2="450" y2="330" stroke="var(--line)" strokeWidth="2.5" strokeDasharray="6 7" />
        </svg>
        <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)" }}>
          <div className="wbox fill" style={{ padding: "12px 16px", textAlign: "center", width: 130 }}>
            <span className="kicker">one system</span>
            <div style={{ fontWeight: 700, fontSize: 15, lineHeight: 1.1, marginTop: 2 }}>NZ AML/CFT</div>
          </div>
        </div>
        <div style={{ position: "absolute", left: "50%", top: 0, transform: "translateX(-50%)", width: 180 }}>
          <AgencyNode k="moj" active={isA("moj")} onClick={setSel} />
        </div>
        <div style={{ position: "absolute", left: 0, bottom: 0, width: 180 }}>
          <AgencyNode k="dia" active={isA("dia")} onClick={setSel} />
        </div>
        <div style={{ position: "absolute", right: 0, bottom: 0, width: 180 }}>
          <AgencyNode k="police" active={isA("police")} onClick={setSel} />
        </div>
      </div>
    );
  } else { // flow
    map = (
      <div className="col" style={{ gap: 4, alignItems: "center" }}>
        {fatf}
        <div className="disp" style={{ fontSize: 28, color: "var(--ink-3)" }}>↓</div>
        <div className="row wrapw" style={{ gap: 16, width: "100%", justifyContent: "center" }}>
          {window.AGENCY_ORDER.map(k => (
            <div key={k} style={{ flex: "1 1 180px", maxWidth: 260 }}>
              <AgencyNode k={k} active={isA(k)} onClick={setSel} />
            </div>
          ))}
        </div>
        <div className="disp" style={{ fontSize: 28, color: "var(--ink-3)" }}>↓</div>
        <div className="wbox dash flat" style={{ padding: "14px 18px", width: "100%" }}>
          <div className="kicker" style={{ marginBottom: 10 }}>Regulated sectors — where the money tries to hide</div>
          <div className="row wrapw" style={{ gap: 9 }}>
            {window.SECTORS.map(s => <SectorChip key={s.name} s={s} active={sel && sel.type === "sector" && sel.key === s.name} onClick={setSel} />)}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="screen-enter">
      <SectionHead kicker="02 · How the system works"
        title="One system, not three employers"
        anno="tap to explore ↘"
        lede="A well-designed division of labour — global standards flow down into policy, supervision and enforcement. Different doors into the same mission." />

      <div className="row wrapw" style={{ gap: 28, alignItems: "flex-start" }}>
        <div style={{ flex: "1 1 420px", minWidth: 300 }}>{map}</div>
        <div style={{ flex: "1 1 300px", minWidth: 260, position: "sticky", top: 90 }}>
          <SystemDetail sel={sel} />
        </div>
      </div>

      {/* sectors row for non-flow layouts */}
      {layout !== "flow" && (
        <div className="wbox dash flat" style={{ padding: "14px 18px", marginTop: 28 }}>
          <div className="kicker" style={{ marginBottom: 10 }}>Regulated sectors — where the money tries to hide</div>
          <div className="row wrapw" style={{ gap: 9 }}>
            {window.SECTORS.map(s => <SectorChip key={s.name} s={s} active={sel && sel.type === "sector" && sel.key === s.name} onClick={setSel} />)}
          </div>
        </div>
      )}

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

/* ---------------- The work — day in the life ---------------- */
function ScreenWork({ go }) {
  const [active, setActive] = React.useState("analyst");
  const role = window.ROLES.find(r => r.key === active);
  return (
    <div className="screen-enter">
      <SectionHead kicker="03 · The work"
        title="Not a boring compliance job"
        anno="framed by skills, not titles ↘"
        lede="Forget the org chart. These are the kinds of people who thrive here — and the real days behind the work." />

      {/* role selector */}
      <div className="row wrapw" style={{ gap: 10, marginBottom: 22 }}>
        {window.ROLES.map(r => (
          <button key={r.key} onClick={() => setActive(r.key)}
            className={"wbtn" + (active === r.key ? " accent" : "")} >
            {r.title}
          </button>
        ))}
      </div>

      <div className="row wrapw" style={{ gap: 24, alignItems: "flex-start" }}>
        <div style={{ flex: "1 1 280px", minWidth: 240 }}>
          <Ph label="Photo · real staff member" style={{ aspectRatio: "4/5" }} />
          <div className="row wrapw" style={{ gap: 7, marginTop: 12 }}>
            {role.agencies.map(k => <AgencyPill key={k} k={k}>{window.AGENCIES[k].short}</AgencyPill>)}
            <span className="muted" style={{ fontSize: 14, alignSelf: "center" }}>employ this skillset</span>
          </div>
        </div>

        <div style={{ flex: "1 1 420px", minWidth: 300 }}>
          <span className="kicker">{role.tag}</span>
          <h3 className="disp" style={{ fontSize: 44, marginTop: 4 }}>{role.title}</h3>

          {role.quote && (
            <div className="wbox fill" style={{ padding: "20px 24px", marginTop: 16 }}>
              <div className="disp" style={{ fontSize: 40, lineHeight: .5, color: "var(--accent)" }}>“</div>
              <p style={{ fontSize: 19, fontStyle: "italic", color: "var(--ink)" }}>{role.quote}</p>
            </div>
          )}

          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px,1fr))", marginTop: 20 }}>
            <div className="wbox" style={{ padding: "16px 18px" }}>
              <div className="kicker" style={{ marginBottom: 8 }}>A day in this work</div>
              <p style={{ fontSize: 16 }}>{role.day}</p>
            </div>
            <div className="wbox" style={{ padding: "16px 18px" }}>
              <div className="kicker" style={{ marginBottom: 8 }}>What motivates people here</div>
              <p style={{ fontSize: 16 }}>{role.motivates}</p>
            </div>
            <div className="wbox" style={{ padding: "16px 18px" }}>
              <div className="kicker" style={{ marginBottom: 8 }}>Skills it draws on</div>
              <div className="row wrapw" style={{ gap: 7 }}>{role.skills.map(s => <span key={s} className="pill" style={{ fontSize: 13 }}>{s}</span>)}</div>
            </div>
            <div className="wbox" style={{ padding: "16px 18px" }}>
              <div className="kicker" style={{ marginBottom: 8 }}>Backgrounds that transition well</div>
              <p style={{ fontSize: 16 }}>{role.from}</p>
            </div>
          </div>
        </div>
      </div>

      <div className="row" style={{ marginTop: 44, justifyContent: "flex-end" }}>
        <button className="wbtn accent" onClick={() => go("quiz")}>Next: where do you fit?  →</button>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenSystem, ScreenWork });