const { useState, useEffect } = React;
const NS = window.MarieZammutoDesignSystem_95ae33 || {};
const { FloatingNav, StickyCtaBar, BookingModal } = NS;

const TEMPLATE_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mobile": false
}/*EDITMODE-END*/;

function TemplateApp() {
  const [t, setTweak] = useTweaks(TEMPLATE_DEFAULTS);
  const [modal, setModal] = useState("closed");
  const open = () => setModal("open");
  const fermer = () => setModal("closing");

  useEffect(() => {
    if (modal !== "closing") return;
    const ms = parseFloat(getComputedStyle(document.documentElement)
      .getPropertyValue("--dur-fast")) || 140;
    const id = setTimeout(() => setModal("closed"), ms);
    return () => clearTimeout(id);
  }, [modal]);

  return (
    <>
      <div className={t.mobile ? "mz-frame mobile" : "mz-frame"}>
        {!t.mobile && (
          <div style={{ position: "fixed", top: 16, left: 0, right: 0, zIndex: 50, display: "flex", justifyContent: "center", pointerEvents: "none" }}>
            <div style={{ pointerEvents: "auto" }}>
              <FloatingNav links={NAV_LINKS} onCta={open} />
            </div>
          </div>
        )}

        <Template onBook={open} />

        <StickyCtaBar note="Appel découverte gratuit · 15 min" onClick={open} demo={t.mobile}
          style={{
            borderTopLeftRadius: "var(--radius-lg)", borderTopRightRadius: "var(--radius-lg)",
            ...(t.mobile ? { position: "sticky", bottom: 0 } : null)
          }} />
      </div>

      <div className={"mz-modal" + (modal === "open" ? " is-open" : modal === "closing" ? " is-closing" : "")}>
        <BookingModal open={modal !== "closed"} onClose={fermer}
          subtitle="Choisissez ce qui vous intéresse : on démarre toujours par un appel découverte gratuit de 30 minutes, sans engagement."
          services={[
            { title: "Appel découverte gratuit", age: "15 min", color: "soleil", href: CAL },
            { title: "Bilan personnalisé", age: "1 h 30", color: "bleu", href: CAL },
            { title: "Suivi régulier", age: "45 min", color: "rose", href: CAL },
            { title: "Guidance parentale", age: "30 min", color: "sauge", href: CAL }
          ]} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aperçu" />
        <TweakToggle label="Vue mobile (430 px)" value={t.mobile} onChange={(v) => setTweak("mobile", v)} />
        <span className="xs" style={{ opacity: .7, marginTop: -4 }}>
          Le site se réorganise selon la largeur du cadre, pas de la fenêtre.
        </span>
      </TweaksPanel>
    </>
  );
}

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