// Shared reveal hook + helper components — IntersectionObserver-driven
function useReveal(opts) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    if (shown) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setShown(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.18, rootMargin: "0px 0px -8% 0px", ...(opts || {}) });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, shown];
}

// <Reveal> wrapper: applies .rv / .rv-in classes
function Reveal({ as: Tag = "div", delay = 0, className = "", children, ...rest }) {
  const [ref, shown] = useReveal();
  const cls = "rv " + (shown ? "rv-in " : "") + className;
  const style = { ...(rest.style || {}), transitionDelay: (delay ? delay + "ms" : undefined) };
  return <Tag ref={ref} className={cls.trim()} {...rest} style={style}>{children}</Tag>;
}

window.useReveal = useReveal;
window.Reveal = Reveal;