const App = () => {
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS__ || { theme:'dark', density:'spacious', servicesLayout:'grid' });
  const [editOn, setEditOn] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-density', tweaks.density);
  }, [tweaks]);

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditOn(true);
      if (d.type === '__deactivate_edit_mode') setEditOn(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // scroll reveal — only tag items deeper in the page so above-the-fold is always visible
  React.useEffect(() => {
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.05, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.servicesLayout]);

  return (
    <>
      <Nav/>
      <Hero/>
      <Services layout={tweaks.servicesLayout}/>
      <ConnectCase/>
      <Process/>
      <Cases/>
      <Stack/>
      <Testimonials/>
      <About/>
      <FAQ/>
      <Contact/>
      <Footer/>
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} visible={editOn}/>
    </>
  );
};
window.App = App;