@extends('layout.v2.app')

@php
    $images = explode(',', $package->images);
@endphp

{{-- Open Graph — konten menyesuaikan package yang sedang dibuka --}}
@section('og_title', $package->title)
@section('og_description', $package->description ?: \Illuminate\Support\Str::limit(strip_tags($package->description), 160))
@section('og_image', asset('uploads/packages/' . ($images[0] ?? '')))
@section('og_type', 'article')

<style>
    .section-anchor-show {
        scroll-margin-top: 130px; /* sesuaikan: tinggi navbar utama + tinggi sticky-nav-show */
    }
</style>

@section('content')

<div class="max-w-6xl mx-auto px-4 py-6">
    <!-- =================== BREADCRUMB =================== -->
    <div class="max-w-6xl mx-auto px-4 pt-6">
        <nav class="flex items-center gap-2 text-sm text-slate-400">
            <a href="#" class="hover:text-blue-700 transition">Home</a>
            <span>›</span>
            <a href="#" class="hover:text-blue-700 transition">Package</a>
            <span>›</span>
            <span class="text-blue-900 font-medium">{{ $package->title }}</span>
        </nav>
    </div>

    <!-- =================== HERO (image + title + mini gallery) =================== -->
    <section class="max-w-full mx-auto px-4 pt-5 pb-0">
        <div class="flex flex-col lg:flex-row gap-6 items-stretch">
            <!-- Main image -->
            <div class="lg:w-1/2 flex-shrink-0">
                <div class="rounded-2xl overflow-hidden h-72 lg:h-full relative bg-blue-800">
                    <img src="{{ asset('uploads/packages/' . $images[0]) }}" alt="{{ $package->title }}" class="w-full h-full object-cover" onerror="this.style.display = 'none'"/>
                </div>
            </div>

            <!-- Right side: title block + mini gallery -->
            <div class="flex-1 flex flex-col justify-between">
                <!-- Title row -->
                <div class="flex items-start justify-between">
                    <div>
                        <h1 class="font-serif text-4xl font-bold text-blue-900 leading-tight mb-3">
                            {{ $package->title }}
                        </h1>
                        <p class="text-slate-500 text-base">
                            @if ($package->duration_day > 1)
                                {{ $package->duration_day }} Days
                            @else
                                {{ $package->duration_day }} Day
                            @endif
                            <span class="text-slate-300 mx-1">|</span>
                            @if ($package->duration_night > 1)
                                {{ $package->duration_night }} Nights
                            @else
                                {{ $package->duration_night }} Night
                            @endif
                        </p>
                    </div>
                    <button
                        class="flex-shrink-0 w-11 h-11 rounded-full border border-blue-300 text-blue-600 flex items-center justify-center hover:bg-blue-50 transition"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                        </svg>
                    </button>
                </div>

                <!-- Mini gallery -->
                <div class="grid grid-cols-2 gap-4 mt-6">
                    <div class="rounded-2xl overflow-hidden h-44 relative bg-blue-600">
                        <img src="{{ asset('uploads/packages/' . ($images[1] ?? $images[0])) }}" alt="{{ $package->title }}" class="w-full h-full object-cover" onerror="this.style.display = 'none'"/>
                    </div>
                    <div class="rounded-2xl overflow-hidden h-44 relative bg-blue-400">
                        <img src="{{ asset('uploads/packages/' . ($images[2] ?? $images[0])) }}" alt="{{ $package->title }}" class="w-full h-full object-cover" onerror="this.style.display = 'none'"/>
                        <button onclick="openGallery()" class="absolute bottom-3 right-3 bg-blue-800/90 hover:bg-blue-900 text-white text-xs font-semibold px-4 py-2 rounded-full shadow transition">
                            See all ({{ count($images) }} photos)
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- =================== PHOTO GALLERY MODAL =================== -->
    <div id="gallery-modal" class="fixed mt-14 inset-0 z-[100] hidden">
        <!-- Backdrop -->
        <div
            class="absolute inset-0 bg-blue-950/70 backdrop-blur-sm"
            onclick="closeGallery()"
        ></div>

        <!-- Modal panel -->
        <div class="relative h-full flex flex-col max-w-5xl mx-auto px-4 py-6">
            <!-- Header -->
            <div class="flex items-center justify-between mb-5 flex-shrink-0">
                <div>
                    <h2 class="font-serif text-white text-xl font-bold">
                        {{ $package->title }}
                    </h2>
                    <p class="text-blue-200 text-sm mt-0.5">{{ count($images) }} photos</p>
                </div>
                <button
                    onclick="closeGallery()"
                    class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition flex-shrink-0"
                >
                    <svg
                        class="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M6 18L18 6M6 6l12 12"
                        />
                    </svg>
                </button>
            </div>

            <!-- Grid view -->
            <div id="gallery-grid-view" class="flex-1 overflow-y-auto rounded-2xl">
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 pb-6">
                    <!-- Photos injected by JS -->
                </div>
            </div>

            <!-- Lightbox view -->
            <div
                id="gallery-lightbox-view"
                class="hidden flex-1 flex flex-col items-center justify-center relative"
            >
                <button
                    onclick="lightboxPrev()"
                    class="absolute left-0 sm:-left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition z-10"
                >
                    <svg
                        class="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M15 19l-7-7 7-7"
                        />
                    </svg>
                </button>

                <div class="w-full h-full flex items-center justify-center px-14">
                    <img
                        id="lightbox-img"
                        src=""
                        alt=""
                        class="max-h-full max-w-full object-contain rounded-xl shadow-2xl"
                    />
                </div>

                <button
                    onclick="lightboxNext()"
                    class="absolute right-0 sm:-right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition z-10"
                >
                    <svg
                        class="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M9 5l7 7-7 7"
                        />
                    </svg>
                </button>

                <div class="flex items-center gap-3 mt-5 flex-shrink-0">
                    <button
                        onclick="backToGrid()"
                        class="text-blue-200 hover:text-white text-sm font-medium transition flex items-center gap-1.5"
                    >
                        <svg
                            class="w-4 h-4"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h7"
                            />
                        </svg>
                        Back to grid
                    </button>
                    <span class="text-blue-300 text-sm" id="lightbox-counter"
                        >1 / 10</span
                    >
                </div>
            </div>
        </div>
    </div>

    <!-- =================== STICKY NAV =================== -->
    <div class="sticky-nav-show mt-0 z-[9999]">
        <div class="max-w-6xl mx-auto px-4">
            <nav
                class="flex gap-8 text-sm font-medium text-blue-800 overflow-x-auto"
            >
                <a href="#deskripsi" class="nav-link-show active py-4 whitespace-nowrap"
                    >Description</a
                >
                @if($package->highlight_desc || $package->highlight_item || $package->highlight_image)
                <a href="#highlights" class="nav-link-show py-4 whitespace-nowrap"
                    >Highlights</a
                >
                @endif
                @if(count($groupPrices))
                <a href="#pricing" class="nav-link-show py-4 whitespace-nowrap"
                    >Pricing</a
                >
                @endif
                <a href="#include" class="nav-link-show py-4 whitespace-nowrap"
                    >Include</a
                >
                <a href="#exclude" class="nav-link-show py-4 whitespace-nowrap"
                    >Exclude</a
                >
                <a href="#itinerary" class="nav-link-show py-4 whitespace-nowrap"
                    >Itinerary</a
                >
                <a href="#notes" class="nav-link-show py-4 whitespace-nowrap">Notes</a>
            </nav>
        </div>
    </div>

    <!-- =================== MAIN CONTENT =================== -->
    <div class="max-w-6xl mx-auto px-4 py-10">
        <div class="flex gap-10 items-stretch">
            <!-- LEFT COLUMN -->
            <div class="flex-1 min-w-0">
                <!-- ===== DESKRIPSI ===== -->
                <section id="deskripsi" class="section-anchor-show mb-14">

                    <p class="text-slate-600 leading-8 mb-6">
                        {{ $package->description }}
                    </p>

                </section>

                <!-- ===== HIGHLIGHTS ===== -->
                @if($package->highlight_desc || $package->highlight_item || $package->highlight_image)
                @php
                    $highlightImages = $package->highlight_image ? explode(',', $package->highlight_image) : [];
                    $highlightItems  = $package->highlight_item ? explode('//', $package->highlight_item) : [];
                @endphp
                <section id="highlights" class="section-anchor-show mb-14">
                    <h2 class="font-serif text-2xl font-bold text-blue-900 mb-2">
                        Highlights
                    </h2>
                    <p class="text-slate-500 text-sm mb-8">
                        The moments that make this trip unforgettable.
                    </p>

                    @if(count($highlightImages))
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-8">
                        @foreach($highlightImages as $img)
                        <div class="rounded-xl overflow-hidden aspect-square bg-blue-800">
                            <img src="{{ asset('uploads/packages/highlights/' . $img) }}" alt="{{ $package->title }}" class="w-full h-full object-cover hover:scale-105 transition-transform" onerror="this.style.display='none'"/>
                        </div>
                        @endforeach
                    </div>
                    @endif

                    @if($package->highlight_desc)
                    <p class="text-slate-600 leading-8 mb-8">
                        {{ $package->highlight_desc }}
                    </p>
                    @endif

                    @if(count(array_filter($highlightItems)))
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($highlightItems as $item)
                        @if(trim($item))
                        <div class="flex items-start gap-3 bg-slate-100 rounded-xl p-4">
                            <div class="w-5 h-5 rounded-full bg-slate-600 flex-shrink-0 flex items-center justify-center mt-0.5">
                                <i class="las la-check text-sm text-white"></i>
                            </div>
                            <p class="text-slate-900 text-sm leading-6">
                                {{ trim($item) }}
                            </p>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    @endif
                </section>
                @endif

                <!-- ===== PRICING (Group Prices & Add-ons) ===== -->
                @if(count($groupPrices))
                <section id="pricing" class="section-anchor-show mb-14">
                    <h2 class="font-serif text-2xl font-bold text-blue-900 mb-2">
                        Private Tour Price — Per Group
                    </h2>
                    <p class="text-slate-500 text-sm mb-8">
                        Pricing scales with your group size — choose the tier that fits your trip.
                    </p>

                    <div class="overflow-x-auto rounded-2xl border border-blue-100">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="bg-blue-50 text-blue-900">
                                    <th class="text-left font-semibold px-5 py-3.5">Group Size</th>
                                    <th class="text-left font-semibold px-5 py-3.5">IDR</th>
                                    <th class="text-left font-semibold px-5 py-3.5">USD</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($groupPrices as $gp)
                                <tr class="border-t border-blue-50 hover:bg-blue-50/50 transition">
                                    <td class="px-5 py-3.5 text-slate-700 font-medium">{{ $gp->label }}</td>
                                    <td class="px-5 py-3.5 text-slate-600">Rp{{ number_format($gp->price_idr, 0, ',', '.') }}</td>
                                    <td class="px-5 py-3.5 text-slate-600">USD {{ number_format($gp->price_usd, 0, ',', '.') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if(count($addons))
                    <div class="mt-10">
                        <h3 class="font-serif text-lg font-bold text-blue-900 mb-4">
                            Optional Add-ons
                        </h3>
                        <div class="space-y-3">
                            @foreach($addons as $ad)
                            <div class="flex items-center justify-between gap-4 bg-blue-50 rounded-xl p-4">
                                <div>
                                    <p class="text-blue-900 text-sm font-semibold">{{ $ad->name }}</p>
                                    @if($ad->description)
                                    <p class="text-slate-500 text-xs mt-0.5">{{ $ad->description }}</p>
                                    @endif
                                </div>
                                <div class="text-right flex-shrink-0">
                                    <p class="text-blue-900 text-sm font-semibold">
                                        Rp{{ number_format($ad->price_idr, 0, ',', '.') }} / USD {{ number_format($ad->price_usd, 0, ',', '.') }}
                                    </p>
                                    @if($ad->unit)
                                    <p class="text-slate-400 text-xs">{{ $ad->unit }}</p>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </section>
                @endif

                <!-- ===== INCLUDE ===== -->
                <section id="include" class="section-anchor-show mb-14">
                    <h2 class="font-serif text-2xl font-bold text-blue-900 mb-2">
                        Everything Considered
                    </h2>
                    <p class="text-slate-500 text-sm mb-8">
                        The details that make luxury feel effortless. You will never
                        once need to ask for something we haven't already arranged.
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach(explode('//', $package->include) as $item)
                        <div class="flex items-start gap-3 bg-blue-50 rounded-xl p-4">
                            <div class="w-5 h-5 rounded-full bg-blue-600 flex-shrink-0 flex items-center justify-center mt-0.5">
                                <i class="las la-check text-sm text-white"></i>
                            </div>
                            <p class="text-blue-900 text-sm leading-6">
                                {{ $item }}
                            </p>
                        </div>
                        @endforeach
                    </div>
                </section>

                <!-- ===== EXCLUDE ===== -->
                <section id="exclude" class="section-anchor-show mb-14">
                    <h2 class="font-serif text-2xl font-bold text-blue-900 mb-2">
                        Not Included
                    </h2>
                    <p class="text-slate-500 text-sm mb-8">
                        A few things are intentionally left for you to choose — so
                        your journey still feels personally yours.
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach(explode('//', $package->exclude) as $item)
                        <div class="flex items-start gap-3 bg-red-50 rounded-xl p-4">
                            <div class="w-5 h-5 rounded-full bg-red-400 flex-shrink-0 flex items-center justify-center mt-0.5">
                                <i class="las la-times text-sm text-white"></i>
                            </div>
                            <p class="text-blue-900 text-sm leading-6">
                                {{ $item }}
                            </p>
                        </div>
                        @endforeach
                    </div>
                </section>

                <!-- ===== ITINERARY ===== -->
                <section id="itinerary" class="section-anchor-show mb-14">
                    <h2 class="font-serif text-2xl font-bold text-blue-900 mb-8">
                        Day-by-Day Itinerary
                    </h2>

                    <div class="space-y-0">
                        @foreach(explode('//', $package->itinerary) as $item)
                        <div class="flex gap-5">
                            <div class="flex flex-col items-center">
                                <div class="w-10 h-10 rounded-full bg-blue-800 text-white flex items-center justify-center text-sm font-bold flex-shrink-0">
                                    {{ $loop->iteration }}
                                </div>
                                <div class="timeline-line flex-1 mt-2 mx-auto" style="width: 2px"></div>
                            </div>
                            <div class="pb-10 flex-1">
                                {{-- <span class="day-pill mb-3 block w-fit">Day {{ $loop->iteration }}</span> --}}
                                <p class="text-slate-500 text-sm leading-7">
                                    {{ $item }}
                                </p>
                                
                            </div>
                        </div>
                        @endforeach
                        
                    </div>
                    <!-- /timeline -->
                </section>

                <!-- ===== NOTES ===== -->
                <section id="notes" class="section-anchor-show mb-14">
                    <h2 class="font-serif text-2xl font-bold text-blue-900 mb-2">
                        Important Notes
                    </h2>
                    <p class="text-slate-500 text-sm mb-8">
                        A few honest notes before you go — so everything about this
                        journey is exactly as it should be: clear.
                    </p>

                    <div class="space-y-4">
                        @foreach(explode('//', $package->notes) as $item)
                        <div class="flex gap-4 items-start p-5 border border-blue-100 rounded-2xl">
                            <div class="flex-shrink-0 w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">
                                <i class="las la-info-circle"></i>
                            </div>
                            <div>
                                <p class="text-slate-500 text-sm leading-6">
                                    {{ $item }}
                                </p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </section>

            </div>
            <!-- /left column -->

            <!-- RIGHT COLUMN — Booking Card -->
            <div class="w-80 flex-shrink-0 hidden lg:block">
                <div class="sticky top-[120px] z-30 bg-white border border-blue-200 rounded-2xl shadow-lg shadow-blue-100/50 overflow-hidden">
                    <!-- Price header -->
                    <div class="bg-blue-900 text-white p-6">
                        <p class="text-blue-200 text-xs uppercase tracking-widest mb-1">
                            Start from
                        </p>
                        <p class="font-serif text-3xl font-bold mb-1">
                            Rp{{ number_format($package->price_starting_from, 0, ',', '.') }}
                        </p>
                        <p class="text-blue-300 text-sm">
                            per pax
                        </p>
                    </div>
                    <!-- Details -->
                    <div class="p-5 space-y-4">
                        <div class="flex items-center gap-3 text-sm">
                            <i class="las la-map-marker-alt text-lg text-blue-500"></i>
                            <span class="text-slate-600">{{ $package->location }}</span>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <i class="las la-users text-lg text-blue-500"></i>
                            <span class="text-slate-600">Min. {{ $package->min_pax }} pax</span>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <i class="las la-shield-alt text-lg text-blue-500"></i>
                            <span class="text-slate-600"
                                >Full insurance included</span
                            >
                        </div>
                        <div class="pt-2 border-blue-50">
                            <button onclick="location.href='https://wa.me/6285121556958'" class="w-full bg-blue-800 hover:bg-blue-900 active:scale-95 text-white font-semibold py-3 rounded-xl transition text-sm mb-3">
                                Book Now
                            </button>
                            <button onclick="location.href='https://wa.me/6285121556958'" class="w-full border border-blue-200 hover:bg-blue-50 text-blue-800 font-medium py-2.5 rounded-xl transition text-sm">
                                Ask a Question
                            </button>
                        </div>
                    </div>
                    <!-- Guarantee badge -->
                    <div
                        class="bg-blue-50 border-t border-blue-100 px-5 py-3 flex items-center gap-2"
                    >
                        <i class="las la-shield-alt text-blue-700 text-lg"></i>
                        <p class="text-blue-700 text-xs font-medium">
                            Azrago Guarantee — your peace of mind, our promise
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /flex row -->
    </div>
    <!-- /max-w -->

    <!-- =================== MOBILE STICKY CTA =================== -->
    <div
        class="fixed bottom-0 left-0 right-0 bg-white border-t border-blue-100 p-4 flex items-center justify-between lg:hidden z-50 shadow-lg"
    >
        <div>
            <p class="text-xs text-slate-400">Start from</p>
            <p class="font-bold text-blue-900 text-lg">
                Rp 33.000.000
                <span class="text-slate-400 font-normal text-xs">/pax</span>
            </p>
        </div>
        <button
            class="bg-blue-800 hover:bg-blue-900 text-white font-semibold px-6 py-3 rounded-xl text-sm transition active:scale-95"
        >
            Book Now
        </button>
    </div>

    <div class="h-20 lg:h-0"></div>
    <!-- spacer for mobile CTA -->

    <script>
        function toggleFaq(btn) {
            const item = btn.closest(".faq-item");
            const isOpen = item.classList.contains("open");
            document
                .querySelectorAll(".faq-item.open")
                .forEach((el) => el.classList.remove("open"));
            if (!isOpen) item.classList.add("open");
        }

        // Active nav highlight on scroll (position-based, robust for short sections)
        const sections = Array.from(
            document.querySelectorAll(".section-anchor-show"),
        );
        const navLinks = Array.from(document.querySelectorAll(".nav-link-show"));

        function updateActiveNav() {
            const scrollOffset = 64; // matches scroll-margin-top + a bit of breathing room
            const scrollPos = window.scrollY + scrollOffset;

            let currentId = sections[0] ? sections[0].id : null;
            for (const sec of sections) {
                if (sec.offsetTop <= scrollPos) {
                    currentId = sec.id;
                } else {
                    break;
                }
            }

            // If we've scrolled past the last section's nav-link-showed anchor, keep the last linked one active
            navLinks.forEach((l) => l.classList.remove("active"));
            const link = document.querySelector(
                `.nav-link-show[href="#${currentId}"]`,
            );
            if (link) {
                link.classList.add("active");
            } else {
                // currentId has no nav link (e.g. faqs) — find nearest preceding section that does have one
                const idx = sections.findIndex((s) => s.id === currentId);
                for (let i = idx; i >= 0; i--) {
                    const fallbackLink = document.querySelector(
                        `.nav-link-show[href="#${sections[i].id}"]`,
                    );
                    if (fallbackLink) {
                        fallbackLink.classList.add("active");
                        break;
                    }
                }
            }
        }

        function getScrollOffset() {
            const stickyNav = document.querySelector('.sticky-nav-show');
            if (!stickyNav) return 0;
            const style = window.getComputedStyle(stickyNav);
            const stickyTop = parseFloat(style.top) || 0; // posisi "top" sticky nav dari CSS
            return stickyTop + stickyNav.offsetHeight + 8; // +8px jarak napas
        }

        document.querySelectorAll('.nav-link-show').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const target = document.getElementById(targetId);
                if (!target) return;

                const offset = getScrollOffset();
                const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

                window.scrollTo({ top, behavior: 'smooth' });
                history.replaceState(null, '', '#' + targetId); // update URL tanpa jump tambahan
            });
        });

        window.addEventListener("scroll", updateActiveNav, { passive: true });
        window.addEventListener("resize", updateActiveNav);
        updateActiveNav();

        // ============ PHOTO GALLERY MODAL ============
        const galleryPhotos = [
            @foreach ($images as $index => $image)
            {
                src: "{{ asset('uploads/packages/' . $image) }}",
                alt: "{{ $package->title }}",
            },
            @endforeach
            
        ];

        let currentPhotoIndex = 0;
        const galleryModal = document.getElementById("gallery-modal");
        const gridView = document.getElementById("gallery-grid-view");
        const lightboxView = document.getElementById("gallery-lightbox-view");
        const lightboxImg = document.getElementById("lightbox-img");
        const lightboxCounter = document.getElementById("lightbox-counter");

        function renderGalleryGrid() {
            const container = gridView.querySelector("div");
            container.innerHTML = galleryPhotos
                .map(
                    (photo, i) => `
        <button onclick="openLightbox(${i})" class="rounded-xl overflow-hidden bg-blue-800 aspect-square relative group">
            <img src="${photo.src}" alt="${photo.alt}" class="w-full h-full object-cover transition group-hover:scale-105" onerror="this.style.display='none'" />
            <div class="absolute inset-0 bg-blue-950/0 group-hover:bg-blue-950/20 transition"></div>
        </button>
        `,
                )
                .join("");
        }

        function openGallery() {
            renderGalleryGrid();
            galleryModal.classList.remove("hidden");
            gridView.classList.remove("hidden");
            lightboxView.classList.add("hidden");
            document.body.style.overflow = "hidden";
        }

        function closeGallery() {
            galleryModal.classList.add("hidden");
            document.body.style.overflow = "";
        }

        function openLightbox(index) {
            currentPhotoIndex = index;
            updateLightbox();
            gridView.classList.add("hidden");
            lightboxView.classList.remove("hidden");
        }

        function backToGrid() {
            lightboxView.classList.add("hidden");
            gridView.classList.remove("hidden");
        }

        function updateLightbox() {
            const photo = galleryPhotos[currentPhotoIndex];
            lightboxImg.src = photo.src;
            lightboxImg.alt = photo.alt;
            lightboxCounter.textContent = `${currentPhotoIndex + 1} / ${galleryPhotos.length}`;
        }

        function lightboxPrev() {
            currentPhotoIndex =
                (currentPhotoIndex - 1 + galleryPhotos.length) %
                galleryPhotos.length;
            updateLightbox();
        }

        function lightboxNext() {
            currentPhotoIndex = (currentPhotoIndex + 1) % galleryPhotos.length;
            updateLightbox();
        }

        document.addEventListener("keydown", (e) => {
            if (galleryModal.classList.contains("hidden")) return;
            if (e.key === "Escape") closeGallery();
            if (!lightboxView.classList.contains("hidden")) {
                if (e.key === "ArrowLeft") lightboxPrev();
                if (e.key === "ArrowRight") lightboxNext();
            }
        });
    </script>
</div>

@endsection