// app.jsx — globals, mounts app
const { useState: useState_, useEffect: useEffect_ } = React;

function TweaksPanel({ visible, tweaks, setTweaks }) {
  if (!visible) return null;
  const set = (k, v) => {
    setTweaks({ ...tweaks, [k]: v });
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  return (
    <div className="tweaks-panel visible">
      <div className="tweaks-title"><span>Tweaks</span></div>

      <div className="tweak-row">
        <label>Accent color</label>
        <div className="tweak-seg">
          <button className={tweaks.accent === "sky" ? "active" : ""}  onClick={() => set("accent", "sky")}>Sky blue</button>
          <button className={tweaks.accent === "gold" ? "active" : ""} onClick={() => set("accent", "gold")}>Gold</button>
        </div>
      </div>

      <div className="tweak-row">
        <label>Type pairing</label>
        <div className="tweak-seg">
          <button className={tweaks.type === "sans"  ? "active" : ""} onClick={() => set("type", "sans")}>All sans</button>
          <button className={tweaks.type === "serif" ? "active" : ""} onClick={() => set("type", "serif")}>Serif titles</button>
        </div>
      </div>

      <div className="tweak-row">
        <label>Hero visual</label>
        <div className="tweak-seg">
          <button className={tweaks.heroVariant === "schools" ? "active" : ""} onClick={() => set("heroVariant", "schools")}>Schools</button>
          <button className={tweaks.heroVariant === "type"    ? "active" : ""} onClick={() => set("heroVariant", "type")}>Type</button>
          <button className={tweaks.heroVariant === "geo"     ? "active" : ""} onClick={() => set("heroVariant", "geo")}>Graph</button>
        </div>
      </div>

      <div className="tweak-row">
        <label>Hero headline</label>
        <textarea className="tweak-input" value={tweaks.heroHeadline} onChange={(e) => set("heroHeadline", e.target.value)} rows={3} />
      </div>

      <div className="tweak-row">
        <label>Prices (€/h)</label>
        <div className="tweak-prices">
          <input type="number" value={tweaks.priceCollege} onChange={(e) => set("priceCollege", Number(e.target.value))} />
          <input type="number" value={tweaks.priceLycee}   onChange={(e) => set("priceLycee",   Number(e.target.value))} />
          <input type="number" value={tweaks.priceSup}     onChange={(e) => set("priceSup",     Number(e.target.value))} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, marginTop: 4, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)", textAlign: "center" }}>
          <span>Collège</span><span>Lycée</span><span>Sup.</span>
        </div>
      </div>
    </div>
  );
}

function App() {
  // Routes dédiées (zéro nav du site public)
  const path = typeof window !== "undefined" ? window.location.pathname : "";
  if (path === "/rentree") return <RentreeLanding />;
  if (path === "/bac" || path === "/bac-maths") return <BacMathsLanding />;
  if (path === "/bac/merci" || path === "/bac-maths/merci") return <BacMathsThankYou />;
  if (path === "/replays/login") return <RpLogin />;
  if (path === "/replays") return <RpReplays />;

  const [page, setPage] = useState_(() => {
    try { return localStorage.getItem("ce_page") || "home"; } catch { return "home"; }
  });
  const [modalOpen, setModalOpen] = useState_(false);
  const [modalPrefill, setModalPrefill] = useState_(null);
  const [tweaks, setTweaks] = useState_(DEFAULT_TWEAKS);
  const [editMode, setEditMode] = useState_(false);

  useEffect_(() => { try { localStorage.setItem("ce_page", page); } catch {} }, [page]);

  useEffect_(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode")   setEditMode(true);
      if (d.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  useEffect_(() => {
    document.body.style.overflow = modalOpen ? "hidden" : "";
  }, [modalOpen]);

  useEffect_(() => {
    document.documentElement.setAttribute("data-accent", tweaks.accent);
    document.documentElement.setAttribute("data-type",   tweaks.type);
  }, [tweaks.accent, tweaks.type]);

  const openModal = (prefill) => {
    setModalPrefill(prefill && typeof prefill === "object" ? prefill : null);
    setModalOpen(true);
  };

  return (
    <React.Fragment>
      <Header page={page} setPage={setPage} openModal={openModal} />
      <main>
        <div className={`page ${page === "home"   ? "active" : ""}`} data-screen-label="Accueil">
          {page === "home"   && <HomePageV2 tweaks={tweaks} openModal={openModal} />}
        </div>
        <div className={`page ${page === "tarifs" ? "active" : ""}`} data-screen-label="Tarifs">
          {page === "tarifs" && <TarifsPage tweaks={tweaks} openModal={openModal} />}
        </div>
        <div className={`page ${page === "profs"  ? "active" : ""}`} data-screen-label="Nos professeurs">
          {page === "profs"  && <ProfsPage  openModal={openModal} />}
        </div>
      </main>
      <Footer setPage={setPage} openModal={openModal} />
      <StickyCTA openModal={openModal} />
      <Modal open={modalOpen} prefill={modalPrefill} onClose={() => setModalOpen(false)} />
      <TweaksPanel visible={editMode} tweaks={tweaks} setTweaks={setTweaks} />
    </React.Fragment>
  );
}

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