/* ============================================================
   app.jsx — shell: header + co-brand strip,
   screen router, nav-model variants, Tweaks wiring, mount.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "nav": "linear",
  "hero": "fullbleed",
  "mapLayout": "flow",
  "quizResult": "bars",
  "accent": "#74aef0",
  "sketch": "rough"
}/*EDITMODE-END*/;

const NAV_ITEMS = [
  { key: "home",   label: "Home" },
  { key: "whatis", label: "What is it" },
  { key: "system", label: "The system" },
  { key: "work",   label: "The work" },
  { key: "quiz",   label: "Quiz" },
  { key: "next",   label: "Roles" },
];

function Wordmark({ go }) {
  return (
    <button onClick={() => go("home")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left", display: "flex", alignItems: "center", gap: 10 }}>
      <span className="wbox" style={{ width: 34, height: 34, display: "grid", placeItems: "center", background: "var(--accent)", borderRadius: "60% 40% 55% 45% / 50% 55% 45% 50%", flexShrink: 0 }}>
        <span className="disp" style={{ fontSize: 24, color: "var(--accent-ink)", lineHeight: 1 }}>$</span>
      </span>
      <span style={{ lineHeight: 1.05 }}>
        <span className="disp" style={{ fontSize: 25, display: "block" }}>fincrime careers</span>
        <span className="muted" style={{ fontSize: 10.5, letterSpacing: 1, textTransform: "uppercase", whiteSpace: "nowrap" }}>AML/CFT Careers NZ · working title</span>
      </span>
    </button>
  );
}

function CoBrandStrip() {
  return (
    <div className="row center" style={{ gap: 8, whiteSpace: "nowrap" }}>
      <span className="muted" style={{ fontSize: 12 }}>shared by</span>
      <div className="row center" style={{ gap: 7 }}>
        {["DIA", "MoJ", "Police"].map((x, i) => (
          <React.Fragment key={x}>
            {i > 0 && <span className="muted" style={{ fontSize: 13 }}>·</span>}
            <span style={{ fontWeight: 700, fontSize: 13 }}>{x}</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Stepper({ screen, go }) {
  const steps = window.PILLAR_LIST;
  const idx = steps.findIndex(s => s.key === screen);
  if (idx < 0) return null;
  return (
    <div style={{ borderBottom: "2px dashed var(--line)", background: "var(--paper)" }}>
      <div className="wrap row wrapw center" style={{ gap: 8, padding: "10px 28px" }}>
        {steps.map((s, i) => (
          <React.Fragment key={s.key}>
            {i > 0 && <span className="muted" style={{ fontSize: 14 }}>—</span>}
            <button onClick={() => go(s.key)} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px 4px", display: "flex", alignItems: "center", gap: 6, opacity: i === idx ? 1 : 0.55 }}>
              <span className="disp" style={{ fontSize: 18, color: i === idx ? "var(--accent)" : "var(--ink-3)" }}>{s.n}</span>
              <span style={{ fontWeight: 700, fontSize: 14 }}>{s.label}</span>
            </button>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState("home");

  const go = React.useCallback((key) => {
    setScreen(key);
    window.scrollTo({ top: 0, behavior: "auto" });
  }, []);

  // apply accent + sketch class to root
  const rootStyle = { "--accent": t.accent };

  let body;
  if (screen === "home")        body = <ScreenHome t={t} go={go} nav={t.nav} />;
  else if (screen === "whatis") body = <ScreenWhatIs go={go} />;
  else if (screen === "system") body = <ScreenSystem t={t} go={go} />;
  else if (screen === "work")   body = <ScreenWork go={go} />;
  else if (screen === "quiz")   body = <ScreenQuiz t={t} go={go} />;
  else if (screen === "next")   body = <ScreenNext go={go} />;

  return (
    <div className={"wf-root sketch-" + t.sketch} style={rootStyle}>
      {/* site header */}
      <header style={{ position: "sticky", top: 0, zIndex: 40, background: "var(--paper)", borderBottom: "2.5px solid var(--line)" }}>
        <div className="wrap row between center wrapw" style={{ padding: "12px 28px", gap: 14 }}>
          <Wordmark go={go} />
          <nav className="row wrapw center" style={{ gap: 4 }}>
            {NAV_ITEMS.map(n => (
              <button key={n.key} onClick={() => go(n.key)}
                style={{ background: screen === n.key ? "var(--accent-soft)" : "none", border: "none", cursor: "pointer", padding: "7px 11px", borderRadius: 999, fontFamily: "var(--font-hand)", fontWeight: 700, fontSize: 15, color: "var(--ink)" }}>
                {n.label}
              </button>
            ))}
          </nav>
          <CoBrandStrip />
        </div>
      </header>

      {t.nav === "linear" && <Stepper screen={screen} go={go} />}

      <main className="wrap" style={{ padding: "12px 28px 80px" }} key={screen}>
        {body}
      </main>

      {/* footer co-brand — equal weight */}
      <footer style={{ borderTop: "2.5px solid var(--line)", background: "var(--paper)" }}>
        <div className="wrap col" style={{ padding: "26px 28px", gap: 14, alignItems: "center", textAlign: "center" }}>
          <div className="row wrapw center" style={{ gap: 22 }}>
            {[["DIA", "Department of Internal Affairs"], ["MoJ", "Ministry of Justice"], ["Police", "NZ Police / FIU"]].map(([s, full]) => (
              <div key={s} className="wbox" style={{ padding: "10px 18px", textAlign: "center" }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{s}</div>
                <div className="muted" style={{ fontSize: 12 }}>{full}</div>
              </div>
            ))}
          </div>
          <p className="muted" style={{ fontSize: 13, maxWidth: 540 }}>A neutral, cross-agency career portal — equal weight, one voice. Not the recruitment channel of any single agency.</p>
        </div>
      </footer>

      {/* Tweaks */}
      <TweaksPanel>
        <TweakSection label="Navigation model" />
        <TweakRadio label="How users move" value={t.nav}
          options={[{ value: "linear", label: "Linear" }, { value: "hub", label: "Hub" }, { value: "quizfirst", label: "Quiz-first" }]}
          onChange={(v) => setTweak("nav", v)} />

        <TweakSection label="Hero / hook" />
        <TweakRadio label="Layout" value={t.hero}
          options={[{ value: "split", label: "Split" }, { value: "centered", label: "Centered" }, { value: "fullbleed", label: "Full-bleed" }]}
          onChange={(v) => setTweak("hero", v)} />

        <TweakSection label="System map" />
        <TweakRadio label="Arrangement" value={t.mapLayout}
          options={[{ value: "flow", label: "Flow" }, { value: "orbit", label: "Orbit" }, { value: "grid", label: "Grid" }]}
          onChange={(v) => setTweak("mapLayout", v)} />

        <TweakSection label="Quiz results" />
        <TweakRadio label="Presentation" value={t.quizResult}
          options={[{ value: "bars", label: "Bars" }, { value: "map", label: "Map" }, { value: "cards", label: "Cards" }]}
          onChange={(v) => setTweak("quizResult", v)} />

        <TweakSection label="Sketch & color" />
        <TweakRadio label="Line style" value={t.sketch}
          options={[{ value: "rough", label: "Rough" }, { value: "clean", label: "Clean" }]}
          onChange={(v) => setTweak("sketch", v)} />
        <TweakColor label="Accent" value={t.accent}
          options={["#ff7b5a", "#ffd23f", "#57c99a", "#74aef0"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);