@props([
    'images' => [],
])

@php
  use App\Enums\GalleryCategory;

  // Linkouts = categorías de la galería (fuente única: el enum), igual que
  // heroes/gallery-v2. Cada una lleva a /gallery/{slug}.
  $categories = GalleryCategory::all();

  // Fallback de imágenes del collage masonry si la página no pasa las suyas.
  // Se reparten en 2 columnas; cada columna es un sub-grid masonry.
  $tiles = ! empty($images)
      ? $images
      : [
          ['image' => Vite::asset('resources/images/gallery/pools-hero.jpg'), 'alt' => 'Renovated pool project'],
          ['image' => Vite::asset('resources/images/home/why-1.jpg'), 'alt' => 'Luxury pool & spa'],
          ['image' => Vite::asset('resources/images/gallery/patios-hero.jpg'), 'alt' => 'Paver patio project'],
          ['image' => Vite::asset('resources/images/home/why-2.jpg'), 'alt' => 'Modern luxury pool home'],
          ['image' => Vite::asset('resources/images/gallery/driveways-hero.jpg'), 'alt' => 'Paver driveway project'],
          ['image' => Vite::asset('resources/images/home/why-3.jpg'), 'alt' => 'Luxury white pool design'],
          ['image' => Vite::asset('resources/images/gallery/concrete-overlays-hero.jpg'), 'alt' => 'Concrete overlay project'],
      ];

  // Reparto en 2 columnas (masonry por columnas): índices pares → col A, impares → col B.
  $colA = [];
  $colB = [];
  foreach ($tiles as $i => $tile) {
      $i % 2 === 0 ? $colA[] = $tile : $colB[] = $tile;
  }
@endphp

{{-- Sección Galería (home): 2 columnas 60/40, bg SÓLIDO (sin imagen de fondo).
     Izquierda (60%): copy + linkouts a las categorías de /gallery. Derecha (40%):
     collage masonry a 2 columnas con overflow cortado arriba y abajo (efecto
     "peek" — las tiles se salen del alto de la sección y quedan recortadas por el
     overflow-hidden). Estilo de referencia: Apex (services-gallery-section), pero
     con el layout 60/40 pedido y los tokens oscuros del sitio. --}}
<section class="bg-surface-2 py-12 lg:py-20">
  <div class="container grid grid-cols-1 items-center gap-12 lg:grid-cols-[3fr_2fr] lg:gap-16">
    {{-- Left 60%: contenido + linkouts --}}
    <div>
      <x-home.section-header eyebrow="Inspiration Gallery" :hasHyphen="false">
        See What's <span class="text-muted italic">Possible</span> in Your Backyard
      </x-home.section-header>

      <p class="text-muted mt-6 max-w-md text-base font-light leading-relaxed">
        Real South Florida projects — pools, patios, driveways and concrete overlays —
        designed and built to impress. Browse a category to get inspired for your own
        outdoor space.
      </p>

      {{-- Linkouts a las categorías (enum GalleryCategory). --}}
      <ul class="mt-8 flex flex-col gap-px">
        @foreach ($categories as $category)
          <li>
            <a href="{{ $category->url() }}"
              class="group text-fg hover:bg-surface/40 flex items-center justify-between gap-4 border-t border-line py-4 transition">
              <span class="font-serif text-xl">{{ $category->label() }}</span>
              <x-lucide-arrow-right
                class="text-muted group-hover:text-brand-light h-5 w-5 flex-none transition group-hover:translate-x-1" />
            </a>
          </li>
        @endforeach
      </ul>

      <a href="{{ route('gallery.index') }}" class="btn btn-primary mt-10">
        <span class="uppercase">View Full Gallery</span>
        <span class="hidden text-white md:block">
          <x-lucide-arrow-right class="h-4 w-4" />
        </span>
      </a>
    </div>

    {{-- Right 40%: collage masonry a 2 columnas, overflow cortado arriba/abajo.
         El contenedor tiene alto acotado + overflow-hidden; las columnas se
         desplazan verticalmente (una hacia arriba con -mt) para que las tiles
         asomen recortadas por arriba y por abajo. --}}
    <div class="relative max-h-[32rem] overflow-hidden lg:max-h-[36rem]" aria-hidden="true">
      <div class="grid grid-cols-2 gap-3">
        <div class="-mt-8 flex flex-col gap-3">
          @foreach ($colA as $tile)
            <div class="overflow-hidden rounded-lg">
              <img src="{{ $tile['image'] }}" alt="{{ $tile['alt'] }}" loading="lazy" decoding="async"
                class="h-full w-full object-cover" />
            </div>
          @endforeach
        </div>
        <div class="-mt-16 flex flex-col gap-3">
          @foreach ($colB as $tile)
            <div class="overflow-hidden rounded-lg">
              <img src="{{ $tile['image'] }}" alt="{{ $tile['alt'] }}" loading="lazy" decoding="async"
                class="h-full w-full object-cover" />
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>