// App root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "spectrum"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = React.useState('zh');
  const [page, setPage] = React.useState(() => {
    const saved = localStorage.getItem('feblow.page');
    const hash = window.location.hash.replace('#', '');
    return hash || saved || 'home';
  });
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = React.useState(false);

  React.useEffect(() => {
    localStorage.setItem('feblow.page', page);
    window.location.hash = page;
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  // Edit mode integration
  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);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persistTweaks = (next) => {
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
  };

  const navigate = (id) => setPage(id);

  const ctx = {
    lang, setLang,
    t: (zh, en) => lang === 'en' ? en : zh,
  };

  const Page = {
    home: HomePage,
    services: ServicesPage,
    cases: CasesPage,
    tech: TechPage,
    team: TeamPage,
    contact: ContactPage,
  }[page] || HomePage;

  return (
    <I18N.Provider value={ctx}>
      <div data-screen-label={`Page · ${page}`}>
        <Nav active={page} onNavigate={navigate} />
        <Page onNavigate={navigate} heroVariant={tweaks.heroVariant} />
        <Footer onNavigate={navigate} />
        <TweaksPanel state={tweaks} setState={persistTweaks} visible={tweaksVisible} />
      </div>
    </I18N.Provider>
  );
}

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