@props([
    'projectType' => 'pool',
    'heading' => '',
    'class' => '',
    'autoplay' => false,
    'muted' => true,
    'loop' => true,
    'controls' => false,
])

@php
  use App\Support\ScraperDetector;

  // Determinar el tipo de proyecto y configurar assets
  $videoSrc = match ($projectType) {
      'pavers' => asset('estimates/assets/videos/pavers.mp4'),
      'pool' => asset('estimates/assets/videos/pools.mp4'),
      default => asset('estimates/assets/videos/pools.mp4'),
  };
  $videoOptions = [];
  if ($autoplay) {
      $videoOptions[] = 'autoplay';
  }
  if ($muted) {
      $videoOptions[] = 'muted';
  }
  if ($loop) {
      $videoOptions[] = 'loop';
  }
  if ($controls) {
      $videoOptions[] = 'controls';
  }
  $videoOptions = implode(' ', $videoOptions);

  $posterSrc = match ($projectType) {
      'pavers' => asset('images/others/estimate-paver.jpg'),
      'pool' => asset('images/others/estimate-pool.jpg'),
      default => asset('images/others/estimate-pool.jpg'),
  };

  $altText = match ($projectType) {
      'pavers' => 'Custom Pavers Project',
      'pool' => 'Pool Project',
      default => 'Project',
  };

  // Verificar si es un bot/scraper
  $isBot = ScraperDetector::isBot();
@endphp

@if ($isBot)
  {{-- Contenido estático para bots/scrapers --}}
  <div class="video-container static-fallback {{ $class }}" data-project-type="{{ $projectType }}">
    <picture class="block h-full">
      <img src="{{ $posterSrc }}" alt="{{ $altText }}" class="h-full w-full object-cover object-center"
        loading="lazy">
    </picture>
    @if ($heading)
      <div class="video-overlay">
        <div class="bg-white/50 shadow-md backdrop-blur-lg">
          <div class="container py-7">
            {{ $heading }}
          </div>
        </div>
      </div>
    @endif
  </div>
@else
  {{-- Contenido dinámico para usuarios reales --}}
  <div class="video-container dynamic-content {{ $class }}" data-project-type="{{ $projectType }}"
    data-video-src="{{ $videoSrc }}" data-poster-src="{{ $posterSrc }}">
    {{-- Poster --}}
    <picture class="block h-full absolute top-0 bottom-0 left-0 right-0 w-full z-[2]">
      <img src="{{ $posterSrc }}" alt="{{ $altText }}" class="h-full w-full object-cover object-center"
        loading="lazy">
    </picture>
    {{-- Video Element --}}
    <video class="project-video hidden" poster="{{ $posterSrc }}" preload="metadata" {{ $videoOptions }} playsinline
      data-src="{{ $videoSrc }}" poster="{{ $posterSrc }}" data-project-type="{{ $projectType }}">
      <source data-src="{{ $videoSrc }}" type="video/mp4">
    </video>
    @if ($heading)
      <div class="video-overlay">
        <div class="bg-white/50 shadow-md backdrop-blur-lg">
          <div class="container py-7">
            {{ $heading }}
          </div>
        </div>
      </div>
    @endif
    {{-- Progress Bar --}}
    <div class='w-full absolute bottom-0 right-0 left-0 z-[3]'>
      <div class='h-1.5 w-full overflow-hidden bg-primary/30'>
        <div class='animate-progress w-full h-full bg-primary origin-left-right'></div>
      </div>
    </div>
  </div>
@endif