// app.jsx
const { useEffect } = React;

function App() {
  const [state, setState] = React.useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  useEffect(() => {
    applyAccent(state.accent);
    applyTheme(state.theme);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: state }, '*');
  }, [state]);

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

  return (
    <>
      <Nav />
      <Hero />
      <Pain />
      <Steps />
      <Founder />
      <Pricing />
      <Itin />
      <Addons />
      {state.showCommunity && <Community />}
      <Cases />
      <Team />
      <Faq />
      <Blog />
      <FinalCTA />
      <Footer />
      <Tweaks state={state} setState={setState} visible={editMode} />
    </>
  );
}

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