// Wasabil — Reveal on scroll (estilo Mercury)
// Sistema global: cualquier elemento con data-reveal se anima al entrar al viewport.
// Variantes:
//   data-reveal           → fade + slide-up
//   data-reveal="left"    → fade + slide desde la izquierda
//   data-reveal="right"   → fade + slide desde la derecha
//   data-reveal="zoom"    → fade + scale-up suave
// Stagger: data-reveal-stagger en el contenedor → cada hijo aparece con delay.

const { useEffect: useEffectRV } = React;

function RevealRoot() {
  useEffectRV(() => {
    if (typeof window === "undefined") return;

    // Respeta prefers-reduced-motion: muestra todo al toque.
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const allTargets = () => document.querySelectorAll("[data-reveal]:not(.is-inview)");

    if (reduce) {
      allTargets().forEach(el => el.classList.add("is-inview"));
      return;
    }

    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const el = entry.target;
        // Stagger: aplicar delay incremental basado en data-reveal-stagger del padre.
        const parent = el.closest("[data-reveal-stagger]");
        if (parent) {
          const items = Array.from(parent.querySelectorAll("[data-reveal]"));
          const idx = items.indexOf(el);
          if (idx >= 0) {
            const baseDelay = parseInt(parent.dataset.revealStagger, 10) || 80;
            el.style.transitionDelay = `${idx * baseDelay}ms`;
          }
        }
        el.classList.add("is-inview");
        io.unobserve(el);
      });
    }, {
      // Activar cuando el elemento tiene ~12% visible
      threshold: 0.12,
      // Empezar la animación un poco antes de que entre al viewport por abajo
      rootMargin: "0px 0px -8% 0px",
    });

    const observe = () => allTargets().forEach(el => io.observe(el));

    observe();

    // Re-observar nuevos elementos que entren al DOM (e.g., paneles del IntentPicker).
    const mo = new MutationObserver(() => observe());
    mo.observe(document.body, { childList: true, subtree: true });

    return () => {
      io.disconnect();
      mo.disconnect();
    };
  }, []);

  return null;
}

Object.assign(window, { RevealRoot });