/* global React */
// Reveal — IntersectionObserver-driven stagger entrance.
// Wrap children with <Reveal as="div" stagger={50}>...</Reveal>
// or use <Reveal.Item index={i}> for fine control.

function Reveal({ children, as = 'div', className = '', stagger = 60, delay = 0, threshold = 0.12, once = true, ...rest }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === 'undefined') { setSeen(true); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setSeen(true);
          if (once) obs.unobserve(e.target);
        }
      });
    }, { threshold, rootMargin: '0px 0px -40px 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold, once]);

  const Tag = as;
  const items = React.Children.toArray(children).filter(Boolean);
  return (
    <Tag ref={ref} className={`rv ${seen ? 'rv-on' : ''} ${className}`} {...rest}>
      {items.map((c, i) => React.isValidElement(c)
        ? React.cloneElement(c, {
            key: c.key ?? i,
            style: { ...(c.props.style || {}), '--rv-d': `${delay + i * stagger}ms` },
            className: `${c.props.className || ''} rv-item`.trim(),
          })
        : c)}
    </Tag>
  );
}

Object.assign(window, { Reveal });