@extends('layouts.app')

@section('title', $product->name . ' | ' . ($product->category?->name ?? 'Networking Equipment') . ' Supplier Nairobi — ECA Networks')
@section('meta_description',
    $product->short_description
        ? Str::limit(strip_tags($product->short_description), 155) . ' Available in Nairobi, Kenya. Call ECA Networks: +254 720 309 309.'
        : 'Buy ' . $product->name . ' in Nairobi Kenya from ECA Networks. Leading ' . ($product->category?->name ?? 'networking equipment') . ' supplier. Request a quote: +254 720 309 309.'
)
@section('meta_keywords', $product->name . ', ' . ($product->category?->name ?? '') . ' Kenya, ' . ($product->brand?->name ?? '') . ' Kenya, networking equipment Nairobi, ECA Networks')
@section('og_title', $product->name . ' | ECA Networks Nairobi')
@section('og_description', 'Buy ' . $product->name . ' in Nairobi from ECA Networks — Kenya\'s trusted networking equipment supplier. Call +254 720 309 309.')

@section('og_title', $product->name . ' | ECA Networks Kenya')

@section('og_description',
    $product->short_description
        ? Str::limit(strip_tags($product->short_description), 200)
        : Str::limit(strip_tags($product->description), 200)
)

@section('og_type', 'product')

@section('og_image',
    $product->primary_image
        ? asset($product->primary_image)
        : asset('images/og-eca-networks.jpg')
)

@section('meta_keywords',
    implode(', ', array_filter([
        $product->name,
        optional($product->brand)->name,
        optional($product->category)->name,
        ($product->name ?? '') . ' Kenya price',
        ($product->name ?? '') . ' buy Kenya',
        'electronics Kenya',
    ]))
)

