/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle,
   LpNav, LpHero, LpFaq, LpFounder, LpBook, LpFooter, Engine, smoothTo */
const { useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTreatment": "vsl",
  "engineLayout": "screen",
  "motion": true,
  "showLive": true
}/*EDITMODE-END*/;

/* Eight-point fulfillment engine. Grid reveals as one staggered block;
   the laptop variant reveals each card individually as it scrolls in. */
function EngineSection({ variant }) {
  const E = window.LpEngine;
  if (!E) return null;
  if (variant === "screen") return <E variant="screen" />;
  return <div className="reveal" data-stagger><E variant="grid" /></div>;
}

function useScrollReveal(deps) {
  useAppEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal:not(.is-visible)"));
    if (!("IntersectionObserver" in window) || els.length === 0) {
      els.forEach((el) => el.classList.add("is-visible"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("is-visible"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, deps);
}

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

  useAppEffect(() => {
    document.body.setAttribute("data-motion", t.motion ? "on" : "off");
  }, [t.motion]);

  // re-scan reveals whenever the layout changes (DOM is rebuilt)
  useScrollReveal([t.heroTreatment, t.engineLayout, t.motion]);

  const book = () => smoothTo("book");

  return (
    <div className="mk-app">
      <LpNav onBook={book} />
      <LpHero treatment={t.heroTreatment} onBook={book} showLive={t.showLive} />
      <EngineSection variant={t.engineLayout} />
      <LpFaq />
      <LpFounder />
      <LpBook />
      <LpFooter />

      <TweaksPanel>
        <TweakSection label="Hero treatment" />
        <TweakRadio
          label="Layout"
          value={t.heroTreatment}
          options={[{ value: "split", label: "Split" }, { value: "vsl", label: "VSL-first" }]}
          onChange={(v) => setTweak("heroTreatment", v)}
        />
        <TweakToggle label="Live event bar" value={t.showLive} onChange={(v) => setTweak("showLive", v)} />
        <TweakSection label="Engine section" />
        <TweakRadio
          label="Layout"
          value={t.engineLayout}
          options={[{ value: "grid", label: "Grid" }, { value: "screen", label: "Laptop" }]}
          onChange={(v) => setTweak("engineLayout", v)}
        />
        <TweakSection label="Motion" />
        <TweakToggle label="Scroll animations" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </div>
  );
}

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