@extends('layouts.public')

@section('content')
<!-- Hero Search Section -->
<div class="relative bg-ungaran-hero text-white py-16 md:py-24 px-4 sm:px-6 lg:px-8 overflow-hidden shadow-2xl border-b border-emerald-800">
    <div class="relative max-w-5xl mx-auto text-center space-y-8">
        <!-- Hero Badge dengan Logo & Kepanjangan JDIH -->
        <div class="inline-flex items-center gap-3 bg-emerald-900/90 border border-emerald-500/40 px-5 py-2.5 rounded-full text-emerald-100 text-xs sm:text-sm font-semibold backdrop-blur-md shadow-lg">
            <img src="/logo-gogik.png" alt="Logo Desa Gogik" class="h-7 w-auto object-contain drop-shadow-md" />
            <span class="font-bold">Lereng Gunung Ungaran • Desa Gogik</span>
            <span class="text-gold-300 font-extrabold">• Jaringan Dokumentasi dan Informasi Hukum (JDIH)</span>
        </div>

        <div class="space-y-4">
            <h1 class="text-3xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-tight">
                Dokumen Hukum Mudah Diakses,<br />
                <span class="bg-gradient-to-r from-gold-300 via-amber-400 to-gold-500 bg-clip-text text-transparent">
                    Transparan & Terpercaya.
                </span>
            </h1>
            <p class="text-sm sm:text-lg text-emerald-100 max-w-3xl mx-auto font-medium leading-relaxed">
                Portal Jaringan Dokumentasi dan Informasi Hukum Resmi Pemerintah Desa Gogik, Kecamatan Ungaran Barat, Kabupaten Semarang.
            </p>
        </div>

        <!-- Search Form -->
        <form action="{{ route('products.index') }}" method="GET" class="bg-white p-3 sm:p-4 rounded-2xl shadow-2xl border-2 border-emerald-500/40 max-w-4xl mx-auto text-slate-800 space-y-3 md:space-y-0 md:flex md:items-center md:gap-3">
            <div class="relative flex-1">
                <input
                    type="text"
                    name="q"
                    placeholder="Cari berdasarkan nomor, judul, atau kata kunci (contoh: APBDes, Sampah)..."
                    class="w-full pl-4 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-600"
                />
            </div>
            <div class="w-full md:w-48">
                <select name="category" class="w-full py-3 px-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-700">
                    <option value="">Semua Jenis</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->slug }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="w-full md:w-auto px-7 py-3 bg-emerald-700 hover:bg-emerald-800 text-white font-bold rounded-xl shadow-lg">
                🔍 Cari Dokumen
            </button>
        </form>
    </div>
</div>

<!-- Stats Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-20">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-2xl shadow-xl border border-emerald-100 flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-800 flex items-center justify-center font-bold text-xl">📄</div>
            <div>
                <p class="text-xs font-bold text-slate-500 uppercase">Produk Hukum Publik</p>
                <h3 class="text-2xl font-extrabold text-slate-900 mt-0.5">{{ $totalProducts }} Dokumen</h3>
            </div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-xl border border-emerald-100 flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-gold-100 text-gold-800 flex items-center justify-center font-bold text-xl">📥</div>
            <div>
                <p class="text-xs font-bold text-slate-500 uppercase">Total Unduhan PDF</p>
                <h3 class="text-2xl font-extrabold text-slate-900 mt-0.5">{{ $totalDownloads }} Kali</h3>
            </div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-xl border border-emerald-100 flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-emerald-900 text-gold-400 flex items-center justify-center font-bold text-xl">🏛️</div>
            <div>
                <p class="text-xs font-bold text-slate-500 uppercase">JDIH RESMI</p>
                <h3 class="text-2xl font-extrabold text-emerald-800 mt-0.5">Desa Gogik</h3>
            </div>
        </div>
    </div>
</div>

<!-- Categories Grid -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-8">
    <div class="text-center max-w-2xl mx-auto space-y-2">
        <h2 class="text-2xl font-extrabold text-slate-900">Kategori Produk Hukum Desa</h2>
        <p class="text-xs text-slate-500">Klasifikasi resmi naskah Jaringan Dokumentasi dan Informasi Hukum Pemerintah Desa Gogik.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($categories as $cat)
            <a href="{{ route('products.index', ['category' => $cat->slug]) }}" class="bg-white p-6 rounded-2xl shadow-md border border-slate-200 hover:border-emerald-500 hover:shadow-xl transition-all space-y-3 block group">
                <div class="flex items-center justify-between">
                    <span class="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-800 flex items-center justify-center font-bold text-lg group-hover:bg-emerald-700 group-hover:text-white transition-colors">
                        📜
                    </span>
                    <span class="bg-emerald-100 text-emerald-800 font-extrabold text-xs px-2.5 py-1 rounded-full">
                        {{ $cat->products_count }} Dokumen
                    </span>
                </div>
                <h3 class="font-bold text-slate-900 text-base group-hover:text-emerald-700 transition-colors">{{ $cat->name }}</h3>
                <p class="text-xs text-slate-500 line-clamp-2">{{ $cat->description }}</p>
            </a>
        @endforeach
    </div>
</div>
@endsection