// app.jsx — composition, tweaks, scroll-reveal, live tokens

const HERO_VARIANT = { 'Dividido': 'split', 'Centralizado': 'center', 'Editorial': 'editorial' };
const PAINS_VARIANT = { 'Cards': 'cards', 'Lista': 'list' };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "Dividido",
  "painsVariant": "Cards",
  "accent": "#F85406",
  "displayFont": "Bricolage Grotesque",
  "bodyFont": "Hanken Grotesk",
  "motion": true
}/*EDITMODE-END*/;

function useScrollReveal(deps) {
  const revealed = React.useRef(new Set());
  const locked = React.useRef(new Set());
  const lockSoon = (e) => {
    if (e._lockT) return;
    e._lockT = setTimeout(() => { locked.current.add(e); e.classList.add('shown'); }, 1000);
  };
  const sweep = () => {
    const vh = window.innerHeight || document.documentElement.clientHeight;
    document.querySelectorAll('[data-reveal]').forEach((e) => {
      if (locked.current.has(e)) { e.classList.add('in', 'shown'); return; }
      const r = e.getBoundingClientRect();
      if (revealed.current.has(e) || (r.top < vh * 0.92 && r.bottom > -40)) {
        revealed.current.add(e);
        e.classList.add('in');
        lockSoon(e);
      }
    });
  };
  // Reconcile on every commit (before paint) so React re-renders can't strip the class.
  React.useLayoutEffect(() => { sweep(); });
  // Scroll/resize reveal + interval safety (scroll events don't fire under capture).
  React.useEffect(() => {
    const onScroll = () => sweep();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    const iv = setInterval(() => {
      sweep();
      const total = document.querySelectorAll('[data-reveal]').length;
      if (total > 0 && locked.current.size >= total) clearInterval(iv);
    }, 250);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      clearInterval(iv);
    };
  }, deps);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const heroV = HERO_VARIANT[t.heroVariant] || 'split';
  const painsV = PAINS_VARIANT[t.painsVariant] || 'cards';

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    r.style.setProperty('--font-display', `'${t.displayFont}', system-ui, sans-serif`);
    r.style.setProperty('--font-body', `'${t.bodyFont}', system-ui, sans-serif`);
  }, [t.accent, t.displayFont, t.bodyFont]);

  React.useEffect(() => {
    document.body.classList.toggle('motion-on', !!t.motion);
    document.body.classList.toggle('motion-off', !t.motion);
  }, [t.motion]);

  useScrollReveal([heroV, painsV, t.motion]);

  return (
    <React.Fragment>
      <AnnouncementBar />
      <Header />
      <main>
        <Hero variant={heroV} motion={t.motion} key={'hero-' + heroV + '-' + t.motion} />
        <Proof />
        <VideoConheca />
        <Pains variant={painsV} key={'pains-' + painsV} />
        <Method />
        <PlatformSection />
        <Solucoes />
        <Pilares />
        <Resultados motion={t.motion} key={'res-' + t.motion} />
        <Comparativo />
        <PhotoDivider img="arquitetura-vidro.png" alt="Arquitetura corporativa em vidro vista de baixo" caption="Tecnologia que sustenta operações que não podem parar." />
        <BannerReforma />
        <Depoimentos />
        <Conteudos />
        <FAQ />
        <CTAFinal />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.heroVariant}
          options={['Dividido', 'Centralizado', 'Editorial']}
          onChange={(v) => setTweak('heroVariant', v)} />
        <TweakRadio label="Dores" value={t.painsVariant}
          options={['Cards', 'Lista']}
          onChange={(v) => setTweak('painsVariant', v)} />

        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accent}
          options={['#F85406', '#FB6E1E', '#E03E00', '#2A6FDB']}
          onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Tipografia" />
        <TweakSelect label="Display" value={t.displayFont}
          options={['Bricolage Grotesque', 'Sora', 'Space Grotesk', 'Archivo']}
          onChange={(v) => setTweak('displayFont', v)} />
        <TweakSelect label="Corpo" value={t.bodyFont}
          options={['Hanken Grotesk', 'Manrope', 'IBM Plex Sans']}
          onChange={(v) => setTweak('bodyFont', v)} />

        <TweakSection label="Movimento" />
        <TweakToggle label="Animações" value={t.motion}
          onChange={(v) => setTweak('motion', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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