@props([
    'active' => null, // App\Enums\GalleryCategory — categoría activa (tipada)
    'image' => null,
    'alt' => '',
])

@php
  use App\Enums\GalleryCategory;

  // La lista de categorías sale de la ÚNICA fuente (el enum), no de literales.
  $categories = GalleryCategory::all();
@endphp

{{-- Hero de la galería de inspiración: variante del patrón heroes (consume
     heroes.base, NUNCA duplica base). Sin foto (item 07): el fondo es un gradiente
     derivado del ACENTO de la categoría. El acento entra como UNA custom property
     (--gallery-accent) emitida desde el token del enum; el nav inferior y el fondo
     lo consumen vía CSS genérico (ver app.css). El link activo se marca comparando
     enum === enum (identidad), no strings. Más bajo que el hero de la Home. --}}
<x-heroes.base
  class="gallery-hero md:min-h-120 max-h-120 md:max-h-140 h-[60dvh] min-h-80 items-stretch pt-[calc(var(--nav-h)_+_1.5rem)]">
  {{-- Wrapper que porta el acento de la categoría. Al vivir en un ancestro, la
  custom property cascada a fondo + nav + select sin repetir el color. --}}
  @if ($image)
    <img src="{{ $image }}" alt="{{ $alt }}" class="absolute inset-0 h-full w-full object-cover"
      fetchpriority="high" decoding="async" />
  @endif
  <div class="bg-linear-to-r from-surface via-surface/85 to-surface/20 absolute inset-0 lg:to-transparent"></div>
  <div class="relative flex w-full flex-col self-stretch" style="--gallery-accent: var({{ $active->accentToken() }});">
    {{-- Fondo: gradiente tintado por el acento (ver .gallery-hero-bg en app.css). --}}

    {{-- <x-home.nav /> lo pone el header del layout (hermano del hero); acá no va. --}}

    {{-- Bloque de contenido. `grow` empuja el nav al fondo del hero. pt = --nav-h
         (altura real del navbar sticky) para despejar la píldora; el gradiente de
         fondo sube bajo ella por el margen negativo de la sección (app.css item 11).
         El pt va acá y NO en la sección porque el fondo (.gallery-hero-bg) está
         anidado y un padding en la sección lo bajaría con él. --}}
    <div class="container relative z-10 flex grow flex-col justify-center pb-10">
      <span class="text-muted text-sm font-semibold uppercase tracking-[0.2em]">
        Inspiration Gallery
      </span>
      <h1 class="hero-title text-fg mt-3 font-serif">
        {{ $active->label() }}
      </h1>
      <p class="text-fg/70 mt-3 max-w-md text-base font-light leading-relaxed">
        Real South Florida {{ strtolower($active->label()) }} projects — designed
        and built to impress.
      </p>
    </div>

    {{-- Nav inferior por categoría. Generado por loop sobre el enum (lista plana,
         sin grupos). Desktop: links; mobile: <select> nativo. --}}
    <nav class="border-line/40 bg-surface/30 relative z-10 border-t backdrop-blur-sm">
      <div class="container flex items-center">
        {{-- Desktop --}}
        <ul
          class="gallery-hero-nav hidden flex-wrap items-center gap-x-8 gap-y-2 text-sm font-semibold uppercase tracking-wide md:flex">
          @foreach ($categories as $category)
            <li>
              <a href="{{ $category->url() }}" @class([
                  'is-active' => $category === $active,
                  'text-fg/55' => $category !== $active,
                  'py-4 inline-block',
              ])
                @if ($category === $active) aria-current="page" @endif>
                {{ $category->label() }}
              </a>
            </li>
          @endforeach
        </ul>

        {{-- Mobile: select nativo. El placeholder muestra la categoría actual; la
             activa se OCULTA de la lista (identidad de enum, no string). --}}
        <select
          class="gallery-hero-select text-fg w-full rounded-md px-4 py-3 text-sm font-semibold uppercase tracking-wide md:hidden"
          aria-label="Change gallery category" data-gallery-select>
          <option value="" selected hidden>{{ $active->label() }}</option>
          @foreach ($categories as $category)
            <option value="{{ $category->url() }}" @if ($category === $active) hidden @endif>
              {{ $category->label() }}
            </option>
          @endforeach
        </select>
      </div>
    </nav>
  </div>
</x-heroes.base>

@push('scripts')
  <script>
    // Nav mobile: al elegir una categoría, navegar a su URL (JS vanilla mínimo).
    document.querySelectorAll('[data-gallery-select]').forEach((select) => {
      select.addEventListener('change', (event) => {
        const url = event.target.value;
        if (url) window.location.href = url;
      });
    });
  </script>
@endpush