const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2dd4bf",
  "theme": "dark",
  "mantraSet": "Action verbs"
}/*EDITMODE-END*/;

const App = () => {
  const [state, setStateRaw] = React.useState(TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = React.useState(false);

  const setState = (patch) => {
    setStateRaw(s => {
      const next = { ...s, ...patch };
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); } catch(e){}
      return next;
    });
  };

  // Apply accent + theme to :root
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', state.accent);
    document.body.setAttribute('data-theme', state.theme);
  }, [state.accent, state.theme]);

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

  const mantras = MANTRA_SETS[state.mantraSet] || MANTRA_SETS["Action verbs"];

  return (
    <React.Fragment>
      <Nav/>
      <Hero mantras={mantras}/>
      <Commercial/>
      <HowItWorks/>
      <AICoach/>
      <Dashboard/>
      <Walkthrough/>
      <Sports/>
      <BigMantra/>
      <FinalCTA/>
      <Footer/>
      <Tweaks state={state} setState={setState} visible={tweaksVisible} onClose={()=>setTweaksVisible(false)} />
    </React.Fragment>
  );
};

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