// app.jsx — root composition. TweaksPanel gated by ?tweaks=1 (URL param).
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "animIntensity": 1,
  "ccDensity": "detailed",
  "liveLight": false,
  "accent": "#E85D3C"
}/*EDITMODE-END*/;

function showTweaks(){
  try {
    return new URLSearchParams(window.location.search).has('tweaks');
  } catch(e){ return false; }
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [navInvert, setNavInvert] = useStateApp(false);

  useEffectApp(() => {
    document.documentElement.style.setProperty('--sindicato-orange', t.accent || '#E85D3C');
    document.documentElement.style.setProperty('--anim', t.animIntensity ?? 1);
  }, [t.accent, t.animIntensity]);

  // Scroll-reveal robusto (no depende solo de IntersectionObserver, que no
  // dispara en iframes con timeline congelado). Intervalo + finish de respaldo.
  useEffectApp(() => {
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      document.querySelectorAll('.reveal:not(.in), .reveal-fast:not(.in)').forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > 0){
          el.classList.add('in');
          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);
        }
      });
    };
    reveal();
    window.addEventListener('scroll', reveal, { passive: true });
    window.addEventListener('resize', reveal);
    const iv = setInterval(() => {
      reveal();
      if (document.querySelectorAll('.reveal:not(.in), .reveal-fast:not(.in)').length === 0) clearInterval(iv);
    }, 250);
    return () => { clearInterval(iv); window.removeEventListener('scroll', reveal); window.removeEventListener('resize', reveal); };
  });

  const tweaksOn = showTweaks();

  return (
    <>
      <Nav navInvert={navInvert} />
      <Hero onNavInvert={setNavInvert} />
      <ProofStrip />
      <Manifesto />
      <Capabilities />
      <Setup />
      <Pricing />
      <Comparator />
      <Extensions />
      <DemoNote />
      <Configurator />
      <ControlCenter density={t.ccDensity} animIntensity={t.animIntensity} />
      <Results />
      <CasesDigital />
      <Family />
      <LiveSection light={t.liveLight} animIntensity={t.animIntensity} />
      <CasesPeltier />
      <FAQ />
      <FinalCta />
      <Footer />

      {tweaksOn && (
        <TweaksPanel title="Tweaks · Sindicato">
          <TweakSection label="Motion" />
          <TweakSlider
            label="Intensidad de animaciones"
            value={t.animIntensity}
            min={0} max={1} step={0.1}
            onChange={(v) => setTweak('animIntensity', v)}
          />
          <TweakSection label="Control Center" />
          <TweakRadio
            label="Densidad"
            value={t.ccDensity}
            options={['compact', 'detailed']}
            onChange={(v) => setTweak('ccDensity', v)}
          />
          <TweakSection label="B2Boost Live" />
          <TweakToggle
            label="Modo claro"
            value={t.liveLight}
            onChange={(v) => setTweak('liveLight', v)}
          />
          <TweakSection label="Marca" />
          <TweakColor
            label="Acento principal"
            value={t.accent}
            options={['#E85D3C', '#D24D2E', '#C84A2A', '#E0732A']}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweaksPanel>
      )}
    </>
  );
}

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