import { useEffect } from 'react';

/**
 * Observes all `.scroll-reveal` elements in the DOM and adds the `revealed`
 * class when they scroll into view. Works with the stagger-1 … stagger-10
 * utility classes defined in index.css for sequenced entrance animations.
 *
 * Call once at the top of a lesson component:
 *   useScrollReveal();
 */
export default function useScrollReveal() {
  useEffect(() => {
    const sel = [
      '.scroll-reveal:not(.revealed)',
      '.scroll-reveal-left:not(.revealed)',
      '.scroll-reveal-right:not(.revealed)',
      '.scroll-reveal-scale:not(.revealed)',
    ].join(',');
    const els = document.querySelectorAll(sel);
    if (!els.length) return;

    const obs = new IntersectionObserver(
      entries =>
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('revealed');
            obs.unobserve(e.target);
          }
        }),
      { threshold: 0.12, rootMargin: '0px 0px -60px 0px' },
    );

    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}