/* VideoPlayer.jsx — full-screen modal (sharp, dark, mono labels) */
const { useEffect: usePlayerEffect } = React;

function VideoPlayer({ video, onClose }) {
  usePlayerEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  if (!video) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(15,17,20,0.92)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, animation: "neelFade var(--dur) var(--ease)" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "min(1000px, 100%)" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 16, gap: 16 }}>
          <div>
            <Kicker blue>{video.cat} · {video.date}</Kicker>
            <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 24, color: "var(--fg)", margin: "10px 0 0", lineHeight: 1.12 }}>{video.title}</h3>
          </div>
          <button aria-label="Close video" onClick={onClose} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 40, height: 40, borderRadius: 0, background: "transparent", border: "1px solid var(--border-strong)", color: "var(--fg-2)", cursor: "pointer" }}>
            <Icon name="x" size={20} />
          </button>
        </div>
        <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden", border: "1px solid var(--border-strong)", background: "#000" }}>
          <iframe src={`https://www.youtube.com/embed/${video.id}?rel=0&autoplay=1`} title={video.title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }} />
        </div>
        <p className="timecode" style={{ marginTop: 14, textAlign: "center", color: "var(--fg-4)" }}>INFOCUS NEWS · INFOCUSNEWS.TV</p>
      </div>
    </div>
  );
}

Object.assign(window, { VideoPlayer });