// app.jsx - mounts the Hero + Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "background": "constellation",
  "headline": "accent",
  "accent": "violet",
  "density": 1,
  "showStats": true,
  "edgeWidth": 1,
  "motionSpeed": 0.5,
  "glassAlpha": 0.3,
  "glassBlur": 24,
  "depthGlow": 0.85,
  "bgLight": 0.5,
  "orbOpacity": 0.3,
  "orbScaleStart": 0.6,
  "orbScaleEnd": 1.8,
  "techOpacity": 0.58,
  "techBlur": 6
}/*EDITMODE-END*/;

const SECTION_IDS = ['hero', 'challenges', 'services', 'cases', 'process', 'tech', 'team', 'testimonials', 'roi', 'plans', 'contact'];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeId, setActiveId] = React.useState('');

  React.useEffect(() => {
    document.body.className = t.theme === 'dark' ? 'dark' : '';
  }, [t.theme]);

  // Glass / ethereal controls -> CSS variables
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--edge-w', t.edgeWidth + 'px');
    r.setProperty('--speed', String(t.motionSpeed));
    r.setProperty('--glass-a', String(t.glassAlpha));
    r.setProperty('--glass-blur', t.glassBlur + 'px');
    r.setProperty('--depth', String(t.depthGlow));
    r.setProperty('--bg-lift', String(t.bgLight));
    r.setProperty('--orb-opacity', String(t.orbOpacity));
    r.setProperty('--tech-op', String(t.techOpacity));
    r.setProperty('--tech-blur', t.techBlur + 'px');
  }, [t.edgeWidth, t.motionSpeed, t.glassAlpha, t.glassBlur, t.depthGlow, t.bgLight, t.orbOpacity, t.techOpacity, t.techBlur]);

  // Parallax + scroll-driven orb scale: as the user scrolls top→bottom the orbs
  // grow (start→end), creating a sense of travelling forward into the light.
  React.useEffect(() => {
    const layer = document.querySelector('.bg-orbs-parallax');
    if (!layer) return;
    const start = t.orbScaleStart, end = t.orbScaleEnd;
    const root = document.documentElement;
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const max = root.scrollHeight - window.innerHeight;
        const p = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
        layer.style.transform = 'translate3d(0,' + (-window.scrollY * 0.05) + 'px,0)';
        root.style.setProperty('--orb-scale', (start + p * (end - start)).toFixed(3));
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [t.orbScaleStart, t.orbScaleEnd]);

  // Scroll-spy: highlight the nav item for the section nearest the viewport
  // center. The Hero has no nav entry, so while it's the active section (near
  // the top of the page) NOTHING is highlighted.
  React.useEffect(() => {
    const NAV_IDS = SECTION_IDS.filter((id) => id !== 'hero');
    let ticking = false;
    const update = () => {
      ticking = false;
      const mid = window.scrollY + window.innerHeight / 2;
      // If we're still within the hero (top of page), clear the highlight.
      const hero = document.getElementById('hero');
      if (hero && window.scrollY + window.innerHeight * 0.5 < hero.offsetTop + hero.offsetHeight) {
        setActiveId('');
        return;
      }
      let current = '';
      for (const id of NAV_IDS) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= mid) current = id;
      }
      setActiveId(current);
    };
    const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  return (
    <React.Fragment>
      <Header theme={t.theme} activeId={activeId} />
      <main>
        <Hero t={t} />
        <Challenges t={t} />
        <Services />
        <Cases />
        <Process />
        <Tech />
        <Team />
        <Testimonials />
        <Roi />
        <Offers />
        <Contact t={t} />
      </main>

      <TweaksPanel title="Vidrio">
        <TweakSection label="Vidrio translúcido" />
        <TweakSlider label="Opacidad del vidrio" value={t.glassAlpha} min={0.1} max={0.85} step={0.02}
          onChange={(v) => setTweak('glassAlpha', v)} />
        <TweakSlider label="Desenfoque" value={t.glassBlur} min={0} max={40} step={1} unit="px"
          onChange={(v) => setTweak('glassBlur', v)} />
        <TweakSlider label="Luz detrás (profundidad)" value={t.depthGlow} min={0} max={1.4} step={0.05}
          onChange={(v) => setTweak('depthGlow', v)} />

        <TweakSection label="Fondo" />
        <TweakSlider label="Claridad del fondo" value={t.bgLight} min={0} max={1} step={0.05}
          onChange={(v) => setTweak('bgLight', v)} />

        <TweakSection label="Orbes de fondo" />
        <TweakSlider label="Opacidad" value={t.orbOpacity} min={0} max={1} step={0.05}
          onChange={(v) => setTweak('orbOpacity', v)} />
        <TweakSlider label="Escala inicial (arriba)" value={t.orbScaleStart} min={0.3} max={1.8} step={0.1} unit="×"
          onChange={(v) => setTweak('orbScaleStart', v)} />
        <TweakSlider label="Escala final (abajo)" value={t.orbScaleEnd} min={0.6} max={3} step={0.1} unit="×"
          onChange={(v) => setTweak('orbScaleEnd', v)} />

        <TweakSection label="Tarjetas de Tech (activas)" />
        <TweakSlider label="Opacidad de tarjetas" value={t.techOpacity} min={0.3} max={1} step={0.02}
          onChange={(v) => setTweak('techOpacity', v)} />
        <TweakSlider label="Desenfoque de tarjetas" value={t.techBlur} min={0} max={24} step={1} unit="px"
          onChange={(v) => setTweak('techBlur', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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