---
const reviews = [
    {
        author: "Александр Волков",
        role: "ООО «СтройГрупп»",
        text: "Профессионал своего дела! Помог выиграть сложнейший арбитражный спор. Всегда на связи, всё четко и по делу.",
        rating: 5,
    },
    {
        author: "Мария Смирнова",
        role: "Частное лицо",
        text: "Обращалась по вопросу раздела имущества. Процесс был тяжелым, но благодаря поддержке адвоката удалось достичь мирного соглашения.",
        rating: 5,
    },
    {
        author: "Дмитрий Кузнецов",
        role: "Предприниматель",
        text: "Лучшая юридическая консультация, которую я когда-либо получал. Очень грамотно разобрали мою ситуацию по уголовному делу.",
        rating: 5,
    },
    {
        author: "Елена Васечкина",
        role: "Гендиректор «Вектор»",
        text: "Сотрудничаем на постоянной основе уже 3 года. Полное юридическое сопровождение бизнеса на высшем уровне.",
        rating: 5,
    },
];
---

<section id="reviews" class="relative py-24 bg-[var(--color-navy)] overflow-hidden">
    <!-- Декоративный фон -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-10 rounded-full blur-3xl"></div>
    </div>

    <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10">
        <!-- Заголовок -->
        <div class="text-center mb-16">
            <span class="inline-block px-4 py-2 bg-white/10 text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider rounded-full mb-4">
                Репутация
            </span>
            <h2 class="text-4xl md:text-5xl font-bold text-white">
                Отзывы наших <span class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)]">доверителей</span>
            </h2>
        </div>

        <!-- Карусель -->
        <div class="relative group" id="reviews-carousel">
            <!-- Кнопки навигации -->
            <button id="prev-btn" class="absolute -left-4 lg:-left-12 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 rounded-full flex items-center justify-center text-white hover:bg-[var(--color-gold)] hover:border-[var(--color-gold)] transition-all duration-300 opacity-0 group-hover:opacity-100 cursor-pointer">
                <svg class="w-6 h-6" 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"/>
                </svg>
            </button>

            <button id="next-btn" class="absolute -right-4 lg:-right-12 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 rounded-full flex items-center justify-center text-white hover:bg-[var(--color-gold)] hover:border-[var(--color-gold)] transition-all duration-300 opacity-0 group-hover:opacity-100 cursor-pointer">
                <svg class="w-6 h-6" 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"/>
                </svg>
            </button>

            <!-- Трек -->
            <div class="overflow-hidden">
                <div class="flex gap-6" id="reviews-track">
                    {reviews.map((review) => (
                            <div class="flex-shrink-0 w-full md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)]">
                                <div class="h-full bg-white/10 backdrop-blur-md border border-white/10 rounded-2xl p-8 hover:bg-white/15 hover:border-[var(--color-gold)]/30 transition-all duration-300">
                                    <!-- Звезды -->
                                    <div class="flex gap-1 mb-6">
                                        {Array.from({ length: 5 }).map((_, i) => (
                                                <svg class={`w-5 h-5 ${i < review.rating ? 'text-[var(--color-gold)]' : 'text-gray-600'}`} fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                        ))}
                                    </div>

                                    <blockquote class="text-gray-300 text-lg leading-relaxed mb-8 italic">
                                        "{review.text}"
                                    </blockquote>

                                    <div class="pt-6 border-t border-white/10">
                                        <h4 class="text-white font-bold text-lg mb-1">{review.author}</h4>
                                        <span class="text-[var(--color-gold)] text-sm font-medium">{review.role}</span>
                                    </div>
                                </div>
                            </div>
                    ))}
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .animate-scroll {
        animation: scroll 30s linear infinite;
    }
    .animate-scroll:hover {
        animation-play-state: paused;
    }
</style>

<script>
    const initReviewsCarousel = () => {
        const track = document.getElementById('reviews-track');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        
        if (!track || !prevBtn || !nextBtn) return;

        let currentIndex = 0;
        let autoScrollInterval: ReturnType<typeof setInterval>;
        const cards = track.querySelectorAll('.flex-shrink-0');
        const totalCards = cards.length;
        
        // Определяем количество видимых карточек
        const getVisibleCards = () => {
            if (window.innerWidth >= 1024) return 3;
            if (window.innerWidth >= 768) return 2;
            return 1;
        };

        // Обновление позиции трека
        const updateTrackPosition = () => {
            const cardWidth = cards[0]?.getBoundingClientRect().width || 0;
            const gap = 24; // 24px gap между карточками
            const visibleCards = getVisibleCards();
            const maxIndex = totalCards - visibleCards;
            
            // Ограничиваем индекс
            if (currentIndex < 0) currentIndex = 0;
            if (currentIndex > maxIndex) currentIndex = maxIndex;
            
            const offset = -(currentIndex * (cardWidth + gap));
            track.style.transform = `translateX(${offset}px)`;
            track.style.transition = 'transform 0.5s ease-in-out';
        };

        // Автопрокрутка
        const startAutoScroll = () => {
            autoScrollInterval = setInterval(() => {
                const visibleCards = getVisibleCards();
                const maxIndex = totalCards - visibleCards;
                
                if (currentIndex >= maxIndex) {
                    currentIndex = 0;
                } else {
                    currentIndex++;
                }
                updateTrackPosition();
            }, 3000);
        };

        const stopAutoScroll = () => {
            clearInterval(autoScrollInterval);
        };

        // Обработчики кнопок
        prevBtn.addEventListener('click', () => {
            stopAutoScroll();
            const visibleCards = getVisibleCards();
            currentIndex = Math.max(0, currentIndex - visibleCards);
            updateTrackPosition();
            startAutoScroll();
        });

        nextBtn.addEventListener('click', () => {
            stopAutoScroll();
            const visibleCards = getVisibleCards();
            const maxIndex = totalCards - visibleCards;
            currentIndex = Math.min(maxIndex, currentIndex + visibleCards);
            updateTrackPosition();
            startAutoScroll();
        });

        // Дублируем карточки для бесконечной прокрутки (как в оригинале)
        const cloneCards = () => {
            cards.forEach(card => {
                const clone = card.cloneNode(true);
                clone.setAttribute('data-cloned', 'true');
                track.appendChild(clone);
            });
        };

        // Инициализация
        cloneCards();
        updateTrackPosition();
        startAutoScroll();

        // Пересчёт при изменении размера окна
        window.addEventListener('resize', () => {
            currentIndex = 0;
            updateTrackPosition();
        });
    };

    // Запуск после загрузки страницы
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initReviewsCarousel);
    } else {
        initReviewsCarousel();
    }

    // Для Astro View Transitions
    document.addEventListener('astro:page-load', initReviewsCarousel);
</script>