/* global React */
const { useState: useStateR, useRef: useRefR, useEffect: useEffectR } = React;

// Gentle fade-and-rise as the element enters view. Content is visible if JS/observer absent.
const Reveal = ({ children, delay = 0, y = 28, as = 'div', style = {}, ...rest }) => {
  const [show, setShow] = useStateR(false);
  const ref = useRefR(null);
  useEffectR(() => {
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) { setShow(true); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShow(true); io.disconnect(); }
    }, { threshold: 0.18 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} style={{
      opacity: show ? 1 : 0,
      transform: show ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity 800ms cubic-bezier(.16,1,.3,1) ${delay}ms, transform 800ms cubic-bezier(.16,1,.3,1) ${delay}ms`,
      ...style,
    }} {...rest}>{children}</Tag>
  );
};
window.Reveal = Reveal;