@php
    $reviews = App\Models\Review::with('user')->latest()->get();
@endphp

<section class="py-20 bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-950">
    <div class="max-w-7xl mx-auto px-6">
        <!-- Section Header -->
        <div class="text-center mb-16">

            <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                {{ t('what_our_client_say') }}
            </h2>
            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
                {{ t('testimonial_short_desc') }}
            </p>
        </div>

        <!-- Swiper Slider -->
        <div class="relative">
            <!-- Slider Container -->
            <div class="swiper testimonials-swiper">
                <div class="swiper-wrapper">
                    <!-- Review 1 -->



                    @foreach ($reviews as $item)
                        <div class="swiper-slide">
                            <div
                                class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl p-6 md:p-8 border border-gray-100 dark:border-gray-700/50 hover:border-[#B98927]/30 dark:hover:border-[#B98927]/40 transition-all duration-300 hover:shadow-2xl hover:shadow-[#B98927]/10 h-full mx-4">
                                <div class="flex items-center gap-4 mb-6">
                                    <div
                                        class="w-14 h-14 rounded-full bg-gradient-to-br from-[#B98927]/20 to-[#EAD9A8]/30 flex items-center justify-center overflow-hidden flex-shrink-0">
                                        <img src="{{ $item->user->image ?? 'https://thumbs.dreamstime.com/b/default-placeholder-profile-icon-avatar-gray-man-90197957.jpg' }}"
                                            alt="Client" class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-900 dark:text-white">{{ $item->user->name }}</h4>
                                    </div>
                                </div>
                                <div class="mb-6">
                                    <div class="flex items-center">
                                    <div class="flex text-yellow-400 mr-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            @if($i <= $item->rating)
                                                <i class="fas fa-star"></i>
                                            @else
                                                <i class="far fa-star"></i>
                                            @endif
                                        @endfor
                                    </div>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white ml-1">
                                        ({{ $item->rating }}/5)
                                    </span>
                                </div>
                                    <p class="text-gray-700 dark:text-gray-300 italic leading-relaxed mt-5">
                                        "{{ $item->comment }}"
                                    </p>
                                </div>
                                <div class="pt-6 border-t border-gray-100 dark:border-gray-700/50">
                                    <span class="text-sm text-gray-500 dark:text-gray-400">
                                        {{ $item->created_at->format('d M Y, h:i A') }}
                                    </span>


                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>

                <!-- Navigation Buttons -->
                <div
                    class="testimonials-swiper-button-prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 lg:-translate-x-8 z-10 hidden lg:flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg hover:border-[#B98927] dark:hover:border-[#B98927] hover:shadow-[#B98927]/20 transition-all duration-300 cursor-pointer">
                    <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </div>
                <div
                    class="testimonials-swiper-button-next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 lg:translate-x-8 z-10 hidden lg:flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg hover:border-[#B98927] dark:hover:border-[#B98927] hover:shadow-[#B98927]/20 transition-all duration-300 cursor-pointer">
                    <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>

                <!-- Pagination Dots -->
                <div class="testimonials-swiper-pagination flex justify-center gap-2 mt-8"></div>
            </div>
        </div>
    </div>
</section>

<!-- Add Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- Add Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Swiper
        const swiper = new Swiper('.testimonials-swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            speed: 600,
            grabCursor: true,

            // Responsive breakpoints
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 20
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 30
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 30
                }
            },

            // Autoplay
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },

            // Navigation arrows
            navigation: {
                nextEl: '.testimonials-swiper-button-next',
                prevEl: '.testimonials-swiper-button-prev',
            },

            // Pagination dots
            pagination: {
                el: '.testimonials-swiper-pagination',
                clickable: true,
                renderBullet: function(index, className) {
                    return '<span class="' + className +
                        ' w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 transition-all duration-300"></span>';
                },
            },

            // Effects
            effect: 'slide',
            fadeEffect: {
                crossFade: true
            },

            // Callbacks
            on: {
                init: function() {
                    // Add active class to first bullet
                    const bullets = document.querySelectorAll(
                        '.testimonials-swiper-pagination .swiper-pagination-bullet');
                    if (bullets[0]) {
                        bullets[0].classList.add('swiper-pagination-bullet-active');
                        bullets[0].classList.add('!w-4', '!h-4', '!bg-[#B98927]',
                            'dark:!bg-[#EAD9A8]');
                    }
                },
            }
        });

        // Custom bullet active styles
        swiper.on('paginationUpdate', function() {
            const bullets = document.querySelectorAll(
                '.testimonials-swiper-pagination .swiper-pagination-bullet');
            bullets.forEach(bullet => {
                bullet.classList.remove('!w-4', '!h-4', '!bg-[#B98927]', 'dark:!bg-[#EAD9A8]');
                bullet.classList.add('w-2', 'h-2', 'bg-gray-300', 'dark:bg-gray-600');
            });

            const activeBullet = document.querySelector(
                '.testimonials-swiper-pagination .swiper-pagination-bullet-active');
            if (activeBullet) {
                activeBullet.classList.remove('w-2', 'h-2', 'bg-gray-300', 'dark:bg-gray-600');
                activeBullet.classList.add('!w-4', '!h-4', '!bg-[#B98927]', 'dark:!bg-[#EAD9A8]');
            }
        });

        // Keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowLeft') {
                swiper.slidePrev();
            }
            if (e.key === 'ArrowRight') {
                swiper.slideNext();
            }
        });
    });
</script>

<style>
    /* Custom Swiper Styles */
    .testimonials-swiper {
        padding: 20px 0 40px 0;
    }

    .testimonials-swiper .swiper-slide {
        height: auto;
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }

    .testimonials-swiper .swiper-slide-active {
        opacity: 1;
    }

    .testimonials-swiper .swiper-slide-next,
    .testimonials-swiper .swiper-slide-prev {
        opacity: 0.9;
    }

    /* Hover effect for active slide */
    .testimonials-swiper .swiper-slide-active>div {
        transform: scale(1.02);
        transition: transform 0.3s ease;
    }

    /* Pagination bullet active state */
    .testimonials-swiper-pagination .swiper-pagination-bullet-active {
        background: #B98927 !important;
    }

    .dark .testimonials-swiper-pagination .swiper-pagination-bullet-active {
        background: #EAD9A8 !important;
    }
</style>