// App principal

const { useState, useEffect } = React;
const { Nav, Hero, Metrics, NewsTicker, Projects } = window.SC_UI;
const { Founder, Books, DonateStrip, Team, Testimonials, JoinForm, Footer, DonateModal } = window.SC_UI_2;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "accent": "#8E3544",
  "paperTone": "white",
  "showTicker": true,
  "showDonateStrip": true,
  "density": "normal"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [donateOpen, setDonateOpen] = useState(false);
  const [donateAmount, setDonateAmount] = useState(null);

  const lang = tweaks.lang;

  const setLang = (l) => {
    const next = l === 'en' ? 'en' : 'pt';
    setTweak('lang', next);
    try { localStorage.setItem('sc-lang', next); } catch (_) {}
  };

  useEffect(() => {
    try {
      const saved = localStorage.getItem('sc-lang');
      if (saved === 'en' || saved === 'pt') setTweak('lang', saved);
    } catch (_) {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    document.documentElement.lang = lang === 'en' ? 'en' : 'pt-BR';
    if (window.SC_applySeo) window.SC_applySeo('home', lang);
  }, [lang]);

  const openDonate = (amount) => {
    if (amount === 0) {
      setDonateAmount(0);
    } else if (amount === 50 || amount === 100 || amount === 150) {
      setDonateAmount(amount);
    } else {
      setDonateAmount(null);
    }
    setDonateOpen(true);
  };

  useEffect(() => {
    const p = new URLSearchParams(window.location.search);
    const d = p.get('donate');
    if (d === 'free' || d === '0') openDonate(0);
    else if (d && [50, 100, 150].includes(Number(d))) openDonate(Number(d));
  }, []);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    const tones = {
      white: { paper: '#ffffff', warm: '#f7f1f2', line: '#ecdfe1', line2: '#d9c5c8' },
      warm: { paper: '#fbf6f0', warm: '#f3eadc', line: '#e6dccb', line2: '#d4c5ad' },
      cream: { paper: '#fdf8f1', warm: '#f5ecdc', line: '#ead9c0', line2: '#d8c5a5' },
    }[tweaks.paperTone] || {};
    if (tones.paper) {
      document.documentElement.style.setProperty('--paper', tones.paper);
      document.documentElement.style.setProperty('--paper-warm', tones.warm);
      document.documentElement.style.setProperty('--line', tones.line);
      document.documentElement.style.setProperty('--line-2', tones.line2);
    }
    document.documentElement.style.setProperty('--section-y', tweaks.density === 'tight' ? '64px' : '96px');
  }, [tweaks]);

  // reveal-on-scroll
  useEffect(() => {
    const io = new IntersectionObserver(es => {
      es.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} onDonate={() => openDonate()} />
      <Hero lang={lang} onDonate={() => openDonate()} />
      <Metrics lang={lang} />
      {tweaks.showTicker && <NewsTicker lang={lang} />}
      <Projects lang={lang} />
      <Founder lang={lang} />
      {tweaks.showDonateStrip && <DonateStrip lang={lang} onDonate={openDonate} />}
      <Testimonials lang={lang} />
      <Team lang={lang} />
      <Books lang={lang} />
      <JoinForm lang={lang} />
      <Footer lang={lang} onDonate={() => openDonate()} />
      <DonateModal open={donateOpen} onClose={() => setDonateOpen(false)} lang={lang} initialAmount={donateAmount} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Idioma">
          <window.TweakRadio
            label="Idioma do site"
            value={tweaks.lang}
            options={[{ label: 'PT', value: 'pt' }, { label: 'EN', value: 'en' }]}
            onChange={v => setTweak('lang', v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Cor de acento">
          <window.TweakColor label="Acento" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            {['#8E3544', '#6b2433', '#a85567', '#2a1418', '#5a3a40'].map(c => (
              <button
                key={c}
                onClick={() => setTweak('accent', c)}
                style={{ width: 28, height: 28, borderRadius: '50%', background: c, border: tweaks.accent === c ? '2px solid #000' : '1px solid #ccc', cursor: 'pointer' }}
              />
            ))}
          </div>
        </window.TweakSection>
        <window.TweakSection title="Tom do papel">
          <window.TweakRadio
            label="Paleta base"
            value={tweaks.paperTone}
            options={[{ label: 'Branco', value: 'white' }, { label: 'Off-white', value: 'warm' }, { label: 'Creme', value: 'cream' }]}
            onChange={v => setTweak('paperTone', v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Layout">
          <window.TweakToggle label="Ticker de eventos" value={tweaks.showTicker} onChange={v => setTweak('showTicker', v)} />
          <window.TweakToggle label="Faixa de doação" value={tweaks.showDonateStrip} onChange={v => setTweak('showDonateStrip', v)} />
          <window.TweakRadio
            label="Densidade"
            value={tweaks.density}
            options={[{ label: 'Confortável', value: 'normal' }, { label: 'Compacta', value: 'tight' }]}
            onChange={v => setTweak('density', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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