@props([
    'saree',
    'instancePrefix' => 'card',
])

@php
    $cardUniqueId = $instancePrefix . '-' . ($saree['id'] ?? $saree['slug']);
    $pdpUrl = url('/product/' . $saree['slug']);
    $images = $saree['images'] ?? [];
    $img1 = $images[0] ?? ['url' => '/images/sarees/saree-crimson-1.svg', 'alt' => $saree['title']];
    $img2 = $images[1] ?? null;
    $hasSecondImage = !empty($img2);
    $badge = $saree['primaryBadge'] ?? null;

    // Prepare compact JSON payload for Quick View Modal & Cart actions
    $quickViewPayload = [
        'id' => $saree['id'],
        'sku' => $saree['sku'],
        'slug' => $saree['slug'],
        'title' => $saree['title'],
        'subCategorySlug' => $saree['subCategorySlug'],
        'subCategoryName' => $saree['subCategoryName'],
        'priceBDT' => $saree['priceBDT'],
        'oldPriceBDT' => $saree['oldPriceBDT'] ?? null,
        'formattedPrice' => $saree['formattedPrice'],
        'formattedOldPrice' => $saree['formattedOldPrice'] ?? null,
        'discountPercent' => $saree['discountPercent'] ?? 0,
        'inStock' => $saree['inStock'],
        'stockQty' => $saree['stockQty'],
        'isLowStock' => $saree['isLowStock'] ?? false,
        'images' => $saree['images'],
        'specs' => $saree['specs'],
        'pdpUrl' => $pdpUrl,
    ];
@endphp

