// Reveal. IntersectionObserver-based fade+rise on scroll.
// <Reveal as="div" delay={0} stagger={false} className="...">children</Reveal>
function Reveal({ children, as: Tag = 'div', className = '', delay = 0, stagger = false, threshold = 0.15, once = true, style }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === 'undefined') { setInView(true); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setInView(true);
          if (once) obs.unobserve(entry.target);
        } else if (!once) {
          setInView(false);
        }
      });
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold, once]);

  // If staggering, walk children and add delays
  let kids = children;
  if (stagger && Array.isArray(children)) {
    kids = React.Children.map(children, (child, i) => {
      if (!React.isValidElement(child)) return child;
      const d = (delay || 0) + i * 120;
      const existing = child.props.style || {};
      const inheritedClass = child.props.className || '';
      return React.cloneElement(child, {
        className: `${inheritedClass} reveal ${inView ? 'is-in' : ''}`.trim(),
        style: { ...existing, transitionDelay: `${d}ms` },
      });
    });
    return <Tag ref={ref} className={className} style={style}>{kids}</Tag>;
  }

  return (
    <Tag
      ref={ref}
      className={`reveal ${inView ? 'is-in' : ''} ${className}`.trim()}
      style={{ ...(style || {}), transitionDelay: `${delay}ms` }}
    >
      {children}
    </Tag>
  );
}

window.Reveal = Reveal;