/* =====================================================================
   app2.jsx — v2 router + brand skins + variation tweaks + mount
   ===================================================================== */

const BRANDS2 = {
  ffb:      { id: "ffb",      menu: "Business",   accent: "#6e8e77", dark: "#1e3735", swatch: "linear-gradient(135deg,#1e3735 0%,#2c4a45 55%,#6e8e77 100%)" },
  gunmetal: { id: "gunmetal", menu: "Gunmetal",   accent: "#84949e", dark: "#2c343a", swatch: "linear-gradient(135deg,#0d0e10 0%,#3e4951 60%,#84949e 100%)" },
  clay:     { id: "clay",     menu: "Clay",       accent: "#bd7149", dark: "#41302a", swatch: "linear-gradient(135deg,#281d19 0%,#5a4339 55%,#bd7149 100%)" },
  ffm:      { id: "ffm",      menu: "Mastermind", accent: "#c9a46c", dark: "#161616", swatch: "linear-gradient(135deg,#161616 0%,#3a2f1d 55%,#c9a46c 100%)" },
};
const BRAND_ORDER2 = ["ffb", "gunmetal", "clay", "ffm"];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "ffb",
  "respondentName": "Leah",
  "resultsLayout": "guided",
  "landingStyle": "framework",
  "transitionTreatment": "editorial",
  "heroStyle": "text",
  "topThreeStyle": "stacked",
  "freshStyle": "card",
  "pathwayVisual": "layered",
  "bridgeStyle": "soft",
  "showPrototypeMap": true
}/*EDITMODE-END*/;

function PrototypeNav2({ screen, go }) {
  const [open, setOpen] = useState(false);
  const items = [
    { group: "Audit flow" },
    { s: "landing", n: "1", label: "Landing" },
    { s: "profile", n: "2", label: "Profile capture" },
    { s: "question", n: "3", label: "Questions + transitions" },
    { s: "mapping", n: "4", label: "Mapping state" },
    { s: "results", n: "5", label: "Results page" },
    { s: "bridge", n: "6", label: "FFB bridge" },
  ];
  return (
    <div className="pnav">
      {open && (
        <div className="pnav__panel">
          {items.map((it, i) => it.group
            ? <div className="pnav__group" key={i}>{it.group}</div>
            : <button key={i} className="pnav__item" aria-current={screen === it.s} onClick={() => { go(it.s); setOpen(false); }}><span className="n">{it.n}</span>{it.label}</button>)}
        </div>
      )}
      <button className="pnav__toggle" onClick={() => setOpen(o => !o)}><Brandmark height={15} />Prototype map</button>
    </div>
  );
}

function App2() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState("landing");
  const [profile, setProfile] = useState({ firstName: "", lastName: "", email: "", businessStage: "", consent: false });
  const [answers, setAnswers] = useState({});

  const brand = BRANDS2[t.brand] || BRANDS2.ffb;
  window.__ffp2Theme = brand;
  if (typeof document !== "undefined") document.documentElement.setAttribute("data-theme", brand.id);

  const name = (profile.firstName || t.respondentName || "").trim();

  const go = (s) => { setScreen(s); window.scrollTo(0, 0); };
  useEffect(() => { window.__ffp2Go = go; }, []);

  let view;
  switch (screen) {
    case "landing":  view = <Landing2 go={go} landingStyle={t.landingStyle} />; break;
    case "profile":  view = <Profile2 go={go} profile={profile} setProfile={setProfile} />; break;
    case "question": view = <QuestionFlow2 go={go} answers={answers} setAnswers={setAnswers} transitionTreatment={t.transitionTreatment} name={name} />; break;
    case "mapping":  view = <Mapping2 go={go} name={name} />; break;
    case "results":  view = t.resultsLayout === "detailed"
      ? <Results2 go={go} tweaks={t} setTweak={setTweak} name={name} />
      : <Results2Guided go={go} tweaks={t} name={name} />; break;
    case "bridge":   view = <BridgePage go={go} name={name} />; break;
    default:         view = <Landing2 go={go} landingStyle={t.landingStyle} />;
  }

  const radio = (label, key, opts) => (
    <TweakRadio label={label} value={t[key]} options={opts} onChange={(v) => setTweak(key, v)} />
  );

  return (
    <React.Fragment>
      <div key={brand.id}>{view}</div>
      {t.showPrototypeMap && <PrototypeNav2 screen={screen} go={go} />}

      <TweaksPanel>
        <TweakSection label="Branding" />
        <TweakRow label="Brand skin" value={brand.menu}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7, width: "100%" }}>
            {BRAND_ORDER2.map((id) => {
              const b = BRANDS2[id], on = t.brand === id;
              return (
                <button key={id} onClick={() => setTweak("brand", id)} style={{ textAlign: "left", cursor: "pointer", padding: 6, borderRadius: 8, border: on ? ("1.5px solid " + b.accent) : "1px solid rgba(125,125,125,0.28)", background: on ? "rgba(125,125,125,0.10)" : "transparent" }}>
                  <span style={{ display: "block", height: 22, borderRadius: 5, background: b.swatch }}></span>
                  <span style={{ display: "block", fontSize: 11.5, marginTop: 6, fontWeight: on ? 600 : 500 }}>{b.menu}</span>
                </button>
              );
            })}
          </div>
        </TweakRow>

        <TweakSection label="Personalisation" />
        <TweakText label="First name" value={t.respondentName} onChange={(v) => setTweak("respondentName", v)} placeholder="(none = fallback copy)" />

        <TweakSection label="Transitions" />
        {radio("Treatment", "transitionTreatment", [{ value: "editorial", label: "Editorial" }, { value: "texture", label: "Texture" }, { value: "minimal", label: "Minimal" }])}

        <TweakSection label="Landing" />
        {radio("Style", "landingStyle", [{ value: "framework", label: "Framework" }, { value: "minimal", label: "Minimal" }])}

        <TweakSection label="Results page" />
        {radio("Layout", "resultsLayout", [{ value: "guided", label: "Guided" }, { value: "detailed", label: "Detailed" }])}
        {radio("Result hero", "heroStyle", [{ value: "text", label: "Text-first" }, { value: "visual", label: "Visual" }])}
        {radio("Top three", "topThreeStyle", [{ value: "stacked", label: "Stacked" }, { value: "ranked", label: "Ranked" }])}
        {radio("F.R.E.S.H signal", "freshStyle", [{ value: "card", label: "Layer card" }, { value: "strip", label: "Strip" }])}
        {radio("Pathway visual", "pathwayVisual", [{ value: "layered", label: "Layered" }, { value: "circular", label: "Circular" }, { value: "strip", label: "Strip" }])}
        {radio("FFB bridge", "bridgeStyle", [{ value: "soft", label: "Soft" }, { value: "hard", label: "Conversion" }])}

        <TweakSection label="Review" />
        <TweakToggle label="Prototype map" value={t.showPrototypeMap} onChange={(v) => setTweak("showPrototypeMap", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App2 />);