@props(['items'])

@if ($items->isEmpty())
    <x-site.empty message="Aucune photo à afficher pour le moment." />
@else
    {{--
        Grille éditoriale : trois colonnes aux proportions différentes, la
        colonne centrale décalée vers le bas. Le décalage est appliqué par
        position dans la grille (index modulo 3), ce qui produit un rythme
        régulier sans laisser de trou. En dessous de `lg`, tout revient à un
        format unique : le décalage n'aurait plus de sens sur deux colonnes.
    --}}
    <ul class="grid grid-cols-2 items-start gap-x-5 gap-y-10 sm:gap-x-8 sm:gap-y-14 lg:grid-cols-3">
        @foreach ($items as $item)
            @php
                $column = $loop->index % 3;

                $caption = collect([$item->title, $item->service?->name])
                    ->filter()
                    ->implode(' · ');
            @endphp

            <li @class(['lg:mt-16' => $column === 1])>
                <button
                    type="button"
                    data-lightbox="{{ Storage::disk('public')->url($item->image_path) }}"
                    data-lightbox-alt="{{ $item->altText() }}"
                    data-lightbox-caption="{{ collect([$caption, $item->artist?->name])->filter()->implode(' · ') }}"
                    class="group block w-full text-left"
                >
                    <div @class([
                        'media aspect-4/5',
                        'lg:aspect-4/5' => $column === 0,
                        'lg:aspect-square' => $column === 1,
                        'lg:aspect-3/4' => $column === 2,
                    ])>
                        <img
                            src="{{ Storage::disk('public')->url($item->image_path) }}"
                            alt="{{ $item->altText() }}"
                            loading="lazy"
                            decoding="async"
                            class="size-full object-cover transition-transform duration-700 group-hover:scale-[1.04]"
                        >
                    </div>

                    {{-- Légende toujours lisible, sous l'image : pas de voile sombre au survol. --}}
                    @if ($caption)
                        <p class="mt-3.5 text-xs leading-relaxed text-ink-subtle transition-colors group-hover:text-ink-muted">
                            {{ $caption }}
                        </p>
                    @endif
                </button>
            </li>
        @endforeach
    </ul>

    <x-site.lightbox />
@endif