<article x-data="{
            cardId: @js($cardUniqueId),
            pdpUrl: @js($pdpUrl),
            hasSecondImage: @js($hasSecondImage),
            isDesktopHovered: false,
            productData: @js($quickViewPayload),

            get isPreviewActive() {
                return this.isDesktopHovered || (this.$store.ui && this.$store.ui.activeTappedCardId === this.cardId);
            },

            handleImageTapOrClick(e) {
                // Check if device primarily uses touch (Mobile & Tablet <= 1024px or coarse pointer)
                const isTouchDevice = window.matchMedia('(hover: none), (pointer: coarse)').matches || window.innerWidth < 1025;

                if (isTouchDevice) {
                    // 1st Tap on Product Image: Slide Image 1 -> Image 2 and reveal QUICK VIEW bar
                    if (this.$store.ui.activeTappedCardId !== this.cardId) {
                        e.preventDefault();
                        this.$store.ui.activeTappedCardId = this.cardId;
                        return;
                    }
                    // 2nd Tap on Product Image (outside QUICK VIEW bar): Navigate to full PDP
                    window.location.href = this.pdpUrl;
                } else {
                    // Desktop click on image opens PDP directly
                    window.location.href = this.pdpUrl;
                }
            },

            openQuickView(e, triggerEl) {
                e.preventDefault();
                e.stopPropagation();
                if (this.$store.quickView) {
                    this.$store.quickView.open(this.productData, triggerEl);
                }
            }
         }"
         @mouseenter="if (window.matchMedia('(hover: hover) and (pointer: fine)').matches && window.innerWidth >= 1025) { isDesktopHovered = true }"
         @mouseleave="isDesktopHovered = false"
         @click.outside="if ($store.ui.activeTappedCardId === cardId) { $store.ui.activeTappedCardId = null }"
         class="group bg-bg-surface border border-border-subtle flex flex-col h-full select-none">

    {{-- ====================================================================
         1. STRICT 3:4 VERTICAL PORTRAIT IMAGE CONTAINER
         ==================================================================== --}}
    <div class="relative w-full aspect-saree overflow-hidden bg-bg-surface">

        {{-- Clickable / Tappable Image Track --}}
        <a :href="pdpUrl"
           @click="handleImageTapOrClick($event)"
           class="block w-full h-full relative focus:outline-none"
           aria-label="{{ $saree['title'] }}">

            @if($hasSecondImage)
                {{-- Dual-Image Horizontal Slide Track (250ms ease-out: Image 1 -> Image 2) --}}
                <div class="w-[200%] h-full flex transition-transform duration-250 ease-out"
                     :class="isPreviewActive ? '-translate-x-1/2' : 'translate-x-0'">
                    {{-- Image 1: Primary Front Drape --}}
                    <div class="w-1/2 h-full relative bg-bg-surface">
                        <img src="{{ $img1['url'] }}"
                             alt="{{ $img1['alt'] }}"
                             loading="lazy"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                             class="w-full h-full object-cover object-top">
                        <div class="hidden absolute inset-0 bg-bg-surface items-center justify-center p-[12px] text-center">
                            <span class="font-heading font-bold text-[18px] text-text-muted">{{ $storeConfig['brandName'] }}</span>
                        </div>
                    </div>

                    {{-- Image 2: Secondary Preview / Aanchal Close-Up --}}
                    <div class="w-1/2 h-full relative bg-bg-surface">
                        <img src="{{ $img2['url'] }}"
                             alt="{{ $img2['alt'] }}"
                             loading="lazy"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                             class="w-full h-full object-cover object-top">
                        <div class="hidden absolute inset-0 bg-bg-surface items-center justify-center p-[12px] text-center">
                            <span class="font-heading font-bold text-[18px] text-text-muted">{{ $storeConfig['brandName'] }}</span>
                        </div>
                    </div>
                </div>
            @else
                {{-- Single-Image Fallback: Gentle 1.04x Zoom on Hover / 1st Tap --}}
                <div class="w-full h-full relative bg-bg-surface overflow-hidden">
                    <img src="{{ $img1['url'] }}"
                         alt="{{ $img1['alt'] }}"
                         loading="lazy"
                         :class="isPreviewActive ? 'scale-[1.04]' : 'scale-100'"
                         class="w-full h-full object-cover object-top transition-transform duration-250 ease-out">
                </div>
            @endif
        </a>

        {{-- Top-Left Status Badge (Maximum 1 Badge per Card: SOLD OUT > -15% > NEW) --}}
        @if($badge)
            <div class="absolute top-[10px] left-[10px] z-10 pointer-events-none">
                @if($badge['type'] === 'soldout')
                    <span class="badge-soldout">{{ $badge['label'] }}</span>
                @else
                    <span class="badge-accent">{{ $badge['label'] }}</span>
                @endif
            </div>
        @endif

        {{-- Bottom Slide-Up QUICK VIEW Bar (Height: 40px Mobile / 42px Desktop)
             Contrast Rule: Default --brand-accent fill with --text-primary text;
             Direct hover/tap flips to --brand-primary fill with --text-light text. --}}
        <button type="button"
                @click="openQuickView($event, $el)"
                :class="isPreviewActive ? 'translate-y-0 opacity-100 pointer-events-auto' : 'translate-y-full opacity-0 pointer-events-none'"
                class="absolute bottom-0 inset-x-0 z-10 h-[40px] lg:h-[42px] w-full bg-brand-accent text-text-primary hover:bg-brand-primary hover:text-text-light active:bg-brand-primary active:text-text-light font-body font-semibold text-[12px] lg:text-[13px] uppercase tracking-[0.8px] transition-all duration-200 ease-out flex items-center justify-center cursor-pointer">
            QUICK VIEW
        </button>
    </div>

    {{-- ====================================================================
         2. PRODUCT INFO BOX (Bottom, 12px Padding)
         1st Tap on Product Title or Price Immediately Opens PDP (/product/[slug])
         ==================================================================== --}}
    <a href="{{ $pdpUrl }}"
       class="p-[12px] flex-1 flex flex-col justify-between gap-[6px] focus:outline-none">
        {{-- Product Title (1-2 lines max, truncated with ellipsis) --}}
        <h3 class="type-card-title line-clamp-2 group-hover:text-brand-primary transition-colors duration-200">
            {{ $saree['title'] }}
        </h3>

        {{-- Price Row: Current Price (BDT 4,500) + Optional Struck-Through Old Price --}}
        <div class="flex items-baseline flex-wrap gap-x-[8px] gap-y-[2px] pt-[2px]">
            <span class="type-card-price">
                {{ $saree['formattedPrice'] }}
            </span>
            @if(!empty($saree['formattedOldPrice']))
                <span class="type-card-old-price">
                    {{ $saree['formattedOldPrice'] }}
                </span>
            @endif
        </div>
    </a>
</article>