@php
    $photos = [
        ['id' => 201, 'h' => 320, 'category' => 'Buses', 'caption' => 'Morning commute, Ring Road'],
        ['id' => 202, 'h' => 420, 'category' => 'Kiosks', 'caption' => 'Tap-in terminal, Route 5'],
        ['id' => 203, 'h' => 280, 'category' => 'Kiosks', 'caption' => 'Card issuance counter'],
        ['id' => 204, 'h' => 380, 'category' => 'Buses', 'caption' => 'Partner bus fleet'],
        ['id' => 205, 'h' => 300, 'category' => 'Events', 'caption' => 'Student cardholders'],
        ['id' => 206, 'h' => 440, 'category' => 'Kiosks', 'caption' => 'Recharge kiosk, New Baneshwor'],
        ['id' => 207, 'h' => 260, 'category' => 'Buses', 'caption' => 'NFC reader installation'],
        ['id' => 208, 'h' => 360, 'category' => 'Team', 'caption' => 'Team at the Kathmandu office'],
        ['id' => 209, 'h' => 300, 'category' => 'Events', 'caption' => 'Senior citizen tap-in'],
        ['id' => 210, 'h' => 340, 'category' => 'Team', 'caption' => 'Field operations crew'],
        ['id' => 211, 'h' => 300, 'category' => 'Events', 'caption' => 'Launch day, New Baneshwor'],
        ['id' => 212, 'h' => 400, 'category' => 'Buses', 'caption' => 'Route 12 fleet inspection'],
    ];
    $categories = ['All', 'Buses', 'Kiosks', 'Team', 'Events'];
@endphp

@component('layouts.app', [
    'title' => 'Gallery',
    'metaDescription' => 'Photos from across the Yatra Card network — buses, kiosks, cardholders, and the team behind it.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Company',
        'title' => 'Yatra Card, In the Field',
        'subtitle' => 'A look at the buses, terminals, and people that make cashless travel possible every day.',
    ])

    <section x-data="{ lightbox: null, active: 'All' }" class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="reveal mb-10 flex flex-wrap justify-center gap-2">
                @foreach ($categories as $cat)
                    <button type="button" @click="active = '{{ $cat }}'"
                            :class="active === '{{ $cat }}'
                                ? 'bg-primary text-white dark:bg-secondary'
                                : 'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                            class="rounded-xl px-4 py-2 text-xs font-semibold transition duration-300">
                        {{ $cat }}
                    </button>
                @endforeach
            </div>

            <div class="columns-1 gap-4 sm:columns-2 lg:columns-3">
                @foreach ($photos as $photo)
                    <button type="button" @click="lightbox = {{ $photo['id'] }}"
                            x-show="active === 'All' || active === '{{ $photo['category'] }}'"
                            class="group relative mb-4 block w-full break-inside-avoid overflow-hidden rounded-2xl shadow-sm transition duration-300 hover:shadow-xl">
                        <img src="https://picsum.photos/seed/{{ $photo['id'] }}/500/{{ $photo['h'] }}"
                             srcset="https://picsum.photos/seed/{{ $photo['id'] }}/500/{{ $photo['h'] }} 500w, https://picsum.photos/seed/{{ $photo['id'] }}/1000/{{ $photo['h'] * 2 }} 1000w"
                             sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                             width="500" height="{{ $photo['h'] }}"
                             alt="{{ $photo['caption'] }}"
                             class="w-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">
                        <span class="absolute top-3 left-3 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-white">
                            {{ $photo['category'] }}
                        </span>
                        <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-4 py-3 text-left text-xs font-medium text-white opacity-0 transition duration-300 group-hover:opacity-100">
                            {{ $photo['caption'] }}
                        </span>
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Lightbox -->
        <div x-show="lightbox !== null" x-cloak
             x-transition.opacity
             @click="lightbox = null"
             @keydown.escape.window="lightbox = null"
             class="fixed inset-0 z-[70] flex items-center justify-center bg-black/85 p-6">
            <button @click="lightbox = null" aria-label="Close"
                    class="absolute top-6 right-6 grid h-10 w-10 place-items-center rounded-full bg-white/10 text-white transition hover:bg-white/20">
                <i class="fa-solid fa-xmark"></i>
            </button>
            <div class="flex flex-col items-center gap-4" @click.stop>
                <template x-if="lightbox !== null">
                    <img :src="`https://picsum.photos/seed/${lightbox}/1000/700`" alt=""
                         class="max-h-[75vh] max-w-full rounded-2xl shadow-2xl">
                </template>
                <div class="flex gap-3">
                    <button type="button"
                            data-toast-title="Download Started"
                            data-toast-message="Full-resolution photo will save to your device shortly."
                            data-toast-icon="fa-download"
                            class="rounded-xl bg-white/10 px-4 py-2 text-xs font-semibold text-white backdrop-blur transition hover:bg-white/20">
                        <i class="fa-solid fa-download mr-1.5"></i>Download
                    </button>
                    <button type="button"
                            data-toast-title="Link Copied"
                            data-toast-message="Share link copied to your clipboard."
                            data-toast-icon="fa-share-nodes"
                            class="rounded-xl bg-white/10 px-4 py-2 text-xs font-semibold text-white backdrop-blur transition hover:bg-white/20">
                        <i class="fa-solid fa-share-nodes mr-1.5"></i>Share
                    </button>
                </div>
            </div>
        </div>
    </section>
@endcomponent