// app.jsx — mount + page-level behavior (reveal, scroll progress) + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E85D3C",
  "anim": "full",
  "heroBg": "video"
}/*EDITMODE-END*/;

const ANIM_MAP = { off: 0, subtle: 0.6, full: 1 };

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    r.style.setProperty('--anim', String(ANIM_MAP[t.anim] != null ? ANIM_MAP[t.anim] : 1));
    document.body.classList.toggle('no-hero-video', t.heroBg !== 'video');
  }, [t.accent, t.anim, t.heroBg]);

  React.useEffect(() => {
    const bar = document.querySelector('.sp-bar');
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      document.querySelectorAll('.reveal:not(.in)').forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > 0){
          el.classList.add('in');
          // Safety net: if the animation timeline is throttled/frozen (offscreen
          // iframes), the fade never completes. Snap finite (reveal) animations to
          // their end so content is always visible — but never touch infinite/looping
          // decorative animations.
          setTimeout(() => {
            try {
              (el.getAnimations() || []).forEach(a => {
                const it = a.effect && a.effect.getTiming && a.effect.getTiming().iterations;
                if (it !== Infinity) a.finish();
              });
            } catch (e) {}
          }, 720);
        }
      });
    };
    const progress = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? h.scrollTop / max : 0;
      if (bar) bar.style.transform = `scaleX(${p})`;
    };
    const tick = () => { reveal(); progress(); };
    tick();
    window.addEventListener('scroll', tick, { passive: true });
    window.addEventListener('resize', tick);
    // Conversión · clics en CTAs de demo y WhatsApp (guardado para producción)
    const onCta = (e) => {
      const a = e.target.closest && e.target.closest('a[href="#demo"], a[href*="wa.me"]');
      if (!a) return;
      const isWa = (a.getAttribute('href') || '').indexOf('wa.me') !== -1;
      try { if (typeof fbq === 'function') fbq('track', isWa ? 'Contact' : 'Lead', { method: isWa ? 'whatsapp' : 'cta' }); } catch(err){}
      try { if (typeof gtag === 'function') gtag('event', isWa ? 'contact' : 'cta_click', { method: isWa ? 'whatsapp' : 'cta' }); } catch(err){}
    };
    document.addEventListener('click', onCta);
    // Interval safety net: scroll events aren't always dispatched (programmatic
    // scroll / throttled iframes). Poll until everything has revealed.
    const iv = setInterval(() => {
      tick();
      if (document.querySelectorAll('.reveal:not(.in)').length === 0){ clearInterval(iv); }
    }, 250);
    return () => { clearInterval(iv); window.removeEventListener('scroll', tick); window.removeEventListener('resize', tick); document.removeEventListener('click', onCta); };
  }, []);

  return (
    <React.Fragment>
      <Nav/>
      <main>
        <Hero/>
        <TrustStrip/>
        <Problem/>
        <System/>
        <AILayer/>
        <Results/>
        <Testimonials/>
        <Offer/>
        <Simulator/>
        <Demo/>
        <FAQ/>
      </main>
      <Footer/>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Marca"/>
        <TweakColor label="Acento" value={t.accent}
          options={['#E85D3C', '#D24D2E', '#E8743C', '#D43C5D']}
          onChange={(v) => setTweak('accent', v)}/>
        <TweakSection label="Movimiento"/>
        <TweakRadio label="Animación" value={t.anim}
          options={['off', 'subtle', 'full']}
          onChange={(v) => setTweak('anim', v)}/>
        <TweakSection label="Hero"/>
        <TweakRadio label="Fondo" value={t.heroBg}
          options={['video', 'sólido']}
          onChange={(v) => setTweak('heroBg', v)}/>
      </TweaksPanel>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);