// app.jsx
function App() {
  const [theme, setThemeState] = React.useState(window.TWEAK_DEFAULTS.theme || 'natural');
  const [heroCopy, setHeroCopyState] = React.useState(window.TWEAK_DEFAULTS.heroCopy || '0');
  const [tweaksVisible, setTweaksVisible] = React.useState(false);

  React.useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]);

  const setTheme = (v) => { setThemeState(v); window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { theme: v } }, '*'); };
  const setHeroCopy = (v) => { setHeroCopyState(v); window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { heroCopy: v } }, '*'); };

  React.useEffect(() => {
    const handler = (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', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  return (
    <>
      <Nav />
      <Hero heroCopy={parseInt(heroCopy, 10) || 0} />
      <Gameplay />
      <Gallery />
      <Product />
      <GymLeaders />
      <Events />
      <Story />
      <FAQ />
      <News />
      <Footer />
      <TweaksPanel theme={theme} setTheme={setTheme} heroCopy={heroCopy} setHeroCopy={setHeroCopy} visible={tweaksVisible} />
    </>
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);