---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import ReviewCard from '@components/reviews/ReviewCard.astro';
import VotingSummary from '@components/reviews/VotingSummary.astro';
import { reviewsData, votingSummary } from '@data/reviewsData';
---

<Layout
	title="Отзывы клиентов — автоюрист в Сургуте"
	description="Отзывы реальных клиентов о нашей юридической помощи по автоспорам в Сургуте. Реальные истории и голосования."
	canonicalLink={`${SITE_URL}/reviews`}
>
	<section class="reviews-page">
		<div class="site-container">
			<!-- Заголовок страницы -->
			<div class="page-header">
				<span class="subtitle animate-on-scroll" data-animation="fade-up">Отзывы клиентов</span>
				<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
					Реальные истории водителей из Сургута
				</h1>
				<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
					Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
				</p>
			</div>

			<!-- Блок статистики голосования -->
			<VotingSummary 
				averageRating={votingSummary.averageRating}
				totalVotes={votingSummary.totalVotes}
				totalReviews={votingSummary.totalReviews}
				ratingDistribution={votingSummary.ratingDistribution}
			/>

			<!-- Сетка отзывов -->
			<div class="reviews-grid">
				{reviewsData.map((review, index) => (
					<ReviewCard 
						name={review.name}
						car={review.car}
						text={review.text}
						rating={review.rating}
						initial={review.initial}
						color={review.color}
						date={review.date}
						votesCount={review.votesCount}
						isHelpful={review.isHelpful}
					/>
				))}
			</div>

			<!-- CTA блок -->
			<div class="cta-section animate-on-scroll" data-animation="fade-up" data-delay="300">
				<h2 class="cta-title">Хотите оставить отзыв?</h2>
				<p class="cta-text">
					Поделитесь своим опытом работы с нами. Ваш отзыв поможет другим водителям принять правильное решение.
				</p>
				<a href="/contacts" class="cta-button">
					Оставить отзыв
				</a>
			</div>
		</div>
	</section>
</Layout>

<style>
	.reviews-page {
		padding: 8rem 0 4rem 0;
		background: #f8fafc;
	}

	.page-header {
		text-align: center;
		margin-bottom: 3rem;
	}

	.subtitle {
		display: inline-block;
		color: #d4af37;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 3px;
		margin-bottom: 1rem;
		padding: 0.5rem 1rem;
		background: rgba(212, 175, 55, 0.1);
		border-radius: 6px;
	}

	.title {
		color: #1e293b;
		font-size: clamp(2rem, 4vw, 3rem);
		font-weight: 800;
		margin: 0 0 1rem 0;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}

	.description {
		color: #64748b;
		font-size: 1.125rem;
		max-width: 600px;
		margin: 0 auto;
		line-height: 1.6;
	}

	.reviews-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: 2rem;
		margin: 3rem 0;
	}

	/* CTA блок */
	.cta-section {
		margin-top: 4rem;
		padding: 3rem;
		background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
		border-radius: 1.5rem;
		text-align: center;
	}

	.cta-title {
		color: #ffffff;
		font-size: clamp(1.5rem, 3vw, 2rem);
		font-weight: 800;
		margin: 0 0 1rem 0;
		letter-spacing: -0.02em;
	}

	.cta-text {
		color: #cbd5e1;
		font-size: 1.125rem;
		max-width: 600px;
		margin: 0 auto 2rem;
		line-height: 1.6;
	}

	.cta-button {
		display: inline-block;
		padding: 1rem 2.5rem;
		background: linear-gradient(135deg, #d4af37 0%, #fbbf24 100%);
		color: #1e293b;
		font-weight: 700;
		font-size: 1.125rem;
		text-decoration: none;
		border-radius: 0.75rem;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
	}

	.cta-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
	}

	/* Анимации */
	.animate-on-scroll {
		opacity: 0;
		will-change: opacity, transform;
	}

	[data-animation="fade-up"] {
		transform: translateY(30px);
		transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
					transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.animate-on-scroll.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.animate-on-scroll {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}

	@media (max-width: 768px) {
		.reviews-grid {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}

		.cta-section {
			padding: 2rem;
		}
	}
</style>

<script>
	// Intersection Observer для анимаций при скроллинге
	const setupAnimations = () => {
		const observerOptions = {
			root: null,
			rootMargin: '0px 0px -50px 0px',
			threshold: 0.1
		};

		const observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					const el = entry.target as HTMLElement;
					const delay = parseInt(el.dataset.delay || '0');

					setTimeout(() => {
						el.classList.add('is-visible');
					}, delay);

					observer.unobserve(el);
				}
			});
		}, observerOptions);

		document.querySelectorAll('.animate-on-scroll').forEach((el) => {
			observer.observe(el);
		});
	};

	// Запуск
	setupAnimations();

	// Для поддержки View Transitions в Astro
	document.addEventListener('astro:after-swap', () => {
		setupAnimations();
	});
</script>