@props([
    // Título del bloque (ej. "Elevate Your Boca Raton Outdoor Space with a Custom Pool").
    'title' => '',
    // Ciudad a centrar en el mapa. Acepta nombre canónico ("Boca Raton") o slug
    // ("boca-raton"); ambos se normalizan a la query de Google Maps.
    'city' => null,
    // Estado para acotar la búsqueda del mapa. FL por defecto (toda el área de servicio).
    'state' => 'FL',
    // Párrafos del bloque (array de strings). Se renderizan a la izquierda, bajo el título.
    'paragraphs' => [],
])

@php
  // Mecanismo del mapa PORTADO de apex (components/landing/maps/services.blade.php):
  // el embed se DERIVA del nombre de la ciudad + estado, sin API key ni data de
  // coordenadas por ciudad. "Boca Raton"/"boca-raton" → "boca raton, FL" → iframe.
  $normalized = str_replace('-', ' ', ltrim(strtolower(trim((string) $city)), '/'));
  $query = trim($normalized) !== ''
      ? ucwords($normalized) . ', ' . $state
      : 'Florida, ' . $state;
  $iframeSrc = 'https://www.google.com/maps?q=' . urlencode($query) . '&output=embed';
@endphp

{{-- Bloque servicio×localidad: encabezado + párrafo de la ciudad a la IZQUIERDA,
     mapa de Google Maps de la ciudad a la DERECHA. Reemplaza a la sección Service
     Areas en las páginas de localidad. Misma paleta cálida (warm-surface) que
     service-locations para conservar "el color que buscamos".
     Nota: apex pone el mapa a la izquierda (flex-col-reverse); acá va a la derecha. --}}
<section class="bg-warm-surface relative overflow-hidden">
  <div class="container relative z-10 grid grid-cols-1 items-stretch gap-10 py-12 lg:grid-cols-2 lg:gap-14 lg:py-20">
    {{-- Content (izquierda) --}}
    <div class="flex flex-col justify-center">
      <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">
        {!! $title !!}
      </h2>

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

    {{-- Mapa de Google (derecha). Embed gratuito derivado del nombre de la ciudad. --}}
    <div class="min-h-72 overflow-hidden rounded-xl lg:min-h-full">
      <iframe src="{{ $iframeSrc }}" title="Map of {{ $query }}" width="100%" height="100%" loading="lazy"
        style="border:0" class="h-full min-h-72 w-full outline-none"></iframe>
    </div>
  </div>
</section>