function App() {
  const [tweaks, setTweaks] = useState(window.TWEAKS || {});
  const [tweaksVisible, setTweaksVisible] = useState(false);

  // Apply tweaks to body classes
  useEffect(() => {
    const body = document.body;
    body.className = `t-${tweaks.theme || 'sumi'} f-${tweaks.headingFont || 'shippori'} b-${tweaks.bodyFont || 'noto-sans'}`;
  }, [tweaks]);

  // Tweaks messaging — register FIRST, announce SECOND
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || !d.type) return;
      if (d.type === '__activate_edit_mode') setTweaksVisible(true);
      if (d.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', onMsg);
    try {
      window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useReveal();

  return (
    <>
      <CursorBlob />
      <Nav />
      <main>
        <Hero layout={tweaks.heroLayout || 'kinetic'} />
        <Stats />
        <Services />
        <Products />
        <Cases />
        <Process />
        <Stack />
        <About />
        <Team />
        <Careers />
        <News />
        <Contact />
      </main>
      <Footer />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={tweaksVisible} />
    </>
  );
}

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