@extends('layouts.app')

@section('title', $product->name)

@section('content')
<div class="bg-white min-h-screen text-slate-900 pb-20">
    <div class="bg-slate-50 border-b border-slate-200 py-3.5 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <nav class="flex items-center gap-2 text-xs font-semibold text-slate-500 overflow-x-auto whitespace-nowrap">
                <a href="{{ route('store.home') }}" class="hover:text-[#1769AA] transition-colors">Home</a>
                <x-icon name="chevron-right" class="w-3.5 h-3.5 flex-shrink-0" />
                <a href="{{ route('store.products') }}" class="hover:text-[#1769AA] transition-colors">Products</a>
                @if($product->category)
                    <x-icon name="chevron-right" class="w-3.5 h-3.5 flex-shrink-0" />
                    <a href="{{ route('store.products', ['category' => $product->category->slug]) }}" class="hover:text-[#1769AA] transition-colors">{{ $product->category->name }}</a>
                @endif
                <x-icon name="chevron-right" class="w-3.5 h-3.5 flex-shrink-0" />
                <span class="text-slate-900 font-bold truncate max-w-[200px] sm:max-w-md">{{ $product->name }}</span>
            </nav>
            <a href="{{ route('store.products', $product->category ? ['category' => $product->category->slug] : []) }}" class="hidden sm:inline-flex items-center gap-1 text-xs font-bold text-slate-500 hover:text-[#1769AA] transition-colors">
                <x-icon name="arrow-left" class="w-3.5 h-3.5" />
                <span>Back to Products</span>
            </a>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 sm:pt-10">
        @php
            $images = is_array($product->images) && count($product->images) > 0 ? $product->images : [''];
            $discountPercent = $product->discountPercent();
            $b2bProductInfo = $b2bProduct ?? null;
            $variationsJs = $product->variations->map(fn ($v) => [
                'id' => $v->id,
                'group' => (string) $v->group,
                'value' => (string) $v->value,
                'mrp' => $v->mrp !== null ? (float) $v->mrp : (float) ($product->mrp ?? 0),
                'price' => $v->price !== null ? (float) $v->price : (float) $product->price,
                'image' => (string) ($v->image ?? ''),
            ])->values()->all();
        @endphp

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12" x-data="{
            activeImage: 0,
            qty: 1,
            bulkQty: {{ $b2bProductInfo->min_order_qty ?? 1 }},
            variations: {{ json_encode($variationsJs) }},
            selectedVariation: null,
            basePrice: {{ $product->price }},
            baseMrp: {{ $product->mrp ?? 0 }},
            fmt(n) {
                return '₹' + Number(n || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            },
            get currentPrice() {
                return this.selectedVariation ? (Number(this.selectedVariation.price) || this.basePrice) : this.basePrice;
            },
            get currentMrp() {
                return this.selectedVariation ? (Number(this.selectedVariation.mrp) || this.baseMrp) : this.baseMrp;
            },
            get hasVariationImage() {
                return !!(this.selectedVariation && this.selectedVariation.image);
            },
            get needsVariation() {
                return this.variations.length > 0;
            },
            selectVariation(v) {
                this.selectedVariation = (this.selectedVariation && this.selectedVariation.id === v.id) ? null : v;
                this.activeImage = 0;
            }
        }">
            <div class="lg:col-span-6 space-y-4">
                <div class="relative aspect-square rounded-3xl overflow-hidden bg-slate-50 border border-slate-200 shadow-sm">
                    @foreach($images as $idx => $img)
                        <img x-show="!hasVariationImage && activeImage === {{ $idx }}" src="{{ $img }}" alt="{{ $product->name }}" class="w-full h-full object-cover object-center absolute inset-0">
                    @endforeach
                    <template x-if="hasVariationImage">
                        <img x-bind:src="selectedVariation.image" x-bind:alt="selectedVariation.value" class="w-full h-full object-cover object-center absolute inset-0">
                    </template>

                    <div class="absolute top-4 left-4 flex flex-col gap-2">
                        @if($product->badge)
                            <span class="px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider bg-[#1769AA] text-white shadow-md">{{ $product->badge }}</span>
                        @endif
                        @if($b2bProductInfo)
                            <span class="px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider bg-white/95 text-[#142B4A] border border-slate-200 shadow-xs">B2B Wholesale Available</span>
                        @endif
                    </div>

                    <div class="absolute top-4 right-4">
                        <span class="px-3 py-1 rounded-full text-xs font-bold {{ $product->stock > 10 ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : ($product->stock > 0 ? 'bg-amber-50 text-amber-700 border border-amber-200' : 'bg-red-50 text-red-700 border border-red-200') }}">
                            {{ $product->stock > 10 ? '● In Stock' : ($product->stock > 0 ? '● Only ' . $product->stock . ' Left' : '● Sold Out') }}
                        </span>
                    </div>
                </div>

                @if(count($images) > 1)
                    <div class="flex items-center gap-3 overflow-x-auto pb-2" x-show="!hasVariationImage">
                        @foreach($images as $idx => $img)
                            <button x-on:click="activeImage = {{ $idx }}" class="relative w-20 h-20 rounded-2xl overflow-hidden border-2 flex-shrink-0 transition-all" x-bind:class="activeImage === {{ $idx }} ? 'border-[#1769AA] ring-2 ring-[#1769AA]/20 scale-105' : 'border-slate-200 hover:border-slate-300 opacity-70 hover:opacity-100'">
                                <img src="{{ $img }}" alt="Thumbnail {{ $idx + 1 }}" class="w-full h-full object-cover">
                            </button>
                        @endforeach
                    </div>
                @endif

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2">
                    <div class="p-3 bg-slate-50 border border-slate-200 rounded-2xl text-center space-y-1">
                        <x-icon name="shield-check" class="w-5 h-5 text-[#1769AA] mx-auto" />
                        <div class="text-[11px] font-bold text-slate-800">5-Yr Frame</div>
                        <div class="text-[10px] text-slate-500">Structural Warranty</div>
                    </div>
                    <div class="p-3 bg-slate-50 border border-slate-200 rounded-2xl text-center space-y-1">
                        <x-icon name="truck" class="w-5 h-5 text-[#142B4A] mx-auto" />
                        <div class="text-[11px] font-bold text-slate-800">Pan-India Delivery</div>
                        <div class="text-[10px] text-slate-500">Insured Heavy Transit</div>
                    </div>
                    <div class="p-3 bg-slate-50 border border-slate-200 rounded-2xl text-center space-y-1">
                        <x-icon name="settings" class="w-5 h-5 text-[#1769AA] mx-auto" />
                        <div class="text-[11px] font-bold text-slate-800">Site Assembly</div>
                        <div class="text-[10px] text-slate-500">Technician Support</div>
                    </div>
                    <div class="p-3 bg-slate-50 border border-slate-200 rounded-2xl text-center space-y-1">
                        <x-icon name="file-text" class="w-5 h-5 text-[#142B4A] mx-auto" />
                        <div class="text-[11px] font-bold text-slate-800">GST Tax Invoice</div>
                        <div class="text-[10px] text-slate-500">Input Tax Credit Ready</div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-6 space-y-6">
                <div>
                    <div class="flex items-center gap-2 mb-2">
                        @if($product->category)
                            <span class="text-xs font-bold text-[#1769AA] uppercase tracking-wider">{{ $product->category->name }}</span>
                            <span class="text-slate-300">•</span>
                        @endif
                        @if($product->equipment_type)
                            <span class="text-xs font-semibold text-slate-500 uppercase">{{ $product->equipment_type }}</span>
                            <span class="text-slate-300">•</span>
                        @endif
                        @if($product->subcategory)
                            <span class="text-xs font-semibold text-slate-500">{{ $product->subcategory }}</span>
                        @endif
                    </div>
                    <h1 class="font-display text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 uppercase tracking-tight leading-none">{{ $product->name }}</h1>
                    <div class="flex items-center gap-3 mt-3">
                        <div class="flex items-center gap-1 text-amber-400">
                            @for($i = 1; $i <= 5; $i++)
                                <x-icon name="star" class="w-4 h-4 {{ $i <= floor($product->rating) ? 'fill-amber-400 text-amber-400' : 'text-slate-200' }}" />
                            @endfor
                        </div>
                        <span class="text-xs font-bold text-slate-700">{{ $product->rating }} ({{ $product->reviews_count }} Verified Gym Reviews)</span>
                    </div>
                </div>

                <div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-3">
                    <div class="flex items-baseline gap-3">
                        <span class="text-3xl sm:text-4xl font-black font-display text-slate-900" x-text="fmt(currentPrice)">₹{{ number_format($product->price, 2) }}</span>
                        <span x-show="currentMrp > currentPrice" class="text-base text-slate-400 line-through font-semibold" x-text="fmt(currentMrp)">₹{{ number_format($product->mrp, 2) }}</span>
                        <span x-show="currentMrp > currentPrice" class="px-2.5 py-0.5 rounded-md bg-emerald-100 text-emerald-800 text-xs font-extrabold uppercase">
                            Save <span x-text="Math.round(((currentMrp - currentPrice) / currentMrp) * 100)">{{ $discountPercent }}</span>% Off
                        </span>
                    </div>
                    <p class="text-[11px] text-slate-500">Direct factory pricing. Price inclusive of standard 18% GST invoice.</p>

                    @if(count($variationsJs))
                        <div class="pt-3 border-t border-slate-200 space-y-3">
                            @foreach($product->variations->groupBy('group') as $groupLabel => $groupVariations)
                                <div>
                                    <div class="flex items-center justify-between mb-1.5">
                                        <span class="text-xs font-bold text-slate-700 uppercase tracking-wider">{{ $groupLabel }}</span>
                                        <span class="text-[11px] font-bold text-slate-500 uppercase" x-text="selectedVariation ? selectedVariation.value : 'Select option'"></span>
                                    </div>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($groupVariations as $v)
                                            <button type="button"
                                                x-on:click="selectVariation({{ json_encode(['id' => $v->id, 'group' => (string) $v->group, 'value' => (string) $v->value, 'price' => (float) ($v->price ?? $product->price), 'mrp' => (float) ($v->mrp ?? $product->mrp ?? 0), 'image' => (string) ($v->image ?? '')]) }})"
                                                class="px-3.5 py-2 rounded-xl border-2 text-xs font-bold transition-all"
                                                :class="selectedVariation && selectedVariation.id === '{{ $v->id }}' ? 'border-[#1769AA] bg-[#1769AA]/5 text-[#1769AA]' : 'border-slate-200 hover:border-slate-300 text-slate-700'">
                                                @if($v->image)
                                                    <span class="flex items-center gap-2">
                                                        <img src="{{ $v->image }}" alt="{{ $v->value }}" class="w-5 h-5 rounded-md object-cover border border-slate-200">
                                                        <span>{{ $v->value }}</span>
                                                    </span>
                                                @else
                                                    {{ $v->value }}
                                                @endif
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                            <template x-if="needsVariation && !selectedVariation">
                                <p class="text-[11px] font-semibold text-amber-600 flex items-center gap-1">
                                    <x-icon name="alert-circle" class="w-3.5 h-3.5" />
                                    Please select a variation before adding to bag.
                                </p>
                            </template>
                        </div>
                    @endif

                    @if($b2bProductInfo)
                        <div class="pt-3 border-t border-slate-200">
                            @if($currentCustomer)
                                <div class="rounded-xl bg-[#142B4A]/5 border border-[#142B4A]/20 p-3 space-y-2.5">
                                    <div class="flex items-center justify-between">
                                        <div class="text-xs font-black text-[#142B4A] uppercase tracking-wider flex items-center gap-1.5">
                                            <x-icon name="building-2" class="w-4 h-4" />
                                            B2B Wholesale Rate
                                        </div>
                                        <span class="text-[10px] font-bold text-[#142B4A] bg-white px-2 py-0.5 rounded border border-[#142B4A]/20">MOQ: {{ $b2bProductInfo->min_order_qty }}</span>
                                    </div>
                                    <div class="text-xl font-bold text-slate-900">₹{{ number_format($b2bProductInfo->bulk_price, 2) }} / unit</div>

                                    <div class="flex items-center gap-3">
                                        <div class="inline-flex items-center border border-slate-300 rounded-lg overflow-hidden bg-white shadow-xs">
                                            <button type="button" x-on:click="bulkQty = Math.max({{ $b2bProductInfo->min_order_qty }}, bulkQty - 1)" class="px-3 py-1.5 hover:bg-slate-100 text-slate-700 font-bold text-xs transition-colors"><x-icon name="minus" class="w-3 h-3" /></button>
                                            <span class="px-3 py-1.5 font-mono font-bold text-xs text-slate-900 min-w-[40px] text-center" x-text="bulkQty">{{ $b2bProductInfo->min_order_qty }}</span>
                                            <button type="button" x-on:click="bulkQty = bulkQty + 1" class="px-3 py-1.5 hover:bg-slate-100 text-slate-700 font-bold text-xs transition-colors"><x-icon name="plus" class="w-3 h-3" /></button>
                                        </div>
                                        <form action="{{ route('cart.add') }}" method="post" class="flex-1">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input type="hidden" name="purchase_type" value="bulk">
                                            <input type="hidden" name="quantity" x-bind:value="bulkQty" value="{{ $b2bProductInfo->min_order_qty }}">
                                            <button type="submit" class="w-full py-2 px-3 rounded-lg bg-[#142B4A] hover:bg-[#526579] text-white text-[11px] font-bold uppercase tracking-wider flex items-center justify-center gap-1.5 transition-colors">
                                                <x-icon name="shopping-bag" class="w-3.5 h-3.5" />
                                                <span>Add Bulk Order to Bag</span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @else
                                <div class="rounded-xl bg-[#142B4A]/5 border border-[#142B4A]/20 p-3 flex items-center gap-2.5">
                                    <x-icon name="lock" class="w-5 h-5 text-[#142B4A] flex-shrink-0" />
                                    <div class="flex-1 text-xs text-slate-600">
                                        <div class="font-black text-[#142B4A] uppercase tracking-wider">B2B Wholesale Pricing</div>
                                        <span>Login or register to view wholesale rates and place bulk orders.</span>
                                    </div>
                                    <button x-on:click="$store.ui.authOpen = true; $store.ui.authTab = 'login'" class="px-3 py-1.5 rounded-lg bg-[#142B4A] hover:bg-[#526579] text-white text-[11px] font-bold uppercase tracking-wider flex items-center gap-1 transition-colors">
                                        <span>Login</span>
                                    </button>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>

                <div class="flex items-center gap-4">
                    <span class="text-xs font-bold text-slate-700 uppercase tracking-wider">Quantity:</span>
                    <div class="inline-flex items-center border border-slate-300 rounded-xl overflow-hidden bg-white shadow-xs">
                        <button type="button" x-on:click="qty = Math.max(1, qty - 1)" class="px-3.5 py-2 hover:bg-slate-100 text-slate-700 font-bold text-sm transition-colors">
                            <x-icon name="minus" class="w-3.5 h-3.5" />
                        </button>
                        <span class="px-4 py-2 font-mono font-bold text-xs text-slate-900 min-w-[40px] text-center" x-text="qty">1</span>
                        <button type="button" x-on:click="qty = qty + 1" class="px-3.5 py-2 hover:bg-slate-100 text-slate-700 font-bold text-sm transition-colors">
                            <x-icon name="plus" class="w-3.5 h-3.5" />
                        </button>
                    </div>
                </div>

                <div class="space-y-3 pt-2">
                    <form action="{{ route('cart.add') }}" method="post" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="quantity" x-bind:value="qty" value="1">
                        <input type="hidden" name="variation_id" x-bind:value="selectedVariation ? selectedVariation.id : ''">
                        <button type="submit"
                            x-bind:disabled="needsVariation && !selectedVariation"
                            x-bind:class="needsVariation && !selectedVariation ? 'opacity-50 cursor-not-allowed bg-slate-400 hover:bg-slate-400' : 'bg-slate-900 hover:bg-black'"
                            class="py-3 px-5 rounded-xl text-white text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-2 transition-colors shadow-sm">
                            <x-icon name="shopping-bag" class="w-4 h-4" />
                            <span>Add To Bag</span>
                        </button>
                        {{-- <a href="{{ route('store.checkout') }}" class="py-3 px-5 rounded-xl bg-[#142B4A] hover:bg-[#526579] text-white text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-2 transition-colors shadow-sm">
                            <x-icon name="zap" class="w-4 h-4" />
                            <span>Buy Now</span>
                        </a> --}}
                    </form>

                    @if($b2bProductInfo && $b2bProductInfo->negotiation_enabled)
                        @if($currentCustomer)
                            <form action="{{ route('store.b2b.negotiate', $product->id) }}" method="post" class="space-y-2.5 p-4 rounded-xl bg-slate-50 border border-[#142B4A]/20">
                                @csrf
                                <div class="text-xs font-black text-[#142B4A] uppercase tracking-wider flex items-center gap-1.5">
                                    <x-icon name="message-square" class="w-4 h-4" />
                                    Negotiate Price
                                </div>
                                <div class="grid grid-cols-2 gap-2">
                                    <input type="number" name="quantity" min="1" placeholder="Quantity needed" required class="w-full px-3 py-2 rounded-lg border border-slate-300 bg-white text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#142B4A]/30">
                                    <input type="number" name="offered_price" min="0" step="0.01" placeholder="Your target price (₹/unit)" class="w-full px-3 py-2 rounded-lg border border-slate-300 bg-white text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#142B4A]/30">
                                </div>
                                <textarea name="message" rows="2" maxlength="2000" placeholder="Tell us about your requirement (e.g. gym setup, reorder arrangement, freight needs)" class="w-full px-3 py-2 rounded-lg border border-slate-300 bg-white text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#142B4A]/30"></textarea>
                                <button type="submit" class="w-full py-2.5 px-3 rounded-lg bg-[#1769AA] hover:bg-[#0E5588] text-white text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-1.5 transition-colors">
                                    <x-icon name="send" class="w-3.5 h-3.5" />
                                    <span>Submit Negotiation Request</span>
                                </button>
                            </form>
                        @else
                            <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200 flex items-center gap-2.5">
                                <x-icon name="message-square" class="w-4 h-4 text-[#142B4A] flex-shrink-0" />
                                <div class="flex-1 text-xs text-slate-600">Negotiate your own price &amp; quantity for this equipment — <strong>login to continue</strong>.</div>
                                <button x-on:click="$store.ui.authOpen = true; $store.ui.authTab = 'login'" class="px-3 py-1.5 rounded-lg bg-[#142B4A] hover:bg-[#526579] text-white text-[11px] font-bold uppercase tracking-wider transition-colors">Login</button>
                            </div>
                        @endif
                    @endif

                    @if($b2bProductInfo)
                        <button x-on:click="$store.ui.b2bOpen = true" class="w-full py-3 px-4 rounded-xl bg-[#1769AA] hover:bg-[#0E5588] text-white text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2 shadow-lg shadow-[#1769AA]/25 transition-all border border-white/20">
                            <x-icon name="building-2" class="w-5 h-5 text-white" />
                            <span>Wholesale Quotation Enquiry</span>
                        </button>
                        <button x-on:click="$store.ui.b2bOpen = true" class="w-full py-2.5 px-4 rounded-xl border border-slate-300 hover:border-slate-400 bg-white hover:bg-slate-50 text-slate-700 text-xs font-semibold flex items-center justify-center gap-2 transition-colors">
                            <x-icon name="building-2" class="w-4 h-4 text-[#1769AA]" />
                            <span>Need Formal B2B Quotation (GST / Gym Facility Proposal)?</span>
                        </button>
                    @endif
                </div>

                @if(is_array($product->features) && count($product->features) > 0)
                    <div class="pt-4 border-t border-slate-200 space-y-2">
                        <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider">Key Engineered Highlights:</h3>
                        <ul class="space-y-1.5 text-xs text-slate-600">
                            @foreach($product->features as $feat)
                                <li class="flex items-start gap-2">
                                    <x-icon name="check-circle" class="w-4 h-4 text-[#1769AA] flex-shrink-0 mt-0.5" />
                                    <span>{{ $feat }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(is_array($product->target_muscles) && count($product->target_muscles) > 0)
                    <div class="pt-2">
                        <div class="text-xs font-bold text-slate-800 uppercase tracking-wider mb-2">Target Muscle Engagement:</div>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach($product->target_muscles as $muscle)
                                <span class="px-2.5 py-1 rounded-md bg-slate-100 text-slate-700 text-xs font-semibold">{{ $muscle }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="mt-16 pt-8 border-t border-slate-200" x-data="{ tab: 'description' }">
            <div class="flex items-center gap-4 border-b border-slate-200 overflow-x-auto">
                <button x-on:click="tab = 'description'" x-bind:class="tab === 'description' ? 'text-[#1769AA] border-b-2 border-[#1769AA]' : 'text-slate-500 hover:text-slate-900'" class="pb-3.5 px-2 text-sm font-bold uppercase tracking-wider transition-colors relative whitespace-nowrap">Full Description & Craftsmanship</button>
                <button x-on:click="tab = 'specs'" x-bind:class="tab === 'specs' ? 'text-[#1769AA] border-b-2 border-[#1769AA]' : 'text-slate-500 hover:text-slate-900'" class="pb-3.5 px-2 text-sm font-bold uppercase tracking-wider transition-colors relative whitespace-nowrap">Technical Specifications</button>
                <button x-on:click="tab = 'shipping'" x-bind:class="tab === 'shipping' ? 'text-[#1769AA] border-b-2 border-[#1769AA]' : 'text-slate-500 hover:text-slate-900'" class="pb-3.5 px-2 text-sm font-bold uppercase tracking-wider transition-colors relative whitespace-nowrap">Pan-India Assembly & Freight</button>
            </div>

            <div x-show="tab === 'description'" class="py-8 text-slate-700 text-sm leading-relaxed space-y-4">
                @if($product->description)
                    {!! $product->description !!}
                @else
                    <p>{{ $product->short_description }}</p>
                @endif
            </div>

            <div x-show="tab === 'specs'" x-cloak class="py-8">
                @if(is_array($product->specifications) && count($product->specifications) > 0)
                    <div class="border border-slate-200 rounded-2xl overflow-hidden shadow-xs">
                        <table class="w-full text-left text-xs">
                            <tbody class="divide-y divide-slate-200">
                                @foreach($product->specifications as $key => $val)
                                    <tr class="{{ $loop->even ? 'bg-slate-50' : 'bg-white' }}">
                                        <td class="p-3.5 font-bold text-slate-800 w-1/3">{{ $key }}</td>
                                        <td class="p-3.5 text-slate-600">{{ $val }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="text-xs text-slate-500">Technical specifications are being updated. Please contact our product experts for detailed spec sheets.</p>
                @endif
            </div>

            <div x-show="tab === 'shipping'" x-cloak class="py-8 space-y-4 text-xs text-slate-600 leading-relaxed">
                <div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
                    <h4 class="font-bold text-slate-900 text-sm">Pan-India Freight Logistics</h4>
                    <p>All heavy fitness machinery and gym equipment are crated with wooden framing and industrial protective wrapping. Dispatched from our central warehousing hubs in Bengaluru, Delhi NCR, and Mumbai. Transit times range between 3 to 7 business days depending on city tier.</p>
                </div>
                <div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
                    <h4 class="font-bold text-slate-900 text-sm">Certified Technician On-Site Assembly</h4>
                    <p>For commercial gym setups, corporate fitness suites, and home gym equipment, certified technicians are available in all metropolitan areas and Tier 1/2 cities to provide unboxing, leveling, bolting, and pulley calibration.</p>
                </div>
            </div>
        </div>

        <div class="mt-8 p-4 rounded-xl bg-slate-50 border border-slate-200 text-xs text-slate-500">
            <div class="flex items-center gap-2 font-bold text-slate-700 mb-1">
                <x-icon name="info" class="w-4 h-4 text-[#142B4A]" />
                Product Information
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
                <div><span class="text-slate-400">SKU:</span> <span class="font-mono font-bold text-slate-700">{{ $product->id }}</span></div>
                @if($product->subcategory)<div><span class="text-slate-400">Subcategory:</span> <span class="font-bold text-slate-700">{{ $product->subcategory }}</span></div>@endif
                @if($product->category)<div><span class="text-slate-400">Category:</span> <span class="font-bold text-slate-700">{{ $product->category->name }}</span></div>@endif
                @if($product->equipment_type)<div><span class="text-slate-400">Equipment Type:</span> <span class="font-bold text-slate-700">{{ $product->equipment_type }}</span></div>@endif
            </div>
        </div>

        @if($related->count())
            <div class="mt-20 pt-10 border-t border-slate-200">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h3 class="font-display text-2xl sm:text-3xl font-black uppercase text-slate-900 tracking-wide">Related Gym Equipment</h3>
                        <p class="text-xs text-slate-500">Recommended commercial gear to complete your workout station</p>
                    </div>
                    @if($product->category)
                        <a href="{{ route('store.products', ['category' => $product->category->slug]) }}" class="text-xs font-bold text-[#1769AA] hover:underline flex items-center gap-1">
                            <span>View All In Category</span>
                            <x-icon name="chevron-right" class="w-4 h-4" />
                        </a>
                    @endif
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($related as $relatedProduct)
                        <x-product-card :product="$relatedProduct" />
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection