@props([
    'hasBooking' => true,
])
{{-- Column Pools --}}
<div class="order-1">
  <ul class="grid grid-service-pools h-full grid-rows-[auto_repeat(5,1fr)]">
    <li>
      <p class="title-menu-section">Pools</p>
    </li>
    @php
      $poolItems = collect([
          [
              'title' => 'Pool Builder',
              'description' => 'High quality custom pool construction',
              'image' => asset('images/menu/services/pool-builder.jpg'),
              'href' => route('services.pools.builder'),
          ],
          [
              'title' => 'Pool Design',
              'description' => 'Unique designs adapted to your space and style',
              'image' => asset('images/menu/services/pool-design.jpg'),
              'href' => route('services.pools.design'),
          ],
          [
              'title' => 'Pool Remodeling',
              'description' => 'Renovation and modernization of existing swimming pools',
              'image' => asset('images/menu/services/pool-remodeling.jpg'),
              'href' => route('services.pools.remodeling'),
          ],
          [
              'title' => 'Commercial Pools',
              'description' => 'Solutions for commercial and residential projects',
              'image' => asset('images/menu/services/commercial-pools.jpg'),
              'href' => route('services.pools.commercial'),
          ],
          [
              'title' => 'Pool Decks',
              'description' => 'Customized pool decks and pool areas',
              'image' => asset('images/menu/services/pool-decks.jpg'),
              'href' => route('services.pools.decks'),
          ],
      ]);
    @endphp
    @foreach ($poolItems as $item)
      <li>
        <a href="{{ $item['href'] }}" class="flex h-full w-full items-center gap-4 px-4 py-1 hover:bg-white/10">
          <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" loading="lazy"
            class="rounded-xs aspect-video w-full max-w-36 shrink-0 bg-cover bg-center object-cover" width="150"
            height="100">
          <p class="flex flex-col gap-1 text-xl font-light text-white">
            <span>{{ $item['title'] }}</span>
            <span class="text-sm text-white/70">{{ $item['description'] }}</span>
          </p>
        </a>
      </li>
    @endforeach
  </ul>
</div>
{{-- Column Pavers --}}
<div class="order-2">
  <ul class="grid grid-service-pavers h-full grid-rows-[auto_repeat(5,1fr)]">
    <li>
      <p class="title-menu-section">Pavers</p>
    </li>
    @php
      $paverItems = collect([
          [
              'title' => 'Brick Pavers',
              'description' => 'Durable and elegant brick pavers',
              'image' => asset('images/menu/services/brick-pavers.jpg'),
              'href' => route('services.pavers.brick'),
          ],
          [
              'title' => 'Patios & Walkways',
              'description' => 'Functional and attractive outdoor spaces',
              'image' => asset('images/menu/services/patio-walkways.jpg'),
              'href' => route('services.pavers.patios-walkways'),
          ],
          [
              'title' => 'Paver Driveways',
              'description' => 'Sturdy and stylish vehicle entrances',
              'image' => asset('images/menu/services/paver-driveways.jpg'),
              'href' => route('services.pavers.driveways'),
          ],
          [
              'title' => 'Porcelain Pavers',
              'description' => 'High quality porcelain floor tiles',
              'image' => asset('images/menu/services/porcelain-paver.jpg'),
              'href' => route('services.pavers.porcelain'),
          ],
          [
              'title' => 'Paver Sealing & Repair',
              'description' => 'Professional maintenance and repair about repairing damaged bricks',
              'image' => asset('images/menu/services/paver-sealing-repair.jpg'),
              'href' => route('services.pavers.sealing-repair'),
          ],
      ]);
    @endphp
    @foreach ($paverItems as $item)
      <li>
        <a href="{{ $item['href'] }}" class="flex h-full w-full items-center gap-4 px-4 py-1 hover:bg-white/10">
          <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" loading="lazy"
            class="rounded-xs aspect-video w-full max-w-36 shrink-0 bg-cover bg-center object-cover">
          <p class="flex flex-col gap-1 text-xl font-light text-white">
            <span>{{ $item['title'] }}</span>
            <span class="text-sm text-white/70">{{ $item['description'] }}</span>
          </p>
        </a>
      </li>
    @endforeach
  </ul>
</div>
{{-- Column Features --}}
<div class="order-3">
  <ul class="grid grid-service-features h-full grid-rows-[auto_repeat(5,1fr)]">
    <li>
      <p class="title-menu-section">Features</p>
    </li>
    @php
      $featureItems = collect([
          [
              'title' => 'Outdoor Living',
              'description' => 'Outdoor spaces to enjoy all year round',
              'image' => asset('images/menu/services/outdoor-living.jpg'),
              'href' => route('services.features.outdoor-living'),
          ],
          [
              'title' => 'Retaining Walls',
              'description' => 'Functional and decorative retaining walls',
              'image' => asset('images/menu/services/retaining-walls.jpg'),
              'href' => route('services.features.retaining-walls'),
          ],
      ]);
    @endphp
    @foreach ($featureItems as $item)
      <li>
        <a href="{{ $item['href'] }}" class="flex h-full w-full items-center gap-4 px-4 py-1 hover:bg-white/10">
          <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" width="150" height="100" loading="lazy"
            class="rounded-xs aspect-video w-full max-w-36 shrink-0 bg-cover bg-center object-cover">
          <p class="flex flex-col gap-1 text-xl font-light text-white">
            <span>{{ $item['title'] }}</span>
            <span class="text-sm text-white/70">{{ $item['description'] }}</span>
          </p>
        </a>
      </li>
    @endforeach
    @if ($hasBooking)
      <li class="row-span-2 row-start-5 -mb-2 pl-4">
        <x-landing.menu.book-consultation-card />
      </li>
    @endif
  </ul>
</div>
{{ $slot }}