const TWEAK_DEFAULTS = {
  "hero": "editorial",
  "services": "list",
  "reviews": "large"
};

const App = () => {
  const [tweaks, setTweaksState] = React.useState(TWEAK_DEFAULTS);
  const [showTweaks, setShowTweaks] = React.useState(false);

  const setTweaks = (t) => {
    setTweaksState(t);
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: t }, "*"); } catch (e) {}
  };

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setShowTweaks(true);
      if (e.data.type === "__deactivate_edit_mode") setShowTweaks(false);
    };
    window.addEventListener("message", onMsg);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (e) {}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // Scroll reveal
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.08 });
    document.querySelectorAll("section, .feed, .footer").forEach(el => {
      el.classList.add("reveal");
      io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero variant={tweaks.hero} />
      <About />
      <Services variant={tweaks.services} />
      <Reviews variant={tweaks.reviews} />
      <Quiz />
      <Feed />
      <Contact />
      <Footer />
      {showTweaks && <Tweaks tweaks={tweaks} setTweaks={setTweaks} onClose={()=>setShowTweaks(false)} />}
    </>
  );
};

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