@props([
    'activeColorClass' => 'border-[#6d5419]',
])

@php
  $currentPath = request()->route('path');
  $classes = 'border-b-4 px-2 pb-3 pt-2 transition-colors';
@endphp

<div
  {{ $attributes->merge(['class' => 'flex md:flex-wrap md:items-center gap-x-4 md:gap-x-8 gap-y-2 text-white gallery-footer-links justify-between md:justify-start relative']) }}>
  {{-- Item 1 --}}
  <div class="group-row flex min-w-24 flex-col items-start">
    <span class="accent px-2 text-sm font-semibold">WATERWORKS</span>
    <div class="link-items g-0 flex w-full items-center justify-between uppercase">
      <a href="{{ route('gallery.show', ['path' => 'pools']) }}"
        class="{{ $currentPath === 'pools' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Pools</a>
      <a href="{{ route('gallery.show', ['path' => 'spas']) }}"
        class="{{ $currentPath === 'spas' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Spas</a>
    </div>
  </div>
  {{-- Item 2 --}}
  <div class="group-row flex min-w-24 flex-col items-start">
    <span class="accent px-2 text-sm font-semibold">HARDSCAPE</span>
    <div class="link-items g-0 flex w-full items-center justify-between uppercase">
      <a href="{{ route('gallery.show', ['path' => 'driveways']) }}"
        class="{{ $currentPath === 'driveways' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Driveways</a>
      <a href="{{ route('gallery.show', ['path' => 'walkways']) }}"
        class="{{ $currentPath === 'walkways' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Walkways</a>
      <a href="{{ route('gallery.show', ['path' => 'patios']) }}"
        class="{{ $currentPath === 'patios' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Patios</a>
      <a href="{{ route('gallery.show', ['path' => 'outdoor-kitchens']) }}"
        class="{{ $currentPath === 'outdoor-kitchens' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Outdoor
        Kitchens</a>
    </div>
  </div>
  {{-- Item 3 --}}
  <div class="group-row flex min-w-24 flex-col items-start">
    <span class="accent px-2 text-sm font-semibold">FEATURES</span>
    <div class="link-items g-0 flex w-full items-center justify-between uppercase">
      <a href="{{ route('gallery.show', ['path' => 'fire-elements']) }}"
        class="{{ $currentPath === 'fire-elements' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Fire</a>
      <a href="{{ route('gallery.show', ['path' => 'water-accents']) }}"
        class="{{ $currentPath === 'water-accents' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">Water</a>
    </div>
  </div>
  {{-- Item 4 --}}
  <div class="group-row flex min-w-24 flex-col items-start">
    <span class="accent px-2 text-sm font-semibold">DESIGN</span>
    <div class="link-items g-0 flex w-full items-center justify-between uppercase">
      <a href="{{ route('gallery.show', ['path' => 'renders']) }}"
        class="{{ $currentPath === 'renders' ? "$activeColorClass active" : 'border-b-transparent' }} {{ $classes }}">3D
        Rendering</a>
    </div>
  </div>
  {{-- Mobile Native Select with groups --}}
  <div class="text-primary flex md:hidden pb-3 flex-none ml-auto">
    <select name="select-gallery-links" id="select-gallery-links" class="select-gallery-links">
      <option value="" selected hidden>Change Gallery</option>
      <optgroup label="Waterworks">
        <option value="pools" {{ $currentPath === 'pools' ? 'hidden' : '' }}>Pools</option>
        <option value="spas" {{ $currentPath === 'spas' ? 'hidden' : '' }}>Spas</option>
      </optgroup>
      <optgroup label="Hardscape">
        <option value="driveways" {{ $currentPath === 'driveways' ? 'hidden' : '' }}>Driveways</option>
        <option value="walkways" {{ $currentPath === 'walkways' ? 'hidden' : '' }}>Walkways</option>
        <option value="patios" {{ $currentPath === 'patios' ? 'hidden' : '' }}>Patios</option>
        <option value="outdoor-kitchens" {{ $currentPath === 'outdoor-kitchens' ? 'hidden' : '' }}>Outdoor
          Kitchens</option>
      </optgroup>
      <optgroup label="Features">
        <option value="fire-elements" {{ $currentPath === 'fire-elements' ? 'hidden' : '' }}>Fire</option>
        <option value="water-accents" {{ $currentPath === 'water-accents' ? 'hidden' : '' }}>Water</option>
      </optgroup>
      <optgroup label="Design">
        <option value="renders" {{ $currentPath === 'renders' ? 'hidden' : '' }}>3D Rendering</option>
      </optgroup>
    </select>
  </div>
</div>
<script>
  // Inline script para este componente específico
  document.addEventListener('DOMContentLoaded', function(event) {
    event.preventDefault();
    const select = document.getElementById('select-gallery-links');
    if (!select) return;
    // Manejar el cambio de selección
    select.addEventListener('change', function() {
      const selectedValue = this.value;
      console.log(selectedValue);

      if (selectedValue) {
        window.location.href = `/gallery/${selectedValue}`;
      }
      setTimeout(() => {
        this.value = '';
      }, 0);
    });
  });
</script>