@extends('layouts.public')

@section('title', __('Photo & Video Gallery'))
@section('meta_description', __('Aerial imagery, field operations and project site documentation from ABACO INFRA assignments.'))

@section('content')
    <x-page-hero :eyebrow="__('Field visuals')"
                 :title="__('Photo & Video Gallery')"
                 :subtitle="__('Aerial imagery, field operations and project site documentation.')"
                 :breadcrumbs="[__('Gallery') => null]" />

    <section class="section">
        <div class="container-page">
            <div class="mb-10 flex flex-wrap gap-2">
                <a href="{{ route('gallery.index') }}" @class([blank($activeSector) ? 'pill-active' : 'pill-idle'])>
                    {{ __('All albums') }}
                </a>
                @foreach ($sectors as $sector)
                    <a href="{{ route('gallery.index', ['sector' => $sector->slug]) }}"
                       @class([$activeSector === $sector->slug ? 'pill-active' : 'pill-idle'])>{{ $sector->name }}</a>
                @endforeach
            </div>

            @if ($albums->isEmpty())
                <x-empty-state icon="photo"
                               :title="__('No albums published yet')"
                               :message="__('Project photography will appear here as assignments are documented.')" />
            @else
                {{-- Masonry-style editorial grid: the feature album takes a double cell. --}}
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3" data-reveal-group>
                    @foreach ($albums as $album)
                        <a href="{{ route('gallery.show', $album) }}"
                           @class(['group relative overflow-hidden rounded-2xl bg-surface-muted', 'sm:col-span-2' => $loop->first])
                           data-reveal-child>

                            <x-image :src="$album->cover_image" :alt="$album->title"
                                     :ratio="$loop->first ? '16/9' : '4/3'" rounded="rounded-none" zoom />

                            <div class="scrim"></div>

                            <div class="absolute inset-x-0 bottom-0 p-6">
                                @if ($album->sector)
                                    <p class="meta-label mb-1.5 text-white/60">{{ $album->sector->name }}</p>
                                @endif

                                <h2 @class(['font-display font-semibold text-white', 'text-xl' => $loop->first, 'text-base' => ! $loop->first])>
                                    {{ $album->title }}
                                </h2>

                                <p class="mt-2 flex flex-wrap items-center gap-4 text-xs text-white/65">
                                    <span class="inline-flex items-center gap-1.5">
                                        <x-icon name="photo" class="size-3.5" /> {{ $album->photos_count }}
                                    </span>
                                    <span class="inline-flex items-center gap-1.5">
                                        <x-icon name="video" class="size-3.5" /> {{ $album->videos_count }}
                                    </span>
                                    @if ($album->album_date)
                                        <span>{{ $album->album_date->format('M Y') }}</span>
                                    @endif
                                </p>
                            </div>
                        </a>
                    @endforeach
                </div>

                @if ($albums->hasPages())
                    <div class="mt-12">{{ $albums->links() }}</div>
                @endif
            @endif
        </div>
    </section>
@endsection