// app.jsx — assembles the page and wires Tweaks for hero variant

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "A"
}/*EDITMODE-END*/;

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

  // Smooth-scroll on anchor click
  React.useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (el) { e.preventDefault(); window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" }); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Generic reveal for any [data-reveal] elements added late
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [t.heroVariant]);

  const Hero = t.heroVariant === "B" ? HeroB : t.heroVariant === "C" ? HeroC : HeroA;

  return (
    <>
      <Nav/>
      <Hero/>
      <Stats/>
      <Ticker/>
      <Services/>
      <Portfolio/>
      <Process/>
      <Contact/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Hero layout"/>
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={["A","B","C"]}
          onChange={(v)=>setTweak("heroVariant", v)}
        />
        <div style={{fontSize:11,opacity:.6,lineHeight:1.5,padding:"4px 0"}}>
          A — editorial split with signature accent.<br/>
          B — centered showreel with morphing verb.<br/>
          C — brutalist memo · pure grid.
        </div>
      </TweaksPanel>
    </>
  );
}

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