// ============================================================
// APP — composes all sections + visible PT/EN switcher
// ============================================================

const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;

// Default tweak values — block must be valid JSON between markers
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "pt"
}/*EDITMODE-END*/;

const LS_KEY = 'av_lang';

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Hydrate from localStorage on first render (visitor's last choice wins
  // over the build-time default the tweak panel rewrites).
  React.useEffect(() => {
    try {
      const saved = localStorage.getItem(LS_KEY);
      if (saved && saved !== t.lang && (saved === 'pt' || saved === 'en')) {
        setTweak('lang', saved);
      }
    } catch (_) {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const setLang = (v) => {
    setTweak('lang', v);
    try { localStorage.setItem(LS_KEY, v); } catch (_) {}
    try { document.documentElement.lang = v === 'en' ? 'en' : 'pt-BR'; } catch (_) {}
  };

  React.useEffect(() => {
    try { document.documentElement.lang = t.lang === 'en' ? 'en' : 'pt-BR'; } catch (_) {}
  }, [t.lang]);

  React.useLayoutEffect(() => {
    document.documentElement.classList.add('page-ready');
  }, []);

  const strings = window.STRINGS[t.lang] || window.STRINGS.pt;

  return (
    <>
      <Header t={strings} lang={t.lang} onLang={setLang} />
      <main>
        <Hero t={strings} />
        <Manifesto t={strings} />
        <Services t={strings} />
        <Stack t={strings} />
        <Portfolio t={strings} />
        <Process t={strings} />
        <Contact t={strings} />
      </main>
      <Footer t={strings} lang={t.lang} onLang={setLang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={strings.tweaks.lang} />
        <TweakRadio
          label={strings.tweaks.lang}
          value={t.lang}
          options={[
            { label: 'PT', value: 'pt' },
            { label: 'EN', value: 'en' },
          ]}
          onChange={setLang}
        />
      </TweaksPanel>
    </>
  );
}

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