<div>
    {{-- Padding bawah agar konten tidak tertutup sticky bar + bottom nav --}}
    <div class="px-4 pt-3 pb-40">

        <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden mb-4">

            {{-- Foto --}}
            <div class="relative bg-slate-100" style="aspect-ratio:4/3">
                @if ($product->image)
                    <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}"
                         class="w-full h-full object-cover" />
                @else
                    <div class="w-full h-full flex items-center justify-center bg-orange-50">
                        <svg class="w-16 h-16 text-orange-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                  d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
                        </svg>
                    </div>
                @endif

                {{-- Badge unggulan --}}
                @if ($product->is_featured)
                    <span class="absolute top-3 right-3 w-8 h-8 bg-orange-500 rounded-full shadow-md
                                 flex items-center justify-center">
                        <svg class="w-4 h-4 text-white" viewBox="0 0 20 20" fill="currentColor">
                            <path d="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"/>
                        </svg>
                    </span>
                @endif
            </div>

            <div class="p-4">
                {{-- Breadcrumb --}}
                <div class="flex items-center gap-1.5 text-xs text-slate-400 mb-2">
                    @if ($product->category)
                        <span>{{ $product->category->name }}</span>
                        <span>·</span>
                    @endif
                    @if ($product->partner)
                        <a href="{{ route('store.partners.show', $product->partner_id) }}"
                           class="text-orange-500 font-medium hover:text-orange-600">
                            {{ $product->partner->name }}
                        </a>
                    @endif
                </div>

                {{-- Nama --}}
                <h1 class="text-lg font-bold text-slate-800 leading-snug mb-2">{{ $product->name }}</h1>

                {{-- Badge stok habis --}}
                @if ($product->isOutOfStock())
                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-slate-100 text-slate-500
                                 text-xs font-semibold rounded-full mb-3">
                        Stok Habis
                    </span>
                @endif

                {{-- Harga --}}
                <div class="flex items-baseline gap-1.5 mb-1">
                    <span class="text-2xl font-black text-orange-500">
                        Rp {{ number_format($product->sell_price, 0, ',', '.') }}
                    </span>
                    <span class="text-xs text-slate-400">/ {{ $product->unit }}</span>
                </div>

                @if ($product->description)
                    <p class="text-sm text-slate-600 leading-relaxed mt-3">{{ $product->description }}</p>
                @endif
            </div>
        </div>

        {{-- Mitra info ringkas --}}
        @if ($product->partner)
            <a href="{{ route('store.partners.show', $product->partner_id) }}"
               class="bg-white rounded-xl border border-slate-100 shadow-sm p-4
                      flex items-center gap-3 hover:border-orange-200 transition-colors">
                @if ($product->partner->logo)
                    <img src="{{ Storage::url($product->partner->logo) }}" alt="{{ $product->partner->name }}"
                         class="w-10 h-10 rounded-full object-cover shrink-0" />
                @else
                    <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                        <span class="text-orange-600 font-bold text-base leading-none">
                            {{ strtoupper(substr($product->partner->name, 0, 1)) }}
                        </span>
                    </div>
                @endif
                <div class="min-w-0 flex-1">
                    <p class="text-xs text-slate-400">Dijual oleh</p>
                    <p class="text-sm font-semibold text-slate-800">{{ $product->partner->name }}</p>
                </div>
                <span @class([
                    'inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full shrink-0',
                    'bg-green-50 text-green-700' => $product->partner->isOpenNow(),
                    'bg-red-50 text-red-600'     => !$product->partner->isOpenNow(),
                ])>
                    <span @class(['w-1.5 h-1.5 rounded-full',
                        'bg-green-500' => $product->partner->isOpenNow(),
                        'bg-red-400'   => !$product->partner->isOpenNow()])></span>
                    {{ $product->partner->isOpenNow() ? 'Buka' : 'Tutup' }}
                </span>
            </a>
        @endif

    </div>

    {{-- ══ STICKY BOTTOM ACTION BAR ════════════════════════════════════════ --}}
    {{-- Posisi: di atas bottom nav (bottom-[68px] = tinggi --h-nav) --}}
    <div class="fixed bottom-[68px] left-0 right-0 z-30 px-4 py-3
                bg-white/95 backdrop-blur-sm border-t border-slate-100 shadow-lg"
         x-data="{
             cartCount: 0,
             toast: false,
             toastMsg: '',
             init() {
                 // Ambil count awal via fetch
                 this.fetchCount();
                 // Update saat cart berubah
                 document.addEventListener('livewire:initialized', () => {
                     Livewire.on('cart-updated', () => {
                         this.fetchCount();
                     });
                 });
             },
             fetchCount() {
                 fetch('{{ url('/store/keranjang/jumlah') }}')
                     .then(r => r.json())
                     .then(d => { this.cartCount = d.count || 0; })
                     .catch(() => {});
             },
             showToast(msg) {
                 this.toastMsg = msg;
                 this.toast = true;
                 setTimeout(() => this.toast = false, 2500);
             }
         }">

        @if ($product->isOutOfStock())
            {{-- Stok habis — tidak ada tombol --}}
            <div class="w-full h-12 flex items-center justify-center rounded-xl
                        bg-slate-100 text-slate-400 text-sm font-semibold">
                Stok Habis
            </div>
        @else
            <div class="flex gap-3">
                {{-- Primary: Tambah ke Keranjang --}}
                <button type="button"
                        @click="
                            addToCart(
                                $el,
                                {{ $product->id }},
                                (data) => {
                                    cartCount++;
                                    showToast('✓ Produk berhasil ditambahkan ke keranjang.');
                                }
                            )
                        "
                        class="flex-1 h-12 flex items-center justify-center gap-2
                               bg-orange-500 hover:bg-orange-600 active:scale-[0.98]
                               text-white text-sm font-semibold rounded-xl
                               shadow-sm shadow-orange-200 transition-all duration-150">
                    <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                    </svg>
                    Tambah ke Keranjang
                </button>

                {{-- Secondary: Lihat Keranjang (N) --}}
                <a href="{{ route('store.cart') }}"
                   class="shrink-0 h-12 px-4 flex items-center justify-center gap-1.5 border border-orange-300
                          text-orange-500 text-sm font-semibold rounded-xl hover:bg-orange-50
                          active:scale-95 transition-all duration-150 whitespace-nowrap">
                    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
                    </svg>
                    Keranjang
                    <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1
                                 bg-orange-500 text-white text-[10px] font-bold rounded-full"
                          x-text="cartCount > 0 ? '(' + cartCount + ')' : ''"
                          x-show="cartCount > 0">
                    </span>
                </a>
            </div>
        @endif

        {{-- Toast notification --}}
        <div x-show="toast"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-end="opacity-0"
             class="absolute left-4 right-4 bottom-full mb-2 bg-green-600 text-white
                    rounded-xl px-4 py-2.5 text-sm font-medium shadow-lg
                    flex items-center gap-2"
             style="display:none">
            <span x-text="toastMsg"></span>
        </div>

    </div>


</div>
