// App root
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App(){
  const [tweaks, setTweaks] = useStateApp(window.TWEAKS || { heroVariant: "A", showPlaceholders: true });
  const [tweaksVisible, setTweaksVisible] = useStateApp(false);
  const [menuOpen, setMenuOpen] = useStateApp(false);
  const [headerTransparent, setHeaderTransparent] = useStateApp(true);

  // sync tweaks -> window (for primitives that read it)
  useEffectApp(() => { window.TWEAKS = tweaks; }, [tweaks]);

  // Edit-mode protocol — register listener FIRST, then announce
  useEffectApp(() => {
    const handler = (e) => {
      const d = e.data;
      if(!d || typeof d !== "object") return;
      if(d.type === "__activate_edit_mode") setTweaksVisible(true);
      if(d.type === "__deactivate_edit_mode") setTweaksVisible(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({type: "__edit_mode_available"}, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const onTweakChange = (next) => {
    setTweaks(next);
    window.parent.postMessage({type: "__edit_mode_set_keys", edits: next}, "*");
  };

  // header transparency: transparent while over hero
  useEffectApp(() => {
    const onScroll = () => {
      setHeaderTransparent(window.scrollY < window.innerHeight - 80);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // lock body scroll when menu open
  useEffectApp(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
  }, [menuOpen]);

  return (
    <>
      <Header onMenu={() => setMenuOpen(true)} transparent={headerTransparent && !menuOpen} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <Stats />
        <Service />
        <Reason />
        <Works />
        <Voice />
        <Process />
        <Area />
        <Contact />
      </main>
      <Footer />
      <Tweaks tweaks={tweaks} onChange={onTweakChange} visible={tweaksVisible} onToggleVisible={() => setTweaksVisible(false)} />
    </>
  );
}

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