@extends('layouts.app')
@section('content')
<!-- Top bar (same as home) -->
<div class="bg-white text-gray-800 text-xs sm:text-sm flex justify-between items-center px-4 sm:px-6 py-2 border-b border-gray-100">
    <div class="flex items-center space-x-3 sm:space-x-4">
        <div class="flex items-center space-x-1">
            <i class="fas fa-envelope text-[#1dbf4a] text-xs"></i>
            <span class="hidden sm:inline">{{ $settings['email'] ?? 'secretariat@desarrdigital.id' }}</span>
            <span class="sm:hidden">Email</span>
        </div>
        <span class="hidden sm:inline text-gray-300">|</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-phone-alt text-[#1dbf4a] text-xs"></i>
            <span class="hidden sm:inline">{{ $settings['wa_number'] ?? '+62 812 9496 2546' }}</span>
            <span class="sm:hidden">WA</span>
        </div>
    </div>
    <div class="flex items-center space-x-1 sm:space-x-2">
        <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="WhatsApp">
            <i class="fab fa-whatsapp text-sm"></i>
        </a>
        <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="Facebook">
            <i class="fab fa-facebook-f text-sm"></i>
        </a>
        <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="Twitter">
            <i class="fab fa-twitter text-sm"></i>
        </a>
        <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="YouTube">
            <i class="fab fa-youtube text-sm"></i>
        </a>
    </div>
</div>

<!-- Navbar (same as home) -->
<nav class="bg-[#1dbf4a] flex items-center justify-between px-4 sm:px-8 py-3">
    <div class="flex items-center space-x-2 sm:space-x-4">
        @if(($settings['logo_url'] ?? false))
            <img alt="Website Desa logo" class="w-10 h-10 sm:w-12 sm:h-12 object-contain" src="{{ asset($settings['logo_url']) }}" />
        @else
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                <span class="text-white font-bold text-sm sm:text-base">WD</span>
            </div>
        @endif
        <div class="text-white font-robotoslab font-semibold text-base sm:text-xl">
            <div>{{ $settings['hero_title'] ?? 'Website Desa' }}</div>
            <div class="text-sm opacity-90">{{ $settings['hero_subtitle'] ?? 'Kec. Ps. Wajo' }}</div>
        </div>
    </div>

    <!-- Desktop Navigation -->
    <ul class="hidden lg:flex space-x-6 text-white font-semibold text-sm sm:text-base">
        <li><a class="hover:text-gray-200" href="{{ url('/') }}">Beranda</a></li>
        <li><a class="hover:text-gray-200" href="{{ route('profil-desa') }}">Profil Desa</a></li>
        <li><a class="hover:text-gray-200" href="{{ route('berita.list') }}">Berita</a></li>
        <li><a class="hover:text-gray-200" href="{{ route('galeri.list') }}">Galeri</a></li>
        <li><a class="hover:text-gray-200" href="{{ route('pengumuman.list') }}">Pengumuman</a></li>
    </ul>

    <!-- Mobile Menu Button -->
    <button id="galeri-mobile-menu-btn" class="lg:hidden text-white p-2">
        <i class="fas fa-bars text-lg"></i>
    </button>

    <button class="bg-orange-500 hover:bg-orange-600 text-white text-xs sm:text-sm font-semibold rounded-full px-3 sm:px-4 py-1 hidden sm:block" type="button">
        Buat Pengaduan <i class="fas fa-arrow-right ml-1"></i>
    </button>
</nav>

<!-- Mobile Navigation Menu (page-local) -->
<div id="galeri-mobile-menu" class="lg:hidden hidden bg-[#1dbf4a] text-white">
    <ul class="px-4 py-2 space-y-2 text-sm">
        <li class="py-2"><a class="hover:text-gray-200" href="{{ url('/') }}">Beranda</a></li>
        <li class="py-2"><a class="hover:text-gray-200" href="{{ route('profil-desa') }}">Profil Desa</a></li>
        <li class="py-2"><a class="hover:text-gray-200" href="{{ route('berita.list') }}">Berita</a></li>
        <li class="py-2"><a class="hover:text-gray-200" href="{{ route('galeri.list') }}">Galeri</a></li>
        <li class="py-2"><a class="hover:text-gray-200" href="{{ route('pengumuman.list') }}">Pengumuman</a></li>
    </ul>
</div>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
    <!-- Local back removed; global back bar in layout -->
    <h2 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-4 text-center sm:text-left">Galeri Kegiatan Desa</h2>

    {{-- Category-first view: show categories when no category selected --}}
    @if(empty($selectedKategori))
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4 lg:gap-6">
            @forelse(($categories ?? collect()) as $category)
                <a href="{{ route('galeri.list', ['kategori' => $category]) }}" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow block overflow-hidden">
                    <div class="relative">
                        @php $thumb = $categoryThumbs[$category] ?? null; @endphp
                        @if($thumb)
                            <img src="{{ asset($thumb) }}" alt="{{ $category }}" class="w-full h-28 sm:h-36 object-cover">
                        @else
                            <div class="w-full h-28 sm:h-36 bg-gray-100 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-300" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v8l-3.5-3.5a1 1 0 00-1.415 0L8 13 6.207 11.207a1 1 0 00-1.414 0L4 12V5z" /></svg>
                            </div>
                        @endif
                        <div class="absolute top-2 right-2">
                            <span class="bg-[#1dbf4a] text-white text-[10px] px-2 py-1 rounded-full">{{ $categoryCounts[$category] ?? 0 }} Foto</span>
                        </div>
                    </div>
                    <div class="p-2 sm:p-3">
                        <p class="font-semibold text-xs sm:text-sm text-center">{{ $category }}</p>
                    </div>
                </a>
            @empty
                <div class="col-span-full text-center text-sm text-gray-600">Belum ada kategori galeri.</div>
            @endforelse
        </div>
    @else
        <div class="flex items-center justify-between mb-3 sm:mb-4">
            <h3 class="font-semibold text-sm sm:text-base">Kategori: <span class="text-[#1dbf4a]">{{ $selectedKategori }}</span></h3>
            <a href="{{ route('galeri.list') }}" class="text-xs sm:text-sm text-gray-600 hover:text-gray-800">← Semua Kategori</a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4 lg:gap-6">
            @foreach($galeri as $item)
                <div class="bg-white rounded-lg shadow-md p-2 sm:p-3 flex flex-col items-center hover:shadow-lg transition-shadow">
                    <img src="{{ $item->gambar ? asset($item->gambar) : 'https://storage.googleapis.com/a1aa/image/752879b4-785b-4f86-832c-0ff3f174167a.jpg' }}" alt="{{ $item->judul }}" class="rounded-lg mb-2 h-24 sm:h-32 w-full object-cover">
                    <p class="font-semibold text-xs sm:text-sm mb-1 text-center line-clamp-2">{{ $item->judul }}</p>
                    <a href="{{ route('galeri.detail', $item->id) }}" class="text-[#1dbf4a] hover:text-[#0f9d58] text-xs font-semibold">Lihat Detail →</a>
                </div>
            @endforeach
        </div>
        <div class="mt-6 sm:mt-8 flex justify-center">{{ $galeri->links() }}</div>
    @endif
</div>

<script>
    document.getElementById('galeri-mobile-menu-btn')?.addEventListener('click', function() {
        const menu = document.getElementById('galeri-mobile-menu');
        if (menu) menu.classList.toggle('hidden');
    });
</script>
@endsection