// Drop-in stand-in for the FadingVideo component.
// Same positioning contract; swap this <VideoPlaceholder /> for the real
// <FadingVideo src=... /> later without touching any layout.

const VideoPlaceholder = ({
  variant = "hero",        // "hero" | "capabilities"
  label = "BACKGROUND VIDEO",
  className = "",
  style = {},
}) => {
  // Hero: 120% scale, top-aligned (matches spec).
  // Capabilities: full-bleed inset-0.
  const isHero = variant === "hero";

  const baseClass = isHero
    ? "absolute left-1/2 top-0 -translate-x-1/2 z-0"
    : "absolute inset-0 z-0";

  const baseStyle = isHero
    ? { width: "120%", height: "120%" }
    : { width: "100%", height: "100%" };

  return (
    <div
      className={`${baseClass} ${className} video-placeholder ${
        isHero ? "" : "video-placeholder-cap"
      }`}
      style={{ ...baseStyle, ...style }}
      aria-hidden="true"
    >
      <span className="video-placeholder-tag">{label}</span>
    </div>
  );
};

window.VideoPlaceholder = VideoPlaceholder;