{{-- TOP REVIEWS --}}
<section class="relative">
    <div class="grid lg:grid-cols-2">

        {{-- LEFT IMAGE --}}
        <div class="relative min-h-[320px] lg:min-h-[560px]">
            <img src="{{ asset('assets/img/sections/review-left.jpg') }}"
                class="absolute inset-0 w-full h-full object-cover">
        </div>

        {{-- RIGHT PANEL --}}
        <div class="relative bg-[#1b1b1b] text-white overflow-hidden">

            <div class="relative px-6 py-14 md:px-12 lg:px-16 lg:py-20 flex items-center justify-center">

                <div class="w-full max-w-xl text-center">

                    <h2 class="text-4xl md:text-5xl font-semibold" style="font-family: var(--font-display);">
                        Our Top Reviews
                    </h2>

                    <div id="reviewSlider" class="mt-10">

                        @foreach($reviews as $index => $review)

                            <div class="review-slide {{ $index == 0 ? '' : 'hidden' }}">

                                @if($review->title)
                                    <div class="text-xl font-semibold" style="font-family: var(--font-display);">
                                        {{ $review->title }}
                                    </div>
                                @endif

                                {{-- Stars --}}
                                <div class="mt-3 flex justify-center gap-1 text-gold-500">
                                    @for($i = 0; $i < $review->rating; $i++)
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24"
                                            fill="currentColor">
                                            <path d="M12 17.27 18.18 21l-1.64-7.03L22
                                                9.24l-7.19-.61L12 2 9.19
                                                8.63 2 9.24l5.46
                                                4.73L5.82 21z" />
                                        </svg>
                                    @endfor
                                </div>

                                <p class="mt-8 text-white/75 leading-relaxed text-sm md:text-base">
                                    {{ $review->review }}
                                </p>

                                <div class="mt-10 text-[12px] tracking-[.22em] uppercase text-white/85 font-semibold">
                                    {{ $review->name }}
                                    @if($review->country)
                                        • {{ $review->country }}
                                    @endif
                                </div>

                                @if($review->avatar)
                                    <div class="mt-4 flex justify-center">
                                        <img src="{{ asset('storage/' . $review->avatar) }}"
                                            class="h-14 w-14 rounded-full object-cover ring-2 ring-white/15">
                                    </div>
                                @endif

                            </div>

                        @endforeach

                    </div>

                    {{-- dots --}}
                    <div class="mt-6 flex justify-center gap-2">
                        @foreach($reviews as $i => $review)
                            <span
                                class="review-dot h-2 w-2 rounded-full {{ $i == 0 ? 'bg-gold-500' : 'bg-white/25' }}"></span>
                        @endforeach
                    </div>

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

<script>
    const slides = document.querySelectorAll('.review-slide');
    const dots = document.querySelectorAll('.review-dot');

    let index = 0;

    function showSlide(i) {

        slides.forEach(s => s.classList.add('hidden'));
        dots.forEach(d => d.classList.remove('bg-gold-500'));

        slides[i].classList.remove('hidden');
        dots[i].classList.add('bg-gold-500');
    }

    setInterval(() => {
        index = (index + 1) % slides.length;
        showSlide(index);
    }, 6000);
</script>