<div>
    <!-- ============================================================ -->
    <!-- HERO SLIDER - FULL IMAGE DENGAN OVERLAY TIPIS -->
    <!-- ============================================================ -->
    @php
    $sliderData = $sliders ?? [];
    @endphp

    @if($sliderData && count($sliderData) > 0)
    <div class="relative overflow-hidden bg-gradient-to-r from-[#0b2b4a] to-[#1a4a6e] text-white">
        <div class="container mx-auto px-4 py-6 md:py-8">
            <div class="relative"
                x-data="{
                 slides: {{ json_encode($sliderData) }},
                 currentSlide: 0,
                 autoplay() {
                     if (this.slides.length > 1) {
                         setInterval(() => {
                             this.nextSlide();
                         }, 5000);
                     }
                 },
                 nextSlide() {
                     this.currentSlide = (this.currentSlide + 1) % this.slides.length;
                 },
                 prevSlide() {
                     this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
                 },
                 goToSlide(index) {
                     this.currentSlide = index;
                 }
             }"
                x-init="autoplay()">

                <div class="relative h-[350px] md:h-[450px] lg:h-[500px] overflow-hidden rounded-2xl">
                    <template x-for="(slide, index) in slides" :key="index">
                        <div x-show="currentSlide === index"
                            x-transition:enter="transition ease-out duration-500"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            class="absolute inset-0 rounded-2xl overflow-hidden">

                            <!-- GAMBAR FULL -->
                            <template x-if="slide.image_url">
                                <img :src="slide.image_url"
                                    class="absolute inset-0 w-full h-full object-cover">
                            </template>

                            <!-- FALLBACK WARNA JIKA TIDAK ADA GAMBAR -->
                            <template x-if="!slide.image_url">
                                <div class="absolute inset-0 bg-gradient-to-r" :class="slide.color || 'from-[#0b2b4a] to-[#1a4a6e]'"></div>
                            </template>

                            <!-- ========================================================= -->
                            <!-- OVERLAY TIPIS (INI YANG DIUBAH) -->
                            <!-- ========================================================= -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div>

                            <!-- PATTERN (TETAP) -->
                            <div class="absolute inset-0 opacity-5">
                                <svg class="w-full h-full" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                                        <circle cx="2" cy="2" r="1" fill="white" />
                                    </pattern>
                                    <rect width="100" height="100" fill="url(#grid)" />
                                </svg>
                            </div>

                            <!-- KONTEN -->
                            <div class="relative z-10 flex flex-col justify-center h-full px-8 md:px-12 lg:px-16 max-w-2xl lg:max-w-3xl">
                                <div class="flex items-center gap-3 mb-3">
                                    <i class="fas text-3xl md:text-4xl text-[#c9a84c]" :class="slide.icon || 'fa-file-contract'"></i>
                                    <span class="text-xs font-semibold uppercase tracking-wider bg-white/20 px-3 py-1 rounded-full">
                                        TUNJUK-i
                                    </span>
                                </div>
                                <h2 class="text-2xl md:text-4xl lg:text-5xl font-bold mb-2 leading-tight text-white drop-shadow-lg" x-text="slide.title"></h2>
                                <p class="text-sm md:text-lg text-white/90 max-w-lg mb-4 drop-shadow-md" x-text="slide.description"></p>
                                <button @click="slide.category ? setCategory(slide.category) : null"
                                    class="inline-flex items-center gap-2 bg-[#c9a84c] hover:bg-yellow-500 text-[#0b2b4a] px-6 py-3 rounded-xl text-sm md:text-base font-semibold transition shadow-lg w-fit">
                                    <i class="fas fa-arrow-right"></i>
                                    <span x-text="slide.button_text || 'Lihat Paket'"></span>
                                </button>
                            </div>

                            <!-- DECORATIVE ICON -->
                            <div class="absolute right-0 bottom-0 opacity-10 text-white text-9xl md:text-[15rem] font-bold -mb-8 md:-mb-16 mr-4 md:mr-8">
                                <i :class="slide.icon || 'fa-file-contract'"></i>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- NAVIGATION -->
                <template x-if="slides.length > 1">
                    <div>
                        <button @click="prevSlide()"
                            class="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-[#c9a84c] backdrop-blur-sm text-white p-2 md:p-3 rounded-full transition z-20">
                            <i class="fas fa-chevron-left text-lg md:text-xl"></i>
                        </button>
                        <button @click="nextSlide()"
                            class="absolute right-3 md:right-4 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-[#c9a84c] backdrop-blur-sm text-white p-2 md:p-3 rounded-full transition z-20">
                            <i class="fas fa-chevron-right text-lg md:text-xl"></i>
                        </button>

                        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-20">
                            <template x-for="(slide, index) in slides" :key="'dot-'+index">
                                <button @click="goToSlide(index)"
                                    class="w-2 h-2 rounded-full transition"
                                    :class="currentSlide === index ? 'bg-[#c9a84c] w-8' : 'bg-white/50 hover:bg-white/70'">
                                </button>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
    @else
    <!-- FALLBACK SLIDER -->
    <div class="bg-gradient-to-r from-[#0b2b4a] to-[#1a4a6e] text-white py-16">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <i class="fas fa-store text-5xl md:text-6xl text-[#c9a84c] mb-4"></i>
                <h1 class="text-3xl md:text-5xl font-bold mb-2">TUNJUK-i</h1>
                <p class="text-gray-300">Temukan paket pekerjaan terbaik di Papua</p>
            </div>
        </div>
    </div>
    @endif

    <!-- ============================================================ -->
    <!-- HEADER - E-PROCUREMENT STYLE -->
    <!-- ============================================================ -->
    <div class="bg-white border-b border-gray-200 py-4">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <div class="flex items-center gap-3">
                        <div class="w-1 h-8 bg-[#c9a84c] rounded-full"></div>
                        <div>
                            <h2 class="text-xl font-bold text-gray-800">
                                Portal Pengadaan Papua
                            </h2>
                            <p class="text-xs text-gray-500">
                                <i class="fas fa-info-circle text-[#c9a84c]"></i>
                                Nilai Paket &lt; Rp 1.000.000.000 (Satu Milyar)
                            </p>
                        </div>
                    </div>
                </div>

                <div class="w-full md:w-80">
                    <div class="relative">
                        <input type="text"
                            wire:model.live="search"
                            placeholder="Cari paket, penyedia, atau kata kunci..."
                            class="w-full px-6 py-2.5 pr-12 rounded-xl border border-gray-200 focus:border-[#c9a84c] focus:ring-2 focus:ring-[#c9a84c]/20 text-gray-700 placeholder-gray-400 transition outline-none text-sm">
                        <i class="fas fa-search absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- FILTER / NAVIGASI -->
    <!-- ============================================================ -->
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="container mx-auto px-4 py-3">
            <div class="flex flex-wrap items-center gap-2">
                <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider mr-2">
                    <i class="fas fa-filter text-[#c9a84c]"></i> Kategori Paket:
                </span>

                @foreach($categories as $category)
                <button wire:click="setCategory('{{ $category }}')"
                    class="px-4 py-1.5 rounded-full text-xs font-medium transition
                               {{ $activeCategory == $category 
                                   ? 'bg-[#0b2b4a] text-white' 
                                   : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}">
                    {{ $category }}
                </button>
                @endforeach

                <button wire:click="resetFilter"
                    class="px-4 py-1.5 rounded-full text-xs font-medium bg-gray-200 hover:bg-gray-300 text-gray-600 transition">
                    <i class="fas fa-undo"></i> Reset
                </button>
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- INFORMASI PAKET -->
    <!-- ============================================================ -->
    <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between mb-4">
            <div>
                <span class="text-sm text-gray-500">
                    <i class="fas fa-list-ul text-[#c9a84c]"></i>
                    Ditemukan <strong class="text-gray-700">{{ $products->total() }}</strong> paket
                </span>
                <span class="text-xs text-gray-400 ml-3">
                    Nilai paket &lt; Rp 1.000.000.000
                </span>
            </div>
            <div class="text-xs text-gray-400">
                <i class="fas fa-clock"></i> Update: {{ now()->format('d/m/Y H:i') }} WIT
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- GRID PAKET PEKERJAAN -->
    <!-- ============================================================ -->
    <div class="container mx-auto px-4 pb-8">
        @if($products->isEmpty())
        <div class="text-center py-20 bg-white rounded-2xl border border-gray-100">
            <i class="fas fa-file-contract text-6xl text-gray-300 mb-4"></i>
            <h3 class="text-xl font-semibold text-gray-600">Belum ada paket pekerjaan</h3>
            <p class="text-gray-400 text-sm">Silakan cek kembali nanti</p>
        </div>
        @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($products as $product)
            <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-100">
                <div class="bg-gradient-to-r from-[#0b2b4a] to-[#1a4a6e] px-4 py-3">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <span class="text-xs text-[#c9a84c] font-semibold uppercase tracking-wider">
                                <i class="fas fa-folder-open"></i> {{ $product->category }}
                            </span>
                            <h3 class="text-white font-semibold text-sm mt-1 line-clamp-1">
                                {{ $product->name }}
                            </h3>
                        </div>
                        <span class="text-[10px] bg-green-500/20 text-green-300 px-2 py-0.5 rounded-full">
                            {{ $product->status == 'active' ? 'Terbuka' : 'Ditutup' }}
                        </span>
                    </div>
                </div>

                <div class="p-4">
                    <p class="text-gray-600 text-sm line-clamp-2 mb-3">
                        {{ $product->description }}
                    </p>

                    <div class="grid grid-cols-2 gap-2 text-xs mb-3">
                        <div class="bg-gray-50 rounded-lg p-2">
                            <span class="text-gray-400">Pagu Anggaran</span>
                            <p class="font-semibold text-gray-700">
                                Rp {{ number_format($product->price, 0, ',', '.') }}
                            </p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-2">
                            <span class="text-gray-400">Kualifikasi</span>
                            <p class="font-semibold text-gray-700">
                                {{ $product->qualification ?? 'Kecil' }}
                            </p>
                        </div>
                    </div>

                    <div class="flex items-center gap-4 text-xs text-gray-400 border-t border-gray-100 pt-3">
                        <span>
                            <i class="far fa-calendar-alt"></i>
                            {{ $product->created_at ? $product->created_at->format('d/m/Y') : '-' }}
                        </span>
                        <span>
                            <i class="far fa-user"></i>
                            {{ $product->provider ?? 'Belum ada' }}
                        </span>
                    </div>

                    <a href="{{ route('package.detail', $product->id) }}"
                        class="mt-3 w-full py-2 bg-[#c9a84c] hover:bg-[#b8973a] text-white rounded-lg text-xs font-semibold transition flex items-center justify-center gap-2 text-center">
                        <i class="fas fa-file-signature"></i>
                        Lihat Detail
                    </a>
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-6">
            {{ $products->links() }}
        </div>
        @endif
    </div>

    <!-- ============================================================ -->
    <!-- STATISTIK / INFO CEPAT -->
    <!-- ============================================================ -->
    <div class="bg-[#0b2b4a] text-white py-8 mt-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div>
                    <div class="text-3xl font-bold text-[#c9a84c]">{{ $products->total() }}</div>
                    <div class="text-xs text-gray-400">Total Paket</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-[#c9a84c]">{{ $categoriesCount ?? 6 }}</div>
                    <div class="text-xs text-gray-400">Kategori</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-[#c9a84c]">{{ $totalProviders ?? 12 }}</div>
                    <div class="text-xs text-gray-400">Penyedia</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-[#c9a84c]">{{ $totalValue ?? 'Rp 0' }}</div>
                    <div class="text-xs text-gray-400">Total Pagu</div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================ -->
    <!-- NOTIFICATION -->
    <!-- ============================================================ -->
    @if(session()->has('message'))
    <div class="fixed top-4 right-4 z-50 bg-green-500 text-white px-6 py-4 rounded-xl shadow-lg animate-slide-in-right">
        {{ session('message') }}
    </div>
    @endif
</div>

<!-- Custom CSS -->
<style>
    @keyframes slide-in-right {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .animate-slide-in-right {
        animation: slide-in-right 0.3s ease-out;
    }

    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>