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

@php
  use App\Enums\GalleryCategory;

  // Linkouts = categorías de la galería (fuente única: el enum), igual que
  // heroes/gallery-v2. Reemplazan los botones hardcodeados de Apex.
  $categories = GalleryCategory::all();

  // Fallback de imágenes del collage masonry (columna derecha 40%).
  $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): pares → col A, impares → col B.
  $colA = [];
  $colB = [];

  foreach ($tiles as $i => $tile) {
      if ($i % 2 !== 0 && count($colB) < 2) {
          $colB[] = $tile;
      } else {
          $colA[] = $tile;
      }
  }
@endphp

{{-- Galería (home) — v2: LAYOUT copiado fiel de Apex (welcome.blade.php
     ".gallery-section": <section flex items-center py-12/20> + <h2 visuallyhidden>
     + container/max-w-3xl con título grande, subtítulo, "See Our Gallery" y fila
     de linkouts + "View More"). Cambios sobre Apex:
       · bg SÓLIDO (bg-surface-2), NO la imagen de fondo de .gallery-section.
       · grid 60/40: la columna de contenido de Apex a la izquierda (60%), y a la
         derecha (40%) el collage masonry a 2 columnas con overflow cortado
         arriba/abajo (aporte de esta landing; no existe en Apex).
       · linkouts derivados del enum GalleryCategory (no hardcodeados).
     Títulos/content: wording propio (reusado de la v1). --}}
<section class="bg-surface-2 flex items-center py-12 md:py-16 lg:py-0">
  <h2 class="sr-only">Inspiration Gallery</h2>
  <div class="container w-full">
    <div
      class="grid w-full grid-cols-1 items-center gap-6 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-8 xl:gap-16">
      {{-- Left 60%: bloque de contenido de Apex (título + subtítulo + linkouts + View More) --}}
      <div class="text-fg max-w-3xl lg:py-16">
        <p class="text-fg font-serif text-3xl leading-tight md:text-[2.6rem] text-pretty">
          See What's <span class="text-muted italic">Possible</span> in Your Backyard
        </p>
        <p class="text-muted mb-5 md:mb-14 mt-4 text-lg font-light md:text-xl">
          Real South Florida projects — pools, patios, driveways and concrete overlays
          designed and built to impress.
        </p>

        <h3 class="card-title text-brand-light mb-4 block font-semibold">See Our Gallery</h3>
        <div class="mb-6 flex flex-wrap items-center gap-2 md:gap-4 xl:flex-nowrap">
          @foreach ($categories as $category)
            <a href="{{ $category->url() }}"
              class="btn border-cream/70 text-fg hover:bg-brand hover:border-brand hover:text-cream whitespace-nowrap border px-6 py-1 text-base">
              {{ $category->label() }}
            </a>
          @endforeach
        </div>

        <a href="{{ route('gallery.index') }}"
          class="text-brand-light hover:text-brand-bright mb-4 block text-base underline underline-offset-4 md:text-lg">
          View Full Gallery
        </a>
      </div>
      {{-- Right 40%: collage masonry a 2 columnas, overflow cortado arriba/abajo
           (aporte de esta landing; el efecto "peek" recorta las tiles con el
           overflow-hidden + el desplazamiento vertical de cada columna). --}}
      <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="xl:-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="xl:-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>

  </div>
</section>