@props(['title' => '', 'city' => null, 'location' => null])

@php

  $slug = strval($city);
  $slug = strtolower(trim($slug)); // minúsculas
  $slug = ltrim($slug, '/'); // por si viene con "/"
  $slug = str_replace('-', ' ', $slug); // guiones -> espacios


  if ($slug && isset($location['stateCode'])) {
      $query = $slug . ', ' . $location['stateCode'];
  } else {
      // Fallback rápido: convierte "lake-worth" → "Lake Worth, FL"
      $query = ucwords(str_replace('-', ' ', $slug ?: 'Florida')) . ', FL';
  }
  $iframeSrc = 'https://www.google.com/maps?q=' . urlencode($query) . '&output=embed';
@endphp

<div {{ $attributes->merge(['class' => 'container mx-auto']) }}>
  <div class="flex flex-col-reverse lg:flex-row bg-white shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
    <div class="flex-1 w-full lg:max-w-4/10">
      {{-- Mapa de Google gratuito (Embed API) --}}
      <iframe src="{{ $iframeSrc }}" width="100%" height="100%" loading="lazy" style="border:0"
        class="mx-auto w-full outline-none min-h-60">
      </iframe>
    </div>
    <div class="flex-1 p-4 lg:p-6 xl:p-10 2xl:p-14 text-center lg:text-left">
      <h2 class="title-section-blue-variant mb-4">{{ $title }}</h2>
      {{ $slot }}
    </div>
  </div>
</div>