@props([
    'eyebrow',
    'title',
    'images' => [],
    'ctaLabel' => 'Schedule A Free Estimate',
    'checklistHeading' => null,
    'checklistItems' => [],
    'checklistColumns' => 3,
    'contentSections' => [],
    'background' => 'bg-deep-2',
])

@php
  // Tailwind necesita las clases completas en el código fuente (no puede generarlas
  // por interpolación en runtime), así que mapeamos count($images) a una clase fija.
  // Breakpoint en md (768px): tablet/desktop ven la grilla; móvil ve el swiper.
  $imageGridClasses = [
      1 => 'md:grid-cols-1',
      2 => 'md:grid-cols-2',
      3 => 'md:grid-cols-3',
      4 => 'md:grid-cols-4',
  ];
@endphp

{{-- Variante v2 de centered-photo-feature: idéntica al original (node 195:453 /
     197:779) pero acepta `contentSections` — bloques {title, body} de texto que se
     insertan entre el slot principal y el checklist-box. Se usa en pool-renovation
     para sumar "Pool Automation" y "Saltwater Pool Systems". También respeta el
     `checklistHeading` de la prop (el v1 tenía el heading quemado). --}}
<section {{ $attributes }} class="py-12 lg:py-20 {{ $background }}">
  <div class="container">
    <div class="mx-auto w-full max-w-3xl">
      <x-home.section-header :eyebrow="$eyebrow" align="center" :hasHyphen="false">
        {!! $title !!}
      </x-home.section-header>
    </div>

    @if (count($images) > 1)
      {{-- Tablet / desktop (≥768px): fila estática pareja. Mismo patrón que About /
           social-proof: el swiper de abajo cubre solo el móvil. Solo con 2+ fotos
           tiene sentido el par grilla/swiper; con 1 sola foto se muestra suelta. --}}
      <div class="{{ $imageGridClasses[count($images)] ?? 'md:grid-cols-3' }} mt-10 hidden gap-4 md:grid">
        @foreach ($images as $image)
          <picture @class(['sm:h-100 block h-64 overflow-hidden', 'is-pending-image' => $image['pending'] ?? false])>
            <img src="{{ $image['image'] }}" alt="{{ $image['alt'] }}" loading="lazy" decoding="async"
              class="h-full w-full object-cover" />
          </picture>
        @endforeach
      </div>

      {{-- Móvil (<768px): swiper (data-photo-feature-swiper → photo-feature-carousel.js). --}}
      <div class="mt-10 md:hidden">
        <div class="swiper" data-photo-feature-swiper>
          <div class="swiper-wrapper">
            @php
              // Swiper desactiva el loop con < 6 slides: duplicamos el set para que
              // el período sea suficiente y no se vea una foto repetida a la vez.
              $slides = count($images) >= 6 ? $images : array_merge($images, $images);
            @endphp
            @foreach ($slides as $image)
              <div class="swiper-slide">
                <picture @class(['block h-64 overflow-hidden', 'is-pending-image' => $image['pending'] ?? false])>
                  <img src="{{ $image['image'] }}" alt="{{ $image['alt'] }}" loading="lazy" decoding="async"
                    class="h-full w-full object-cover" />
                </picture>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    @elseif (count($images) === 1)
      {{-- 1 sola foto: sin swiper (no hay nada que deslizar), imagen ancha suelta. --}}
      <div class="mt-10">
        <picture @class(['sm:h-100 block h-64 overflow-hidden', 'is-pending-image' => $images[0]['pending'] ?? false])>
          <img src="{{ $images[0]['image'] }}" alt="{{ $images[0]['alt'] }}" loading="lazy" decoding="async"
            class="h-full w-full object-cover" />
        </picture>
      </div>
    @endif

    <div class="mt-10 space-y-5 text-left">
      {{ $slot }}
    </div>

    @foreach ($contentSections as $section)
      <div class="mt-10 text-left">
        <h3 class="card-title text-fg font-medium">{!! $section['title'] !!}</h3>
        <p class="text-muted mt-3 text-base font-light leading-relaxed">{!! $section['body'] !!}</p>
      </div>
    @endforeach

    @if (count($checklistItems))
      <p class="text-muted mb-2 mt-10">{{ $checklistHeading ?? 'This can help solve problems like:' }}</p>
      <div class="border-white/8 rounded-lg border p-6 text-left">
        <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 md:gap-x-6 lg:gap-x-8 gap-y-3">
          @foreach ($checklistItems as $item)
            <li class="flex items-center gap-3">
              <span
                class="bg-brand-deep text-fg flex h-5 w-5 flex-none items-center justify-center rounded-full text-[0.6rem] font-semibold">
                <x-lucide-check class="h-3 w-3" />
              </span>
              <span class="text-fg">{{ $item }}</span>
            </li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="mt-8 lg:mt-14 flex justify-center">
      <x-home.cta-buttons :cta-label="$ctaLabel" align="center" color="warm" variant="row" />
    </div>
  </div>
</section>