// ─────────────────────────────────────────────────────────────────
// app.jsx — root: state, tweaks, language, theme
// ─────────────────────────────────────────────────────────────────
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA(t.lang || 'pt');
  const [gifts, setGifts] = useStateA(window.GIFTS || []);
  const tt = makeT(lang);
  const rsvpRef = useRefA(null);

  useEffectA(() => {
    if (t.lang !== lang) setTweak('lang', lang);
  }, [lang]);

  useEffectA(() => {
    document.body.classList.toggle('mode-dark', t.mode === 'dark');
    document.body.classList.toggle('mode-light', t.mode !== 'dark');
  }, [t.mode]);

  // refresca lista de presentes (após pagamento aprovado, etc.)
  const refreshGifts = React.useCallback(async () => {
    try {
      const { gifts: data } = await API.gifts();
      setGifts(data || []);
      window.GIFTS = data || [];
    } catch (e) { /* silencioso */ }
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
    }
  };

  const openRSVP = () => {
    scrollTo('rsvp');
    setTimeout(() => rsvpRef.current?.focus?.(), 700);
  };

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={tt} mode={t.mode} scrollTo={scrollTo} openRSVP={openRSVP} />

      {t.homeVariant === 'B'
        ? <HeroB t={tt} />
        : <HeroA t={tt} />}

      <Info t={tt} lang={lang} />
      <RSVP ref={rsvpRef} t={tt} lang={lang} />
      <Gifts t={tt} lang={lang} layout={t.giftsLayout} gifts={gifts} onPaid={refreshGifts} />
      <Gallery t={tt} />
      <Messages t={tt} />
      <Faq t={tt} lang={lang} />
      <Footer t={tt} />

      <TweaksPanel title="Tweaks · Aura & Marcel">
        <TweakSection label="Estética" />
        <TweakRadio
          label="Modo"
          value={t.mode}
          options={[
            { value: 'light', label: 'Capela' },
            { value: 'dark',  label: 'Rooftop' }
          ]}
          onChange={(v) => setTweak('mode', v)}
        />
        <TweakRadio
          label="Hero"
          value={t.homeVariant}
          options={[
            { value: 'A', label: 'Imersivo' },
            { value: 'B', label: 'Convite' }
          ]}
          onChange={(v) => setTweak('homeVariant', v)}
        />
        <TweakSection label="Lista de Presentes" />
        <TweakSelect
          label="Layout"
          value={t.giftsLayout}
          options={[
            { value: 'grid',      label: 'Grid editorial · 3 col' },
            { value: 'list',      label: 'Lista horizontal' },
            { value: 'editorial', label: 'Magazine · destaques' }
          ]}
          onChange={(v) => setTweak('giftsLayout', v)}
        />
        <TweakSection label="Idioma" />
        <TweakRadio
          label="Language"
          value={lang}
          options={[
            { value: 'pt', label: 'Português' },
            { value: 'en', label: 'English' }
          ]}
          onChange={(v) => setLang(v)}
        />
      </TweaksPanel>
    </>
  );
}

(async () => {
  if (window.__dataReady) {
    try { await window.__dataReady; } catch {}
  }
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
})();