// Wraps children in a div that fades in when scrolled into view.
// Respects prefers-reduced-motion via the CSS in shared/styles.css.

function Reveal({ children, delay = 0, style }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => setShown(true), delay);
        io.unobserve(el);
      }
    }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);

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

window.GFX_COMPONENTS = window.GFX_COMPONENTS || {};
window.GFX_COMPONENTS.Reveal = Reveal;