// Showreel hero — full-bleed YouTube video cycling through all featured projects
const { useEffect: useEffectH, useState: useStateH, useRef: useRefH } = React;

const CYCLE_INTERVAL = 15000; // 15 seconds per video

function Clock() {
  const [t, setT] = useStateH(() => new Date());
  useEffectH(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const opts = { timeZone: "Europe/Berlin", hour: "2-digit", minute: "2-digit", hour12: false };
  return <span className="mono">{t.toLocaleTimeString("en-GB", opts)} BER</span>;
}

function Hero({ projects, activeIdx, setActiveIdx }) {
  const [muted, setMuted] = useStateH(true);
  const [startTime, setStartTime] = useStateH(0);
  const [cycleKey, setCycleKey] = useStateH(0);
  const iframeRef = useRefH(null);

  // Auto-cycle through projects, random start time each rotation
  useEffectH(() => {
    const id = setInterval(() => {
      setActiveIdx(i => (i + 1) % projects.length);
      setStartTime(Math.floor(Math.random() * 40));
      setCycleKey(k => k + 1);
    }, CYCLE_INTERVAL);
    return () => clearInterval(id);
  }, [projects.length]);

  const toggleMute = () => {
    const next = !muted;
    setMuted(next);
    if (iframeRef.current) {
      iframeRef.current.contentWindow.postMessage(
        JSON.stringify({ event: "command", func: next ? "mute" : "unMute", args: "" }), "*"
      );
    }
  };

  const current = projects[activeIdx];

  return (
    <section className="hero-reel" data-screen-label="01 Hero">
      {/* Full-bleed background video — key forces remount on project change */}
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "#000" }}>
        <iframe
          key={`${current.youtube}-${cycleKey}`}
          ref={iframeRef}
          className="reel-video-frame"
          src={`https://www.youtube.com/embed/${current.youtube}?autoplay=1&mute=${muted ? 1 : 0}&controls=0&loop=1&playlist=${current.youtube}&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&vq=hd1080&start=${startTime}`}
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: "100vw",
            height: "56.25vw",
            minHeight: "100%",
            minWidth: "177.78vh",
            border: "none",
            pointerEvents: "none",
          }}
          allow="autoplay; fullscreen"
          allowFullScreen
        />
        <div className="reel-grain" />
        <div className="reel-vignette" />
      </div>

      {/* HUD */}
      <div className="reel-hud">
        <div className="hud-tl mono">
          <div>BERND&nbsp;MANTZ</div>
          <div>DIRECTING&nbsp;DP</div>
        </div>

        <div className="hud-tr mono">
          <div><Clock /></div>
          <div>BERLIN</div>
        </div>

        <div className="hud-bl mono">
          <button
            className="hud-btn"
            onClick={toggleMute}
            data-cursor="link"
            data-cursor-label={muted ? "UNMUTE" : "MUTE"}
          >
            <span className={`hud-eq ${muted ? "" : "is-on"}`}>
              <span /><span /><span /><span />
            </span>
            <span>{muted ? "MUTED" : "SOUND ON"}</span>
          </button>
        </div>

        <div className="hud-bc">
          <div className="hud-scroll mono">
            <span>SCROLL</span>
            <span className="scroll-line" />
          </div>
        </div>

        <div className="hud-br mono">
          <div>{current.title.toUpperCase()}</div>
          <div>{current.client.toUpperCase()}&nbsp;·&nbsp;{current.year}</div>
        </div>

        {/* tiny project ticker */}
        <div className="hud-ticker mono">
          {projects.map((p, k) => (
            <span
              key={p.id}
              className={`hud-tick-item${k === activeIdx ? " is-active" : ""}`}
              onClick={() => { setActiveIdx(k); setStartTime(0); setCycleKey(c => c + 1); }}
              data-cursor="link"
              style={{ cursor: "none" }}
            >
              <span className="tick-id">{p.id}</span>
              <span className="tick-title">{p.title}</span>
              <span className="tick-year">{p.year}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;