@props([
    'slidesData' => [], // Array que contiene datos para imágenes y componentes de texto
    'footer' => null,
    'gradient' => true,
    'background' => [
        'url' => null,
        'altImage' => '',
    ],
])
@php
  $gradientClass = $gradient ? 'banner text-white banner-gradient' : 'banner text-white';
  $hasSlides = !empty($slidesData) && is_array($slidesData) && count($slidesData) > 0;
@endphp
<div {{ $attributes->merge(['class' => $gradientClass]) }}>
  {{-- Banner Slider para imágenes y videos --}}
  @if ($hasSlides)
    <div class="banner_swiper overflow-hidden">
      <div class="swiper-wrapper">
        @foreach ($slidesData as $index => $slide)
          <div class="swiper-slide relative">
            {{-- Video Background --}}
            @if (!empty($slide['video']))
              <x-landing.banner-video-slide :video="$slide['video']" :thumbnail="$slide['thumbnail']" />
            @elseif (!empty($slide['image']))
              <x-landing.banner-image-slide :image="$slide['image']" :index="$index" :className="$slide['className'] ?? null" />
            @endif
          </div>
        @endforeach
      </div>
    </div>
  @elseif(!empty($background['url']))
    @php
      // Función para generar la URL de imagen móvil
      $getMobileImageUrl = function ($imageUrl) {
          // Extraer información del path
          $pathInfo = pathinfo($imageUrl);
          $directory = $pathInfo['dirname'];
          $filename = $pathInfo['filename'];
          $extension = $pathInfo['extension'];

          // Generar URL de imagen móvil
          $mobileImageUrl = $directory . '/' . $filename . '-mobile.' . $extension;

          // Verificar si el archivo existe en el sistema de archivos público
          $publicPath = str_replace(asset(''), '', $mobileImageUrl);
          $fullPath = public_path($publicPath);
          return file_exists($fullPath) ? $mobileImageUrl : null;
      };
      // Obtener URL de imagen móvil si existe
      $mobileImageUrl = $getMobileImageUrl($background['url']);
    @endphp
    <picture class="absolute bottom-0 left-0 right-0 top-0 -z-10 h-full w-full hero-picture" title="{!!$background['altImage'] ? $background['altImage'] . " - " . config('company.name') : ""!!}">
      <img src={{ $background['url'] }} alt="{{ $background['altImage'] }}"
        class="{{ $background['className'] ?? '' }} main-hero-banner absolute bottom-0 left-0 right-0 top-0 h-full w-full object-cover object-center"
        fetchpriority="high" />
      @if ($mobileImageUrl)
        <img src="{{ $mobileImageUrl }}" alt="{{ $background['altImage'] }}"
          class="{{ $background['className'] ?? '' }} main-hero-banner absolute bottom-0 left-0 right-0 top-0 block h-full w-full object-cover object-center md:hidden"
          fetchpriority="high" />
      @endif
    </picture>
  @endif

  {{-- Navbar --}}
  <x-landing.header />

  <section class="banner_body flex justify-start pt-6 md:items-center md:pt-0">
    <h2 class="visuallyhidden">Highlights</h2>
    <div class="container relative">
      <div class="banner-text-content-wrapper">
        {{-- Renderizar componentes de texto dinámicos --}}
        @if ($hasSlides)
          @foreach ($slidesData as $index => $slide)
            <div class="banner-slide-text-item flex justify-center md:justify-start"
              data-slide-index="{{ $index }}" style="display: {{ $index === 0 ? 'flex' : 'none' }};">
              {!! $slide['htmlContent'] !!}
            </div>
          @endforeach
        @else
          {{-- Fallback al slot si no hay datos de componentes de texto --}}
          <div class="banner-slide-text-item opacity-100">
            {{ $slot }}
          </div>
        @endif
      </div>
    </div>
  </section>

  <div class="banner__end">
    @if (!empty($footer))
      {{ $footer }}
    @endif
  </div>
</div>