const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan",
  "heroVariant": "os",
  "density": "comfortable"
}/*EDITMODE-END*/;

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

  // Apply side-effects when state changes
  React.useEffect(() => {
    window.applyAccent(state.accent);
    window.applyDensity(state.density);
    // persist via host
    window.parent.postMessage({type: '__edit_mode_set_keys', edits: state}, '*');
  }, [state]);

  // Edit mode handshake
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweakVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setTweakVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  return (
    <>
      <window.Nav />
      <window.Hero variant={state.heroVariant} />
      <window.Network />
      <window.Stats />
      <window.Capabilities />
      <window.WhyToro />
      <window.CTA />
      <window.Footer />
      <window.Tweaks
        state={state}
        setState={(s) => setState(s)}
        visible={tweakVisible}
        onClose={() => setTweakVisible(false)}
      />
    </>
  );
}

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