// App shell — wires state, tweaks, and sections

function App() {
  const defaults = window.__VOLTAN_DEFAULTS || { accent: 'teal', theme: 'dark', lang: 'en', density: 'comfortable' };
  const [state, setState] = React.useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('voltan:state') || 'null');
      return { ...defaults, ...(saved || {}) };
    } catch { return defaults; }
  });
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  // Persist & apply
  React.useEffect(() => {
    const b = document.body;
    b.dataset.theme = state.theme;
    b.dataset.accent = state.accent;
    b.dataset.lang = state.lang;
    b.dataset.density = state.density;
    document.documentElement.lang = state.lang === 'zh' ? 'zh-CN' : 'en';
    try { localStorage.setItem('voltan:state', JSON.stringify(state)); } catch {}
  }, [state]);

  // Host edit-mode protocol — register listener FIRST, then announce.
  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setTweaksOpen(true);
      if (d.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Keyboard: ESC closes tweaks
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setTweaksOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const setLang = (lang) => setState(s => ({ ...s, lang }));
  const setTheme = (theme) => setState(s => ({ ...s, theme }));

  return (
    <div style={{ background: 'var(--bg)', color: 'var(--fg)' }}>
      <Nav lang={state.lang} setLang={setLang} theme={state.theme} setTheme={setTheme} />
      <main>
        <Hero lang={state.lang} />
        <Serve lang={state.lang} />
        <Stack lang={state.lang} />
        <Proof lang={state.lang} />
        <Tech lang={state.lang} />
        <WhyNow lang={state.lang} />
        <About lang={state.lang} />
        <Contact lang={state.lang} />
      </main>
      <Footer lang={state.lang} setLang={setLang} />

      {tweaksOpen && (
        <Tweaks state={state} setState={setState} onClose={() => setTweaksOpen(false)} />
      )}
    </div>
  );
}

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