@props([
    // Servicio de contexto (App\Enums\ServiceItem) o null. Define el MODO:
    //   null              → home: ciudades como TEXTO PLANO (no hay servicio para linkear).
    //   ServiceItem       → página de servicio: ciudades como LINKS a /<servicio>-<ciudad>.
    'service' => null,
    // Ciudad actual (string) o null. Solo en páginas servicio×localidad: esa ciudad
    // se OCULTA de la lista (nada de self-link). En home/general va null → no oculta.
    'currentCity' => null,
])

@php
  use Illuminate\Support\Str;

  // Ciudades por condado desde config/company.php (service_areas — fuente única).
  // En páginas de localidad se oculta la ciudad actual (interlinking sin self-link).
  $filterCurrent = fn (array $cities) => $currentCity
      ? array_values(array_filter($cities, fn (string $c) => $c !== $currentCity))
      : $cities;

  $palmBeach = $filterCurrent(config('company.service_areas.palm_beach'));
  $broward = $filterCurrent(config('company.service_areas.broward'));

  // La partición de Palm Beach en 3 columnas es PRESENTACIÓN de esta vista (Figma):
  // chunks de ~1/3 sobre la lista (ya filtrada). Broward va en 1 columna.
  $palmBeachCols = array_chunk($palmBeach, (int) ceil(count($palmBeach) / 3));
@endphp

{{-- Service Areas: única sección con paleta CÁLIDA (warm-surface). Columnas de
     ciudades por condado + mapa de Florida decorativo.

     3 MODOS (por la prop $service):
     - Home (service=null): ciudades como texto plano.
     - Página de servicio: ciudades como links a la derivación servicio×ciudad.
     - Página servicio×localidad: links a las OTRAS ciudades del mismo servicio
       (la actual se oculta), y toda la sección se apaga con el flag de config
       company.show_service_areas_on_locality_pages (=false → no se renderiza). --}}
<section class="bg-warm-surface relative overflow-hidden">
  <div class="container relative z-10 grid grid-cols-12">
    <div class="col-span-12 lg:col-span-8 py-12 lg:py-20">
      <p class="text-honey text-xs font-semibold uppercase tracking-[0.22em]">Locally Focused ——</p>
      <h2 class="section-title text-cream mt-4 font-serif relative z-30">
        Service Areas.<br />
        <span class="text-honey italic">Palm Beach &amp; North Broward.</span>
      </h2>

      <div class="mt-12 grid grid-cols-1 gap-10 lg:grid-cols-[2fr_1fr]">
        {{-- Palm Beach --}}
        <div>
          <h3 class="text-honey text-sm font-bold uppercase tracking-wide">Palm Beach</h3>
          <div class="mt-5 grid grid-cols-2 gap-x-8 gap-y-2 sm:grid-cols-3">
            @foreach ($palmBeachCols as $col)
              <ul class="space-y-2">
                @foreach ($col as $city)
                  <li class="text-cream/90 text-base">
                    @if ($service)
                      <a href="{{ $service->localityUrl($city) }}" class="hover:text-honey transition">{{ $city }}</a>
                    @else
                      {{ $city }}
                    @endif
                  </li>
                @endforeach
              </ul>
            @endforeach
          </div>
        </div>

        {{-- Broward --}}
        <div>
          <h3 class="text-honey text-sm font-bold uppercase tracking-wide">Broward</h3>
          <ul class="mt-5 space-y-2">
            @foreach ($broward as $city)
              <li class="text-cream/90 text-base">
                @if ($service)
                  <a href="{{ $service->localityUrl($city) }}" class="hover:text-honey transition">{{ $city }}</a>
                @else
                  {{ $city }}
                @endif
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
    <picture class="absolute right-4 w-50 lg:w-auto lg:static lg:col-span-4 z-10 flex flex-col items-center justify-center opacity-70">
      {{-- Mapa de Florida: decorativo, alineado a la derecha --}}
      <img src="{{ Vite::asset('resources/images/home/florida-map.png') }}" alt="Florida map"
        class="pointer-events-none w-full h-full object-contain object-top" />
    </picture>
  </div>
</section>