@php
    $siteName = $siteSettings['site_name'] ?? 'Aura Fashion';
    $metaTitle = trim((string) ($product->meta_title ?? ''));
    $pageTitle = $metaTitle !== '' ? $metaTitle : ($product->name.' | '.$siteName);

    $rawDesc = trim((string) ($product->meta_description ?? ''));
    if ($rawDesc === '') {
        $rawDesc = trim(preg_replace('/\s+/u', ' ', strip_tags((string) ($product->description ?? ''))));
    }
    $pageMetaDescription = \Illuminate\Support\Str::limit($rawDesc, 160, '');
    if ($pageMetaDescription === '') {
        $pageMetaDescription = \Illuminate\Support\Str::limit($product->name.' — '.$siteName, 160, '');
    }

    $kw = $product->meta_keywords;
    if (is_array($kw)) {
        $pageMetaKeywords = implode(', ', array_filter($kw));
    } else {
        $pageMetaKeywords = trim((string) ($kw ?? ''));
    }
    $pageMetaKeywords = $pageMetaKeywords !== '' ? $pageMetaKeywords : null;

    $sortedImages = $product->images->sortByDesc(fn($img) => $img->is_primary ? 1 : 0)->values();
    $primaryImg = $sortedImages->first();
    $ogImageAbsolute = null;
    if ($primaryImg && filled($primaryImg->image_path)) {
        $ogImageAbsolute = rtrim((string) config('app.url'), '/').'/storage/'.ltrim($primaryImg->image_path, '/');
    }

    $canonicalUrl = route('product.details', $product->slug);
@endphp
<x-layout
    :title="$pageTitle"
    :meta-description="$pageMetaDescription"
    :meta-keywords="$pageMetaKeywords"
    :og-title="$pageTitle"
    :og-description="$pageMetaDescription"
    :og-image="$ogImageAbsolute"
    :og-url="$canonicalUrl"
    og-type="product"
    :canonical="$canonicalUrl"
