@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Reviews and Testimonials | Kevron Suites and Apartments, Ikeja')
@section('meta_description', $seo ? $seo->meta_description : 'Read guest reviews and testimonials for Kevron Suites and Apartments, Adeniyi Jones, Ikeja. See feedback on cleanliness, comfort, location, security, service and value, or leave a review after checkout.')

@push('scripts')
@if($schema)
<script type="application/ld+json">
{!! json_encode($schema->schema_json, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@else
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "WebPage",
  "name": "Reviews and Testimonials | Kevron Suites and Apartments, Ikeja",
  "description": "Guest reviews, scores, and testimonials for Kevron Suites and Apartments in Adeniyi Jones, Ikeja, Lagos.",
  "url": "{{ url()->current() }}"
}
</script>
@endif
@endpush

@section('content')
<style>
    /* Strict Brand Typography Rules */
    @import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@300;400;500;600;700&display=swap');

    .rev-h1 {
        font-family: 'Marcellus', serif !important;
        font-size: clamp(1.4rem, 4vw, 1.80rem) !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
    }
    .rev-h2 {
        font-family: 'Marcellus', serif !important;
        font-size: clamp(1.2rem, 3.5vw, 1.50rem) !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }
    .rev-h3 {
        font-family: 'Marcellus', serif !important;
        font-size: clamp(1.05rem, 3vw, 1.35rem) !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
    }
    .rev-body, .rev-body *, p, span, a, input, select, textarea, button, label {
        font-family: 'Inter', sans-serif !important;
        font-size: clamp(0.75rem, 2.5vw, 0.875rem) !important;
    }
    .text-caps {
        font-size: 0.70rem !important;
        letter-spacing: 0.15em !important;
    }

    /* Buttons: border-radius: 50px */
    .btn-lux {
        border-radius: 50px !important;
        min-height: 44px !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    .btn-lux:hover {
        transform: scale(1.03) translateY(-1px) !important;
    }

    /* Cards: border-radius: 0.1rem, subtle border shadow */
    .card-lux {
        border-radius: 0.1rem !important;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
        transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
    }
    .card-lux:hover {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
    }

    /* Scrollbar Theme Adaptation */
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #F4F8FF;
    }
    .dark ::-webkit-scrollbar-track {
        background: #080D2B;
    }
    ::-webkit-scrollbar-thumb {
        background: #2B3192;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #1FADEA;
    }

    /* Interactive Stars Form Control */
    .star-rating-control input[type="radio"] {
        display: none;
    }
    .star-rating-control label {
        color: #D1D5DB;
        cursor: pointer;
        transition: color 0.2s ease;
    }
    .star-rating-control input[type="radio"]:checked ~ label,
    .star-rating-control label:hover,
    .star-rating-control label:hover ~ label {
        color: #F59E0B;
    }
</style>

<div class="rev-body bg-white dark:bg-slate-950 text-slate-800 dark:text-slate-200 transition-colors duration-300">

    <!-- 1. Hero Section -->
    <section class="relative bg-slate-50 dark:bg-slate-900/50 py-16 border-b border-slate-100 dark:border-slate-800">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
                <!-- Text Area -->
                <div class="lg:col-span-7 space-y-6">
                    <!-- Trust Chips -->
                    <div class="flex flex-wrap gap-2">
                        <span class="text-caps font-bold px-3 py-1 bg-blue-50 dark:bg-blue-950/40 text-[#2B3192] dark:text-[#1FADEA] uppercase tracking-wider rounded">Guest Feedback</span>
                        <span class="text-caps font-bold px-3 py-1 bg-amber-50 dark:bg-amber-950/40 text-amber-600 uppercase tracking-wider rounded">Category Ratings</span>
                        <span class="text-caps font-bold px-3 py-1 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 uppercase tracking-wider rounded">100% Moderated</span>
                        @if(count($googleReviews) > 0)
                        <span class="text-caps font-bold px-3 py-1 bg-sky-50 dark:bg-sky-950/40 text-[#1FADEA] uppercase tracking-wider rounded">Google Connected</span>
                        @endif
                    </div>

                    <h1 class="rev-h1 font-normal text-[#080D2B] dark:text-white leading-tight">
                        Reviews and Testimonials from Kevron Suites and Apartments Guests
                    </h1>

                    <p class="text-slate-600 dark:text-slate-400 font-medium leading-relaxed max-w-xl">
                        Read guest feedback about Kevron Suites and Apartments, Adeniyi Jones, Ikeja, including ratings for cleanliness, comfort, location, security, service and value. Share your own checked-out experience below.
                    </p>

                    <!-- CTAs -->
                    <div class="flex flex-wrap gap-4 pt-2">
                        <a href="#reviews-grid" class="btn-lux px-6 py-3 bg-[#2B3192] hover:bg-blue-800 text-white font-semibold text-center">
                            Read Guest Reviews
                        </a>
                        <a href="#submit-hub" class="btn-lux px-6 py-3 bg-[#D6A84F] hover:bg-amber-600 text-white font-semibold text-center">
                            Leave a Review
                        </a>
                        <a href="{{ route('booking.index') }}" class="btn-lux px-6 py-3 border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-800 dark:text-white font-semibold text-center">
                            Book Your Stay
                        </a>
                    </div>
                </div>

                <!-- Media Visual (Pictures folder) -->
                <div class="lg:col-span-5 relative">
                    <div class="card-lux p-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 relative">
                        <img src="{{ asset('pictures/master-bedroom.jpg') }}" alt="Luxury Guest Suite Bedroom at Kevron Apartments" class="w-full h-64 object-cover lazy-loading" style="border-radius: 0.05rem;">
                        <div class="absolute bottom-6 right-6 bg-slate-900/80 text-white text-xs px-3 py-1.5 backdrop-blur-sm" style="border-radius: 0.1rem;">
                            1 Bedroom Master Suite
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 2. Reviews Summary & Stats Section -->
    <section class="py-12 bg-white dark:bg-slate-950">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                
                <!-- Overall stats -->
                <div class="lg:col-span-4 card-lux p-6 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-center space-y-4">
                    <h3 class="rev-h3 font-semibold text-[#080D2B] dark:text-white">Overall Average Score</h3>
                    
                    @if($totalReviewsCount > 0)
                        <div class="flex items-baseline justify-center space-x-2">
                            <span class="text-4xl font-light text-[#2B3192] dark:text-[#1FADEA]">{{ $overallAverageRating }}</span>
                            <span class="text-slate-400">/</span>
                            <span class="text-slate-500 font-bold">5.0</span>
                        </div>
                        <div class="flex items-center justify-center space-x-1 text-amber-500">
                            @for($i = 1; $i <= 5; $i++)
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 {{ $i <= round($overallAverageRating) ? 'text-amber-500' : 'text-slate-300 dark:text-slate-700' }}">
                                    <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.6 3.102-1.196 4.68c-.209.818.685 1.467 1.39 1.002l4.197-2.735 4.197 2.735c.706.465 1.599-.184 1.39-1.003l-1.197-4.679 3.6-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
                                </svg>
                            @endfor
                        </div>
                        <span class="text-xs text-slate-500 dark:text-slate-400 font-semibold block">Based on {{ $totalReviewsCount }} approved guest reviews</span>
                    @else
                        <div class="py-4">
                            <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Guest reviews are coming soon. Checked-out guests can submit feedback after their stay.</p>
                        </div>
                    @endif

                    <div class="pt-4 border-t border-slate-200 dark:border-slate-800 flex justify-center space-x-2">
                        <a href="#submit-hub" class="btn-lux px-4 py-2 bg-[#2B3192] text-white text-xs font-semibold">Leave Review</a>
                        <a href="{{ route('booking.index') }}" class="btn-lux px-4 py-2 border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-800 dark:text-white text-xs font-semibold">Book Now</a>
                    </div>
                </div>

                <!-- Rating Distribution -->
                <div class="lg:col-span-8 space-y-4">
                    <h3 class="rev-h3 font-semibold text-[#080D2B] dark:text-white">Review Distribution</h3>
                    <div class="space-y-3">
                        @foreach($ratingDistribution as $star => $data)
                            <div class="flex items-center space-x-4">
                                <span class="w-12 text-xs font-bold text-slate-600 dark:text-slate-400">{{ $star }} Star</span>
                                <div class="flex-1 h-3 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-amber-500 rounded-full" style="width: {{ $data['percentage'] }}%"></div>
                                </div>
                                <span class="w-16 text-xs text-right font-medium text-slate-500 dark:text-slate-400">{{ $data['count'] }} ({{ $data['percentage'] }}%)</span>
                            </div>
                        @endforeach
                    </div>
                </div>

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

    <!-- 3. Review Category Ratings Section -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/30 border-y border-slate-100 dark:border-slate-900">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Stay Experience Categories</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Ratings breakdown across our essential service indices as evaluated by verified checked-out guests.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($categoryAverages as $slug => $catData)
                    <div class="card-lux p-5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3 text-[#2B3192] dark:text-[#1FADEA]">
                                <!-- Dynamic Icon Assignment based on Category -->
                                @if($slug === 'cleanliness')
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                                @elseif($slug === 'comfort')
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                                @elseif($slug === 'location')
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                @elseif($slug === 'security')
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                @elseif($slug === 'service')
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                @else
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                @endif
                                <span class="font-semibold">{{ $catData['name'] }}</span>
                            </div>
                            <span class="text-xs font-bold text-slate-500">{{ $catData['average'] }} / 5.0</span>
                        </div>

                        <!-- Progress indicator -->
                        <div class="space-y-1">
                            <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 overflow-hidden" style="border-radius: 0.1rem;">
                                <div class="h-full bg-[#2B3192] dark:bg-[#1FADEA]" style="width: {{ $catData['percentage'] }}%;"></div>
                            </div>
                            <div class="flex justify-between items-center text-[10px] text-slate-400 font-semibold">
                                <span>Based on {{ $catData['count'] }} evaluations</span>
                                <span>{{ $catData['percentage'] }}%</span>
                            </div>
                        </div>

                        <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed italic">
                            @if($slug === 'cleanliness')
                                Focuses on en-suite hygiene, bed linens, kitchen sanitization, and dustless living areas.
                            @elseif($slug === 'comfort')
                                Ratings for plush lounges, split unit AC climate, bedding softness, and keyless entry convenience.
                            @elseif($slug === 'location')
                                Accessibility to international/domestic airports, Regina Coker road serenity, and Ikeja landmarks.
                            @elseif($slug === 'security')
                                Safety scores for armed guard protection, access control perimeters, and video intercom intercoms.
                            @elseif($slug === 'service')
                                Concierge attentiveness, laundry convenience support, and professional housekeeping performance.
                            @else
                                Price to value metrics, PS5 gaming, private slate-bed snookers, and luxury power network backup.
                            @endif
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 4. Featured Testimonials Section -->
    @php
        $featuredReviews = $reviews->filter(function($r) { return $r->is_featured; });
        if($featuredReviews->isEmpty()) {
            $featuredReviews = $reviews->take(3);
        }
    @endphp
    @if(count($featuredReviews) > 0)
    <section class="py-12 bg-white dark:bg-slate-950">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Featured Guest Testimonials</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Stories of memorable stays shared by our prestigious corporate guests and families.</p>
            </div>

            <!-- Grid or horizontal slider layout -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($featuredReviews as $featReview)
                    <div class="card-lux p-6 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4 flex flex-col justify-between hover:bg-slate-100/50 dark:hover:bg-slate-900/80">
                        <div class="space-y-3">
                            <div class="flex justify-between items-start">
                                <div class="flex items-center space-x-1 text-amber-500">
                                    @for($i = 1; $i <= 5; $i++)
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 {{ $i <= $featReview->overall_rating ? 'text-amber-500' : 'text-slate-300 dark:text-slate-700' }}">
                                            <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.6 3.102-1.196 4.68c-.209.818.685 1.467 1.39 1.002l4.197-2.735 4.197 2.735c.706.465 1.599-.184 1.39-1.003l-1.197-4.679 3.6-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
                                        </svg>
                                    @endfor
                                </div>
                                <div class="flex flex-col items-end space-y-1">
                                    @if($featReview->is_verified_stay)
                                        <span class="text-[9px] font-bold text-emerald-600 bg-emerald-50 dark:bg-emerald-950/40 px-2 py-0.5 uppercase tracking-wide" style="border-radius: 0.1rem;">Verified Stay</span>
                                    @endif
                                    <span class="text-[9px] font-bold text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 uppercase tracking-wide" style="border-radius: 0.1rem;">{{ $featReview->source ? $featReview->source->name : 'Website' }}</span>
                                </div>
                            </div>

                            @if($featReview->review_title)
                                <h4 class="text-xs font-bold text-[#080D2B] dark:text-white uppercase tracking-wider">"{{ $featReview->review_title }}"</h4>
                            @endif

                            <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
                                {{ Str::limit($featReview->review_comment, 240) }}
                            </p>
                        </div>

                        <!-- User footer info -->
                        <div class="pt-4 border-t border-slate-200 dark:border-slate-800 space-y-3">
                            <div class="flex justify-between items-center text-[10px] text-slate-500 dark:text-slate-400 font-semibold">
                                <div class="flex flex-col">
                                    <span class="text-slate-900 dark:text-white font-bold">{{ $featReview->display_name ?? 'Verified Guest' }}</span>
                                    <span class="text-[9px] font-normal uppercase tracking-wider text-[#1FADEA]">{{ ucfirst($featReview->stay_type) }} stay</span>
                                </div>
                                <div class="flex flex-col items-end">
                                    <span>{{ $featReview->apartmentType ? $featReview->apartmentType->name : 'Apartment Suite' }}</span>
                                    <span class="text-[9px] font-normal text-slate-400">{{ $featReview->created_at->format('M Y') }}</span>
                                </div>
                            </div>

                            <!-- Reply from management block (inline response) -->
                            @if($featReview->response)
                                <div class="p-3 bg-blue-50/50 dark:bg-slate-900 border-l-2 border-[#2B3192] dark:border-[#1FADEA] space-y-1" style="border-radius: 0.1rem;">
                                    <span class="text-[9px] font-bold text-[#2B3192] dark:text-[#1FADEA] uppercase tracking-widest block">Response from {{ $featReview->response->responder_name }}:</span>
                                    <p class="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed italic">
                                        "{{ $featReview->response->response_text }}"
                                    </p>
                                </div>
                            @endif

                            <div class="flex items-center space-x-2 pt-1">
                                <a href="{{ route('apartments.show', ['slug' => $featReview->apartmentType->slug ?? '']) }}" class="btn-lux px-3 py-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 text-[10px] font-bold">View Suite</a>
                                <a href="{{ route('booking.index') }}" class="btn-lux px-3 py-1 bg-[#2B3192] text-white text-[10px] font-bold">Book Suite</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- 5. Guest Reviews Grid (Filterable and Sortable) -->
    <section id="reviews-grid" class="py-12 bg-slate-50 dark:bg-slate-900/20 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
                <div>
                    <h2 class="rev-h2 text-[#080D2B] dark:text-white">Guest Reviews Feed</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 font-medium">Browse verified stay stories. Use the filters below to focus on specific ratings or stay profiles.</p>
                </div>

                <!-- Sorting Controls -->
                <form action="{{ route('reviews.index') }}#reviews-grid" method="GET" class="flex flex-wrap items-center gap-3">
                    <!-- Preserve existing filters -->
                    @if(request('rating')) <input type="hidden" name="rating" value="{{ request('rating') }}"> @endif
                    @if(request('stay_type')) <input type="hidden" name="stay_type" value="{{ request('stay_type') }}"> @endif
                    @if(request('apartment_type_id')) <input type="hidden" name="apartment_type_id" value="{{ request('apartment_type_id') }}"> @endif
                    @if(request('source')) <input type="hidden" name="source" value="{{ request('source') }}"> @endif

                    <label for="sort_by" class="text-xs font-semibold text-slate-500 dark:text-slate-400">Sort by:</label>
                    <select id="sort_by" name="sort_by" onchange="this.form.submit()" class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-xs px-3 py-1.5 focus:outline-none" style="border-radius: 0.1rem;">
                        <option value="newest" {{ request('sort_by') == 'newest' ? 'selected' : '' }}>Newest Submitted</option>
                        <option value="highest_rated" {{ request('sort_by') == 'highest_rated' ? 'selected' : '' }}>Highest Rated</option>
                        <option value="helpful" {{ request('sort_by') == 'helpful' ? 'selected' : '' }}>Most Helpful</option>
                    </select>
                </form>
            </div>

            <!-- Filters Grid -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-4 mb-8 grid grid-cols-2 md:grid-cols-4 gap-4" style="border-radius: 0.1rem;">
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Rating</label>
                    <a href="{{ route('reviews.index', array_merge(request()->except(['page', 'rating']), request('rating') ? [] : [])) }}#reviews-grid" class="block text-xs font-semibold {{ !request('rating') ? 'text-[#2B3192] dark:text-[#1FADEA]' : 'text-slate-500' }}">All Ratings</a>
                    @for($i = 5; $i >= 1; $i--)
                        <a href="{{ route('reviews.index', array_merge(request()->all(), ['rating' => $i, 'page' => 1])) }}#reviews-grid" class="block text-xs mt-1 {{ request('rating') == $i ? 'text-amber-500 font-bold' : 'text-slate-500 hover:text-amber-400' }}">
                            {{ $i }} Stars
                        </a>
                    @endfor
                </div>

                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Stay Type</label>
                    <a href="{{ route('reviews.index', request()->except(['page', 'stay_type'])) }}#reviews-grid" class="block text-xs font-semibold {{ !request('stay_type') ? 'text-[#2B3192] dark:text-[#1FADEA]' : 'text-slate-500' }}">All Stay Types</a>
                    @foreach(['family' => 'Family', 'business' => 'Business', 'corporate' => 'Corporate Stays', 'long stay' => 'Long Stays', 'weekend' => 'Weekend Stays'] as $val => $lbl)
                        <a href="{{ route('reviews.index', array_merge(request()->all(), ['stay_type' => $val, 'page' => 1])) }}#reviews-grid" class="block text-xs mt-1 {{ request('stay_type') == $val ? 'text-[#2B3192] dark:text-[#1FADEA] font-bold' : 'text-slate-500' }}">{{ $lbl }}</a>
                    @endforeach
                </div>

                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Apartment Options</label>
                    <a href="{{ route('reviews.index', request()->except(['page', 'apartment_type_id'])) }}#reviews-grid" class="block text-xs font-semibold {{ !request('apartment_type_id') ? 'text-[#2B3192] dark:text-[#1FADEA]' : 'text-slate-500' }}">All Suites</a>
                    @foreach($apartmentTypes as $apt)
                        <a href="{{ route('reviews.index', array_merge(request()->all(), ['apartment_type_id' => $apt->id, 'page' => 1])) }}#reviews-grid" class="block text-xs mt-1 {{ request('apartment_type_id') == $apt->id ? 'text-[#2B3192] dark:text-[#1FADEA] font-bold' : 'text-slate-500' }}">{{ $apt->name }}</a>
                    @endforeach
                </div>

                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1">Source Channels</label>
                    <a href="{{ route('reviews.index', request()->except(['page', 'source'])) }}#reviews-grid" class="block text-xs font-semibold {{ !request('source') ? 'text-[#2B3192] dark:text-[#1FADEA]' : 'text-slate-500' }}">All Sources</a>
                    <a href="{{ route('reviews.index', array_merge(request()->all(), ['source' => 'website', 'page' => 1])) }}#reviews-grid" class="block text-xs mt-1 {{ request('source') == 'website' ? 'text-[#2B3192] dark:text-[#1FADEA] font-bold' : 'text-slate-500' }}">Website reviews</a>
                    <a href="{{ route('reviews.index', array_merge(request()->all(), ['source' => 'google', 'page' => 1])) }}#reviews-grid" class="block text-xs mt-1 {{ request('source') == 'google' ? 'text-[#2B3192] dark:text-[#1FADEA] font-bold' : 'text-slate-500' }}">Google reviews</a>
                </div>
            </div>

            <!-- Clear Active Filters indicator -->
            @if(request('rating') || request('stay_type') || request('apartment_type_id') || request('source'))
                <div class="mb-4 flex items-center justify-between bg-blue-50 dark:bg-slate-900 p-3" style="border-radius: 0.1rem;">
                    <span class="text-xs font-medium text-slate-600 dark:text-slate-400">Active filter results showing</span>
                    <a href="{{ route('reviews.index') }}#reviews-grid" class="text-xs font-bold text-red-600 hover:underline">Clear all filters</a>
                </div>
            @endif

            <!-- Review Cards Grid -->
            @if(count($reviews) > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                    @foreach($reviews as $item)
                        <div class="card-lux p-5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4 hover:border-[#2B3192]/30 transition-all flex flex-col justify-between">
                            <div class="space-y-3">
                                <div class="flex justify-between items-start">
                                    <div class="flex items-center space-x-1 text-amber-500">
                                        @for($i = 1; $i <= 5; $i++)
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 {{ $i <= $item->overall_rating ? 'text-amber-500' : 'text-slate-200 dark:text-slate-850' }}">
                                                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.6 3.102-1.196 4.68c-.209.818.685 1.467 1.39 1.002l4.197-2.735 4.197 2.735c.706.465 1.599-.184 1.39-1.003l-1.197-4.679 3.6-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
                                            </svg>
                                        @endfor
                                    </div>
                                    <div class="flex flex-col items-end space-y-1">
                                        @if($item->is_verified_stay)
                                            <span class="text-[9px] font-bold text-emerald-600 bg-emerald-50 dark:bg-emerald-950/40 px-2 py-0.5 uppercase tracking-wide rounded">Verified Stay</span>
                                        @endif
                                        <span class="text-[9px] font-bold text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 uppercase tracking-wide rounded">{{ $item->source ? $item->source->name : 'Website' }}</span>
                                    </div>
                                </div>

                                @if($item->review_title)
                                    <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">"{{ $item->review_title }}"</h4>
                                @endif

                                <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold">
                                    {{ $item->review_comment }}
                                </p>

                                <!-- Optional Uploaded Media -->
                                @if(count($item->media) > 0)
                                    <div class="grid grid-cols-2 gap-2 pt-2">
                                        @foreach($item->media as $revMedia)
                                            @if($revMedia->is_approved && $revMedia->mediaAsset)
                                                @if($revMedia->mediaAsset->file_type === 'video')
                                                    <video src="{{ asset($revMedia->mediaAsset->file_path) }}" controls class="w-full h-24 object-cover" style="border-radius: 0.1rem;"></video>
                                                @else
                                                    <a href="{{ asset($revMedia->mediaAsset->file_path) }}" target="_blank">
                                                        <img src="{{ asset($revMedia->mediaAsset->file_path) }}" alt="Guest Review Media Asset" class="w-full h-24 object-cover lazy-loading" style="border-radius: 0.1rem;">
                                                    </a>
                                                @endif
                                            @endif
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <!-- Footer info & Telemetry buttons -->
                            <div class="pt-4 border-t border-slate-100 dark:border-slate-850 space-y-3 mt-4">
                                <div class="flex justify-between items-center text-[10px] text-slate-500 dark:text-slate-400 font-semibold">
                                    <div class="flex flex-col">
                                        <span class="text-slate-800 dark:text-white font-bold">{{ $item->display_name ?? 'Verified Guest' }}</span>
                                        <span class="text-[9px] font-normal uppercase tracking-wider text-[#1FADEA]">{{ ucfirst($item->stay_type) }} stay</span>
                                    </div>
                                    <div class="flex flex-col items-end">
                                        <span>{{ $item->apartmentType ? $item->apartmentType->name : 'Apartment Suite' }}</span>
                                        <span class="text-[9px] font-normal text-slate-400">{{ $item->created_at->format('M Y') }}</span>
                                    </div>
                                </div>

                                <!-- Response from management block -->
                                @if($item->response)
                                    <div class="p-3 bg-blue-50/50 dark:bg-slate-900 border-l-2 border-[#2B3192] dark:border-[#1FADEA] space-y-1" style="border-radius: 0.1rem;">
                                        <span class="text-[9px] font-bold text-[#2B3192] dark:text-[#1FADEA] uppercase tracking-widest block">Response from {{ $item->response->responder_name }}:</span>
                                        <p class="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed italic">
                                            "{{ $item->response->response_text }}"
                                        </p>
                                    </div>
                                @endif

                                <div class="flex justify-between items-center pt-2">
                                    <!-- Telemetry Upvotes -->
                                    <button onclick="voteHelpful({{ $item->id }}, this)" class="inline-flex items-center space-x-1.5 text-[10px] text-slate-500 hover:text-[#2B3192] dark:hover:text-[#1FADEA] transition-colors focus:outline-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.896 0 1.7-.393 2.285-1.024v3.492c0 .506.2.975.568 1.342l1.624 1.624a.82.82 0 0 0 1.16 0l.132-.132a1.14 1.14 0 0 0 .285-.807l-.132-1.956c-.035-.506.316-.957.822-.992a1.01 1.01 0 0 1 1.118.992v.308c0 .5.4.9.9.9h.13c.477 0 .866-.37.9-.844l.322-4.992a1.05 1.05 0 0 0-.256-.757 1.07 1.07 0 0 0-.74-.356H16.03c-.569 0-1.07-.374-1.222-.92l-.556-1.97A2.08 2.08 0 0 0 12.247 2.5H12a2 2 0 0 0-2 2v2.25c0 .33-.27.6-.6.6h-.74a1 1 0 0 0-1 1v2.9c0 .55.45 1 1 1h.973Z" />
                                        </svg>
                                        <span>Helpful (<span class="helpful-count">{{ $item->helpfulVotes()->count() }}</span>)</span>
                                    </button>

                                    <!-- Telemetry Reports -->
                                    <button onclick="reportReview({{ $item->id }})" class="inline-flex items-center space-x-1 text-[10px] text-red-500/70 hover:text-red-600 transition-colors focus:outline-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-5.705-11.34a9 9 0 0 0-5.836-5.836L3 15Z" />
                                        </svg>
                                        <span>Report</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Laravel Pagination links -->
                <div class="mt-8 flex justify-center">
                    {{ $reviews->fragment('reviews-grid')->links() }}
                </div>
            @else
                <div class="card-lux p-12 text-center bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                    <span class="text-3xl text-slate-300 dark:text-slate-700 block mb-3">★</span>
                    <h4 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">No reviews match your filter selection.</h4>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-2">Adjust your category options or clear filters to view approved stay stories.</p>
                </div>
            @endif

        </div>
    </section>

    <!-- 6. Video Testimonials Section -->
    <section class="py-12 bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Guest Experience Reels</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Watch en-suite walkthrough videos, snooker challenges, and premium services shared by our guests.</p>
            </div>

            @if(count($videoTestimonials) > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($videoTestimonials as $vid)
                        <div class="card-lux p-4 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4">
                            <div class="relative">
                                @if($vid->poster_path)
                                    <img src="{{ asset($vid->poster_path) }}" alt="Thumbnail for video testimonial by {{ $vid->guest_name }}" class="w-full h-48 object-cover lazy-loading" style="border-radius: 0.1rem;">
                                @else
                                    <div class="w-full h-48 bg-slate-200 dark:bg-slate-800 flex items-center justify-center" style="border-radius: 0.1rem;">
                                        <span class="text-xs font-semibold text-slate-400">Video Player</span>
                                    </div>
                                @endif
                                <div class="absolute inset-0 bg-slate-900/40 flex items-center justify-center">
                                    <a href="{{ $vid->video_url }}" target="_blank" class="w-12 h-12 bg-white/90 text-[#2B3192] hover:bg-[#2B3192] hover:text-white rounded-full flex items-center justify-center shadow-lg transition-all" aria-label="Play video testimonial">
                                        <svg class="w-6 h-6 fill-current" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.324-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/></svg>
                                    </a>
                                </div>
                            </div>
                            <div class="space-y-1">
                                <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block">{{ $vid->stay_type }} Stay</span>
                                <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">{{ $vid->guest_name }}</h4>
                                <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
                                    {{ $vid->apartmentType ? $vid->apartmentType->name : 'Apartment Suite' }}
                                </p>
                                @if($vid->transcript)
                                    <details class="text-[10px] text-slate-400 bg-white dark:bg-slate-950 p-2 cursor-pointer mt-2" style="border-radius: 0.1rem;">
                                        <summary class="font-bold uppercase tracking-wider">View Caption Transcript</summary>
                                        <p class="mt-1 leading-relaxed">{{ $vid->transcript }}</p>
                                    </details>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="card-lux p-12 text-center bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 mx-auto text-slate-400 mb-3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
                    </svg>
                    <h4 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Video Testimonials Coming Soon</h4>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 max-w-sm mx-auto">We are recording and editing real customer stay testimonials. Checked-out guests who want to submit video reviews are welcome to contact us.</p>
                </div>
            @endif
        </div>
    </section>

    <!-- 7. Google Reviews Integration Section -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/10 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Google Business Profile Reviews</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Read certified ratings from our official Google Local page directory.</p>
            </div>

            @if(count($googleReviews) > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($googleReviews as $g)
                        <div class="card-lux p-5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-4 hover:border-sky-400/30 transition-all">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    @if($g->reviewer_photo_url)
                                        <img src="{{ $g->reviewer_photo_url }}" alt="{{ $g->reviewer_name }} Google Profile" class="w-8 h-8 rounded-full object-cover">
                                    @else
                                        <div class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
                                            <span class="text-xs font-bold text-slate-400">{{ substr($g->reviewer_name, 0, 1) }}</span>
                                        </div>
                                    @endif
                                    <div class="flex flex-col">
                                        <span class="text-xs font-bold text-slate-900 dark:text-white">{{ $g->reviewer_name }}</span>
                                        <span class="text-[9px] text-slate-400">{{ $g->review_date->format('M d, Y') }}</span>
                                    </div>
                                </div>
                                <span class="text-[9px] font-bold text-sky-600 bg-sky-50 dark:bg-sky-950/40 px-2 py-0.5 uppercase tracking-wide rounded">Google</span>
                            </div>

                            <div class="flex items-center space-x-1 text-amber-500">
                                @for($i = 1; $i <= 5; $i++)
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 {{ $i <= $g->rating ? 'text-amber-500' : 'text-slate-200 dark:text-slate-805' }}">
                                        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.6 3.102-1.196 4.68c-.209.818.685 1.467 1.39 1.002l4.197-2.735 4.197 2.735c.706.465 1.599-.184 1.39-1.003l-1.197-4.679 3.6-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
                                    </svg>
                                @endfor
                            </div>

                            <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold">
                                {{ $g->comment }}
                            </p>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="card-lux p-8 text-center bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 max-w-2xl mx-auto">
                    <svg class="w-8 h-8 text-[#1FADEA] mx-auto mb-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12.24 10.285V13.4h6.887c-.275 1.565-1.88 4.604-6.887 4.604-4.33 0-7.859-3.578-7.859-8s3.53-8 7.859-8c2.46 0 4.105 1.025 5.047 1.926l2.427-2.334C17.955 2.192 15.34 1 12.24 1 5.92 1 1 5.92 1 12.24s4.92 11.24 11.24 11.24c6.6 0 11-4.64 11-11.24 0-.76-.08-1.34-.18-1.956H12.24z"/></svg>
                    <h4 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Google Review Integration Settings</h4>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 leading-relaxed">
                        Google review integration can be enabled once the official business profile and approved integration are configured by our administration. Verified direct stay feedback remains our highest focus channel.
                    </p>
                </div>
            @endif
        </div>
    </section>

    <!-- 8. Central Review Submission Hub -->
    <section id="submit-hub" class="py-16 bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-850">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Leave Guest Stay Feedback</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Checked-out guests can share their experiences. Enter your booking reference for an automatic stayed verification badge.</p>
            </div>

            <!-- Session Toast Success alerts -->
            @if(session('success'))
                <div class="mb-6 p-4 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-300 border-l-4 border-emerald-500 text-xs font-semibold" style="border-radius: 0.1rem;">
                    {{ session('success') }}
                </div>
            @endif

            @if($errors->any())
                <div class="mb-6 p-4 bg-red-50 dark:bg-red-950/40 text-red-800 dark:text-red-300 border-l-4 border-red-500 text-xs font-semibold" style="border-radius: 0.1rem;">
                    <ul class="list-disc pl-5 space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Form submission card -->
            <div class="card-lux p-8 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                <form action="{{ route('reviews.submit') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Booking reference -->
                        <div>
                            <label for="booking_reference" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Booking Reference (Optional)</label>
                            <input type="text" id="booking_reference" name="booking_reference" value="{{ old('booking_reference') }}" placeholder="e.g. KEV-2026-987A" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                            <span class="text-[10px] text-slate-400 mt-1 block">Checked-out bookings will receive an active verified stay tag.</span>
                        </div>

                        <!-- Stay Type -->
                        <div>
                            <label for="stay_type" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Stay Profile Type *</label>
                            <select id="stay_type" name="stay_type" required class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                                <option value="family" {{ old('stay_type') == 'family' ? 'selected' : '' }}>Family Holiday</option>
                                <option value="business" {{ old('stay_type') == 'business' ? 'selected' : '' }}>Business Travel</option>
                                <option value="corporate" {{ old('stay_type') == 'corporate' ? 'selected' : '' }}>Corporate Extended Stay</option>
                                <option value="long stay" {{ old('stay_type') == 'long stay' ? 'selected' : '' }}>Long Stay Accommodation</option>
                                <option value="weekend" {{ old('stay_type') == 'weekend' ? 'selected' : '' }}>Weekend Getaway</option>
                                <option value="group" {{ old('stay_type') == 'group' ? 'selected' : '' }}>Group Booking</option>
                                <option value="other" {{ old('stay_type') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Guest name -->
                        <div>
                            <label for="guest_name" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Guest Full Name *</label>
                            <input type="text" id="guest_name" name="guest_name" value="{{ old('guest_name') }}" required placeholder="e.g. Kehinde Kevron" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        </div>

                        <!-- Display initials/format -->
                        <div>
                            <label for="display_name" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Public Display Initials/Name (Privacy Guard)</label>
                            <input type="text" id="display_name" name="display_name" value="{{ old('display_name') }}" placeholder="e.g. K. K. or Kehinde K. (defaults to full name if empty)" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Email -->
                        <div>
                            <label for="email" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Registered Contact Email *</label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" required placeholder="e.g. client@kevronapartments.com" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                            <span class="text-[10px] text-slate-400 mt-1 block">Your email will never be published or shared publicly.</span>
                        </div>

                        <!-- Phone -->
                        <div>
                            <label for="phone" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Contact Phone (Optional)</label>
                            <input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="e.g. +234 800 000 0000" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Suite type -->
                        <div>
                            <label for="apartment_type_id" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Booked Luxury Suite *</label>
                            <select id="apartment_type_id" name="apartment_type_id" required class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                                @foreach($apartmentTypes as $apt)
                                    <option value="{{ $apt->id }}" {{ old('apartment_type_id') == $apt->id ? 'selected' : '' }}>{{ $apt->name }} (₦{{ number_format($apt->base_price_nightly) }}/night)</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Overall rating (interactive star selectors) -->
                        <div>
                            <span class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-2">Overall Stay Rating *</span>
                            <div class="flex items-center space-x-2 star-rating-control flex-row-reverse justify-end">
                                <input type="radio" id="star-5" name="overall_rating" value="5" {{ old('overall_rating') == 5 ? 'checked' : '' }} required class="hidden">
                                <label for="star-5" class="cursor-pointer text-xl" aria-label="5 stars">★</label>
                                <input type="radio" id="star-4" name="overall_rating" value="4" {{ old('overall_rating') == 4 ? 'checked' : '' }} class="hidden">
                                <label for="star-4" class="cursor-pointer text-xl" aria-label="4 stars">★</label>
                                <input type="radio" id="star-3" name="overall_rating" value="3" {{ old('overall_rating') == 3 ? 'checked' : '' }} class="hidden">
                                <label for="star-3" class="cursor-pointer text-xl" aria-label="3 stars">★</label>
                                <input type="radio" id="star-2" name="overall_rating" value="2" {{ old('overall_rating') == 2 ? 'checked' : '' }} class="hidden">
                                <label for="star-2" class="cursor-pointer text-xl" aria-label="2 stars">★</label>
                                <input type="radio" id="star-1" name="overall_rating" value="1" {{ old('overall_rating') == 1 ? 'checked' : '' }} class="hidden">
                                <label for="star-1" class="cursor-pointer text-xl" aria-label="1 star">★</label>
                            </div>
                        </div>
                    </div>

                    <!-- Category Ratings -->
                    <div class="p-4 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800" style="border-radius: 0.1rem;">
                        <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider mb-4">Stay Category Star Ratings</h4>
                        
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
                            @foreach(['cleanliness' => 'Cleanliness', 'comfort' => 'Comfort', 'location' => 'Location', 'security' => 'Security', 'service' => 'Service', 'value' => 'Value'] as $fieldKey => $fieldName)
                                <div>
                                    <label class="text-[10px] font-bold text-slate-500 dark:text-slate-400 block mb-1">{{ $fieldName }} *</label>
                                    <div class="flex items-center space-x-1 star-rating-control flex-row-reverse justify-end">
                                        <input type="radio" id="{{ $fieldKey }}-5" name="{{ $fieldKey }}_rating" value="5" {{ old($fieldKey . '_rating') == 5 ? 'checked' : '' }} required class="hidden">
                                        <label for="{{ $fieldKey }}-5" class="cursor-pointer text-lg" aria-label="5 stars">★</label>
                                        <input type="radio" id="{{ $fieldKey }}-4" name="{{ $fieldKey }}_rating" value="4" {{ old($fieldKey . '_rating') == 4 ? 'checked' : '' }} class="hidden">
                                        <label for="{{ $fieldKey }}-4" class="cursor-pointer text-lg" aria-label="4 stars">★</label>
                                        <input type="radio" id="{{ $fieldKey }}-3" name="{{ $fieldKey }}_rating" value="3" {{ old($fieldKey . '_rating') == 3 ? 'checked' : '' }} class="hidden">
                                        <label for="{{ $fieldKey }}-3" class="cursor-pointer text-lg" aria-label="3 stars">★</label>
                                        <input type="radio" id="{{ $fieldKey }}-2" name="{{ $fieldKey }}_rating" value="2" {{ old($fieldKey . '_rating') == 2 ? 'checked' : '' }} class="hidden">
                                        <label for="{{ $fieldKey }}-2" class="cursor-pointer text-lg" aria-label="2 stars">★</label>
                                        <input type="radio" id="{{ $fieldKey }}-1" name="{{ $fieldKey }}_rating" value="1" {{ old($fieldKey . '_rating') == 1 ? 'checked' : '' }} class="hidden">
                                        <label for="{{ $fieldKey }}-1" class="cursor-pointer text-lg" aria-label="1 star">★</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Title & Comment -->
                    <div class="space-y-4">
                        <div>
                            <label for="review_title" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Review Header / Headline</label>
                            <input type="text" id="review_title" name="review_title" value="{{ old('review_title') }}" placeholder="e.g. Exceptional concierge and comfortable luxury beds!" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        </div>

                        <div>
                            <label for="review_comment" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Review Comment / Detail *</label>
                            <textarea id="review_comment" name="review_comment" rows="6" required placeholder="Write down your stay experience here. We value your honest thoughts..." class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs px-3 py-2.5 focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">{{ old('review_comment') }}</textarea>
                        </div>
                    </div>

                    <!-- Optional Media Upload -->
                    <div>
                        <label for="media_upload" class="text-xs font-bold text-slate-600 dark:text-slate-400 block mb-1">Upload Photo or Video (Optional, max 20MB)</label>
                        <input type="file" id="media_upload" name="media_upload" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-bold file:bg-blue-50 file:text-[#2B3192] hover:file:bg-blue-100">
                        <span class="text-[10px] text-slate-400 mt-1 block">Supported formats: JPG, PNG, WEBP, MP4. Media will appear once the review is moderated.</span>
                    </div>

                    <!-- Consents & Agreement -->
                    <div class="space-y-3">
                        <label class="flex items-start space-x-3 cursor-pointer">
                            <input type="checkbox" name="consent_to_publish" required class="mt-1 border-slate-300 dark:border-slate-700 text-[#2B3192] focus:ring-0">
                            <span class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold">I consent to the publication of this review and category ratings using my public display initials on the Kevron website. *</span>
                        </label>

                        <label class="flex items-start space-x-3 cursor-pointer">
                            <input type="checkbox" name="privacy_acceptance" required class="mt-1 border-slate-300 dark:border-slate-700 text-[#2B3192] focus:ring-0">
                            <span class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold">I have read and accept the guest privacy terms and guidelines. My personal booking reference, email, and phone will remain highly secure and hidden. *</span>
                        </label>
                    </div>

                    <!-- Submission buttons -->
                    <div class="pt-4 flex items-center justify-between border-t border-slate-200 dark:border-slate-800">
                        <span class="text-[10px] text-slate-400 font-semibold">* Required fields</span>
                        <button type="submit" class="btn-lux px-8 py-3 bg-[#2B3192] hover:bg-blue-800 text-white font-bold text-xs uppercase tracking-wider">Submit Review</button>
                    </div>

                </form>
            </div>
            
            <!-- Moderation Notice -->
            <div class="mt-6 text-center">
                <p class="text-[11px] text-slate-400 leading-relaxed max-w-lg mx-auto">
                    Reviews submitted through this website are reviewed before publication to prevent spam, offensive content or private information from appearing publicly. Approved reviews may be displayed using the guest’s public display name or initials. Kevron Suites and Apartments does not publish fake reviews.
                </p>
            </div>
        </div>
    </section>

    <!-- 11. Reviews by Apartment Type Section -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/30 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Apartment Selection Ratings</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Explore ratings and features specifically categorized by en-suite size and apartment capacity.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($apartmentTypes as $apt)
                    @php
                        // calculate real stats for this apartment type
                        $aptApprovedReviews = \App\Models\Review::where('apartment_type_id', $apt->id)->where('is_approved', true);
                        $aptCount = $aptApprovedReviews->count();
                        $aptAvg = round($aptApprovedReviews->avg('overall_rating') ?? 0.0, 1);
                    @endphp
                    <div class="card-lux p-5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex flex-col justify-between hover:border-amber-400/30">
                        <div class="space-y-4">
                            <h3 class="text-xs font-bold text-[#080D2B] dark:text-white uppercase tracking-wider">{{ $apt->name }}</h3>
                            
                            @if($aptCount > 0)
                                <div class="flex items-center space-x-2">
                                    <span class="text-lg font-bold text-amber-500">{{ $aptAvg }}</span>
                                    <span class="text-slate-400">/</span>
                                    <span class="text-slate-400 text-xs">5.0</span>
                                    <span class="text-[10px] text-slate-400">({{ $aptCount }} reviews)</span>
                                </div>
                            @else
                                <span class="text-[10px] text-slate-400 block italic">No ratings yet</span>
                            @endif

                            <div class="text-[11px] text-slate-500 dark:text-slate-400 space-y-1">
                                <div class="flex justify-between">
                                    <span>Nightly rate:</span>
                                    <span class="font-bold text-[#2B3192] dark:text-white">₦{{ number_format($apt->base_price_nightly) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Capacity:</span>
                                    <span>{{ $apt->capacity_adults }} Adults</span>
                                </div>
                            </div>
                        </div>

                        <div class="pt-4 border-t border-slate-100 dark:border-slate-850 mt-4 space-y-2">
                            <a href="{{ route('apartments.show', ['slug' => $apt->slug]) }}" class="btn-lux w-full px-4 py-2 border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-white text-[10px] font-bold text-center">View Details</a>
                            <a href="{{ route('booking.index') }}" class="btn-lux w-full px-4 py-2 bg-[#2B3192] text-white text-[10px] font-bold text-center">Book Now</a>
                            <a href="https://wa.me/2348000000000" target="_blank" class="btn-lux w-full px-4 py-2 bg-emerald-600 text-white text-[10px] font-bold text-center">WhatsApp Us</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 12. SEO/GEO Content Block -->
    <section class="py-12 bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-slate-50 dark:bg-slate-900/50 p-6" style="border-radius: 0.1rem;">
                <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-2">Local SEO and Directory Summary</h4>
                <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold">
                    Kevron Suites and Apartments collects and displays approved guest feedback for its Adeniyi Jones, Ikeja serviced apartments, including ratings for cleanliness, comfort, location, security, service and value. Guests can share feedback on cleanliness, comfort, location, security, service and value after checkout. Approved reviews help future guests understand the stay experience across the 1, 2, 3 and 4 bedroom serviced apartment options. We display only authentic guest feedback on our website, ensuring absolute privacy of personal email addresses, phone contact data, or internal booking reference logs. For airport access, MM1 and MM2 domestic terminals are situated a brief distance from our Regina Coker/Ogunlowo gated blocks inside Ikeja Lagos Nigeria.
                </p>
            </div>
        </div>
    </section>

    <!-- 13. Dynamic FAQs Accordion (Alpine.js) -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/30 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-xl mx-auto mb-10">
                <h2 class="rev-h2 text-[#080D2B] dark:text-white">Frequently Asked Questions</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Read important details about reviews integrity, stay verification rules, and name initials privacy.</p>
            </div>

            <div class="space-y-4" x-data="{ activeFaq: null }">
                @foreach($faqs as $index => $faq)
                    <div class="card-lux bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden" style="border-radius: 0.1rem;">
                        <button @click="activeFaq = (activeFaq === {{ $index }} ? null : {{ $index }})" class="w-full flex items-center justify-between p-5 text-left font-bold text-slate-800 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-850 focus:outline-none transition-colors">
                            <span class="text-xs uppercase tracking-wider">{{ $faq->question }}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 transform transition-transform duration-300" :class="activeFaq === {{ $index }} ? 'rotate-180' : ''">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </button>
                        <div x-show="activeFaq === {{ $index }}" x-collapse x-cloak class="p-5 border-t border-slate-100 dark:border-slate-850 bg-slate-50/50 dark:bg-slate-950 text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold">
                            {{ $faq->answer }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 14. Final Call to Action -->
    <section class="py-16 bg-[#080D2B] text-white relative overflow-hidden">
        <!-- Top amber progress line -->
        <div class="absolute top-0 left-0 right-0 h-1 bg-[#D6A84F]"></div>
        
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6 relative z-10">
            <h2 class="rev-h2 text-white">Ready to Create Your Own Kevron Stay Experience?</h2>
            
            <p class="text-slate-300 max-w-xl mx-auto leading-relaxed text-xs font-semibold">
                Explore our luxury serviced apartments in Adeniyi Jones, Ikeja and book a stay designed for comfort, convenience and smart living.
            </p>

            <div class="flex flex-wrap justify-center gap-4 pt-2">
                <a href="{{ route('apartments.index') }}" class="btn-lux px-6 py-3 bg-[#D6A84F] hover:bg-amber-600 text-white font-semibold text-center">
                    View Apartments
                </a>
                <a href="{{ route('booking.index') }}" class="btn-lux px-6 py-3 bg-[#2B3192] hover:bg-blue-800 text-white font-semibold text-center">
                    Book Your Stay
                </a>
                <a href="https://wa.me/2348000000000" target="_blank" class="btn-lux px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-center">
                    WhatsApp Us
                </a>
            </div>
        </div>
    </section>

</div>

<!-- Interactive JavaScript Helper for upvotes, reports, and toasts -->
<script>
    function voteHelpful(reviewId, buttonElement) {
        fetch(`/reviews/${reviewId}/helpful`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update helpful count
                const countContainer = buttonElement.querySelector('.helpful-count');
                if (countContainer) {
                    countContainer.innerText = data.count;
                }
                showToast(data.message, 'success');
                // Disable button
                buttonElement.disabled = true;
                buttonElement.classList.add('opacity-50', 'cursor-not-allowed');
            } else {
                showToast(data.message, 'warning');
            }
        })
        .catch(error => {
            console.error('Error upvoting helpful:', error);
            showToast('Unable to complete upvote action.', 'danger');
        });
    }

    function reportReview(reviewId) {
        const reason = prompt('Please describe why you are reporting this review (e.g. spam, private data exposure, inappropriate language):');
        if (!reason || reason.trim() === '') {
            return;
        }

        fetch(`/reviews/${reviewId}/report`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ reason: reason })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
            } else {
                showToast(data.message, 'warning');
            }
        })
        .catch(error => {
            console.error('Error reporting review:', error);
            showToast('Unable to complete reporting action.', 'danger');
        });
    }

    function showToast(message, type = 'info') {
        const toastContainer = document.getElementById('toast-container');
        if (!toastContainer) {
            alert(message);
            return;
        }

        const toast = document.createElement('div');
        toast.className = `p-4 text-xs font-semibold text-white pointer-events-auto transition-all duration-300 shadow-lg flex items-center justify-between space-x-3`;
        toast.style.borderRadius = '0.1rem';
        toast.style.minWidth = '280px';
        
        if (type === 'success') {
            toast.style.backgroundColor = '#16A34A'; // emerald
        } else if (type === 'warning') {
            toast.style.backgroundColor = '#F59E0B'; // amber
        } else if (type === 'danger') {
            toast.style.backgroundColor = '#DC2626'; // red
        } else {
            toast.style.backgroundColor = '#2B3192'; // blue
        }

        toast.innerHTML = `<span>${message}</span>`;
        toastContainer.appendChild(toast);

        // Remove after 4 seconds
        setTimeout(() => {
            toast.classList.add('opacity-0', 'scale-95');
            setTimeout(() => toast.remove(), 300);
        }, 4000);
    }
</script>
@endsection