function App() {
  const [tweaks, setTweaks] = React.useState(() => Object.assign(
    { theme: 'light', accent: 'claude', density: 'roomy' },
    window.__TWEAKS || {}
  ));
  const [editActive, setEditActive] = React.useState(false);

  React.useEffect(() => {
    const html = document.documentElement;
    html.setAttribute('data-theme', tweaks.theme || 'light');
    html.setAttribute('data-accent', tweaks.accent || 'claude');
    html.setAttribute('data-density', tweaks.density || 'roomy');
  }, [tweaks]);

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

  return (
    <>
      <Nav/>
      <Hero/>
      <LogoBand/>
      <Problems/>
      <Cases/>
      <About/>
      <Scope/>
      <Why/>
      <AiScout/>
      <Process/>
      <FAQ/>
      <CtaFinal/>
      <Footer/>
      <Tweaks active={editActive} state={tweaks} setState={setTweaks}/>
    </>
  );
}

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