astro_avtourist/frontend/src/pages/reviews.astro

---
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">
		<!-- Hero-секция -->
		<section class="reviews-hero">
			<div class="site-container">
				<div class="hero-content">
					<div class="badge animate-on-scroll" data-animation="fade-up">
						<span class="status-dot"></span>
						ОТЗЫВЫ КЛИЕНТОВ
					</div>
					<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
						Реальные истории <span class="text-gold">водителей</span> из Сургута
					</h1>
					<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
						Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
					</p>
				</div>
			</div>
		</section>

		<div class="site-container">

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

			<!-- Сетка отзывов -->
			<div class="reviews-grid">
				{reviewsData.map((review) => (
					<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: 0;
		background: #f8fafc;
	}

	/* ===== HERO ===== */
	.reviews-hero {
		background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
		padding: 8rem 0 4rem;
		position: relative;
		overflow: hidden;
	}

	.reviews-hero::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -10%;
		width: 600px;
		height: 600px;
		background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
		border-radius: 50%;
	}

	.hero-content {
		position: relative;
		z-index: 1;
		text-align: center;
		max-width: 700px;
		margin: 0 auto;
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		background-color: rgba(234, 194, 110, 0.15);
		border: 1px solid rgba(234, 194, 110, 0.3);
		color: #eac26e;
		padding: 0.5rem 1rem;
		border-radius: 6px;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 1.5px;
		margin-bottom: 2rem;
	}

	.status-dot {
		width: 10px;
		height: 10px;
		background: #22c55e;
		border-radius: 50%;
		animation: pulse 2s ease-in-out infinite;
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
		flex-shrink: 0;
	}

	@keyframes pulse {
		0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
		70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
		100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
	}

	.title {
		font-size: clamp(2.5rem, 5vw, 4rem);
		font-weight: 800;
		color: #ffffff;
		margin: 0 0 1.5rem;
		line-height: 1.15;
		letter-spacing: -0.02em;
	}

	.text-gold { color: #eac26e; }

	.description {
		color: rgba(255, 255, 255, 0.8);
		font-size: 1.15rem;
		line-height: 1.6;
		margin: 0;
	}

	/* ===== GRID ===== */

	.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-hero {
			padding: 7rem 0 3rem;
		}

		.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>