// Activa Soluciones — Reveal wrapper
// Aplica un efecto de entrada al hacer scroll. Usa IntersectionObserver.
// from="up" | "right" | "left" | "down"
// delay en ms (útil para staggers en grupos de tarjetas)

const Reveal = ({ children, from = 'up', delay = 0, className = '', as: Tag = 'div' }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const t = setTimeout(() => setShown(true), delay);
          io.disconnect();
          return () => clearTimeout(t);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(node);
    return () => io.disconnect();
  }, [delay]);

  return (
    <Tag ref={ref} className={`reveal reveal-${from} ${shown ? 'in' : ''} ${className}`}>
      {children}
    </Tag>
  );
};

// Inject the shared CSS once
(function injectRevealCSS() {
  if (document.getElementById('reveal-styles')) return;
  const style = document.createElement('style');
  style.id = 'reveal-styles';
  style.textContent = `
    .reveal {
      opacity: 0;
      transition: opacity 720ms cubic-bezier(.2,.8,.2,1), transform 720ms cubic-bezier(.2,.8,.2,1);
      will-change: opacity, transform;
    }
    .reveal-up    { transform: translateY(32px); }
    .reveal-down  { transform: translateY(-32px); }
    .reveal-right { transform: translateX(64px); }
    .reveal-left  { transform: translateX(-64px); }
    .reveal.in    { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
  `;
  document.head.appendChild(style);
})();