@props([
    // Eyebrow sobre el título.
    'eyebrow' => 'Neighborhoods We Serve',
    // Título del bloque (HTML: la ciudad va envuelta en un span de énfasis).
    'title' => '',
    // Párrafos introductorios (array de strings HTML).
    'paragraphs' => [],
    // Comunidades de la ciudad (máx. 6): [['name', 'type', 'description'], …].
    'communities' => [],
])

{{-- Bloque servicio×localidad: comunidades de la ciudad, cada una con su texto
     del servicio adaptado. Encabezado + intro arriba; grilla de tarjetas debajo
     (tablet/desktop) o swiper (móvil, mismo data-photo-feature-swiper de las
     filas de fotos: 6 tarjetas con texto no se apilan en 1 columna). Fondo
     surface-2 para separarse del bloque de mapa (cálido) y de Reviews (surface). --}}
<section {{ $attributes->merge(['class' => 'bg-surface-2 py-12 lg:py-20']) }}>
  <div class="container">
    <div class="w-full">
      <x-home.section-header :eyebrow="$eyebrow">
        {!! $title !!}
      </x-home.section-header>

      @foreach ($paragraphs as $paragraph)
        <p @class(['text-muted text-base font-light leading-relaxed', 'mt-6' => $loop->first, 'mt-4' => !$loop->first])>
          {!! $paragraph !!}
        </p>
      @endforeach
    </div>

    {{-- Tablet / desktop (≥768px): grilla. 3 columnas recién en xl: con el
         padding lg:px-20 del .container, a 1024px cada tarjeta deja ~230px de
         texto (apretado); a 1280px, ~315px. --}}
    <ul class="mt-10 hidden gap-4 md:grid md:grid-cols-2 xl:grid-cols-3">
      @foreach ($communities as $community)
        <li class="h-full">
          <x-home.locality-community-card :community="$community" />
        </li>
      @endforeach
    </ul>

    {{-- Móvil (<768px): swiper (data-photo-feature-swiper → photo-feature-carousel.js). --}}
    <div class="mt-10 md:hidden">
      {{-- 7s (no los 4s por defecto): da tiempo a leer una tarjeta con texto. --}}
      <div class="swiper" data-photo-feature-swiper data-autoplay-delay="7000">
        <div class="swiper-wrapper">
          @php
            // Swiper desactiva el loop con < 6 slides: duplicamos el set igual
            // que centered-photo-feature.
            $slides = count($communities) >= 6 ? $communities : array_merge($communities, $communities);
          @endphp
          @foreach ($slides as $community)
            <div class="swiper-slide h-auto!">
              <x-home.locality-community-card :community="$community" />
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>