/* global React, ReactDOM, Nav, Hero, TrustStrip, Services, Process, WhyUs, About, Contact, Footer,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
// ===== Books In The Loop — App =====
const { useEffect: useAE, useState: useAS, useRef: useAR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "dashboard",
  "accent": "#d3a253",
  "motion": true,
  "navHeadline": "loop"
}/*EDITMODE-END*/;

const ACCENTS = ["#d3a253", "#c98a3d", "#caa86a", "#b9923f"];

function useReveal(deps) {
  useAE(() => {
    // Scroll/position based reveal — reliable across iframes and preview
    // contexts where IntersectionObserver / rAF callbacks can be throttled.
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > 0) el.classList.add("in");
      });
    };
    reveal();
    window.addEventListener("scroll", reveal, { passive: true });
    window.addEventListener("resize", reveal);
    // Failsafe sweep in case any frame was missed on first paint.
    const t1 = setTimeout(reveal, 400);
    const t2 = setTimeout(reveal, 1200);
    return () => {
      window.removeEventListener("scroll", reveal);
      window.removeEventListener("resize", reveal);
      clearTimeout(t1);
      clearTimeout(t2);
    };
  }, deps);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const motion = t.motion !== false;

  // apply accent + motion class globally
  useAE(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--gold", t.accent);
    document.body.classList.toggle("no-motion", !motion);
  }, [t.accent, motion]);

  // re-run reveal observer when hero variant changes (DOM swaps)
  useReveal([t.hero]);

  const onNav = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: motion ? "smooth" : "auto" }); return; }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 6;
      window.scrollTo({ top: y, behavior: motion ? "smooth" : "auto" });
    }
  };

  return (
    <React.Fragment>
      <Nav onNav={onNav} />
      <main>
        <Hero variant={t.hero} onNav={onNav} spin={motion} />
        <TrustStrip />
        <Services />
        <Process spin={motion} />
        <WhyUs />
        <About />
        <Contact onNav={onNav} />
      </main>
      <Footer onNav={onNav} />

      <TweaksPanel>
        <TweakSection label="Hero direction" />
        <TweakRadio label="Layout" value={t.hero}
          options={["editorial", "centered", "dashboard"]}
          onChange={(v) => setTweak("hero", v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent gold" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Animated orbit & reveals" value={motion}
          onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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