// App shell: routing between Home and Program, join modal, and live Tweaks.
(function () {
  const { NavBar, Footer, Home, Program, Icon, PROGRAMS } = window.PROTO;
  const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakColor, TweakRadio, TweakToggle } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "brandName": "AP-FIT",
    "accent": "#E8590C",
    "bg": "Inktzwart",
    "corners": "Zacht",
    "capsHeads": true,
    "imgStyle": "Duotone",
    "grain": true
  }/*EDITMODE-END*/;

  const BG_MAP = {
    "Inktzwart": { bg: "#0E0F12", bg2: "#16181D", panel: "#1B1E25", line: "#262932" },
    "Antraciet": { bg: "#191C22", bg2: "#20242C", panel: "#272C35", line: "#323843" },
    "Puur zwart": { bg: "#000000", bg2: "#0C0D10", panel: "#141518", line: "#222428" },
  };

  function JoinModal({ open, onClose }) {
    const [done, setDone] = React.useState(false);
    const [tak, setTak] = React.useState("");
    React.useEffect(() => { if (open) { setDone(false); setTak(""); } }, [open]);
    if (!open) return null;
    return (
      <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,.62)",
        backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20, animation: "fade .25s ease both" }}>
        <div onClick={(e) => e.stopPropagation()} style={{ width: "min(520px,100%)", background: "var(--bg2)",
          border: "1px solid var(--line)", borderRadius: "calc(var(--radius)*3)", padding: 36, borderTop: "3px solid var(--accent)" }}>
          {done ? (
            <div style={{ textAlign: "center", padding: "16px 0" }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--accent)", color: "#fff",
                display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px" }}><Icon name="check" size={32} /></div>
              <h3 className="anton" style={{ fontSize: 30, margin: "0 0 10px" }}>Tot snel!</h3>
              <p style={{ color: "var(--mut)", margin: "0 0 26px" }}>We nemen contact op om je gratis proefles in te plannen.</p>
              <button className="btn btn-pri" onClick={onClose}>Sluiten</button>
            </div>
          ) : (
            <React.Fragment>
              <span className="eyebrow">// Gratis proefles</span>
              <h3 className="anton" style={{ fontSize: 34, margin: "12px 0 6px", textTransform: "uppercase" }}>Doe een keer mee</h3>
              <p style={{ color: "var(--mut)", margin: "0 0 24px", fontSize: 15 }}>Eerste les gratis, geen verplichtingen. Laat je gegevens achter.</p>
              <div style={{ display: "grid", gap: 12 }}>
                <input placeholder="Je naam" style={inp} />
                <input placeholder="E-mailadres" style={inp} />
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {PROGRAMS.map((p) => (
                    <button key={p.key} onClick={() => setTak(p.key)} style={{ ...chip, borderColor: tak === p.key ? p.accent : "var(--line)",
                      background: tak === p.key ? p.accent : "transparent", color: tak === p.key ? "#fff" : "var(--mut)" }}>{p.name}</button>
                  ))}
                </div>
              </div>
              <button className="btn btn-pri btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 22 }} onClick={() => setDone(true)}>
                Verstuur aanvraag <Icon name="arrow" size={17} />
              </button>
            </React.Fragment>
          )}
        </div>
      </div>
    );
  }
  const inp = { background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "var(--radius)",
    padding: "13px 15px", color: "var(--fg)", fontSize: 15, fontFamily: "inherit", outline: "none" };
  const chip = { padding: "9px 13px", borderRadius: "var(--radius)", border: "1px solid var(--line)",
    fontSize: 13, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" };

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const [route, setRoute] = React.useState({ view: "home" });
    const [join, setJoin] = React.useState(false);

    // apply tweaks to :root (accent follows the active programma; house colour on home)
    React.useEffect(() => {
      const r = document.documentElement.style;
      const routeAccent = route.view === "program"
        ? ((window.PROTO.byKey(route.key) || {}).accent || t.accent)
        : t.accent;
      r.setProperty("--accent", routeAccent);
      r.setProperty("--radius", t.corners === "Zacht" ? "14px" : "4px");
      r.setProperty("--head-tt", t.capsHeads ? "uppercase" : "none");
      const bg = BG_MAP[t.bg] || BG_MAP["Inktzwart"];
      r.setProperty("--bg", bg.bg); r.setProperty("--bg2", bg.bg2);
      r.setProperty("--panel", bg.panel); r.setProperty("--line", bg.line);
      const ip = t.imgStyle === "Volle kleur" ? { g: 0, t: 0 } : t.imgStyle === "Subtiel" ? { g: .55, t: .28 } : { g: 1, t: .62 };
      r.setProperty("--img-gray", ip.g); r.setProperty("--img-tint", ip.t);
      r.setProperty("--img-grain", t.grain ? .16 : 0);
    }, [t, route]);

    const go = React.useCallback((next) => {
      setRoute(next);
      requestAnimationFrame(() => {
        if (next.anchor) {
          const el = document.getElementById(next.anchor);
          if (el) { const y = window.scrollY + el.getBoundingClientRect().top - 74; window.scrollTo({ top: y, behavior: "smooth" }); return; }
        }
        window.scrollTo({ top: 0, behavior: route.view === next.view ? "smooth" : "auto" });
      });
    }, [route.view]);

    return (
      <React.Fragment>
        <NavBar brand={t.brandName} go={go} onJoin={() => setJoin(true)} />
        {route.view === "home"
          ? <Home go={go} onJoin={() => setJoin(true)} />
          : <Program pkey={route.key} go={go} onJoin={() => setJoin(true)} />}
        <Footer brand={t.brandName} go={go} />
        <JoinModal open={join} onClose={() => setJoin(false)} />

        <TweaksPanel>
          <TweakSection label="Merk" />
          <TweakSelect label="Werknaam" value={t.brandName}
            options={["AP-FIT", "VEERKRACHT", "KERN", "BEWEEG", "VORM", "TEMPO"]}
            onChange={(v) => setTweak("brandName", v)} />
          <TweakSection label="Sfeer" />
          <TweakColor label="Huiskleur (accent)" value={t.accent}
            options={["#E8590C", "#1C7ED6", "#E03131", "#5F3DC4", "#82C91E"]}
            onChange={(v) => setTweak("accent", v)} />
          <TweakRadio label="Achtergrond" value={t.bg}
            options={["Inktzwart", "Antraciet", "Puur zwart"]}
            onChange={(v) => setTweak("bg", v)} />
          <TweakRadio label="Hoeken" value={t.corners}
            options={["Scherp", "Zacht"]}
            onChange={(v) => setTweak("corners", v)} />
          <TweakToggle label="Koppen in hoofdletters" value={t.capsHeads}
            onChange={(v) => setTweak("capsHeads", v)} />
          <TweakSection label="Beeld" />
          <TweakRadio label="Beeldstijl" value={t.imgStyle}
            options={["Duotone", "Subtiel", "Volle kleur"]}
            onChange={(v) => setTweak("imgStyle", v)} />
          <TweakToggle label="Grain / textuur" value={t.grain}
            onChange={(v) => setTweak("grain", v)} />
        </TweaksPanel>
      </React.Fragment>
    );
  }
  window.PROTO.App = App;
})();