@php
  $phone = config('company.phone');
  // Services: MISMA fuente única que el mega-menú desktop (item 05) — label + url +
  // blurb, siendo el blurb el service.description del schema. Sin listas duplicadas.
  $serviceMenu = app(\App\Services\PageSeoService::class)->serviceMenu();
  // Gallery: las 4 categorías tipadas del enum (item 07).
  $galleryCategories = \App\Enums\GalleryCategory::all();
  $digits = preg_replace('/\D+/', '', $phone['label']);

  $phoneLabelMobile = preg_replace(
      '/^(\d{3})(\d{3})(\d{4})$/',
      '$1 $2 $3',
      $digits
  );
@endphp

{{-- Panel del drawer mobile (item 06) — full-width, texto claro, fondo de superficie
     propia tintada (ver .mobile-drawer en app.css). El slide y el overlay los aporta
     daisyUI (include: drawer). Los tabs son Alpine MANUAL (no los tabs de daisyUI):
     x-data local, x-show por pestaña. AI Project Designer y Careers de Apex quedan
     DESCARTADOS. Fuentes de datos = enums/serviceMenu(), nunca listas a mano. --}}
<div class="mobile-drawer relative z-[100] flex h-[100dvh] w-full flex-col text-fg">
  {{-- Fila superior: teléfono (botón outline propio) + Free Estimate + cerrar (X).
       Es el TERCER estado del teléfono (los otros dos viven en el header del nav).
       flex-none: queda fija arriba mientras scrollea el contenido de los tabs. --}}
  <div class="relative flex flex-none items-center justify-between gap-0 p-4">
    <div class="flex items-center gap-2">
      <a href="{{ $phone['href'] }}" data-callrail-gate class="btn btn-outline md:!px-4 !px-3 !py-2.5 !text-sm">
        <x-lucide-phone class="size-4" />
        {{ $phoneLabelMobile }}
      </a>
      <a
        href="{{ route('estimate') }}"
        class="rounded-[3px] bg-brand md:!px-4 !px-3 py-2.5 text-sm font-bold tracking-wide text-cream transition hover:bg-brand-light"
      >
        Free Estimate
      </a>
    </div>
    <label
      for="mobileDrawer"
      aria-label="Close menu"
      class="flex-none cursor-pointer text-fg transition hover:text-brand-bright"
    >
      <x-lucide-x class="size-8" />
    </label>
  </div>

  {{-- Tabs (Alpine manual). Activo por token propio (--color-brand), no el `secondary`
       amarillo de Apex. Contenido scrolleable con .no-scrollbar. --}}
  <div class="grid min-h-0 grow grid-rows-[auto_1fr]" x-data="{ tab: 'services' }">
    <div class="flex border-b border-line" role="tablist">
      <button
        type="button"
        role="tab"
        class="mobile-drawer-tab"
        :class="{ 'is-active': tab === 'services' }"
        @click="tab = 'services'"
      >
        Services
      </button>
      <button
        type="button"
        role="tab"
        class="mobile-drawer-tab"
        :class="{ 'is-active': tab === 'gallery' }"
        @click="tab = 'gallery'"
      >
        Gallery
      </button>
      <button
        type="button"
        role="tab"
        class="mobile-drawer-tab"
        :class="{ 'is-active': tab === 'more' }"
        @click="tab = 'more'"
      >
        More
      </button>
    </div>

    <div class="no-scrollbar min-h-0 overflow-y-auto">
      {{-- Tab Services: dos secciones (Pools/Hardscape) desde serviceMenu(), con el
           color por vertical inyectado como --menu-accent (reusa el patrón y los
           estilos .mega-menu-item/--menu-accent del item 05). --}}
      <div x-show="tab === 'services'" class="flex flex-col gap-6 p-4">
        @foreach ($serviceMenu as $group)
          @php($vertical = $group['vertical'])
          <div style="--menu-accent: var({{ $vertical->accentToken() }})">
            <p class="mobile-drawer-section-title">{{ $vertical->label() }}</p>
            <ul class="mt-2 grid gap-1">
              @foreach ($group['items'] as $item)
                <li>
                  <a href="{{ $item['url'] }}" class="mega-menu-item block rounded-lg px-3 py-2">
                    <span class="block text-base font-bold text-fg">{{ $item['label'] }}</span>
                    <span class="mt-0.5 block text-sm leading-snug text-muted">{{ $item['blurb'] }}</span>
                  </a>
                </li>
              @endforeach
            </ul>
          </div>
        @endforeach
      </div>

      {{-- Tab Gallery: las 4 categorías del enum, con su acento por categoría. --}}
      <div x-show="tab === 'gallery'" x-cloak class="flex flex-col gap-1 p-4">
        @foreach ($galleryCategories as $category)
          <a
            href="{{ $category->url() }}"
            class="mega-menu-item flex items-center justify-between rounded-lg px-3 py-3"
            style="--menu-accent: var({{ $category->accentToken() }})"
          >
            <span class="text-base font-bold text-fg">{{ $category->label() }}</span>
            <x-lucide-chevron-right class="size-5 text-muted" />
          </a>
        @endforeach
      </div>

      {{-- Tab More: links secundarios (decisión Q4=A). Contact → /contact (item 3);
           About → /about; Free Estimate va al form. Acento neutro (brand). --}}
      <div x-show="tab === 'more'" x-cloak class="flex flex-col gap-1 p-4" style="--menu-accent: var(--color-brand)">
        <a href="{{ route('about') }}" class="mega-menu-item rounded-lg px-3 py-3 text-base font-bold text-fg">About</a>
        <a href="{{ route('contact') }}" class="mega-menu-item rounded-lg px-3 py-3 text-base font-bold text-fg">Contact</a>
        <a href="{{ route('estimate') }}" class="mega-menu-item rounded-lg px-3 py-3 text-base font-bold text-fg">
          Free Estimate
        </a>
      </div>
    </div>
  </div>
</div>