>
    <style>
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes shine {
            0% { left: -100%; transition-property: left; }
            100% { left: 100%; transition-property: left; }
        }
        .animate-shine { position: relative; overflow: hidden; }
        .animate-shine::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -100%;
            width: 50%;
            height: 200%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }
        .animate-bounce-slow { animation: bounce 3s infinite; }
        @keyframes bounce {
            0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
            50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
        }
    </style>

    <div class="bg-white py-1 lg:py-2 min-h-screen">
        <div class="max-w-7xl mx-auto px-4 lg:px-6 pt-6 lg:pt-10">
            <div class="flex flex-col lg:flex-row gap-4 lg:gap-6 items-start pb-4 border-b border-gray-50 mb-4">
                <!-- Product Gallery -->
                <div class="w-full lg:w-1/2 flex flex-col-reverse lg:flex-row gap-4 lg:gap-6 h-auto lg:h-[665px]">
                    <!-- Thumbnails Sidebar -->
                    <div class="flex flex-row lg:flex-col gap-3 lg:gap-4 w-full lg:w-20 flex-shrink-0 h-auto lg:h-[665px] lg:overflow-y-auto overflow-x-auto no-scrollbar py-1">
                        @foreach($sortedImages as $index => $image)
                        <div class="aspect-[3/4] w-16 lg:w-full border-2 {{ $index==0 ? 'border-primary' : 'border-gray-50' }} rounded-xl lg:rounded-2xl overflow-hidden cursor-pointer flex-shrink-0 transition-all duration-300 hover:scale-105 active:scale-95 group" onclick="switchMedia({{ $index }})">
                            <img src="{{ asset('storage/' . $image->image_path) }}" class="w-full h-full object-cover">
                        </div>
                        @endforeach
                    </div>

                    <!-- Main Display -->
                    <div class="w-full h-auto aspect-[3/4] lg:h-[665px] bg-white rounded-2xl lg:rounded-3xl overflow-hidden relative group border border-gray-100 shadow-sm transition-all duration-500">
                        <div id="mainDisplay" class="w-full h-full relative cursor-crosshair">
                            @if($sortedImages->count() > 0)
                            <img id="mainImage" src="{{ asset('storage/' . $sortedImages[0]->image_path) }}" class="w-full h-full object-contain transition-all duration-700 mx-auto">
                            @else
                            <img id="mainImage" src="{{ asset('images/placeholder.png') }}" class="w-full h-full object-contain transition-all duration-700 mx-auto">
                            @endif
                            
                            <!-- Glassmorphism Zoom Hint -->
                            <div class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-md border border-white/20 px-6 py-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 shadow-xl pointer-events-none transform translate-y-4 group-hover:translate-y-0">
                                <div class="flex items-center gap-3">
                                    <div class="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
                                    <span class="text-[10px] font-black uppercase tracking-[0.2em] text-gray-800">{{ __('Roll to Explore Details') }}</span>
                                </div>
                            </div>

                            <!-- Magnifier Lens -->
                            <div id="magnifierLens" class="hidden absolute border-2 border-primary/30 bg-primary/5 backdrop-blur-[2px] pointer-events-none z-30 w-[140px] h-[140px] rounded-full shadow-2xl"></div>
                        </div>
                    </div>
                </div>

                <!-- Product Info -->
                <div class="w-full lg:w-1/2 relative space-y-6">
                    <!-- Zoom Result Container -->
                    <div id="zoomResult" class="hidden absolute left-0 top-0 w-full h-[665px] z-[60] bg-white rounded-3xl border border-gray-100 overflow-hidden bg-no-repeat shadow-2xl ring-1 ring-gray-100"></div>
                    
                    <div>
                        <h1 class="text-2xl lg:text-3xl font-extrabold text-gray-700 mb-2 leading-tight tracking-tight capitalize select-none">{{ __($product->name) }}</h1>
                        
                        @php
                            $hasDiscount = false;
                            $discountMin = null;
                            $discountMax = null;
                            $regularMin = $product->min_price;
                            $regularMax = $product->max_price;
                            
                            $variantsWithDiscounts = $product->variants ? $product->variants->where('discount_price', '>', 0) : collect();
                            if ($variantsWithDiscounts->count() > 0) {
                                $hasDiscount = true;
                                $discountMin = $variantsWithDiscounts->min('discount_price');
                                $discountMax = $variantsWithDiscounts->max('discount_price');
                                $regularMin = $product->variants->min('price');
                                $regularMax = $product->variants->max('price');
                            } elseif ($product->discount_price > 0 && $product->discount_price < $product->price) {
                                $hasDiscount = true;
                                $discountMin = $product->discount_price;
                                $discountMax = $product->discount_price;
                                $regularMin = $product->price;
                                $regularMax = $product->price;
                            }
                        @endphp
                        <div id="product-price-display" class="flex flex-wrap items-center gap-3 mb-4 lg:mb-6">
                            @if(isset($hasDiscount) && $hasDiscount)
                                <span class="text-xl lg:text-2xl font-black text-primary tracking-tighter">
                                    @if($discountMin == $discountMax)
                                        ৳{{ number_format((float)$discountMin) }}
                                    @else
                                        ৳{{ number_format((float)$discountMin) }} - ৳{{ number_format((float)$discountMax) }}
                                    @endif
                                </span>
                                <span class="text-sm font-medium text-gray-400 line-through">
                                    @if($regularMin == $regularMax)
                                        ৳{{ number_format((float)$regularMin) }}
                                    @else
                                        ৳{{ number_format((float)$regularMin) }} - ৳{{ number_format((float)$regularMax) }}
                                    @endif
                                </span>
                            @else
                                <span class="text-xl lg:text-2xl font-black text-primary tracking-tighter">
                                    @if($regularMin == $regularMax)
                                        ৳{{ number_format((float)$regularMin) }}
                                    @else
                                        ৳{{ number_format((float)$regularMin) }} - ৳{{ number_format((float)$regularMax) }}
                                    @endif
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="h-px bg-gray-100"></div>

                    <div class="space-y-6">
                        @php
                            $colorGroups = $product->variants->groupBy('color')->filter(fn($val, $key) => !empty($key));
                            $sizes = $product->variants->pluck('size')->unique()->filter();
                        @endphp

                        @if($product->is_variation && $colorGroups->count() > 0)
                        <div>
                            <div class="flex justify-between items-center mb-3">
                                <h3 class="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400">{{ __('Color') }}</h3>
                                <span id="selected-color-name" class="text-[10px] font-black text-primary uppercase tracking-widest">{{ __($colorGroups->keys()->first()) }}</span>
                            </div>
                            <div class="flex flex-wrap gap-3">
                                @foreach($colorGroups as $colorName => $variants)
                                    @php $variant = $variants->first(); @endphp
                                    <div 
                                        onclick="selectColor('{{ $colorName }}', this)"
                                        class="color-option relative w-14 h-18 border-2 {{ $loop->first ? 'border-primary bg-primary border-gray-100' : 'border-gray-100 shadow-sm' }} rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:border-primary group"
                                        title="{{ __($colorName) }}"
                                    >
                                        @if($variant->image_path)
                                        <img src="{{ asset('storage/' . $variant->image_path) }}" class="w-full h-full object-cover">
                                        @else
                                        <div class="w-full h-full bg-gray-50 flex items-center justify-center text-[10px] font-black uppercase text-gray-300">
                                            {{ substr($colorName, 0, 1) }}
                                        </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        @if($product->is_variation && $sizes->count() > 0)
                        <div>
                            <h3 class="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 mb-3">{{ __('Size') }}</h3>
                            <div class="flex flex-wrap items-center gap-2">
                                @foreach($sizes as $size)
                                    @php
                                        $isAvailable = $product->variants->where('size', $size)->sum('stock_quantity') > 0;
                                    @endphp
                                    <button 
                                        onclick="selectSize('{{ $size }}', this)"
                                        class="size-option min-w-[3rem] w-auto h-12 px-3 flex items-center justify-center border {{ $isAvailable ? 'border-gray-100 text-gray-800 hover:border-primary hover:bg-primary/5' : 'border-gray-50 text-gray-200 bg-gray-50/30 cursor-not-allowed' }} rounded-xl text-[11px] font-black whitespace-nowrap uppercase transition-all duration-300"
                                        {{ !$isAvailable ? 'disabled' : '' }}
                                    >
                                        {{ __($size) }}
                                    </button>
                                @endforeach
                                <div id="availability-text" class="hidden items-center gap-2 text-[10px] font-black text-red-500 uppercase tracking-widest ml-4">
                                    <div class="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></div>
                                    <span id="stock-count">0</span> {{ __('available') }}
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($product->isOutOfStock())
                        <div class="rounded-xl border border-amber-200/80 bg-amber-50 px-4 py-3.5 text-center">
                            <p class="text-xs font-black uppercase tracking-widest text-amber-900">{{ __('Out of stock') }}</p>
                        </div>
                        @else
                        <div class="flex gap-4 pt-4">
                            <div class="flex items-center bg-gray-50 rounded-xl h-14 w-32 border border-gray-100">
                                <button onclick="updateQty(-1)" class="flex-grow flex items-center justify-center text-gray-400 hover:text-primary transition-colors">-</button>
                                <input type="number" id="quantity" value="1" readonly class="w-12 text-center text-sm font-black bg-transparent border-none focus:ring-0 p-0 text-gray-900">
                                <button onclick="updateQty(1)" class="flex-grow flex items-center justify-center text-gray-400 hover:text-primary transition-colors">+</button>
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 flex-grow">
                                <button onclick="addToCart(false)" id="add-to-cart-btn" class="w-full px-8 py-4 bg-primary text-white font-black text-xs uppercase tracking-[0.2em] rounded-xl hover:bg-primary/90 transition-all active:scale-95 flex items-center justify-center gap-2 shadow-lg shadow-primary/20">
                                    <span id="cart-btn-text">{{ __('Add to Cart') }}</span>
                                </button>
                                <button onclick="addToCart(true)" class="w-full px-8 py-4 bg-gray-900 text-white font-black text-xs uppercase tracking-[0.2em] rounded-xl hover:bg-gray-800 transition-all active:scale-95 flex items-center justify-center gap-2 shadow-lg shadow-gray-900/10">
                                    {{ __('Order Now') }}
                                </button>
                            </div>
                        </div>
                        @endif

                        <div class="pt-8 border-t border-gray-100 grid grid-cols-2 gap-y-3">
                            @if($product->fabric)
                            <div class="flex flex-col gap-1">
                                <span class="text-[10px] font-black uppercase tracking-widest text-gray-400">{{ __('Material') }}</span>
                                <span class="text-xs font-bold text-gray-700 underline decoration-primary/30 underline-offset-4">{{ __($product->fabric) }}</span>
                            </div>
                            @endif
                            <div class="flex flex-col gap-1">
                                <span class="text-[10px] font-black uppercase tracking-widest text-gray-400">{{ __('Category') }}</span>
                                <span class="text-xs font-bold text-gray-700 underline decoration-primary/30 underline-offset-4">{{ $product->categories->pluck('name')->map(fn($n) => __($n))->implode(', ') }}</span>
                            </div>
                            @if($product->sku)
                            <div class="flex flex-col gap-1">
                                <span class="text-[10px] font-black uppercase tracking-widest text-gray-400">{{ __('Reference SKU') }}</span>
                                <span class="text-xs font-bold text-gray-700 underline decoration-primary/30 underline-offset-4">{{ $product->sku }}</span>
                            </div>
                            @endif
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
                            <a href="tel:{{ $siteSettings['phone'] ?? '01744690307' }}" onclick="typeof fbq === 'function' && fbq('track', 'Contact');" class="group flex items-center gap-4 p-4 bg-white border border-gray-100 rounded-3xl hover:border-primary/50 hover:shadow-xl transition-all duration-500 transform hover:-translate-y-1">
                                <div class="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center text-primary transition-colors group-hover:bg-primary group-hover:text-white">
                                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27c1.12.45 2.33.69 3.58.69a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.24 2.46.69 3.58a1 1 0 01-.27 1.11l-2.2 2.2z"/></svg>
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-[9px] font-black text-gray-400 uppercase tracking-widest">{{ __('Expert Help') }}</span>
                                    <span class="text-sm font-black text-gray-900 group-hover:text-primary transition-colors">{{ $siteSettings['phone'] ?? '01744690307' }}</span>
                                </div>
                            </a>
                            <a href="https://wa.me/{{ $siteSettings['whatsapp_number'] ?? '01744690307' }}" target="_blank" onclick="typeof fbq === 'function' && fbq('track', 'Contact');" class="group flex items-center gap-4 p-4 bg-white border border-gray-100 rounded-3xl hover:border-primary/50 hover:shadow-xl transition-all duration-500 transform hover:-translate-y-1">
                                <div class="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center text-green-500 transition-colors group-hover:bg-green-500 group-hover:text-white">
                                    <svg class="w-6 h-6" 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.945L0 24l6.335-1.662c1.72.937 3.659 1.431 5.63 1.432h.006c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-[9px] font-black text-gray-400 uppercase tracking-widest">{{ __('WhatsApp Order') }}</span>
                                    <span class="text-sm font-black text-gray-900 group-hover:text-green-600 transition-colors">{{ $siteSettings['whatsapp_number'] ?? '01744690307' }}</span>
                                </div>
                            </a>
                        </div>

                        <!-- Share Section -->
                        <div class="flex items-center gap-4 pt-6">
                            <span class="text-xl font-medium text-gray-700">{{ __('Share') }}</span>
                            <div class="flex gap-2">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-[#1877F2] flex items-center justify-center text-white hover:opacity-90 transition-all" aria-label="Facebook">
                                    <i class="fab fa-facebook-f text-[1.05rem] leading-none" aria-hidden="true"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($product->name) }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-[#1da1f2] flex items-center justify-center text-white hover:opacity-90 transition-all" aria-label="X (Twitter)">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                                </a>
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($product->name . ' - ' . url()->current()) }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-[#25d366] flex items-center justify-center text-white hover:opacity-90 transition-all" aria-label="WhatsApp">
                                    <svg class="w-5 h-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.945L0 24l6.335-1.662c1.72.937 3.659 1.431 5.63 1.432h.006c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description Only -->
            <div class="py-4 border-b border-gray-50 mb-4 lg:px-0">
                <h3 class="text-xs font-black text-primary uppercase tracking-[0.2em] border-b-2 border-primary w-fit pb-1 mb-4 select-none">{{ __('Product Description') }}</h3>
                <div class="product-description max-w-none text-sm text-gray-600 leading-relaxed [&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-lg [&_h2]:font-bold [&_h3]:text-base [&_h3]:font-semibold [&_p]:mb-3 [&_p:last-child]:mb-0 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-3 [&_a]:text-primary [&_a]:underline [&_img]:max-w-full [&_img]:rounded-lg [&_table]:w-full [&_table]:text-xs [&_th]:border [&_th]:border-gray-200 [&_th]:bg-gray-50 [&_th]:px-2 [&_th]:py-1 [&_td]:border [&_td]:border-gray-200 [&_td]:px-2 [&_td]:py-1">
                    {!! $product->description !!}
                </div>
            </div>

            <!-- Related Products -->
            @if($relatedProducts->count() > 0)
            <div class="py-4 border-b border-gray-50 mb-4 lg:px-0 text-gray-800">
                <div class="flex justify-between items-end mb-4">
                    <div class="space-y-0">
                        <span class="text-[8px] lg:text-[9px] font-black text-primary uppercase tracking-[0.2em]">{{ __('Similar') }}</span>
                        <h2 class="text-base lg:text-lg font-black uppercase tracking-tight text-gray-700">{{ __('RELATED PRODUCTS') }}</h2>
                    </div>
                    <a href="/shop" class="group flex items-center gap-1 text-[9px] font-black text-primary uppercase tracking-widest bg-primary/5 px-3 py-1.5 rounded-full hover:bg-primary hover:text-white transition-all duration-300">
                        {{ __('See All') }}
                        <svg class="w-2.5 h-2.5 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
                <div class="relative group/related">
                    <button id="relPrev" class="absolute -left-2 top-1/2 -translate-y-1/2 z-10 w-8 h-8 bg-white border border-gray-100 rounded-full shadow-md flex items-center justify-center text-gray-400 hover:text-primary transition-all opacity-0 group-hover/related:opacity-100 active:scale-90">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                    </button>
                    <button id="relNext" class="absolute -right-2 top-1/2 -translate-y-1/2 z-10 w-8 h-8 bg-white border border-gray-100 rounded-full shadow-md flex items-center justify-center text-gray-400 hover:text-primary transition-all opacity-0 group-hover/related:opacity-100 active:scale-90">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </button>
                    <div id="relCarousel" class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory no-scrollbar pb-4 px-1">
                        @foreach($relatedProducts as $relProduct)
                        <div class="w-[240px] flex-shrink-0 snap-start">
                            <x-product-card :product="$relProduct" />
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- You Might Also Like -->
            <div class="py-4 mb-2 lg:px-0">
                <div class="flex justify-between items-end mb-4 border-b border-gray-50 pb-2 text-gray-800">
                    <div class="space-y-0">
                        <span class="text-[8px] lg:text-[9px] font-black text-gray-400 uppercase tracking-[0.2em]">{{ __('Picks') }}</span>
                        <h2 class="text-lg lg:text-xl font-black uppercase tracking-tight text-gray-700 border-l-4 border-primary pl-3 leading-none">{{ __('YOU MIGHT ALSO LIKE') }}</h2>
                    </div>
                </div>
                <div class="relative group/yml">
                    <button id="ymlPrev" class="absolute -left-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 bg-gray-900 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-primary transition-all opacity-0 group-hover/yml:opacity-100">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                    </button>
                    <button id="ymlNext" class="absolute -right-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 bg-gray-900 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-primary transition-all opacity-0 group-hover/yml:opacity-100">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </button>
                    <div id="ymlCarousel" class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory no-scrollbar pb-4 p-1">
                        @foreach($youMightAlsoLike as $ymlProduct)
                        <div class="w-[calc((100%-4rem)/2)] sm:w-[calc((100%-4rem)/3)] lg:w-[calc((100%-6rem)/5)] flex-shrink-0 snap-start">
                            <x-product-card :product="$ymlProduct" />
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        (function() {
            const galleryImages = @json($sortedImages->map(fn($img) => ['url' => asset('storage/' . $img->image_path)]));
            const variants = @json($product->variants);
            const isVariation = {{ $product->is_variation ? 'true' : 'false' }};
            let selectedColor = isVariation ? '{{ $colorGroups ? $colorGroups->keys()->first() : '' }}' : (variants[0]?.color || '');
            let selectedSize = isVariation ? null : (variants[0]?.size || '');
            const defaultPriceHTML = document.getElementById('product-price-display').innerHTML;
            
            window.selectColor = function(colorName, element) {
                selectedColor = colorName;
                // Update text
                document.getElementById('selected-color-name').textContent = colorName;
                
                // Update selection border
                document.querySelectorAll('.color-option').forEach(el => {
                    el.classList.remove('border-primary');
                    el.classList.add('border-gray-100');
                });
                element.classList.add('border-primary');
                element.classList.remove('border-gray-100');
                
                updateAvailability();
            };

            window.selectSize = function(sizeLabel, element) {
                selectedSize = sizeLabel;

                document.querySelectorAll('.size-option').forEach((el) => {
                    el.classList.remove(
                        'bg-primary', 'border-primary', 'border-gray-100', 'shadow-lg', 'shadow-primary/20', 'text-white',
                        'hover:border-primary', 'hover:bg-primary', 'hover:bg-primary/5', 'hover:text-white',
                    );
                    if (el.disabled) {
                        el.classList.remove('text-gray-800', 'text-gray-500');
                        el.classList.add('border-gray-50', 'text-gray-200', 'bg-gray-50/30', 'cursor-not-allowed');
                    } else {
                        el.classList.remove('border-gray-50', 'text-gray-200', 'text-gray-500', 'bg-gray-50/30', 'cursor-not-allowed');
                        el.classList.add('border-gray-100', 'text-gray-800', 'hover:border-primary', 'hover:bg-primary/5');
                    }
                });
                if (!element.disabled) {
                    element.classList.remove('border-gray-100', 'text-gray-800', 'hover:border-primary', 'hover:bg-primary/5');
                    element.classList.add(
                        'bg-primary', 'border-primary', 'text-white', 'shadow-lg', 'shadow-primary/20',
                        'hover:bg-primary', 'hover:border-primary', 'hover:text-white',
                    );
                }
                updateAvailability();
            };

            function updateAvailability() {
                const availText = document.getElementById('availability-text');
                const stockCountNode = document.getElementById('stock-count');
                const priceDisplay = document.getElementById('product-price-display');
                const qtyInput = document.getElementById('quantity');
                
                if(!selectedColor || !selectedSize) {
                    availText.classList.add('hidden');
                    priceDisplay.innerHTML = defaultPriceHTML;
                    return;
                }
                
                const variant = variants.find(v => 
                    String(v.color).toLowerCase() === String(selectedColor).toLowerCase() && 
                    String(v.size).toLowerCase() === String(selectedSize).toLowerCase()
                );
                
                if(variant) {
                    availText.classList.remove('hidden');
                    availText.classList.add('flex');
                    stockCountNode.textContent = variant.stock_quantity;
                    
                    // Priority: Variant Discount > Product Discount
                    let displayPrice = variant.price;
                    let displayDiscountPrice = variant.discount_price;
                    
                    // If variant has no discount price, check product's global discount price
                    if (!displayDiscountPrice || displayDiscountPrice <= 0) {
                        const productPrice = {{ (float)$product->price }};
                        const productDiscountPrice = {{ (float)$product->discount_price }};
                        
                        // If product has a global discount price AND variant price matches product price (standard)
                        // OR if we want to apply the same percentage discount.
                        if (productDiscountPrice > 0 && productDiscountPrice < productPrice) {
                            // Calculate percentage from product
                            const discountRatio = productDiscountPrice / productPrice;
                            displayDiscountPrice = variant.price * discountRatio;
                        }
                    }

                    if (displayDiscountPrice && displayDiscountPrice > 0 && displayDiscountPrice < displayPrice) {
                        const finalPrice = Math.round(displayDiscountPrice).toLocaleString();
                        const oldPrice = Math.round(displayPrice).toLocaleString();
                        const percentOff = Math.round(((displayPrice - displayDiscountPrice) / displayPrice) * 100);
                        priceDisplay.innerHTML = `
                            <span class="text-xl lg:text-2xl font-black text-primary tracking-tighter">৳${finalPrice}</span>
                            <span class="text-sm font-medium text-gray-400 line-through">৳${oldPrice}</span>
                            <span class="text-xs font-bold text-red-600 ml-1 py-0.5 px-2 bg-red-50 rounded-full border border-red-100">-${percentOff}%</span>
                        `;
                    } else {
                        priceDisplay.innerHTML = `<span class="text-xl lg:text-2xl font-black text-primary tracking-tighter">৳${Math.round(displayPrice).toLocaleString()}</span>`;
                    }
                    
                    // Cap current qty if it exceeds new variant stock
                    if(parseInt(qtyInput.value) > variant.stock_quantity) {
                        qtyInput.value = variant.stock_quantity;
                    }
                } else {
                    availText.classList.add('hidden');
                    availText.classList.remove('flex');
                    priceDisplay.innerHTML = defaultPriceHTML;
                }
            }

            window.updateQty = function(delta) {
                const input = document.getElementById('quantity');
                const variant = variants.find(v => 
                    String(v.color).toLowerCase() === String(selectedColor).toLowerCase() && 
                    String(v.size).toLowerCase() === String(selectedSize).toLowerCase()
                );
                const maxStock = variant ? variant.stock_quantity : {{ $product->variants->max('stock_quantity') ?? 1 }};
                
                let val = parseInt(input.value) + delta;
                if(val < 1) val = 1;
                if(val > maxStock) val = maxStock;
                input.value = val;
            };

            window.switchMedia = function(index) {
                const item = galleryImages[index];
                const img = document.getElementById('mainImage');
                
                document.querySelectorAll('.aspect-\\[3\\/4\\]').forEach((el, i) => {
                    if(i === index) { 
                        el.classList.remove('border-gray-100'); 
                        el.classList.add('border-primary'); 
                    } else { 
                        el.classList.remove('border-primary'); 
                        el.classList.add('border-gray-100'); 
                    }
                });

                if(item) {
                    img.src = item.url;
                }
            };

            const setupMiniCarousel = (id, prev, next) => {
                const carousel = document.getElementById(id);
                const prevBtn = document.getElementById(prev);
                const nextBtn = document.getElementById(next);
                if (carousel && prevBtn && nextBtn) {
                    const amount = 300;
                    prevBtn.addEventListener('click', () => carousel.scrollBy({ left: -amount, behavior: 'smooth' }));
                    nextBtn.addEventListener('click', () => carousel.scrollBy({ left: amount, behavior: 'smooth' }));
                }
            };
            setupMiniCarousel('relCarousel', 'relPrev', 'relNext');
            setupMiniCarousel('ymlCarousel', 'ymlPrev', 'ymlNext');

            // Magnifier Lens Implementation
            const mainDisplay = document.getElementById('mainDisplay');
            const mainImg = document.getElementById('mainImage');
            const magnifierLens = document.getElementById('magnifierLens');
            const zoomResult = document.getElementById('zoomResult');

            mainDisplay.addEventListener('mousemove', function(e) {
                if (window.innerWidth < 1024) return;
                
                magnifierLens.classList.remove('hidden');
                zoomResult.classList.remove('hidden');

                const rect = mainImg.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                // Lens Position
                let lensX = x - (magnifierLens.offsetWidth / 2);
                let lensY = y - (magnifierLens.offsetHeight / 2);

                // Prevent lens from going out
                if (lensX < 0) lensX = 0;
                if (lensY < 0) lensY = 0;
                if (lensX > rect.width - magnifierLens.offsetWidth) lensX = rect.width - magnifierLens.offsetWidth;
                if (lensY > rect.height - magnifierLens.offsetHeight) lensY = rect.height - magnifierLens.offsetHeight;

                magnifierLens.style.left = lensX + 'px';
                magnifierLens.style.top = lensY + 'px';

                // High Definition Zoom (Fixed 3x scale)
                const scale = 3; 

                zoomResult.style.backgroundImage = `url(${mainImg.src})`;
                zoomResult.style.backgroundSize = (rect.width * scale) + 'px ' + (rect.height * scale) + 'px';
                zoomResult.style.backgroundPosition = `-${lensX * scale}px -${lensY * scale}px`;
            });

            mainDisplay.addEventListener('mouseleave', function() {
                magnifierLens.classList.add('hidden');
                zoomResult.classList.add('hidden');
            });

            window.addToCart = function(isBuyNow = false) {
                if(isVariation && (!selectedColor || !selectedSize)) {
                    // Visual feedback for required selection
                    const sizeContainer = document.querySelector('.size-option')?.parentElement;
                    if(sizeContainer) {
                        sizeContainer.classList.add('ring-2', 'ring-red-500', 'ring-offset-4', 'rounded-xl');
                        setTimeout(() => sizeContainer.classList.remove('ring-2', 'ring-red-500', 'ring-offset-4'), 1500);
                    }
                    showToast("{{ __('Please select a Color and Size') }}", 'error');
                    return;
                }

                const btn = document.getElementById('add-to-cart-btn');
                const btnText = document.getElementById('cart-btn-text');
                const originalText = btnText.textContent;
                
                if(!isBuyNow) {
                    btn.disabled = true;
                    btnText.textContent = "{{ __('Adding...') }}";
                }

                fetch('{{ route('cart.add') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        product_id: '{{ $product->id }}',
                        quantity: document.getElementById('quantity').value,
                        color: selectedColor,
                        size: selectedSize
                    })
                })
                .then(response => response.json().then(data => ({ data })))
                .then(({ data }) => {
                    if (data.success) {
                        if (typeof updateCartUI === 'function') {
                            updateCartUI(data);
                        } else {
                            document.querySelectorAll('[onclick="openCart()"] span').forEach(el => {
                                el.textContent = data.cartCount;
                            });
                        }

                        // Fire AddToCart Event for Analytics
                        let productPrice = {{ (float)($hasDiscount ? $discountMin : $regularMin) }};
                        if (isVariation) {
                            const variant = variants.find(v => 
                                String(v.color).toLowerCase() === String(selectedColor).toLowerCase() && 
                                String(v.size).toLowerCase() === String(selectedSize).toLowerCase()
                            );
                            if (variant) {
                                let vDiscount = parseFloat(variant.discount_price);
                                let vPrice = parseFloat(variant.price);
                                if (!vDiscount || vDiscount <= 0) {
                                    const pPrice = {{ (float)$product->price }};
                                    const pDisc = {{ (float)$product->discount_price }};
                                    if (pDisc > 0 && pDisc < pPrice) {
                                        vDiscount = vPrice * (pDisc / pPrice);
                                    }
                                }
                                productPrice = (vDiscount > 0 && vDiscount < vPrice) ? vDiscount : vPrice;
                            }
                        }
                        const itemQty = document.getElementById('quantity').value || 1;
                        const eventData = {
                            content_ids: ['{{ $product->id }}'],
                            content_name: '{{ addslashes($product->name) }}',
                            content_type: 'product',
                            value: productPrice * itemQty,
                            currency: 'BDT'
                        };
                        
                        if (typeof fbq === 'function') {
                            fbq('track', 'AddToCart', eventData);
                        }
                        if (typeof gtag === 'function') {
                            gtag('event', 'add_to_cart', {
                                currency: 'BDT',
                                value: eventData.value,
                                items: [{
                                    item_id: '{{ $product->id }}',
                                    item_name: '{{ addslashes($product->name) }}',
                                    price: productPrice,
                                    quantity: itemQty
                                }]
                            });
                        }

                        if (isBuyNow) {
                            window.location.href = '{{ route('checkout') }}';
                        } else {
                            btnText.textContent = "{{ __('Success!') }}";
                            setTimeout(() => {
                                btn.disabled = false;
                                btnText.textContent = originalText;
                                openCart();
                            }, 500);
                        }
                        return;
                    }
                    const msg = data.message || "{{ __('Something went wrong. Please try again.') }}";
                    if (typeof showToast === 'function') {
                        showToast(msg, 'error');
                    } else {
                        alert(msg);
                    }
                    if (!isBuyNow) {
                        btn.disabled = false;
                        btnText.textContent = originalText;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    if (typeof showToast === 'function') {
                        showToast("{{ __('Something went wrong. Please try again.') }}", 'error');
                    }
                    btn.disabled = false;
                    btnText.textContent = originalText;
                });
            };

            // Fire ViewContent on Page Load
            const viewData = {
                content_ids: ['{{ $product->id }}'],
                content_name: '{{ addslashes($product->name) }}',
                content_type: 'product',
                value: {{ (float)($hasDiscount ? $discountMin : $regularMin) }},
                currency: 'BDT'
            };
            if (typeof fbq === 'function') {
                fbq('track', 'ViewContent', viewData);
            }
            if (typeof gtag === 'function') {
                gtag('event', 'view_item', {
                    currency: 'BDT',
                    value: viewData.value,
                    items: [{
                        item_id: '{{ $product->id }}',
                        item_name: '{{ addslashes($product->name) }}',
                        price: viewData.value,
                        quantity: 1
                    }]
                });
            }
        })();
    </script>
    @endpush
</x-layout>