@props([
    'active' => null, // App\Enums\GalleryCategory — categoría activa (tipada) o
    // null (índice de galería): ningún ítem del nav se marca y el
    // tema/copy caen al default (pools / "Inspiration Gallery").
    'image' => null,
    'alt' => '',
    'title' => null, // override del h1; default = label de la categoría activa
    'subtitle' => null, // override del párrafo; default = copy por categoría
])

@php
  use App\Enums\GalleryCategory;

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

  // Tema del tint: la categoría activa o, sin activa (índice), pools por defecto.
  $theme = $active?->value ?? GalleryCategory::Pools->value;
  $title ??= $active?->label() ?? 'Inspiration Gallery';
  $subtitle ??= $active
      ? 'Real South Florida ' . strtolower($active->label()) . ' projects — designed and built to impress.'
      : 'Dreams brought to life.';
@endphp

{{-- Hero de galería v2: MISMA estructura que heroes/home.blade.php (imagen
     full-bleed + .hero-tint + bloque de contenido en container/flex-1/pb-12),
     pero con imagen ESTÁTICA (sin Swiper) y, donde home tiene los bullets de
     paginación, acá va el nav de categorías (reusado tal cual del hero de
     galería anterior — heroes/gallery.blade.php, que se conserva intacto).

     Color del tint por categoría: home decide el tema con CSS :has() porque
     el slide activo lo mueve el DOM del Swiper en runtime; acá la categoría
     activa ya la sabe PHP al renderizar, así que no hace falta :has() — la
     sección lleva data-theme="{{ $active->value }}" y app.css setea
     --hero-tint-color por ese atributo (ÚNICA fuente de color; el nav/select
     de abajo, reusado del hero viejo, sigue leyendo --gallery-accent, que
     dentro de [data-theme] es solo un alias de --hero-tint-color — ver
     app.css, no hay valor duplicado). --}}
<x-heroes.base class="hero-gallery-v2 banner-gradient items-stretch"
  data-theme="{{ $theme }}">
  @if ($image)
    <img src="{{ $image }}" alt="{{ $alt }}" class="absolute inset-0 h-full w-full object-cover"
      fetchpriority="high" decoding="async" />
  @endif

  {{-- Overlay de lectura + tinte por categoría (ver .hero-tint y el bloque
       [data-theme] en app.css). Mismo elemento/mecanismo que home. --}}
  <div class="hero-tint absolute inset-0"></div>

  <div class="container relative z-10 flex flex-1 flex-col justify-center pb-12">
    <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">
      {{ $title }}
    </h1>
    <p class="text-fg/70 mt-3 max-w-md text-base font-light leading-relaxed">
      {{ $subtitle }}
    </p>
  </div>

  {{-- Nav de categorías (reusado del hero de galería original) en el lugar donde
       home tiene la paginación del slider. z-20 para quedar sobre .hero-tint. --}}
  {{-- <div role="navigation">, no <nav>: el landmark para tecnología asistiva
       es idéntico, pero un <div> no es *sectioning content* y no abre una
       sección sin título en el outline. Misma política que el nav del header. --}}
  <div role="navigation" aria-label="Gallery categories" class="border-line/30 bg-surface/20 relative z-20 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 my-2 md:my-0"
        aria-label="Change gallery category" data-gallery-select>
        <option value="" selected hidden>{{ $active?->label() ?? 'Browse Categories' }}</option>
        @foreach ($categories as $category)
          <option value="{{ $category->url() }}" @if ($category === $active) hidden @endif>
            {{ $category->label() }}
          </option>
        @endforeach
      </select>
    </div>
  </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