// 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 observer with stagger via --i
  useEffectApp(() => {
    const elements = document.querySelectorAll('.reveal, .reveal-fast');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting){
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    elements.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });

  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/>);