// hero.jsx — Full-bleed video-background hero with a tight statement.
// Uses <video> with a placeholder src; falls back to an animated "reel" of
// brand-tinted frames so the hero always looks alive even without the file.

function Hero({ density }) {
  const videoRef = React.useRef(null);
  const [videoOk, setVideoOk] = React.useState(false);
  const [frame, setFrame] = React.useState(0);

  // Cycling reel used as the fallback "video" — also runs underneath the real
  // video at low opacity so the frame never looks empty during a buffer.
  const reels = [
    { label: "Northstar · Wherever the road ends", year: "2025" },
    { label: "Halen · Everyday, with intent",       year: "2025" },
    { label: "Fieldnote · The quiet productivity app", year: "2024" },
    { label: "Marlow & Co. · A new house of coffee",  year: "2024" },
    { label: "Orbital Health · Care, from here",      year: "2024" },
  ];

  React.useEffect(() => {
    const t = setInterval(() => setFrame((f) => (f + 1) % reels.length), 3400);
    return () => clearInterval(t);
  }, []);

  // Try to play a real reel if one exists; otherwise we quietly use the fallback.
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const onPlay = () => setVideoOk(true);
    const onErr  = () => setVideoOk(false);
    v.addEventListener("playing", onPlay);
    v.addEventListener("error", onErr);
    v.play?.().catch(() => setVideoOk(false));
    return () => {
      v.removeEventListener("playing", onPlay);
      v.removeEventListener("error", onErr);
    };
  }, []);

  const scrollToReel = (e) => {
    e.preventDefault();
    const el = document.getElementById("work");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" });
  };

  return (
    <section className="hero hero-video" id="top">
      {/* ── Background: real video + animated fallback reel ── */}
      <div className="hero-bg" aria-hidden="true">
        <video
          ref={videoRef}
          className="hero-bg-video"
          data-ok={videoOk ? "1" : "0"}
          autoPlay
          muted
          playsInline
          loop
          preload="metadata"
          poster=""
        >
          <source src="assets/reel.mp4" type="video/mp4" />
        </video>

        <div className="hero-bg-reel" data-hidden={videoOk ? "1" : "0"}>
          {reels.map((r, i) => (
            <div
              key={i}
              className="hero-bg-frame"
              data-active={i === frame ? "1" : "0"}
              data-i={i % 4}
            >
              <div className="hero-bg-frame-grad" />
              <div className="hero-bg-frame-grain" />
              <div className="hero-bg-frame-bars" />
            </div>
          ))}
        </div>

        <div className="hero-bg-scrim" />
        <div className="hero-bg-vignette" />
      </div>

      {/* ── The statement (tight) ── */}
      <h1 className="hero-h hero-h-tight">
        <span className="hero-line hero-line-1"><span>Stories</span></span>
        <span className="hero-line hero-line-2"><span>worth</span></span>
        <span className="hero-line hero-line-3"><span className="hero-em">telling</span><span className="hero-dot">.</span></span>
      </h1>

      {/* ── Footer strip: see reel · book a project ── */}
      <div className="hero-foot hero-foot-dark hero-foot-actions">
        <a href="#work" className="hero-foot-cta hero-foot-cta-dark" onClick={scrollToReel}>
          <span>See the reel</span>
          <span aria-hidden="true" className="hero-foot-arrow">↓</span>
        </a>
        <a href="booking.html" className="hero-foot-cta hero-foot-cta-book">
          <span>Book a project</span>
          <span aria-hidden="true" className="hero-foot-arrow">→</span>
        </a>
      </div>
    </section>
  );
}

window.Hero = Hero;