<section id="gallery" class="relative py-20 lg:py-28 bg-gray-50 overflow-hidden">
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-12 reveal">
            <div class="inline-flex items-center space-x-2 bg-primary-50 text-primary-600 px-4 py-1.5 rounded-full text-sm font-medium mb-4">
                <i class="fas fa-images text-xs"></i>
                <span>Our Gallery</span>
            </div>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 font-display">
                Pictorial <span class="gradient-text">Portfolio</span>
            </h2>
            <div class="section-divider max-w-24 mx-auto mb-6"></div>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                Explore moments from our training sessions, graduation ceremonies, conferences, and community events.
            </p>
        </div>

        <!-- Filter & Search Bar -->
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mb-8 reveal" x-data="{ searchTerm: '{{ request('search', '') }}', activeType: '{{ request('gallery_type', '') }}' }">
            <!-- Gallery Type Filter -->
            <div class="flex flex-wrap items-center gap-2">
                <button
                    @click="activeType = ''; window.location.href = '{{ url()->current() }}#gallery'"
                    class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-300"
                    :class="!activeType ? 'bg-primary-500 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'"
                >
                    All
                </button>
                @foreach($galleryTypes as $type)
                    <a href="{{ url()->current() }}?gallery_type={{ $type->id }}#gallery"
                       class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 {{ request('gallery_type') == $type->id ? 'bg-primary-500 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}"
                    >
                        <i class="fas {{ $type->icon }} mr-1" style="color: {{ $type->color }}"></i>
                        {{ $type->name }}
                    </a>
                @endforeach
            </div>

            <!-- Search -->
            <form action="{{ url()->current() }}#gallery" method="GET" class="relative">
                @if(request('gallery_type'))
                    <input type="hidden" name="gallery_type" value="{{ request('gallery_type') }}">
                @endif
                <input
                    type="text"
                    name="search"
                    value="{{ request('search', '') }}"
                    placeholder="Search gallery..."
                    class="pl-10 pr-4 py-2.5 rounded-full border border-gray-200 bg-white text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 w-64"
                >
                <i class="fas fa-search absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
            </form>
        </div>

        <!-- Gallery Grid - Masonry Style -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4 reveal">
            @forelse($galleryImages as $index => $image)
                <div class="gallery-item relative rounded-xl overflow-hidden cursor-pointer group {{ $index % 7 === 0 ? 'md:col-span-2 md:row-span-2' : '' }}"
                     x-data="{ hovered: false }"
                     @mouseenter="hovered = true"
                     @mouseleave="hovered = false"
                >
                    <div class="{{ $index % 7 === 0 ? 'aspect-square' : 'aspect-[4/3]' }}">
                        <img src="{{ $image->image_path }}"
                             alt="{{ $image->title }}"
                             class="w-full h-full object-cover"
                             loading="lazy">
                    </div>

                    <!-- Hover Overlay -->
                    <div class="overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 flex items-end p-4">
                        <div>
                            <h4 class="text-white font-semibold text-sm">{{ $image->title }}</h4>
                            @if($image->description)
                                <p class="text-white/70 text-xs mt-1">{{ Str::limit($image->description, 60) }}</p>
                            @endif
                            @if($image->gallery)
                                <span class="inline-flex items-center space-x-1 text-xs mt-2 bg-white/20 text-white px-2 py-0.5 rounded-full">
                                    <i class="fas {{ $image->gallery->type->icon ?? 'fa-images' }} text-xs"></i>
                                    <span>{{ $image->gallery->type->name ?? 'General' }}</span>
                                </span>
                            @endif
                        </div>
                    </div>

                    <!-- Play/Zoom icon on hover -->
                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <div class="w-12 h-12 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center">
                            <i class="fas fa-search-plus text-white text-lg"></i>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center py-16">
                    <div class="w-20 h-20 bg-gray-100 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <i class="fas fa-images text-gray-300 text-3xl"></i>
                    </div>
                    <p class="text-gray-400 text-sm">No gallery images found.</p>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($galleryImages->hasPages())
            <div class="flex justify-center mt-10 reveal">
                <div class="flex items-center space-x-1">
                    {{ $galleryImages->withQueryString()->links('landing.partials.pagination') }}
                </div>
            </div>
        @endif
    </div>
</section>
