@php
  $phone = config('company.phone');
  // Datos del mega-menú desktop (item 05): PageSeoService es la fuente única —
  // el blurb de cada servicio es el mismo service.description del schema.
  $serviceMenu = app(\App\Services\PageSeoService::class)->serviceMenu();
@endphp

{{-- Nav superior de la Home (fiel al Figma): barra PÍLDORA con gradiente cálido
     translúcido, logo real de la empresa (logo-pools) en círculo dorado, links
     blancos, teléfono blanco bold y botón "FREE ESTIMATE" cyan. DECORATIVO por
     ahora: links inertes (#); el botón va a /estimate. --}}
<nav class="container relative z-20 pt-10 px-2 md:px-12 lg:px-20">
  <div data-nav
    class="gradient-navbar pl-26 md:pl-30 xl:pl-34 relative flex items-center justify-end lg:justify-between">
    {{-- Logo real de la empresa sobre círculo dorado que sobresale. data-nav-logo:
         nav-sticky.js lo mide contra data-nav (la barra píldora, su ancestro
         relative) para saber cuánto sobresale por debajo (el círculo está
         centrado respecto al pill, así que sobra lo mismo arriba). --}}
    <a href="{{ url('/') }}" data-nav-logo
      class="bg-warm-surface-2 absolute top-1/2 -translate-y-1/2 md:left-3 left-1.5 flex h-24 w-24 items-center justify-center rounded-full z-50">
      <img src="{{ Vite::asset('resources/images/logo-pools.svg') }}" alt="Patios Pools & Driveways" width="159"
        height="129" class="h-20 w-20 object-contain" />
    </a>

    {{-- Nav desktop (lg+). "Services" abre el mega-menú desplegable (CSS-only);
           el resto son links simples. Gallery → galería Pools (categoría default);
           Contact → /contact (item 3, activo). About queda "#" (no existe aún). El
           estado mobile del navbar no se toca acá (drawer = item 6). --}}
    <ul class="hidden items-center gap-5 xl:gap-8 lg:flex xl:relative flex-1">
      {{-- Contenedor .mega-menu ESTÁTICO (sin position): así el panel absolute se
             ancla al pill (relative) y no al <li> trigger. hover/focus-within lo abren. --}}
      <li class="mega-menu py-4">
        <button type="button" aria-haspopup="true" aria-expanded="false"
          class="hover:text-honey flex items-center gap-1 text-base font-semibold text-white transition">
          Services
          <x-lucide-chevron-down class="mega-menu-chevron size-4" />
        </button>
        <x-home.services-menu :groups="$serviceMenu" />
      </li>
      <li class="py-4">
        {{-- Gallery → el ÍNDICE de galería (antes iba directo a la show de pools
             porque el índice no existía). Las shows siguen linkeadas desde el
             índice, el hero de galería y el drawer. --}}
        <a href="{{ route('gallery.index') }}"
          class="hover:text-honey text-base font-semibold text-white transition">
          Gallery
        </a>
      </li>
      <li class="py-4">
        <a href="{{ route('about') }}" class="hover:text-honey text-base font-semibold text-white transition">
          About
        </a>
      </li>
      <li class="py-4">
        <a href="{{ route('contact') }}" class="hover:text-honey text-base font-semibold text-white transition">
          Contact
        </a>
      </li>
    </ul>

    {{-- Teléfono + CTA + hamburguesa (tabla responsive del header, item 06).
           TRES estados del teléfono (portados de Apex): ≥480px texto+número
           (xs:block hidden), <480px sólo-ícono (xs:hidden block) — nunca coexisten;
           el 3º vive en el drawer. Free Estimate SIEMPRE visible. La hamburguesa
           (flex-none lg:hidden) abre el drawer via <label for="mobileDrawer">
           (checkbox del layout landing). Números SIEMPRE desde config. --}}
    <div class="flex items-center gap-2 sm:gap-3.5 py-2 px-2 md:px-4 lg:px-2 xl:px-3">
      {{-- Teléfono texto+número (con ícono a la izquierda) — visible ≥480px --}}
      <a href="{{ $phone['href'] }}" data-callrail-gate
        class="hover:text-honey xs:inline-flex hidden items-center gap-2 text-xl font-extrabold text-white transition">
        <x-lucide-phone class="size-5 flex-none" fill="currentColor" stroke="currentColor" />
        {{ $phone['label'] }}
      </a>
      <a href="{{ route('estimate') }}"
        class="bg-brand text-cream hover:bg-brand-light rounded-[3px] px-3 md:px-5 py-2.5 text-sm font-bold uppercase tracking-wide transition">
        Free Estimate
      </a>
      {{-- Teléfono sólo-ícono — reemplaza al de texto bajo 480px --}}
      <a href="{{ $phone['href'] }}" data-callrail-gate aria-label="Call {{ $phone['label'] }}"
        class="hover:text-honey xs:hidden block text-white transition">
        <x-lucide-phone class="size-6" />
      </a>
      {{-- Hamburguesa — dispara el drawer mobile. Sólo <lg (desktop usa el nav). --}}
      <label for="mobileDrawer" aria-label="Open menu"
        class="hover:text-honey flex-none cursor-pointer text-white transition lg:hidden">
        <x-lucide-menu class="size-8" />
      </label>
    </div>
  </div>
</nav>