// Looping brand motion-graphic, placed right above the Footer. Paused via
// IntersectionObserver while scrolled out of view (same lesson as the
// mobile-scroll-lag fixes elsewhere on this site — no reason to keep a
// 5MB video decoding/looping in the background when it's off-screen).
// Respects prefers-reduced-motion: never autoplays for that group, and
// shows a plain play button instead.
function LogoVideo() {
  const videoRef = React.useRef(null);
  const [reduced, setReduced] = React.useState(false);
  const [playing, setPlaying] = React.useState(false);

  React.useEffect(() => {
    setReduced(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
  }, []);

  React.useEffect(() => {
    const el = videoRef.current;
    if (!el || reduced) return;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) { el.play().catch(() => {}); setPlaying(true); }
      else { el.pause(); setPlaying(false); }
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, [reduced]);

  const togglePlay = () => {
    const el = videoRef.current;
    if (!el) return;
    if (el.paused) { el.play().catch(() => {}); setPlaying(true); }
    else { el.pause(); setPlaying(false); }
  };

  return (
    <section className="section container logo-video-section" data-screen-label="Logo Reveal">
      <div className="logo-video-frame" onClick={togglePlay}>
        <video
          ref={videoRef}
          className="logo-video"
          src="assets/logo-reveal.mp4?v=3"
          muted
          loop
          playsInline
          preload="metadata"
          autoPlay={!reduced}
          aria-label="Arnel Biscarra animated logo reveal"
        ></video>
        {!playing && (
          <div className="logo-video-play" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg>
          </div>
        )}
      </div>
    </section>
  );
}

window.LogoVideo = LogoVideo;