// App shell — composes all sections with tweaks
const { useEffect: useEffectApp } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffectApp(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  useEffectApp(() => {
    const root = document.documentElement;
    if (tweaks.palette === "amber") {
      root.style.setProperty('--phos', '#FFB648');
      root.style.setProperty('--phos-dim', '#D99531');
      root.style.setProperty('--phos-glow', 'rgba(255,182,72,0.28)');
      root.style.setProperty('--phos-soft', 'rgba(255,182,72,0.08)');
    } else if (tweaks.palette === "green") {
      root.style.setProperty('--phos', '#00FF94');
      root.style.setProperty('--phos-dim', '#00C478');
      root.style.setProperty('--phos-glow', 'rgba(0,255,148,0.25)');
      root.style.setProperty('--phos-soft', 'rgba(0,255,148,0.08)');
    } else {
      // brand orange — default
      root.style.setProperty('--phos', '#F57C2B');
      root.style.setProperty('--phos-dim', '#D96518');
      root.style.setProperty('--phos-glow', 'rgba(245,124,43,0.28)');
      root.style.setProperty('--phos-soft', 'rgba(245,124,43,0.08)');
    }
    root.style.setProperty('--scanlines-opacity', tweaks.scanlines ? '1' : '0');
    root.style.setProperty('--vignette-opacity', tweaks.vignette ? '1' : '0');
  }, [tweaks.palette, tweaks.scanlines, tweaks.vignette]);

  return (
    <>
      <Nav />
      <Hero tweaks={tweaks} />
      <LogosStrip />
      <Services />
      <Process tweaks={tweaks} />
      <Compare />
      <ROICalc />
      <Testimonials />
      <Stats />
      <LeadMagnet />
      <About />
      <FinalCTA tweaks={tweaks} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Identidad visual">
          <TweakRadio label="Paleta" value={tweaks.palette} onChange={v => setTweak('palette', v)} options={[
            { value: "brand", label: "Naranja marca (default)" },
            { value: "amber", label: "Amber CRT (cálido)" },
            { value: "green", label: "Verde phosphor" }
          ]} />
          <TweakToggle label="Scanlines sutiles" value={tweaks.scanlines} onChange={v => setTweak('scanlines', v)} />
          <TweakToggle label="Viñeta CRT" value={tweaks.vignette} onChange={v => setTweak('vignette', v)} />
        </TweakSection>
        <TweakSection title="Copy y oferta">
          <TweakSlider label="Días de implementación" value={tweaks.dias} onChange={v => setTweak('dias', v)} min={7} max={30} step={1} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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