function App() {
  const initial = window.__VEIRON_TWEAKS || { typography:'space-grotesk', animationIntensity:'full', heroLayout:'orb', theme:'dark' };
  const [tweaks, setTweaks] = React.useState(initial);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [theme, setTheme] = React.useState(initial.theme || 'dark');

  // Apply theme + typography
  React.useEffect(() => {
    document.body.classList.toggle('theme-dark', theme === 'dark');
    document.body.classList.toggle('theme-light', theme === 'light');
  }, [theme]);
  React.useEffect(() => {
    document.body.dataset.type = tweaks.typography || '';
    document.body.dataset.intensity = tweaks.animationIntensity || 'full';
  }, [tweaks]);

  // Sync tweak edit mode
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Reveal observer
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.1, rootMargin: '0px 0px -80px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  const toggleTheme = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { theme: next } }, '*');
  };

  return (
    <>
      <div className="grid-bg" />
      <window.Nav theme={theme} onToggleTheme={toggleTheme} />
      <div className="page">
        <window.Hero layout={tweaks.heroLayout} intensity={tweaks.animationIntensity} theme={theme} />
        <window.Idea />
        <window.Products />
        <window.Features />
        <window.Stats />
        <window.HowItWorks />
        <window.Testimonials />
        <window.Pricing />
        <window.CTA theme={theme} />
        <window.Footer />
      </div>
      <window.Tweaks open={tweaksOpen} values={tweaks} onChange={setTweaks} />
    </>
  );
}

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