---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import BlogHero from '@components/blog/BlogHero.astro';
import BlogCategories from '@components/blog/BlogCategories.astro';
import BlogCard from '@components/blog/BlogCard.astro';
import BlogPagination from '@components/blog/BlogPagination.astro';
import SearchModal from '@components/base/SearchModal.astro';
import { blogPosts, categories } from '@data/blogData';
---

<Layout
	title="Блог — автоюрист в Сургуте"
	description="Полезные статьи и советы по автоспорам, ДТП, ОСАГО, лишению прав и защите прав водителей."
	canonicalLink={`${SITE_URL}/blog`}
>
	<BlogHero />

	<BlogCategories categories={categories} />

	<!-- Сетка статей -->
	<section class="blog-grid-section">
		<div class="site-container">
			<div class="blog-grid" id="blog-grid">
				{blogPosts.map((post) => (
					<article class="blog-card-wrapper" data-category={post.category}>
						<BlogCard
							title={post.title}
							description={post.description}
							category={post.category}
							categoryColor={post.categoryColor}
							date={post.date}
							readTime={post.readTime}
							imageUrl={post.imageUrl}
							slug={post.slug}
						/>
					</article>
				))}
			</div>

			<!-- Пагинация -->
			<BlogPagination currentPage={1} totalPages={3} />
		</div>
	</section>

	<!-- CTA-блок -->
	<section class="blog-cta">
		<div class="site-container">
			<div class="cta-content">
				<h2 class="cta-title">Нужна консультация юриста?</h2>
				<p class="cta-text">
					Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации
				</p>
				<button class="cta-button" id="consultation-btn" data-modal-target="consultation-modal">
					Записаться на консультацию
				</button>
			</div>
		</div>
	</section>

	<SearchModal />
</Layout>

<style>
	.blog-grid-section {
		padding: 3rem 0 0;
		background: #f8fafc;
	}

	.blog-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.blog-card-wrapper {
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	/* ===== CTA ===== */
	.blog-cta {
		padding: 5rem 0;
		background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
		position: relative;
		overflow: hidden;
	}

	.blog-cta::before {
		content: '';
		position: absolute;
		bottom: -30%;
		left: -10%;
		width: 500px;
		height: 500px;
		background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
		border-radius: 50%;
	}

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

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

	.cta-text {
		color: rgba(255, 255, 255, 0.75);
		font-size: 1.1rem;
		line-height: 1.6;
		margin: 0 0 2rem;
	}

	.cta-button {
		background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
		color: #1e293b;
		border: none;
		padding: 1rem 2.5rem;
		border-radius: 0.75rem;
		font-size: 1.1rem;
		font-weight: 700;
		cursor: pointer;
		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(-3px);
		box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
	}

	/* ===== RESPONSIVE ===== */
	@media (max-width: 1024px) {
		.blog-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

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

		.blog-cta {
			padding: 3rem 0;
		}
	}
</style>