@props(['saree'])

@php
    $inStock = (bool) ($saree['inStock'] ?? true);
    $primaryImg = $saree['images'][0]['url'] ?? ($saree['primaryImage']['url'] ?? '/images/sarees/saree-crimson-1.svg');
@endphp

<div
    x-show="showMobileStickyBar"
    x-cloak
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="translate-y-full opacity-0"
    x-transition:enter-end="translate-y-0 opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="translate-y-0 opacity-100"
    x-transition:leave-end="translate-y-full opacity-0"
    class="fixed bottom-0 inset-x-0 z-sticky-bar lg:hidden h-[64px] bg-main border-t border-border-subtle px-3.5 flex items-center justify-between gap-2.5 shadow-BoutiqueElevated"
    aria-label="Quick purchase bar"
>
    {{-- Left (38%): 3:4 Thumbnail (36x48px) + Current Price --}}
    <div class="w-[38%] flex items-center gap-2.5 min-w-0">
        <div class="w-[36px] h-[48px] shrink-0 overflow-hidden bg-surface border border-border-subtle">
            <img
                src="{{ $primaryImg }}"
                alt="{{ $saree['title'] }}"
                class="w-full h-full object-cover"
            >
        </div>
        <div class="min-w-0">
            <div class="text-[11px] text-text-muted truncate leading-tight">
                {{ $saree['title'] }}
            </div>
            <div class="text-[15px] font-bold text-text-primary leading-tight mt-0.5 truncate">
                {{ $saree['formattedPrice'] }}
            </div>
        </div>
    </div>

    {{-- Right (62%): Compact ADD TO CART + Compact ORDER NOW (or Disabled SOLD OUT) --}}
    <div class="w-[62%] flex items-center justify-end gap-2">
        @if($inStock)
            <button
                type="button"
                @click="addToCart()"
                class="btn-compact-secondary flex-1 px-2 text-[11px]"
            >
                ADD TO CART
            </button>
            <button
                type="button"
                @click="orderNow()"
                class="btn-compact-primary flex-1 px-2 text-[11px]"
            >
                ORDER NOW
            </button>
        @else
            <button
                type="button"
                disabled
                class="btn-compact-primary w-full opacity-45 cursor-not-allowed"
            >
                SOLD OUT
            </button>
        @endif
    </div>
</div>