@props([
  'projectType' => 'pool',
  'poster' => null,
  'alt' => '',
  'video' => null,
])

{{-- Video-placeholder portado de Apex (item 4) — SECCIÓN grande full-bleed que
     ocupa su fila del grid (~800px). Mecanismo de carga diferida: el
     <picture><img> (poster) va ABSOLUTE z-2 SOBRE un <video hidden> con la URL en
     data-src (no en src → no descarga). resources/js/video-manager.js observa
     estos contenedores y hace el preload + fade-in, PERO solo si la flag
     VIDEO_PLACEHOLDER_ENABLED está en true (hoy false, ver app.js). Con la flag
     apagada queda únicamente el poster (también sirve de fallback bots/JS off).
     El slot `heading` es la banda de título superpuesta (jerarquía intro chica +
     título gigante, como Apex). Media = assets propios; los videos aún no
     existen, por eso la flag nace apagada y data-src puede venir vacío. --}}
<div
  {{ $attributes->merge(['class' => 'video-display relative h-full w-full overflow-hidden']) }}
  data-project-type="{{ $projectType }}"
  data-poster-src="{{ $poster }}"
  data-video-src="{{ $video }}"
>
  <picture class="absolute inset-0 z-[2] block h-full w-full">
    <img
      src="{{ $poster }}"
      alt="{{ $alt }}"
      loading="lazy"
      decoding="async"
      class="h-full w-full object-cover object-center"
    />
  </picture>

  {{-- Rama diferida: oculta hasta que el manager (flag ON) la cargue. Sin src el
       navegador no descarga nada. --}}
  <video
    class="project-video absolute inset-0 z-[1] hidden h-full w-full object-cover object-center"
    muted
    loop
    playsinline
    preload="none"
    data-src="{{ $video }}"
  ></video>

  {{-- Banda de título superpuesta arriba (equivalente al .video-overlay de Apex),
       adaptada al tema oscuro: superficie translúcida + blur, texto cream. --}}
  @isset($heading)
    <div class="absolute inset-x-0 top-0 z-10">
      <div class="bg-surface/55 shadow-md backdrop-blur-lg">
        <div class="container py-7">
          {{ $heading }}
        </div>
      </div>
    </div>
  @endisset
</div>