@php
  $items = collect([
      [
          'title' => 'About Us',
          'description' => 'Who we are',
          'href' => route('about'),
      ],
      [
          'title' => 'Reviews',
          'description' => 'What clients are saying',
          'href' => route('reviews'),
      ],
      [
          'title' => 'Warranty',
          'description' => 'Our project protection plan',
          'href' => route('warranty'),
      ],
      /* [
          'title' => 'Services Areas',
          'description' => 'Where we serve',
          'href' => route('services.areas'),
      ], */
      [
          'title' => 'Elevated Living',
          'description' => 'Read our lifestyle blog',
          'href' => route('blog.index'),
      ],
      [
          'title' => 'Careers',
          'description' => 'Join our team',
          'href' => route('careers.index'),
          'class' => 'nav-item__career-about-menu',
      ],
  ]);
@endphp
<ul class="col-span-full grid grid-cols-1 md:grid-cols-3">
  @foreach ($items as $item)
    <li class="{{ $item['class'] ?? '' }} w-full">
      <a href="{{ $item['href'] }}"
        class="flex h-full w-full items-center justify-center gap-4 p-4 hover:bg-white/10 lg:justify-start">
        <p class="flex flex-col items-center gap-1 text-xl font-light text-white lg:items-start">
          <span class="block leading-tight">{{ $item['title'] }}</span>
          <span class="text-sm text-white/70">{{ $item['description'] }}</span>
        </p>
      </a>
    </li>
  @endforeach
  <li class="col-span-1 col-start-3 col-end-4 row-start-1 row-end-3 w-full min-h-60">
    <a href="{{ route('pool-school.index') . '#pool-school' }}"
      class="flex h-full w-full flex-col items-center justify-center !gap-0 hover:bg-white/10 lg:justify-start p-4">
      <picture class="relative flex w-full flex-1">
        <img src="{{ asset('storage/videos/pool-school/pool-school-menu.jpg') }}" alt="Pool School" class="absolute top-0 bottom-0 left-0 right-0 w-full h-full object-cover object-top">
      </picture>
      <p class="flex flex-shrink-0 flex-col items-center gap-1 text-xl font-light text-white lg:items-start w-full mt-2">
        <span class="block leading-tight">Pool School</span>
        <span class="text-sm text-white/70">Learn how to maintain your pool</span>
      </p>
    </a>
  </li>
</ul>