@props([
    'images' => [
        [
            'url' => '',
            'alt' => '',
            'title' => '',
        ],
    ],
])
@php
  $isCarousel = count($images) > 1;
@endphp
<div class="mb-8 flex w-full flex-wrap gap-0 md:mb-0 lg:flex-nowrap lg:gap-7 xl:gap-12">
  <!-- Image Column -->
  <div class="lg:max-w-1/2 lg:-mt-13 order-2 max-w-full lg:order-1 w-full">
    @if ($isCarousel)
      <!-- Slider main container -->
      <div class="swiper h-full w-full max-w-full max-h-[400px] lg:max-h-none 2xl:max-h-[400px] overflow-hidden loaded-shadow bg-white relative z-30" auto-swiper>
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          @foreach ($images as $image)
            <div class="swiper-slide relative">
              <picture class="block h-full w-full object-cover overflow-hidden lg:absolute top-0 left-0 right-0 bottom-0" title="{!! $image['title'] . ' - ' . config('company.name') !!}">
                <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}" class="h-full w-full object-cover object-center"
                  loading="lazy" decoding="async">
              </picture>
            </div>
          @endforeach
        </div>
        <div class="swiper-pagination"></div>
      </div>
    @else
      @foreach ($images as $image)
        @php
          $titleImage = $image['title'] . ' - ' . config('company.name');
        @endphp
        <picture class="block overflow-hidden loaded-shadow bg-white" title="{!! $titleImage !!}">
          <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}"
            class="aspect-video h-full max-h-[400px] w-full object-cover object-center lg:max-h-none lg:min-w-[500px]"
            loading="lazy" decoding="async">
        </picture>
      @endforeach
    @endif
  </div>
  <!-- Content Column -->
  <div class="order-1 flex-1 lg:order-2 lg:mt-14">
    <h2 class="title-section-blue-variant mb-6 text-center lg:text-left">{{ $title ?? '' }}</h2>
    <p class="mb-6 text-balance text-center text-lg leading-relaxed text-gray-700 lg:mb-0 lg:text-wrap lg:text-left">
      {{ $slot }}
    </p>
  </div>
</div>