// Hero — full-bleed video reel background, headline + ctas + trusted marquee

const Hero = ({ headline, subtitle, onNavigate, onPlayReel, trusted, videoId }) => {
  // Native <video> autoplays on all devices (iOS/Android) when muted + playsinline.
  // YouTube iframes don't autoplay on iOS — so we use a local MP4 for all devices.
  const [videoPlaying, setVideoPlaying] = React.useState(false);
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // Create video imperatively — bypasses React JSX muted-attribute bug on iOS Safari.
    const vid = document.createElement("video");
    vid.src = "/assets/hero.mp4";
    vid.loop = true;
    vid.muted = true;                    // JS property
    vid.setAttribute("muted", "");       // HTML attribute (iOS requires both)
    vid.setAttribute("autoplay", "");
    vid.setAttribute("playsinline", ""); // Prevents iOS from going fullscreen
    vid.setAttribute("preload", "auto");

    const onCanPlay = () => { setVideoPlaying(true); };
    vid.addEventListener("canplay", onCanPlay);
    vid.addEventListener("playing", () => setVideoPlaying(true));

    container.appendChild(vid);
    vid.play().catch(() => {});

    const t = setTimeout(() => setVideoPlaying(true), 2000);
    return () => {
      clearTimeout(t);
      vid.removeEventListener("canplay", onCanPlay);
      vid.pause();
      vid.remove();
    };
  }, []);

  const trustedDoubled = [...trusted, ...trusted];
  return (
    <header className="mr-hero-fullbleed" data-screen-label="hero" id="top" data-comment-anchor="hero">
      <div className={"mr-hero-media" + (videoPlaying ? " video-on" : "")} ref={containerRef} />
      {/* Scrim: fully opaque by default → opens when video is confirmed playing */}
      <div className={"mr-hero-scrim" + (videoPlaying ? " is-playing" : "")} />
      <div className="mr-hero-content">
        <div>
          <h1>{headline}</h1>
          <p className="subtitle">{subtitle}</p>
        </div>

        <div className="mr-hero-bottom">
          <div className="mr-hero-ctas">
            <button
              className="mr-pill-light"
              onClick={() => onNavigate("contact")}
              type="button"
            >
              <span>Start a project</span>
              <span style={{ display: "inline-flex", width: 24, height: 24, borderRadius: 999, background: "var(--ink)", color: "#fff", alignItems: "center", justifyContent: "center" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="13 6 19 12 13 18" />
                </svg>
              </span>
            </button>
            <button
              className="mr-pill-ghost"
              onClick={() => onNavigate("work")}
              type="button"
            >
              <span>View work</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <line x1="7" y1="17" x2="17" y2="7" />
                <polyline points="8 7 17 7 17 16" />
              </svg>
            </button>
          </div>

          <div className="mr-trusted-row" style={{ width: "100%", marginTop: 24 }}>
            <span className="label">Trusted by →</span>
            <div className="mr-trusted-marquee">
              <div className="mr-trusted-track">
                {trustedDoubled.map((t, i) => (
                  <span key={i}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

Object.assign(window, { Hero });