@props([
    'title' => '',
    'description' => '',
    'slides' => [],
])

<div class="mb-6 text-center lg:mb-12 px-4">
  <h2 class="title-section-blue-variant">{{ $title }}</h2>
  @if ($description !== "")
    {{ $description }}
  @endif
</div>

@if (count($slides))
  <!-- Tabs -->
  <ul id="featureTabs" class="relative mx-auto flex flex-wrap justify-between gap-y-6 text-center text-gray-800">
    @foreach ($slides as $index => $slide)
      <li data-slide="{{ $index }}" class="min-w-60 flex-1 cursor-pointer opacity-100 fade-in">
        <div class="group inline-block w-full border-t-4 border-transparent px-4 pb-2 pt-4 transition-colors"
          id="tab-{{ $index }}">
          <h5 class="text-xl font-semibold">{{ $slide['title'] }}</h5>
          <p class="text-base leading-tight">{{ $slide['description'] }}</p>
        </div>
      </li>
    @endforeach
  </ul>
  <div id="featureSwiper" class="swiper">
    <div class="swiper-wrapper pt-4 lg:pt-8">
      @foreach ($slides as $slide)
        <x-services.swiper-features :imageUrl="$slide['imageUrl']" :imageAlt="$slide['imageAlt']" />
      @endforeach
    </div>
    <!-- Pagination dots -->
    <div class="swiper-pagination mt-8 flex justify-center"></div>
  </div>
@endif