/* global React */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }),
      { threshold: 0.15 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`reveal ${vis ? "in" : ""} ${className}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </Tag>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg className="btn__arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M7 17 L17 7 M8 7 h9 v9" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Marquee({ items }) {
  const row = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {row.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

Object.assign(window, { Reveal, Arrow, Marquee });