/* Hero + Showreel. Exports Hero, ReelModal to window. */

function PlayIcon() {
  return (
    <svg viewBox="0 0 12 14" fill="currentColor" aria-hidden="true">
      <path d="M0 0.8v12.4a.8.8 0 0 0 1.2.7l10.4-6.2a.8.8 0 0 0 0-1.4L1.2.1A.8.8 0 0 0 0 .8Z" />
    </svg>
  );
}

function Hero({ onPlay }) {
  return (
    <header className="hero" id="top" data-screen-label="Hero / Showreel">
      <div className="reel-bg" style={{ overflow: "hidden" }}>
        <iframe
          src="https://player.vimeo.com/video/1082470810?h=749e6febed&background=1&autoplay=1&loop=1&muted=1&autopause=0"
          title="Showreel background loop"
          frameBorder="0"
          allow="autoplay; fullscreen; picture-in-picture"
          referrerPolicy="strict-origin-when-cross-origin"
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            width: "100vw",
            height: "56.25vw",
            minHeight: "100%",
            minWidth: "177.78vh",
            transform: "translate(-50%, -50%) scale(1.08)",
            border: "none",
            opacity: 0.55,
            filter: "blur(7px)",
            pointerEvents: "none"
          }}
        />
      </div>
      <div className="scrim" />
      <div className="hero-corners" aria-hidden="true">
        <i className="c tl"></i><i className="c tr"></i><i className="c bl"></i><i className="c br"></i>
      </div>

      <div className="hero-inner">
        <div className="role-line reveal">
          {ROLE_TAGS.map((r, i) => (
            <React.Fragment key={r}>
              {i > 0 && <span className="sep">/</span>}
              <span>{r}</span>
            </React.Fragment>
          ))}
          <span className="sep">/</span>
          <span>London</span>
        </div>

        <h1 className="reveal">Ibby<br />Onitolo</h1>

        <p className="lede reveal">
          A filmmaker who directs, edits and colours — one story, one pair of hands, start to finish.
        </p>

        <div className="play-row reveal">
          <button className="play-btn" onClick={onPlay} aria-label="Play showreel">
            <span className="ico"><PlayIcon /></span>
            <span className="ptxt">
              <b>Watch the showreel</b>
              <span>Reel 2026 · 02:14</span>
            </span>
          </button>
        </div>
      </div>

      <div className="scroll-cue">
        <span>Scroll — selected work</span>
        <span className="bar" />
      </div>
    </header>
  );
}

function ReelModal({ open, onClose }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    if (open) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <div className={"modal" + (open ? " open" : "")} onClick={onClose}>
      <div className="modal-box" onClick={(e) => e.stopPropagation()}>
        <div className="modal-bar">
          <span className="t">Showreel — Ibby Onitolo</span>
          <button className="modal-close" onClick={onClose}>Close <span>[Esc]</span></button>
        </div>
        <VF>
          <iframe
            className="modal-video"
            src={open ? "https://player.vimeo.com/video/1082470810?h=749e6febed&badge=0&autopause=0&autoplay=1&player_id=0&app_id=58479" : "about:blank"}
            title="Ibby Onitolo — Showreel 2025"
            frameBorder="0"
            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
          />
        </VF>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, ReelModal });