// App root
function App(){
  const defaults = React.useMemo(()=>{
    try{ return JSON.parse(document.getElementById('tweak-defaults').textContent.replace(/\/\*EDITMODE-(BEGIN|END)\*\//g,'')); }
    catch(e){ return {chaos:0.35, accent:'orange', heroVariant:'capsule'}; }
  },[]);
  const [state, setState] = React.useState(defaults);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  React.useEffect(()=>{
    // Register listener FIRST
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    // Then announce
    window.parent?.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', handler);
  },[]);

  return (
    <div id="top">
      <Nav />
      <PermabanHero chaos={state.chaos} />
      <About />
      <Assets />
      <Trailer />
      <Games />
      <Contact />
      <Footer />

      <TweaksPanel state={state} setState={setState} open={tweaksOpen} setOpen={setTweaksOpen} />
    </div>
  );
}

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