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

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

  useEffect(() => {
    document.documentElement.dataset.palette = tweaks.palette || 'midnight';
    document.documentElement.dataset.type = tweaks.typeVariant || 'space';
  }, [tweaks]);

  return (
    <>
      <Nav/>
      <main id="conteudo">
        <Hero/>
        <Ticker/>
        <BrandBand/>
        <Stats/>
        <Compare/>
        <Benefits/>
        <Valor/>
        <Flow/>
        <FAQ/>
        <CTA/>
      </main>
      <Footer/>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode} onClose={() => setEditMode(false)}/>
    </>
  );
}

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