/* global React, ReactDOM,
   Header, Hero, TrustStrip, Treatments, TreatmentDrawer,
   Dentists, Reviews, Contact, BookingModal, Footer, Floats,
   TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor, useTweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "teal",
  "density": "comfortable",
  "displayFont": "Cormorant Garamond",
  "showAccent": true,
  "tab": "all"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply palette + density to :root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette === "teal" ? "" : t.palette);
    document.documentElement.setAttribute("data-density", t.density === "comfortable" ? "" : t.density);
    document.documentElement.style.setProperty("--serif", `"${t.displayFont}", "Fraunces", Georgia, serif`);
  }, [t.palette, t.density, t.displayFont]);

  // scroll-spy
  const SECTIONS = ["home", "treatments", "dentists", "reviews", "contact"];
  const [active, setActive] = React.useState("home");
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.35;
      let cur = SECTIONS[0];
      for (const id of SECTIONS) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.offsetTop;
        if (y >= top) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // booking modal
  const [bookOpen, setBookOpen] = React.useState(false);
  const [prefillTx, setPrefillTx] = React.useState(null);
  const openBook = (txId) => { setPrefillTx(txId || null); setBookOpen(true); };
  const closeBook = () => setBookOpen(false);

  // treatment drawer
  const [drawerTx, setDrawerTx] = React.useState(null);
  const openTx = (tx) => setDrawerTx(tx);
  const closeTx = () => setDrawerTx(null);

  return (
    <React.Fragment>
      <Header activeId={active} onNav={onNav} onBook={() => openBook()} />
      <main>
        <Hero onBook={() => openBook()} />
        <TrustStrip />
        <Treatments onOpenTreatment={openTx} onBook={() => openBook()} />
        <Dentists onBook={() => openBook()} />
        <Reviews />
        <Contact onBook={() => openBook()} />
      </main>
      <Footer onBook={() => openBook()} onNav={onNav} />
      <Floats onBook={() => openBook()} />

      <TreatmentDrawer treatment={drawerTx} onClose={closeTx} onBook={(txId) => openBook(txId)} />
      <BookingModal open={bookOpen} onClose={closeBook} prefillTreatment={prefillTx} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio
          label="Primary tone"
          value={t.palette}
          onChange={v => setTweak("palette", v)}
          options={[
            { value: "teal", label: "Teal" },
            { value: "navy", label: "Navy" },
            { value: "heritage", label: "Heritage" }
          ]}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Display serif"
          value={t.displayFont}
          onChange={v => setTweak("displayFont", v)}
          options={[
            { value: "Cormorant Garamond", label: "Cormorant Garamond" },
            { value: "Fraunces", label: "Fraunces" }
          ]}
        />

        <TweakSection label="Layout density" />
        <TweakRadio
          label="Rhythm"
          value={t.density}
          onChange={v => setTweak("density", v)}
          options={[
            { value: "cozy", label: "Cozy" },
            { value: "comfortable", label: "Comfy" },
            { value: "airy", label: "Airy" }
          ]}
        />

        <TweakSection label="Try the prototype" />
        <button className="btn btn--primary btn--sm" style={{ width: '100%' }} onClick={() => openBook()}>
          Open booking flow
        </button>
        <div style={{ height: 8 }} />
        <button className="btn btn--ghost btn--sm" style={{ width: '100%' }} onClick={() => openTx(window.TREATMENTS.find(x => x.id === "veneers"))}>
          Open Veneers explainer
        </button>
      </TweaksPanel>
    </React.Fragment>
  );
}

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