@props([
    'areas' => [],
    'route' => null,
    'currentSlug' => null,
    'hoverLinks' => 'hover:text-primary',
])
@php
  $matchClass = 'font-semibold';
  $matchClassAlt = 'text-(--color-green)';
  if ($hoverLinks !== 'hover:text-primary') {
      $matchClass = $matchClassAlt . ' font-semibold';
  }
  ksort($areas);
@endphp
<div class="container mx-auto">
  <div class="relative grid grid-cols-1 items-center gap-8 md:grid-cols-[1fr_auto]">
    <!-- Left Column: Text and Locations -->
    <div class="z-10">
      <div class="relative -mt-12 grid grid-cols-4 overflow-hidden pt-12 md:mt-0 md:pt-0">
        {{-- Title --}}
        <div class="relative z-10 col-span-3 flex items-center md:col-span-full">
          {{ $slot }}
        </div>
        <div class="col-span-full block md:hidden">
          <picture class="absolute bottom-0 right-0 top-0 flex h-full w-full max-w-[230px] items-center opacity-40">
            <img src="{{ asset('images/others/florida-map.png') }}" alt="Florida Map"
              class="block h-full w-full object-contain object-right" loading="lazy" height="110" width="140">
          </picture>
        </div>
      </div>
      <ul class="columns-3 gap-x-6 lg:columns-4">
        @foreach ($areas as $slug => $area)
          @if ($slug === 'stuart')
            <li>
              <a href="{{ route('services.pools.builder.area.new') }}"
                class="{{ $hoverLinks }} {{ ($currentSlug ?? '') === $slug ? $matchClass : '' }}">
                Stuart
              </a>
            </li>
          @else
            <li>
              <a href="{{ $route ? route($route, ['areaSlug' => $slug]) : '#' }}"
                class="{{ $hoverLinks }} {{ ($currentSlug ?? '') === $slug ? $matchClass : '' }}">
                {{ $area['city'] }}
              </a>
            </li>
          @endif
        @endforeach
      </ul>
    </div>
    <!-- Right Column: Florida Map -->
    <div class="absolute inset-0 hidden justify-center md:static md:inset-auto md:flex md:justify-end md:after:hidden">
      <div class="relative flex max-w-md items-center justify-center opacity-40 md:h-full md:opacity-100">
        <!-- Florida Map Outline -->
        <picture class="flex items-center md:h-full">
          <img src="{{ asset('images/others/florida-map.png') }}" alt="Florida Map"
            class="block w-full max-w-[300px] md:h-full lg:max-w-[370px]" loading="lazy" height="315" width="370">
        </picture>
      </div>
    </div>
  </div>
</div>