@section('canonical', url()->current())

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home","item":"{{ url('/') }}"},
    {"@type":"ListItem","position":2,"name":"Products","item":"{{ route('products.index') }}"}
    @if($product->category)
    ,{"@type":"ListItem","position":3,"name":"{{ addslashes($product->category->name) }}","item":"{{ route('products.category', $product->category->slug) }}"}
    ,{"@type":"ListItem","position":4,"name":"{{ addslashes($product->name) }}","item":"{{ url()->current() }}"}
    @else
    ,{"@type":"ListItem","position":3,"name":"{{ addslashes($product->name) }}","item":"{{ url()->current() }}"}
    @endif
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{ addslashes($product->name) }}",
  "description": "{{ addslashes(Str::limit(strip_tags($product->description ?? $product->short_description ?? ''), 500)) }}",
  "sku": "{{ $product->sku ?? $product->id }}",
  "brand": {
    "@type": "Brand",
    "name": "{{ addslashes(optional($product->brand)->name ?? 'ECA Networks') }}"
  },
  "category": "{{ addslashes(optional($product->category)->name ?? '') }}",
  @if($product->images && $product->images->count() > 0)
  "image": [
    @foreach($product->images as $img)
    "{{ asset($img->image) }}"{{ !$loop->last ? ',' : '' }}
    @endforeach
  ],
  @elseif($product->primary_image)
  "image": ["{{ asset($product->primary_image) }}"],
  @else
  "image": ["{{ asset('images/og-eca-networks.jpg') }}"],
  @endif
  "url": "{{ url()->current() }}",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "KES",
    "price": "{{ number_format($product->effective_price, 2, '.', '') }}",
    "availability": "{{ ($product->stock > 0) ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
    "url": "{{ url()->current() }}",
    "priceValidUntil": "{{ now()->addYear()->toDateString() }}",
    "seller": {
      "@type": "Organization",
      "name": "ECA Networks",
      "url": "{{ url('/') }}"
    }
  }
}
</script>
@endpush

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">

    <!-- Breadcrumb -->
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2 flex-wrap">
        <a href="{{ route('home') }}" class="hover:text-electric-blue">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('products.index') }}" class="hover:text-electric-blue">Products</a>
        @if($product->category)
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('products.category', $product->category->slug) }}" class="hover:text-electric-blue">{{ $product->category->name }}</a>
        @endif
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-navy font-medium">{{ Str::limit($product->name, 40) }}</span>
    </nav>

    <!-- Product Detail -->
    @php
        $activeVariants = $product->variants->where('is_active', true)->values();
        $hasVariants    = $activeVariants->count() > 0;
        $basePrice      = (float) $product->effective_price;
        $baseSalePrice  = $product->sale_price ? (float) $product->sale_price : null;
        $baseStock      = (int) $product->stock;
    @endphp

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8 mb-8"
         x-data="{
             activeImage: '{{ $product->primary_image ? asset($product->primary_image) : '' }}',
             @if($hasVariants)
             variants: {{ $activeVariants->map(fn($v) => [
                 'id'          => $v->id,
                 'label'       => $v->label,
                 'price'       => (float) $v->effective_price,
                 'original'    => $v->price ? (float) $v->price : (float) $product->attributes['price'],
                 'onSale'      => $v->is_on_sale,
                 'stock'       => (int) $v->stock,
                 'sku'         => $v->sku ?? ($product->sku ?? ''),
             ])->values()->toJson() }},
             selectedVariant: null,
             get displayPrice() {
                 return this.selectedVariant ? this.selectedVariant.price : {{ $basePrice }};
             },
             get displayOriginal() {
                 return this.selectedVariant ? this.selectedVariant.original : {{ $baseSalePrice ?? $basePrice }};
             },
             get displayOnSale() {
                 if (this.selectedVariant) return this.selectedVariant.onSale;
                 return {{ $product->is_on_sale ? 'true' : 'false' }};
             },
             get displayStock() {
                 return this.selectedVariant ? this.selectedVariant.stock : {{ $baseStock }};
             },
             get displaySku() {
                 return this.selectedVariant ? this.selectedVariant.sku : '{{ $product->sku ?? '' }}';
             },
             get canAddToCart() {
                 return this.selectedVariant !== null && this.selectedVariant.stock > 0;
             },
             selectVariant(v) {
                 this.selectedVariant = (this.selectedVariant && this.selectedVariant.id === v.id) ? null : v;
             },
             @else
             get displayPrice() { return {{ $basePrice }}; },
             get displayOnSale() { return {{ $product->is_on_sale ? 'true' : 'false' }}; },
             get displayStock() { return {{ $baseStock }}; },
             get canAddToCart() { return this.displayStock > 0; },
             @endif
         }">

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">

            <!-- Image Gallery -->
            <div>
                <div class="aspect-square bg-gray-50 rounded-2xl overflow-hidden mb-4 border border-gray-100">
                    <template x-if="activeImage">
                        <img :src="activeImage" alt="{{ $product->name }}" fetchpriority="high" decoding="sync" class="w-full h-full object-contain p-4">
                    </template>
                    <template x-if="!activeImage">
                        <div class="w-full h-full flex items-center justify-center">
                            <i class="fas fa-image text-gray-300 text-6xl"></i>
                        </div>
                    </template>
                </div>
                @if($product->images->count() > 1)
                <div class="flex gap-3 overflow-x-auto pb-2">
                    @foreach($product->images as $img)
                    <button @click="activeImage = '{{ asset($img->image) }}'"
                            :class="activeImage === '{{ asset($img->image) }}' ? 'border-electric-blue' : 'border-gray-200'"
                            class="w-16 h-16 rounded-xl border-2 overflow-hidden flex-shrink-0 bg-gray-50 hover:border-electric-blue transition-colors">
                        <img src="{{ asset($img->image) }}" alt="" loading="lazy" decoding="async" class="w-full h-full object-contain p-1">
                    </button>
                    @endforeach
                </div>
                @endif
            </div>

            <!-- Product Info -->
            <div class="flex flex-col">
                <!-- Brand & Category -->
                <div class="flex items-center gap-2 mb-2">
                    @if($product->brand)
                    <a href="{{ route('products.brand', $product->brand->slug) }}" class="text-sm text-electric-blue font-semibold hover:underline">{{ $product->brand->name }}</a>
                    <span class="text-gray-300">|</span>
                    @endif
                    @if($product->category)
                    <a href="{{ route('products.category', $product->category->slug) }}" class="text-sm text-gray-500 hover:text-electric-blue">{{ $product->category->name }}</a>
                    @endif
                </div>

                <h1 class="text-2xl md:text-3xl font-bold text-navy mb-3">{{ $product->name }}</h1>

                <!-- Rating placeholder -->
                <div class="flex items-center gap-2 mb-4">
                    <div class="flex text-yellow-400">
                        @for($i=0; $i<5; $i++)<i class="fas fa-star text-sm"></i>@endfor
                    </div>
                    <span class="text-sm text-gray-500">(Reviews)</span>
                </div>

                @php
                    $isQuoteOnly = ($product->price == 0 && $product->effective_price == 0 && !$hasVariants);
                    $waRaw  = \App\Models\Setting::get('home_whatsapp', '+254712315165');
                    $waNum  = preg_replace('/[^0-9]/', '', $waRaw);
                    $productUrl = route('products.show', $product->slug);
                    $waMsgPrice = urlencode(
                        'Redirected from "' . $productUrl . '"' . "\n\n" .
                        'Hi ECA Networks, I am interested in *' . $product->name . '*. Kindly share the price and availability.'
                    );
                    $waMsgHelp  = urlencode('Hi ECA Networks, I need help with: ' . $product->name);
                @endphp

                <!-- Price — reactive -->
                <div class="flex items-center gap-3 mb-4">
                    @if(!$isQuoteOnly)
                    <span class="text-3xl font-bold text-electric-blue"
                          x-text="'KES ' + displayPrice.toLocaleString()"></span>
                    <template x-if="displayOnSale">
                        <span class="text-gray-400 text-xl line-through"
                              x-text="'KES ' + displayOriginal.toLocaleString()"></span>
                    </template>
                    @if($product->is_on_sale && !$hasVariants)
                    @php $discount = round((($product->price - $product->sale_price) / $product->price) * 100); @endphp
                    <span class="bg-red-100 text-red-600 text-sm font-bold px-3 py-1 rounded-full">-{{ $discount }}% OFF</span>
                    @endif
                    @endif
                </div>

                @if($product->short_description)
                <p class="text-gray-600 mb-5 leading-relaxed">{{ $product->short_description }}</p>
                @endif

                <!-- =====================
                     VARIANT SELECTOR
                ===================== -->
                @if($hasVariants)
                <div class="mb-5">
                    <div class="flex items-center justify-between mb-2">
                        <p class="text-sm font-semibold text-navy">
                            Select Option:
                            <span x-show="selectedVariant" x-text="selectedVariant ? selectedVariant.label : ''"
                                  class="text-electric-blue ml-1"></span>
                        </p>
                        <span x-show="!selectedVariant" class="text-xs text-red-500">Required</span>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        @foreach($activeVariants as $variant)
                        <button type="button"
                                @click="selectVariant({{ json_encode(['id' => $variant->id, 'label' => $variant->label, 'price' => (float) $variant->effective_price, 'original' => $variant->price ? (float) $variant->price : (float) $product->attributes['price'], 'onSale' => $variant->is_on_sale, 'stock' => (int) $variant->stock, 'sku' => $variant->sku ?? ($product->sku ?? '')]) }})"
                                :class="{
                                    'border-electric-blue bg-blue-50 text-electric-blue': selectedVariant && selectedVariant.id === {{ $variant->id }},
                                    'border-gray-200 text-gray-700 hover:border-electric-blue': !selectedVariant || selectedVariant.id !== {{ $variant->id }},
                                    'opacity-40 cursor-not-allowed line-through': {{ $variant->stock <= 0 ? 'true' : 'false' }}
                                }"
                                class="border-2 rounded-xl px-4 py-2 text-sm font-medium transition-all"
                                {{ $variant->stock <= 0 ? 'disabled' : '' }}>
                            {{ $variant->label }}
                            @if($variant->stock <= 0)
                            <span class="text-xs block leading-none mt-0.5 text-gray-400">Out of stock</span>
                            @endif
                        </button>
                        @endforeach
                    </div>
                </div>
                @endif
                <!-- END VARIANT SELECTOR -->

                <!-- Stock & SKU — reactive -->
                <div class="flex gap-4 mb-5 text-sm">
                    <div class="flex items-center gap-1.5">
                        <template x-if="displayStock > 0">
                            <span class="flex items-center gap-1.5">
                                <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                <span class="text-green-600 font-medium">✓ In Stock</span>
                            </span>
                        </template>
                        <template x-if="displayStock <= 0">
                            <span class="flex items-center gap-1.5">
                                <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                                <span class="text-red-600 font-medium">Out of Stock</span>
                            </span>
                        </template>
                    </div>
                    @if($product->sku || $hasVariants)
                    <span class="text-gray-400">|</span>
                    <span class="text-gray-500">SKU: <span x-text="displaySku ?? '{{ $product->sku ?? '' }}'"></span></span>
                    @endif
                </div>

                <!-- Add to Cart / WhatsApp -->
                @if($isQuoteOnly)
                {{-- Price = 0: show WhatsApp CTA instead of cart --}}
                <a href="https://wa.me/{{ $waNum }}?text={{ $waMsgPrice }}"
                   target="_blank" rel="noopener noreferrer"
                   class="w-full flex items-center justify-center gap-3 bg-[#25D366] hover:bg-[#1ebe5d] text-white py-4 rounded-xl font-bold text-base transition-colors shadow-lg mb-5">
                    <i class="fab fa-whatsapp text-2xl"></i>
                    Talk to Us on WhatsApp
                </a>
                @else
                <form action="{{ route('cart.add') }}" method="POST" class="flex gap-3 mb-5">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    @if($hasVariants)
                    <input type="hidden" name="variant_id" :value="selectedVariant ? selectedVariant.id : ''">
                    @endif

                    <template x-if="canAddToCart || {{ $hasVariants ? 'false' : ($product->stock > 0 ? 'true' : 'false') }}">
                        <div class="flex gap-3 w-full">
                            <div class="flex items-center border border-gray-300 rounded-xl overflow-hidden">
                                <button type="button" onclick="const i=this.nextElementSibling; if(i.value>1) i.value--;" class="px-4 py-3 hover:bg-gray-100 transition-colors text-navy font-bold">−</button>
                                <input type="number" name="quantity" value="1" min="1"
                                       :max="displayStock"
                                       class="w-14 text-center border-x border-gray-300 py-3 focus:outline-none text-sm font-semibold">
                                <button type="button" onclick="const i=this.previousElementSibling; i.value = Math.min(parseInt(i.value)+1, parseInt(i.max));" class="px-4 py-3 hover:bg-gray-100 transition-colors text-navy font-bold">+</button>
                            </div>
                            <button type="submit"
                                    :disabled="{{ $hasVariants ? '!canAddToCart' : 'false' }}"
                                    class="flex-1 bg-electric-blue text-white py-3 px-6 rounded-xl font-semibold hover:bg-blue-dark transition-colors flex items-center justify-center gap-2 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed">
                                <i class="fas fa-cart-plus"></i> Add to Cart
                            </button>
                        </div>
                    </template>

                    @if(!$hasVariants && $product->stock <= 0)
                    <button disabled class="w-full bg-gray-200 text-gray-400 py-3 rounded-xl font-semibold cursor-not-allowed">
                        Out of Stock
                    </button>
                    @endif

                    @if($hasVariants)
                    <template x-if="!selectedVariant">
                        <p class="text-sm text-gray-400 italic self-center">← Select an option first</p>
                    </template>
                    @endif
                </form>
                @endif

                <!-- Add to Quote -->
                <div class="mb-4">
                    <button onclick="addToQuote({{ $product->id }}, this)"
                            class="add-to-quote-btn w-full flex items-center justify-center gap-2 border-2 border-navy text-navy py-3 rounded-xl font-semibold hover:bg-navy hover:text-white transition-colors text-sm">
                        <i class="fas fa-file-invoice"></i>
                        Add to Quote Request
                    </button>
                    <p class="text-xs text-gray-400 text-center mt-1.5">For bulk orders, ISPs &amp; businesses</p>
                </div>

                <!-- Datasheet Download -->
                @if($product->datasheet)
                <a href="{{ asset($product->datasheet) }}" target="_blank" download
                   class="flex items-center gap-3 px-5 py-3.5 bg-red-50 hover:bg-red-100 border border-red-200 rounded-xl transition-colors group">
                    <svg class="w-8 h-8 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-1 8.5V14h-2v3.5L8.5 16 7 17.5l5 5 5-5-1.5-1.5L14 17.5zM9 13h6v-1H9v1zm0-2h6v-1H9v1z"/>
                    </svg>
                    <div>
                        <p class="font-semibold text-red-700 text-sm group-hover:underline">Download Datasheet / Specs</p>
                    </div>
                    <svg class="w-4 h-4 text-red-400 ml-auto" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
                    </svg>
                </a>
                @endif

                <!-- Trust signals -->
                <div class="bg-gray-50 rounded-xl p-4 grid grid-cols-2 gap-3 text-sm">
                    <div class="flex items-center gap-2 text-gray-600">
                        <i class="fas fa-shield-alt text-electric-blue"></i>
                        <span>Genuine product guaranteed</span>
                    </div>
                    <div class="flex items-center gap-2 text-gray-600">
                        <i class="fas fa-headset text-electric-blue"></i>
                        <span>24/7 customer support</span>
                    </div>
                </div>

                <!-- WhatsApp Help -->
                <a href="https://wa.me/{{ $waNum }}?text={{ $waMsgHelp }}"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="mt-4 flex items-center justify-center gap-2.5 bg-[#25D366] hover:bg-[#1ebe5d] text-white py-3 rounded-xl font-semibold text-sm transition-colors shadow-sm">
                    <i class="fab fa-whatsapp text-xl"></i>
                    Need help? Chat with Us
                </a>
            </div>
        </div>
    </div>

    <!-- Tabs: Description, Specifications, Reviews -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-8" x-data="{ activeTab: 'description' }">
        <div class="flex border-b border-gray-100 overflow-x-auto">
            <button @click="activeTab = 'description'" :class="activeTab === 'description' ? 'border-b-2 border-electric-blue text-electric-blue' : 'text-gray-500'" class="px-6 py-4 text-sm font-semibold hover:text-electric-blue transition-colors whitespace-nowrap">
                Description
            </button>
            @if($product->specifications)
            <button @click="activeTab = 'specifications'" :class="activeTab === 'specifications' ? 'border-b-2 border-electric-blue text-electric-blue' : 'text-gray-500'" class="px-6 py-4 text-sm font-semibold hover:text-electric-blue transition-colors whitespace-nowrap">
                Specifications
            </button>
            @endif
            <button @click="activeTab = 'reviews'" :class="activeTab === 'reviews' ? 'border-b-2 border-electric-blue text-electric-blue' : 'text-gray-500'" class="px-6 py-4 text-sm font-semibold hover:text-electric-blue transition-colors whitespace-nowrap">
                Reviews
                @php $rc = \Illuminate\Support\Facades\DB::table('product_reviews')->where('product_id',$product->id)->where('is_approved',1)->count(); @endphp
                @if($rc > 0)<span class="ml-1 text-xs bg-electric-blue text-white px-1.5 py-0.5 rounded-full">{{ $rc }}</span>@endif
            </button>
        </div>

        <div class="p-6">
            <div x-show="activeTab === 'description'" class="prose max-w-none text-gray-600 leading-relaxed">
                {!! nl2br(e($product->description)) !!}
            </div>

            @if($product->specifications)
            <div x-show="activeTab === 'specifications'">
                <table class="w-full text-sm">
                    <tbody>
                        @foreach($product->specifications as $key => $value)
                        <tr class="{{ $loop->even ? 'bg-gray-50' : '' }}">
                            <td class="py-3 px-4 font-semibold text-navy w-1/3">{{ $key }}</td>
                            <td class="py-3 px-4 text-gray-600">{{ $value }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            {{-- ── REVIEWS TAB ── --}}
            <div x-show="activeTab === 'reviews'">
                @php
                    $reviews = \Illuminate\Support\Facades\DB::table('product_reviews')
                        ->where('product_id', $product->id)
                        ->where('is_approved', 1)
                        ->orderByDesc('created_at')
                        ->get();
                    $avgRating = $reviews->avg('rating') ?? 0;
                    $reviewCount = $reviews->count();
                @endphp

                {{-- Success / Error flash --}}
                @if(session('review_success'))
                <div class="mb-5 bg-green-50 border border-green-200 text-green-800 rounded-xl px-4 py-3 text-sm flex items-center gap-2">
                    <i class="fas fa-check-circle text-green-500"></i> {{ session('review_success') }}
                </div>
                @endif
                @if(session('review_error'))
                <div class="mb-5 bg-red-50 border border-red-200 text-red-800 rounded-xl px-4 py-3 text-sm flex items-center gap-2">
                    <i class="fas fa-exclamation-circle text-red-500"></i> {{ session('review_error') }}
                </div>
                @endif

                {{-- Summary bar --}}
                @if($reviewCount > 0)
                <div class="flex items-center gap-6 mb-6 p-4 bg-gray-50 rounded-2xl">
                    <div class="text-center">
                        <div class="text-4xl font-black text-navy">{{ number_format($avgRating, 1) }}</div>
                        <div class="flex justify-center text-yellow-400 text-sm mt-1">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-{{ $i <= round($avgRating) ? 'star' : ($i - 0.5 <= $avgRating ? 'star-half-alt' : 'star text-gray-300') }}"></i>
                            @endfor
                        </div>
                        <div class="text-xs text-gray-500 mt-1">{{ $reviewCount }} {{ Str::plural('review', $reviewCount) }}</div>
                    </div>
                    <div class="flex-1 space-y-1">
                        @for($star = 5; $star >= 1; $star--)
                        @php $cnt = $reviews->where('rating', $star)->count(); $pct = $reviewCount ? round(($cnt/$reviewCount)*100) : 0; @endphp
                        <div class="flex items-center gap-2 text-xs">
                            <span class="w-3 text-gray-500">{{ $star }}</span>
                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                            <div class="flex-1 bg-gray-200 rounded-full h-1.5">
                                <div class="bg-yellow-400 h-1.5 rounded-full" style="width:{{ $pct }}%"></div>
                            </div>
                            <span class="w-6 text-gray-400">{{ $cnt }}</span>
                        </div>
                        @endfor
                    </div>
                </div>

                {{-- Review list --}}
                <div class="space-y-4 mb-8">
                    @foreach($reviews as $rev)
                    <div class="border border-gray-100 rounded-2xl p-5">
                        <div class="flex items-start justify-between mb-2">
                            <div>
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-full bg-electric-blue flex items-center justify-center text-white text-xs font-bold">
                                        {{ strtoupper(substr($rev->reviewer_name, 0, 1)) }}
                                    </div>
                                    <span class="font-semibold text-navy text-sm">{{ $rev->reviewer_name }}</span>
                                    <span class="text-xs text-gray-400">{{ \Carbon\Carbon::parse($rev->created_at)->diffForHumans() }}</span>
                                </div>
                                @if($rev->title)
                                <p class="font-semibold text-sm text-navy mt-1">{{ $rev->title }}</p>
                                @endif
                            </div>
                            <div class="flex text-yellow-400 text-xs shrink-0">
                                @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-{{ $i <= $rev->rating ? 'star' : 'star text-gray-200' }}"></i>
                                @endfor
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 leading-relaxed">{{ $rev->review }}</p>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-8 text-gray-400 mb-8">
                    <i class="fas fa-star text-4xl mb-3 text-gray-200"></i>
                    <p class="font-medium text-gray-500">No reviews yet — be the first!</p>
                </div>
                @endif

                {{-- Write a Review form --}}
                <div class="border-t border-gray-100 pt-6">
                    <h4 class="font-bold text-navy mb-4 text-base">Write a Review</h4>
                    <form action="{{ route('products.reviews.store', $product->slug) }}" method="POST" class="space-y-4">
                        @csrf
                        {{-- Star picker --}}
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Your Rating *</label>
                            <div class="flex gap-1" x-data="{ rating: 0, hover: 0 }">
                                @for($i = 1; $i <= 5; $i++)
                                <button type="button"
                                    @click="rating = {{ $i }}"
                                    @mouseenter="hover = {{ $i }}"
                                    @mouseleave="hover = 0"
                                    :class="(hover || rating) >= {{ $i }} ? 'text-yellow-400' : 'text-gray-300'"
                                    class="text-2xl transition-colors focus:outline-none">
                                    <i class="fas fa-star"></i>
                                </button>
                                @endfor
                                <input type="hidden" name="rating" :value="rating" required>
                            </div>
                        </div>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5">Your Name *</label>
                                <input type="text" name="reviewer_name" required placeholder="Jane Mwangi"
                                    value="{{ auth()->user()?->name ?? old('reviewer_name') }}"
                                    class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5">Email *</label>
                                <input type="email" name="reviewer_email" required placeholder="jane@example.com"
                                    value="{{ auth()->user()?->email ?? old('reviewer_email') }}"
                                    class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5">Review Title</label>
                            <input type="text" name="title" placeholder="e.g. Great quality cable!"
                                class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5">Your Review *</label>
                            <textarea name="review" rows="4" required placeholder="Share your experience with this product..."
                                class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors resize-none"></textarea>
                        </div>
                        <button type="submit" class="bg-electric-blue text-white px-6 py-2.5 rounded-xl text-sm font-semibold hover:bg-blue-dark transition-colors">
                            Submit Review
                        </button>
                        <p class="text-xs text-gray-400">Reviews are moderated and appear after approval.</p>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($relatedProducts->count())
    <div class="mb-8">
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-xl font-bold text-navy">You May Also Like</h2>
            @if($product->category)
            <a href="{{ route('products.category', $product->category->slug) }}"
               class="text-sm text-electric-blue font-semibold hover:underline flex items-center gap-1">
               View all {{ $product->category->name }} <i class="fas fa-chevron-right text-xs"></i>
            </a>
            @endif
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach($relatedProducts as $relatedProduct)
                @include('components.product-card', ['product' => $relatedProduct])
            @endforeach
        </div>
    </div>
    @endif

</div>
@endsection

@push('scripts')
<script>
    if (window.history.replaceState) {
        window.history.replaceState(null, null, window.location.href);
    }
</script>
@endpush