@props([
    'hasWinnerStick' => true,
])
{{-- Columna Waterworks --}}
<div class="order-1">
  <ul class="grid-gallery-waterworks flex h-full flex-col">
    <li>
      <p class="title-menu-section">Waterworks</p>
    </li>
    @php
      $items = collect([
          [
              'title' => 'Pools',
              'description' => 'Custom pools built for luxury living',
              'image' => asset('images/menu/gallery/pools.jpg'),
              'href' => route('gallery.show', 'pools'),
          ],
          [
              'title' => 'Spas',
              'description' => 'Relaxing spa designs with style',
              'image' => asset('images/menu/gallery/spas.jpg'),
              'href' => route('gallery.show', 'spas'),
          ],
      ]);
    @endphp
    @foreach ($items 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
    @if ($hasWinnerStick)
      <li class="sticker mt-auto grow justify-end px-4 pb-1 pt-1">
        <div class="h-full place-content-center rounded-br-3xl rounded-tl-3xl !bg-[#1c5b88] !bg-opacity-50 px-6 py-4">
          <picture class="block">
            <source media="(max-width: 768px)" srcset="/img/logos/2025-psn-top-50.png?width=120&height=112&format=webp"
              type="image/webp">
            <img src="{{ asset('images/logos/2025-psn-top-50.svg') }}" alt="Top 50 Builders Logo" loading="lazy"
              class="h-full max-h-28 w-full object-contain">
          </picture>
          <img src="{{ asset('images/logos/2025-psn-top-50-text.svg') }}" alt="Top 50 Builders Text" loading="lazy"
            class="h-full w-full object-contain">
        </div>
      </li>
    @endif
  </ul>
</div>
{{-- Columna Hardscape --}}
<div class="order-2">
  <ul class="grid-gallery-hardscape flex flex-col">
    <li>
      <p class="title-menu-section">Hardscape</p>
    </li>
    @php
      $items = collect([
          [
              'title' => 'Driveways',
              'description' => 'Durable and elegant driveway solutions',
              'image' => asset('images/menu/gallery/driveways.jpg'),
              'href' => route('gallery.show', 'driveways'),
          ],
          [
              'title' => 'Walkways',
              'description' => 'Stylish paths to elevate curb appeal',
              'image' => asset('images/menu/gallery/walkways.jpg'),
              'href' => route('gallery.show', 'walkways'),
          ],
          [
              'title' => 'Patios',
              'description' => 'Outdoor patios designed for comfort',
              'image' => asset('images/menu/gallery/patios.jpg'),
              'href' => route('gallery.show', 'patios'),
          ],
          [
              'title' => 'Outdoor Kitchens',
              'description' => 'Built-in kitchens for outdoor entertaining',
              'image' => asset('images/menu/gallery/outdoor-kitchens.jpg'),
              'href' => route('gallery.show', 'outdoor-kitchens'),
          ],
      ]);
    @endphp
    @foreach ($items 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>
{{-- Columna Features --}}
<div class="order-3">
  <ul class="grid-gallery-features flex flex-col">
    <li>
      <p class="title-menu-section">Features</p>
    </li>
    @php
      $items = collect([
          [
              'title' => 'Fire Features',
              'description' => 'Fire elements for cozy nights',
              'image' => asset('images/menu/gallery/fire-features.jpg'),
              'href' => route('gallery.show', 'fire-elements'),
          ],
          [
              'title' => 'Water Accents',
              'description' => 'Elegant water features for ambiance',
              'image' => asset('images/menu/gallery/water-features.jpg'),
              'href' => route('gallery.show', 'water-accents'),
          ],
      ]);
    @endphp
    @foreach ($items 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
    <li>
      <p class="title-menu-section">Design</p>
    </li>
    @php
      $items = collect([
          [
              'title' => '3D Rendering',
              'description' => 'Visualize your dream project first',
              'image' => asset('images/menu/gallery/3d-rendering.jpg'),
              'href' => route('gallery.show', 'renders'),
          ],
      ]);
    @endphp
    @foreach ($items 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
  </ul>
</div>