@props(['groups' => []])

{{-- Panel del mega-menú de servicios (item 05). Es HERMANO del trigger dentro de
     `.mega-menu`, pero se posiciona respecto al PILL (que es `relative`), no al
     trigger: `left-0 top-full w-full` ⇒ nace desde el borde izquierdo del nav con
     el ancho completo del pill, sin anclarse al trigger (LEY; nada de navbar.js /
     getBoundingClientRect). El `pt-3` es puente de hover entre trigger y tarjeta.
     Visibilidad y chevron los maneja app.css (.mega-menu:hover / :focus-within),
     CSS-only. Datos: PageSeoService::serviceMenu() (label + url + blurb, siendo el
     blurb el mismo service.description del schema). --}}
<div class="mega-menu-panel absolute top-full left-4 right-4 xl:left-0 xl:right-0 z-40 xl:w-full">
  <div
    class="grid grid-cols-1 overflow-hidden bg-cream shadow-2xl ring-1 ring-black/5 md:grid-cols-[minmax(0,1fr)_minmax(0,1.7fr)]"
  >
    @foreach ($groups as $group)
      @php($vertical = $group['vertical'])
      {{-- Color de la columna: una sola custom property con el token del vertical;
           app.css la consume (fondo tintado, título, hover). Sin hex inline. --}}
      <div class="mega-menu-col py-6 px-3" style="--menu-accent: var({{ $vertical->accentToken() }})">
        <p class="mega-menu-col-title text-sm font-bold tracking-[0.18em] uppercase px-3">
          {{ $vertical->label() }}
        </p>
        {{-- 2 sub-columnas visuales cuando la columna trae más de 4 ítems (Hardscape). --}}
        <ul class="mt-2 grid gap-1 @if (count($group['items']) > 4) sm:grid-cols-2 @endif">
          @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-sm font-bold text-deep-1">{{ $item['label'] }}</span>
                <span class="mt-0.5 block text-xs leading-snug text-warm-surface">{{ $item['blurb'] }}</span>
              </a>
            </li>
          @endforeach
        </ul>
      </div>
    @endforeach
  </div>
</div>