{{-- Índice de la galería de inspiración (paridad con gallery/index de Apex):
     hero de galería SIN categoría activa (tema pools por defecto), grid de cards
     una por categoría (links a las páginas show) y un carrusel Swiper con una
     muestra aleatoria de fotos reales ($inspiration, armado en routes/web.php).
     El SEO lo resuelve PageSeoService por nombre de vista (gallery.index). --}}
@extends('layouts.landing')

@php
  use App\Enums\GalleryCategory;

  // Palabra-gancho por card (mismo recurso que las gradient-cards de Apex:
  // MAJESTIC/STUNNING/...). Keyed por slug del enum — una simple variable.
  $cardHeaders = [
      'pools' => 'Majestic',
      'patios' => 'Stunning',
      'driveways' => 'Beautiful',
      'concrete-overlays' => 'Unique',
  ];
@endphp

@section('hero')
  {{-- active null: ningún ítem del nav marcado; tema/copy default (pools /
       "Inspiration Gallery"). La imagen reusa el hero de pools (default pactado). --}}
  <x-heroes.gallery-v2 :active="null" :image="Vite::asset(GalleryCategory::Pools->heroImagePath())"
    alt="Inspiration gallery" />
@endsection

@section('content')
  {{-- Cards por categoría: el grid sale del enum (fuente única) — agregar una
       categoría suma su card sola. Imagen = el mismo hero-{slug}.jpg de la show;
       acento por categoría vía --menu-accent (token del enum, patrón del item 05). --}}
  <section class="py-12 lg:py-20 bg-surface">
    <div class="container grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-8">
      @foreach (GalleryCategory::all() as $category)
        <a href="{{ $category->url() }}"
          class="gallery-index-card group relative block h-64 overflow-hidden rounded-lg md:h-80"
          style="--menu-accent: var({{ $category->accentToken() }})">
          <img src="{{ Vite::asset($category->heroImagePath()) }}" alt="{{ $category->label() }} gallery"
            loading="lazy" decoding="async"
            class="absolute inset-0 h-full w-full object-cover transition duration-500 ease-out group-hover:scale-105" />
          {{-- Gradiente de lectura tintado con el acento de la categoría (app.css). --}}
          <div class="gallery-index-card-tint absolute inset-0"></div>
          <div class="relative z-10 flex h-full flex-col justify-end p-6">
            <span class="text-cream/80 text-sm font-semibold uppercase tracking-[0.2em]">
              {{ $cardHeaders[$category->value] }}
            </span>
            <span class="text-cream flex items-center gap-2 font-serif text-3xl">
              {{ $category->label() }}
              <x-lucide-arrow-right class="size-6 transition-transform duration-300 group-hover:translate-x-1" />
            </span>
          </div>
        </a>
      @endforeach
    </div>
  </section>

  {{-- Carrusel de inspiración: muestra aleatoria de fotos reales de storage
       (routes/web.php). Mismo patrón Swiper que reviews (autoplay + pausa
       offscreen — inspiration-carousel.js). Si storage está vacío, la sección
       no se renderiza (progressive: nada de placeholders rotos). --}}
  @if (count($inspiration) > 0)
    <section class="py-12 lg:py-20">
      <div class="container">
        <span class="text-muted text-sm font-semibold uppercase tracking-[0.2em]">
          Fresh Ideas
        </span>
        <h2 class="section-title text-fg mt-3 font-serif">
          A Peek at Our <span class="text-muted italic">Latest Work</span>
        </h2>
      </div>
      <div class="container mt-10">
        <div class="swiper" data-inspiration-swiper>
          <div class="swiper-wrapper">
            @foreach ($inspiration as $item)
              <div class="swiper-slide">
                <a href="{{ $item['category']->url() }}" class="group block overflow-hidden rounded-lg">
                  <img src="{{ $item['src'] }}" alt="{{ $item['alt'] }}" loading="lazy" decoding="async"
                    class="h-64 w-full object-cover transition duration-500 ease-out group-hover:scale-105 md:h-72" />
                </a>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </section>
  @endif
@endsection