{{-- Global Quick View Modal (Desktop 920px 50/50 Split Modal / Mobile 88dvh Slide-Up Bottom Sheet)
     Reference: frontend/quick_view_modal_page_plan.md --}}
<div x-data="{
        touchStartX: 0,
        handleTouchStart(e) {
            this.touchStartX = e.changedTouches[0].screenX;
        },
        handleTouchEnd(e) {
            const diff = e.changedTouches[0].screenX - this.touchStartX;
            if (Math.abs(diff) > 40) {
                if (diff < 0) {
                    $store.quickView.nextImage();
                } else {
                    $store.quickView.prevImage();
                }
            }
        }
     }"
     x-show="$store.quickView.isOpen && $store.quickView.product"
     x-cloak
     class="fixed inset-0 z-overlay flex items-end md:items-center justify-center"
     role="dialog"
     aria-modal="true"
     :aria-label="$store.quickView.product ? $store.quickView.product.title : 'Quick View'">

    {{-- Dimmed Screen Backdrop (--text-primary at 60% opacity + subtle 4px blur) --}}
    <div x-show="$store.quickView.isOpen"
         x-transition:enter="transition-opacity ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="$store.quickView.close()"
         class="fixed inset-0 overlay-backdrop backdrop-blur-[4px]"></div>

    {{-- Modal / Bottom Sheet Panel
         Mobile: 100vw, height 88dvh, rounded-t-[16px] slide-up bottom sheet
         Tablet: 92%, max-w-[820px], 50/50 2-column split
         Desktop: 92%, max-w-modal (920px), max-h-[88vh], 50/50 2-column split --}}
    <div x-show="$store.quickView.isOpen"
         x-transition:enter="transition ease-out duration-250"
         x-transition:enter-start="translate-y-full md:translate-y-4 md:scale-95 opacity-0"
         x-transition:enter-end="translate-y-0 md:scale-100 opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="translate-y-0 md:scale-100 opacity-100"
         x-transition:leave-end="translate-y-full md:translate-y-4 md:scale-95 opacity-0"
         class="relative z-10 w-full md:w-[92%] md:max-w-[820px] lg:max-w-modal h-[88dvh] md:h-auto md:max-h-[88vh] bg-bg-main border border-border-subtle rounded-t-[16px] md:rounded-none flex flex-col overflow-hidden">

        {{-- Mobile Bottom Sheet Drag Handle --}}
        <div class="flex md:hidden justify-center pt-[10px] pb-[4px] shrink-0">
            <span class="w-[40px] h-[4px] rounded-full bg-border-subtle"></span>
        </div>

        {{-- Top-Right Close Button (✕) (top: 14px, right: 14px; 44px Mobile / 36px Desktop) --}}
        <button type="button"
                @click="$store.quickView.close()"
                aria-label="Close Quick View"
                class="absolute top-[14px] right-[14px] z-30 btn-icon">
            ✕
        </button>

        {{-- Scrollable 50% / 50% Split Layout --}}
        <div class="flex-1 overflow-y-auto p-[16px] md:p-[28px] lg:p-[32px]">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-[20px] md:gap-[28px] lg:gap-[32px] items-start">

                {{-- ============================================================
                     LEFT COLUMN (50%): INTERACTIVE 3:4 SAREE IMAGE SLIDER
                     ============================================================ --}}
                <div class="w-full">
                    <div class="relative w-full aspect-saree bg-bg-surface border border-border-subtle overflow-hidden select-none"
                         @touchstart.passive="handleTouchStart($event)"
                         @touchend.passive="handleTouchEnd($event)">

                        {{-- Current Angle Image --}}
                        <template x-if="$store.quickView.currentImage">
                            <img :src="$store.quickView.currentImage.url"
                                 :alt="$store.quickView.currentImage.alt || $store.quickView.product?.title"
                                 class="w-full h-full object-cover object-top transition-opacity duration-200">
                        </template>

                        {{-- Top-Left Status Badge (SOLD OUT > -15% > NEW) --}}
                        <template x-if="$store.quickView.product">
                            <div class="absolute top-[12px] left-[12px] z-10">
                                <template x-if="!$store.quickView.product.inStock">
                                    <span class="badge-soldout">SOLD OUT</span>
                                </template>
                                <template x-if="$store.quickView.product.inStock && $store.quickView.product.discountPercent > 0">
                                    <span class="badge-accent" x-text="'-' + $store.quickView.product.discountPercent + '%'"></span>
                                </template>
                            </div>
                        </template>

                        {{-- Prev / Next Slide Arrows (< >) (38x38px circular buttons) --}}
                        <template x-if="$store.quickView.images.length > 1">
                            <div>
                                <button type="button"
                                        @click="$store.quickView.prevImage()"
                                        aria-label="Previous saree photo"
                                        class="absolute left-[10px] top-1/2 -translate-y-1/2 z-10 w-[38px] h-[38px] rounded-full bg-bg-main/85 border border-border-subtle text-text-primary hover:bg-brand-primary hover:text-text-light inline-flex items-center justify-center transition-colors duration-200 cursor-pointer">
                                    <svg class="w-[16px] h-[16px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                                    </svg>
                                </button>
                                <button type="button"
                                        @click="$store.quickView.nextImage()"
                                        aria-label="Next saree photo"
                                        class="absolute right-[10px] top-1/2 -translate-y-1/2 z-10 w-[38px] h-[38px] rounded-full bg-bg-main/85 border border-border-subtle text-text-primary hover:bg-brand-primary hover:text-text-light inline-flex items-center justify-center transition-colors duration-200 cursor-pointer">
                                    <svg class="w-[16px] h-[16px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                    </svg>
                                </button>
                            </div>
                        </template>

                        {{-- Bottom Pagination Dots (Active elongated pill in --brand-primary, Inactive circular dot in --brand-accent) --}}
                        <template x-if="$store.quickView.images.length > 1">
                            <div class="absolute bottom-[12px] inset-x-0 flex items-center justify-center gap-[6px] z-10">
                                <template x-for="(img, idx) in $store.quickView.images" :key="idx">
                                    <button type="button"
                                            @click="$store.quickView.setImage(idx)"
                                            :aria-label="'View photo ' + (idx + 1)"
                                            :class="$store.quickView.activeImageIndex === idx
                                                ? 'w-[22px] h-[7px] bg-brand-primary'
                                                : 'w-[7px] h-[7px] bg-brand-accent hover:bg-brand-primary'"
                                            class="rounded-full transition-all duration-200 cursor-pointer"></button>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- ============================================================
                     RIGHT COLUMN (50%): PRODUCT INFORMATION & CONVERSION STACK
                     ============================================================ --}}
                <div class="w-full space-y-[16px]" x-show="$store.quickView.product">

                    {{-- A. Header & Pricing Block --}}
                    <div class="space-y-[6px] pr-[36px]">
                        {{-- 1. Sub-Category Tag (Eyebrow Label) --}}
                        <p class="type-eyebrow" x-text="$store.quickView.product?.subCategoryName || 'SAREE'"></p>

                        {{-- 2. Product Title (28px Desktop / 22px Mobile, --text-primary) --}}
                        <h2 class="type-pdp-title" x-text="$store.quickView.product?.title"></h2>
                    </div>

                    {{-- 3. Price, Savings Pill & Stock Status Row --}}
                    <div class="space-y-[6px]">
                        <div class="flex items-center flex-wrap gap-[10px]">
                            {{-- Current Price --}}
                            <span class="type-pdp-price" x-text="$store.quickView.product?.formattedPrice"></span>

                            {{-- Old Price (If Discounted) --}}
                            <template x-if="$store.quickView.product?.formattedOldPrice">
                                <span class="type-pdp-old-price" x-text="$store.quickView.product?.formattedOldPrice"></span>
                            </template>

                            {{-- Savings Pill (SAVE X% in --brand-accent fill + --text-primary Semi-Bold text) --}}
                            <template x-if="$store.quickView.product?.discountPercent > 0">
                                <span class="badge-accent" x-text="'SAVE ' + $store.quickView.product.discountPercent + '%'"></span>
                            </template>
                        </div>

                        {{-- Stock Line --}}
                        <div class="pt-[2px]">
                            <template x-if="$store.quickView.product?.inStock">
                                <div class="space-y-[2px]">
                                    <p class="font-body font-medium text-[13px] text-text-primary flex items-center gap-[6px]">
                                        <span class="text-state-success text-[12px]" aria-hidden="true">●</span>
                                        <span>In Stock — Ready to Ship</span>
                                    </p>
                                    <template x-if="$store.quickView.product?.isLowStock">
                                        <p class="font-body font-semibold text-[12px] text-state-error"
                                           x-text="'Only ' + $store.quickView.product.stockQty + ' left in stock'"></p>
                                    </template>
                                </div>
                            </template>
                            <template x-if="!$store.quickView.product?.inStock">
                                <p class="font-body font-medium text-[13px] text-text-muted">
                                    Currently Sold Out
                                </p>
                            </template>
                        </div>
                    </div>

                    {{-- B. Quick Highlights Box (2x2 Key Saree Specs in --bg-surface with 1px --border-subtle border) --}}
                    <div class="bg-bg-surface border border-border-subtle p-[12px] grid grid-cols-2 gap-x-[14px] gap-y-[10px]">
                        <div>
                            <span class="block font-body font-normal text-[12px] lg:text-[13px] text-text-muted">Fabric</span>
                            <span class="block font-body font-semibold text-[13px] lg:text-[14px] text-text-primary"
                                  x-text="$store.quickView.product?.specs?.fabric || 'Handwoven Saree'"></span>
                        </div>
                        <div>
                            <span class="block font-body font-normal text-[12px] lg:text-[13px] text-text-muted">Saree Length</span>
                            <span class="block font-body font-semibold text-[13px] lg:text-[14px] text-text-primary"
                                  x-text="$store.quickView.product?.specs?.length || '12 Haat (5.5 Meters)'"></span>
                        </div>
                        <div>
                            <span class="block font-body font-normal text-[12px] lg:text-[13px] text-text-muted">Blouse Piece</span>
                            <span class="block font-body font-semibold text-[13px] lg:text-[14px] text-text-primary"
                                  x-text="$store.quickView.product?.specs?.blousePieceDetail || $store.quickView.product?.specs?.blousePiece || 'Included'"></span>
                        </div>
                        <div>
                            <span class="block font-body font-normal text-[12px] lg:text-[13px] text-text-muted">Work / Pattern</span>
                            <span class="block font-body font-semibold text-[13px] lg:text-[14px] text-text-primary"
                                  x-text="$store.quickView.product?.specs?.workType || 'Handloom'"></span>
                        </div>
                    </div>

                    {{-- Future-Proof Size Slot (Hidden for Sarees; appears automatically for future Kurtis/Salwar Kameez) --}}
                    <template x-if="$store.quickView.product?.sizes && $store.quickView.product.sizes.length > 0">
                        <div class="space-y-[6px]">
                            <label class="form-label">Select Size</label>
                            <div class="flex flex-wrap gap-[8px]">
                                <template x-for="sz in $store.quickView.product.sizes" :key="sz">
                                    <button type="button"
                                            @click="$store.quickView.selectedSize = sz"
                                            :class="$store.quickView.selectedSize === sz ? 'pill-active' : 'pill-inactive'"
                                            class="cursor-pointer"
                                            x-text="sz"></button>
                                </template>
                            </div>
                        </div>
                    </template>

                    {{-- C. Quantity Selector (120px wide, 44px tall) --}}
                    <template x-if="$store.quickView.product?.inStock">
                        <div class="space-y-[4px]">
                            <div class="flex items-center gap-[14px]">
                                <span class="font-body font-medium text-[14px] text-text-primary">Quantity</span>
                                <div class="inline-flex items-center justify-between w-[120px] h-[44px] bg-bg-main border border-border-subtle">
                                    <button type="button"
                                            @click="$store.quickView.decrementQty()"
                                            :disabled="$store.quickView.qty <= 1"
                                            aria-label="Decrease quantity"
                                            class="w-[38px] h-full inline-flex items-center justify-center text-text-primary disabled:text-text-muted disabled:cursor-not-allowed cursor-pointer text-[16px]">
                                        −
                                    </button>
                                    <span class="font-body font-semibold text-[14px] text-text-primary select-none"
                                          x-text="$store.quickView.qty">1</span>
                                    <button type="button"
                                            @click="$store.quickView.incrementQty()"
                                            :disabled="$store.quickView.isAtMaxStock"
                                            aria-label="Increase quantity"
                                            class="w-[38px] h-full inline-flex items-center justify-center text-text-primary disabled:text-text-muted disabled:cursor-not-allowed cursor-pointer text-[16px]">
                                        +
                                    </button>
                                </div>
                            </div>
                            <p x-show="$store.quickView.isAtMaxStock"
                               x-cloak
                               class="font-body text-[12px] text-text-muted">
                                Maximum available quantity reached
                            </p>
                        </div>
                    </template>

                    {{-- D. Dual-Button Conversion Stack & Full Details Link --}}
                    <div class="space-y-[10px] pt-[2px]">
                        <template x-if="$store.quickView.product?.inStock">
                            <div class="space-y-[10px]">
                                {{-- 1. Secondary Outlined Button (Top) — ADD TO CART --}}
                                <button type="button"
                                        @click="$store.quickView.addToCart()"
                                        class="btn-secondary w-full">
                                    ADD TO CART
                                </button>

                                {{-- 2. Primary Accent Button (Bottom) — ORDER NOW (Express Buy) --}}
                                <button type="button"
                                        @click="$store.quickView.orderNow()"
                                        class="btn-primary w-full">
                                    ORDER NOW
                                </button>
                            </div>
                        </template>

                        {{-- 3. Sold-Out Fallback State --}}
                        <template x-if="!$store.quickView.product?.inStock">
                            <button type="button" disabled class="btn-disabled w-full">
                                SOLD OUT
                            </button>
                        </template>

                        {{-- 4. Bottom Link — View Full Product Details → --}}
                        <div class="text-center pt-[4px]">
                            <a :href="$store.quickView.product?.pdpUrl || ((window.AANGINA_BASE_URL || '') + '/product/' + $store.quickView.product?.slug)"
                               class="link-brand justify-center">
                                <span>View Full Product Details</span>
                                <span aria-hidden="true">→</span>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>