// Reveal-on-scroll wrapper using IntersectionObserver
function Reveal({ children, delay = 0, y = 30, style = {}, as = 'div' }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { setShown(true); obs.disconnect(); }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const Tag = as;
  return (
    <Tag ref={ref} style={{
      ...style,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity 0.9s cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 0.9s cubic-bezier(.2,.7,.2,1) ${delay}ms`,
    }}>
      {children}
    </Tag>
  );
}

// Infinite marquee strip
function Marquee({ children, speed = 40, reverse = false, style = {} }) {
  return (
    <div style={{
      overflow: 'hidden', whiteSpace: 'nowrap', display: 'flex',
      ...style,
    }}>
      <div style={{
        display: 'inline-flex', gap: '2em',
        animation: `${reverse ? 'mqRev' : 'mqFwd'} ${speed}s linear infinite`,
      }}>
        {children}{children}{children}
      </div>
      <style>{`
        @keyframes mqFwd { from { transform: translateX(0) } to { transform: translateX(-33.333%) } }
        @keyframes mqRev { from { transform: translateX(-33.333%) } to { transform: translateX(0) } }
      `}</style>
    </div>
  );
}

window.Reveal = Reveal;
window.Marquee = Marquee;