<div class="px-4 pt-4">

    {{-- ══ BANNER ══════════════════════════════════════════════════════════ --}}
    @if ($banners->isNotEmpty())
        <div x-data="{
                c: 0, t: {{ $banners->count() }}, timer: null,
                init(){ this.timer = setInterval(()=>{ this.c=(this.c+1)%this.t }, 4500) },
                destroy(){ clearInterval(this.timer) }
             }"
             x-init="init()" @mouseenter="destroy()" @mouseleave="init()"
             class="relative overflow-hidden rounded-xl mb-5 bg-slate-200"
             style="height:170px">

            <div class="flex h-full transition-transform duration-500 ease-out will-change-transform"
                 :style="`transform:translateX(-${c*100}%)`">
                @foreach ($banners as $banner)
                    <div class="w-full h-full shrink-0">
                        @if ($banner->link_url)
                            <a href="{{ $banner->link_url }}" target="_blank" rel="noopener" class="block w-full h-full">
                                <img src="{{ Storage::url($banner->image) }}" alt="{{ $banner->title }}"
                                     class="w-full h-full object-cover rounded-xl" loading="eager" />
                            </a>
                        @else
                            <img src="{{ Storage::url($banner->image) }}" alt="{{ $banner->title }}"
                                 class="w-full h-full object-cover rounded-xl" loading="eager" />
                        @endif
                    </div>
                @endforeach
            </div>

            {{-- Dots --}}
            @if ($banners->count() > 1)
                <div class="absolute bottom-2.5 inset-x-0 flex justify-center gap-1.5">
                    @foreach ($banners as $i => $b)
                        <button type="button" @click="c={{ $i }}"
                            :class="c==={{ $i }} ? 'w-5 bg-white' : 'w-1.5 bg-white/50'"
                            class="h-1.5 rounded-full transition-all duration-300"></button>
                    @endforeach
                </div>
            @endif
        </div>
    @endif

    {{-- ══ KATEGORI ════════════════════════════════════════════════════════ --}}
    @if ($categories->isNotEmpty())
        <section class="mb-5">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-base font-semibold text-slate-800">Kategori</h2>
                @if ($filterCategory)
                    <button type="button" wire:click="$set('filterCategory','')"
                        class="text-xs text-orange-500 font-medium">Lihat semua ›</button>
                @else
                    <a href="{{ route('store.products') }}" class="text-xs text-orange-500 font-medium">Lihat semua ›</a>
                @endif
            </div>
            <div class="flex gap-3 overflow-x-auto pb-1 -mx-4 px-4 scrollbar-hide">
                @foreach ($categories as $cat)
                    <button type="button" wire:click="setCategory('{{ $cat->slug }}')"
                        class="flex flex-col items-center gap-2 shrink-0 w-16 active:scale-95 transition-transform duration-150">
                        <div @class([
                            'w-16 h-16 rounded-xl flex items-center justify-center transition-colors duration-200 shadow-sm',
                            'bg-orange-50 border-2 border-orange-500' => $filterCategory === $cat->slug,
                            'bg-white border border-slate-100'        => $filterCategory !== $cat->slug,
                        ])>
                            @if ($cat->image)
                                <img src="{{ Storage::url($cat->image) }}" alt="{{ $cat->name }}"
                                     class="w-9 h-9 object-contain"
                                     loading="lazy" />
                            @else
                                <span class="text-xl font-bold {{ $filterCategory === $cat->slug ? 'text-orange-600' : 'text-orange-400' }}">
                                    {{ strtoupper(substr($cat->name, 0, 1)) }}
                                </span>
                            @endif
                        </div>
                        <span class="text-[11px] text-center leading-tight line-clamp-2 w-full
                            {{ $filterCategory === $cat->slug ? 'text-orange-600 font-semibold' : 'text-slate-600' }}">
                            {{ $cat->name }}
                        </span>
                    </button>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ══ FILTER CHIPS ════════════════════════════════════════════════════ --}}
    <section class="mb-5">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-base font-semibold text-slate-800">Filter</h2>
        </div>
        <div class="flex gap-2 overflow-x-auto pb-0.5 -mx-4 px-4 scrollbar-hide">
            @php $allActive = $filterFeatured === '' && $filterPrice === ''; @endphp

            <x-store.filter-chip :active="$allActive"
                wire:click="$set('filterFeatured',''); $set('filterPrice','')">
                Semua
            </x-store.filter-chip>

            <x-store.filter-chip :active="$filterFeatured === 'featured'"
                wire:click="$set('filterFeatured','featured'); $set('filterPrice','')"
                icon="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                Unggulan
            </x-store.filter-chip>

            <x-store.filter-chip :active="$filterPrice === 'under50k'"
                wire:click="$set('filterPrice','under50k'); $set('filterFeatured','')">
                Di bawah 50rb
            </x-store.filter-chip>

            <x-store.filter-chip :active="$filterPrice === '50k-100k'"
                wire:click="$set('filterPrice','50k-100k'); $set('filterFeatured','')">
                50rb – 100rb
            </x-store.filter-chip>

            <x-store.filter-chip :active="$filterPrice === 'above100k'"
                wire:click="$set('filterPrice','above100k'); $set('filterFeatured','')">
                &gt;100rb
            </x-store.filter-chip>
        </div>
    </section>

    {{-- ══ LOADING ══════════════════════════════════════════════════════════ --}}
    <div wire:loading.flex wire:target="search,filterCategory,filterPrice,filterFeatured"
         class="items-center justify-center gap-2 py-10 text-slate-400">
        <svg class="animate-spin w-5 h-5 text-orange-400" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        <span class="text-sm">Memuat...</span>
    </div>

    <div wire:loading.remove wire:target="search,filterCategory,filterPrice,filterFeatured">

        {{-- ══ MODE FILTER ════════════════════════════════════════════════ --}}
        @if ($isFiltering)
            @if ($search)
                <p class="text-xs text-slate-500 mb-3">
                    Hasil untuk <strong class="text-slate-700">"{{ $search }}"</strong>
                </p>
            @endif

            @if ($products->isEmpty())
                <div class="py-16 flex flex-col items-center text-center">
                    <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                        <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <p class="font-semibold text-slate-600 text-sm">Produk tidak ditemukan</p>
                    <p class="text-xs text-slate-400 mt-1 mb-4">Coba kata kunci yang berbeda</p>
                    <button type="button" wire:click="$set('search','')"
                        class="h-11 px-6 bg-orange-500 text-white text-sm font-semibold rounded-xl
                               hover:bg-orange-600 active:scale-95 transition-all">
                        Lihat Semua Produk
                    </button>
                </div>
            @else
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
                    @foreach ($products as $product)
                        @include('livewire.store.partials.product-card', ['product'=>$product])
                    @endforeach
                </div>
                {{ $products->links() }}
            @endif

        @else
            {{-- ══ BERANDA ══════════════════════════════════════════════════ --}}

            {{-- Produk Unggulan --}}
            @if ($featuredProducts->isNotEmpty())
                <section class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <h2 class="text-base font-semibold text-slate-800">Produk Unggulan</h2>
                        <button type="button" wire:click="$set('filterFeatured','featured')"
                            class="text-xs text-orange-500 font-medium">Lihat semua ›</button>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                        @foreach ($featuredProducts as $product)
                            @include('livewire.store.partials.product-card', ['product'=>$product])
                        @endforeach
                    </div>
                </section>
            @endif

            {{-- Produk Terbaru --}}
            @if ($newestProducts->isNotEmpty())
                <section class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <h2 class="text-base font-semibold text-slate-800">Produk Terbaru</h2>
                        <a href="{{ route('store.products') }}" class="text-xs text-orange-500 font-medium">
                            Lihat semua ›
                        </a>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                        @foreach ($newestProducts as $product)
                            @include('livewire.store.partials.product-card', ['product'=>$product])
                        @endforeach
                    </div>
                </section>
            @endif

            @if ($newestProducts->isEmpty() && $featuredProducts->isEmpty())
                <div class="py-16 flex flex-col items-center text-center">
                    <div class="w-16 h-16 bg-orange-50 rounded-full flex items-center justify-center mb-3">
                        <svg class="w-8 h-8 text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                  d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z"/>
                        </svg>
                    </div>
                    <p class="font-semibold text-slate-600 text-sm">Belum ada produk</p>
                    <p class="text-xs text-slate-400 mt-1">Kembali lagi nanti</p>
                </div>
            @endif

            {{-- Mitra Terdekat --}}
            @if ($partners->isNotEmpty())
                <section class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <h2 class="text-base font-semibold text-slate-800">Mitra Terdekat</h2>
                        <a href="{{ route('store.partners') }}" class="text-xs text-orange-500 font-medium">
                            Lihat semua ›
                        </a>
                    </div>
                    <div class="grid grid-cols-3 gap-3">
                        @foreach ($partners as $partner)
                            <a href="{{ route('store.partners.show', $partner->id) }}"
                               class="bg-white rounded-xl border border-slate-100 shadow-sm p-3 flex flex-col items-center gap-2
                                      hover:border-orange-200 hover:shadow-md active:scale-95 transition-all duration-200 text-center">
                                {{-- Logo bulat --}}
                                @if ($partner->logo)
                                    <img src="{{ Storage::url($partner->logo) }}" alt="{{ $partner->name }}"
                                         class="w-12 h-12 rounded-full object-cover ring-2 ring-white shadow-sm" />
                                @else
                                    <div class="w-12 h-12 rounded-full bg-orange-100 ring-2 ring-white shadow-sm
                                                flex items-center justify-center">
                                        <span class="text-orange-600 font-bold text-lg leading-none">
                                            {{ strtoupper(substr($partner->name, 0, 1)) }}
                                        </span>
                                    </div>
                                @endif

                                <div class="w-full min-w-0">
                                    <p class="font-semibold text-slate-800 text-xs truncate">{{ $partner->name }}</p>
                                    <p class="text-[10px] text-slate-400 mt-0.5">{{ $partner->products_count }} produk</p>
                                </div>

                                <span @class([
                                    'inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full w-full justify-center',
                                    'bg-green-50 text-green-700' => $partner->isOpenNow(),
                                    'bg-red-50 text-red-600'    => !$partner->isOpenNow(),
                                ])>
                                    <span @class(['w-1.5 h-1.5 rounded-full shrink-0',
                                        'bg-green-500'=>$partner->isOpenNow(),
                                        'bg-red-400'=>!$partner->isOpenNow()])></span>
                                    {{ $partner->isOpenNow() ? 'Buka' : 'Tutup' }}
                                </span>
                            </a>
                        @endforeach
                    </div>
                </section>
            @endif

            {{-- Footer --}}
            <footer class="mt-8 pt-5 border-t border-slate-100 text-center pb-2">
                <p class="text-sm font-semibold text-slate-700">
                    {{ \App\Models\Setting::get('store_name', config('app.name')) }}
                </p>
                @if (\App\Models\Setting::get('operating_hours'))
                    <p class="text-xs text-slate-400 mt-1">
                        🕐 {{ \App\Models\Setting::get('operating_hours') }}
                    </p>
                @endif
                @if (\App\Models\Setting::get('wa_admin'))
                    <a href="https://wa.me/{{ preg_replace('/^0/', '62', \App\Models\Setting::get('wa_admin')) }}"
                       target="_blank"
                       class="inline-flex items-center gap-1.5 mt-2 text-xs text-green-600 font-medium hover:text-green-700">
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                        Hubungi via WhatsApp
                    </a>
                @endif
                <p class="text-[10px] text-slate-300 mt-3">&copy; {{ date('Y') }} {{ \App\Models\Setting::get('store_name', config('app.name')) }}</p>
            </footer>
        @endif
    </div>

</div>
