// Hook that auto-fades sections in on scroll using IntersectionObserver.
// Apply class "reveal" to elements you want to animate.
const useScrollReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) {
      els.forEach(el => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
};

// Wraps children with stagger delays. Each child becomes a reveal element.
const Reveal = ({ children, delay = 0, style, className = '', as: As = 'div', ...rest }) => (
  <As
    className={`reveal ${className}`}
    style={{ transitionDelay: `${delay}ms`, ...style }}
    {...rest}
  >
    {children}
  </As>
);

window.useScrollReveal = useScrollReveal;
window.Reveal = Reveal;