// VideoBg.jsx — full-bleed autoplay/muted/loop background video, Palantir-style.
//
// Usage:
//   <VideoBg src="media/hero.mp4" webm="media/hero.webm" poster="media/hero.jpg" />
//
// Requirements for the file:
//   - MP4, H.264 video + AAC audio (broadest browser support)
//   - MUTED (autoplay requires this) — handled via the muted attr
//   - Aim for 1920×1080, ~6–14 sec loop, 3–8 MB
//     (huge files like 60 MB will play eventually but kill first-paint;
//      ffmpeg recipes are in media/README.md)

const { useState: useVS, useRef: useVR } = React;

function VideoBg({ src, webm, poster }) {
  const [errored, setErrored] = useVS(false);
  const ref = useVR(null);

  if (errored) {
    // Real load error (404, decode failure). Show the poster if we have one,
    // else a subtle stub. We do NOT bail just because the file is slow.
    return (
      <div style={{
        width: "100%", height: "100%",
        background: poster
          ? `#0A0A0A url(${poster}) center/cover no-repeat`
          : "repeating-linear-gradient(45deg, #0c0c0c 0 10px, #141414 10px 20px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--mute)",
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em",
        textTransform: "uppercase",
      }}>
        {!poster && <span>Missing · {src}</span>}
      </div>
    );
  }

  return (
    <video
      ref={ref}
      autoPlay
      muted
      loop
      playsInline
      poster={poster}
      preload="auto"
      onError={() => setErrored(true)}
      style={{
        width: "100%",
        height: "100%",
        objectFit: "cover",
        display: "block",
      }}
    >
      {webm && <source src={webm} type="video/webm" />}
      <source src={src} type="video/mp4" />
    </video>
  );
}

window.VideoBg = VideoBg;