---
import Layout from '@layouts/Layout.astro';
import { SITE_URL, EXPERIENCE_YEARS } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import RelatedCases from "@components/cases/RelatedCases.astro";
import AdBanner from "@components/base/AdBanner.astro";
---

<Layout
	title="Доказывание невиновности в ДТП — автоюрист Сургут"
	description="Клиента признали виновным в ДТП на основании рапорта инспектора. Мы доказали несостоятельность обвинения."
	canonicalLink={`${SITE_URL}/cases/dtp-innocence-proof`}
	breadcrumbs={[
		{ label: 'Главная', href: '/' },
		{ label: 'Кейсы', href: '/cases' },
		{ label: 'Доказывание невиновности в ДТП' }
	]}
>
	<PageHero
		badgeText="КЕЙС #4"
		titleWhite="Доказывание"
		titleGold="невиновности в ДТП"
		description="Клиента признали виновным в ДТП на основании рапорта инспектора. Благодаря грамотно построенной позиции удалось доказать несостоятельность обвинения."
		btnText="Получить консультацию"
		modalTarget="consultation-modal"
		layout="with-image"
		sideImage="/images/cases/casesImg.avif"
		sideImageAlt="Автоюрист Сургут"
		experienceBadge={{
			number: "95%",
			text: "УСПЕШНЫХ ДЕЛ"
		}}
		bgImage="/images/cases/casesBg.avif"
		icon="briefcase"
	/>

	<div class="case-detail-page">
		<section class="case-content">
			<div class="site-container">
				<div class="case-grid">
				<article class="case-article">
					<div class="case-block">
						<h2 class="case-block__title">
							<span class="case-block__icon">📋</span>
							Исходная ситуация
						</h2>
						<div class="case-block__content">
							<p>
								На одном из перекрёстков Сургута произошло столкновение двух автомобилей.
								Инспектор ГИБДД составил протокол, в котором признал виновным нашего клиента.
							</p>
							<p>
								<strong>Основанием послужил только рапорт инспектора без надлежащих доказательств.
								Клиенту грозило лишение прав и крупный штраф.</strong>
							</p>
							<p>
								Клиент был уверен в своей невиновности и обратился за юридической помощью
								для защиты своих прав.
							</p>
						</div>
					</div>

					<div class="case-block case-block--accent">
						<h2 class="case-block__title">
							<span class="case-block__icon">🔍</span>
							Что было сделано
						</h2>
						<div class="case-block__content">
							<div class="case-steps">
								<div class="case-step">
									<div class="case-step__number">01</div>
									<div class="case-step__content">
										<h3>Анализ материалов дела</h3>
										<p>
											Изучили протокол ГИБДД, схему места ДТП и все
											документы по делу. Выявили отсутствие доказательной базы.
										</p>
									</div>
								</div>
								<div class="case-step">
									<div class="case-step__number">02</div>
									<div class="case-step__content">
										<h3>Запрос видеозаписей</h3>
										<p>
											Направили запросы в организацию, владневшую камерами
											видеонаблюдения на данном участке дороги.
										</p>
									</div>
								</div>
								<div class="case-step">
									<div class="case-step__number">03</div>
									<div class="case-step__content">
										<h3>Автотехническая экспертиза</h3>
										<p>
											Провели независимую экспертизу, которая установила
											невозможность определения виновника по представленным материалам.
										</p>
									</div>
								</div>
								<div class="case-step">
									<div class="case-step__number">04</div>
									<div class="case-step__content">
										<h3>Подготовка позиции</h3>
										<p>
											Грамотно изложили позицию в суде, указав на процессуальные
											нарушения и отсутствие доказательств вины.
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="case-block">
						<h2 class="case-block__title">
							<span class="case-block__icon">⚖️</span>
							Судебное решение
						</h2>
						<div class="case-block__content">
							<div class="case-verdict">
								<div class="case-verdict__badge">
									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
										<path d="M20 6L9 17l-5-5"/>
									</svg>
									Виновность не доказана
								</div>
								<p>
									Суд, изучив материалы дела и представленные доказательства,
									пришёл к выводу о <strong>недоказанности вины</strong> нашего клиента.
								</p>
								<p>
									Дело прекращено за отсутствием состава правонарушения.
									Клиент полностью оправдан и не понёс никаких санкций.
								</p>
							</div>
						</div>
					</div>
				</article>

				<aside class="case-sidebar">
					<div class="case-sidebar__card">
						<h3 class="case-sidebar__title">Детали кейса</h3>
						<div class="case-sidebar__info">
							<div class="case-sidebar__row">
								<span>Категория</span>
								<strong>Споры ГИБДД</strong>
							</div>
							<div class="case-sidebar__row">
								<span>Срок ведения</span>
								<strong>3 месяца</strong>
							</div>
							<div class="case-sidebar__row">
								<span>Результат</span>
								<strong class="success">Виновность не доказана</strong>
							</div>
						</div>
					</div>

					<div class="case-sidebar__card case-sidebar__card--lawyer">
						<div class="case-sidebar__lawyer-avatar">
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
								<circle cx="12" cy="7" r="4"/>
							</svg>
						</div>
						<h3>Автоюрист Сургут</h3>
						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
						<div class="case-sidebar__lawyer-stats">
							<div class="case-sidebar__lawyer-stat">
								<strong>{EXPERIENCE_YEARS}</strong>
								<span>лет опыта</span>
							</div>
							<div class="case-sidebar__lawyer-stat">
								<strong>500+</strong>
								<span>выигранных дел</span>
							</div>
						</div>
						<a href="/services" class="case-sidebar__lawyer-link">
							Все услуги
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
								<path d="M5 12h14"/>
								<path d="m12 5 7 7-7 7"/>
							</svg>
						</a>
					</div>

					<div class="case-sidebar__card case-sidebar__card--ad">
						<AdBanner
							width="300"
							height="470"
							className="ad-banner--vertical"
						/>
					</div>
				</aside>
			</div>
		</div>
	</section>
</div>

	<RelatedCases
		title="Другие кейсы"
		subtitle="ПОХОЖИЕ ДЕЛА"
		currentCaseId={4}
	/>
</Layout>

<style>
	.case-detail-page {
		font-family: 'Inter', system-ui, -apple-system, sans-serif;
	}

	.case-content {
		padding: 5rem 0;
		background: #f8fafc;
	}

	.case-grid {
		display: grid;
		grid-template-columns: 1fr 380px;
		gap: 3rem;
	}

	.case-block {
		background: #ffffff;
		border-radius: 16px;
		padding: 2.5rem;
		margin-bottom: 2rem;
		border: 1px solid #e2e8f0;
	}

	.case-block:last-child {
		margin-bottom: 0;
	}

	.case-block--accent {
		background: linear-gradient(135deg, #0a2540, #1e3050);
		border: none;
	}

	.case-block--accent .case-block__title {
		color: #eac26e;
	}

	.case-block--accent .case-block__content {
		color: rgba(255, 255, 255, 0.85);
	}

	.case-block--accent p {
		color: rgba(255, 255, 255, 0.85);
	}

	.case-block__title {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		font-size: 1.35rem;
		font-weight: 700;
		color: #0a2540;
		margin: 0 0 1.5rem 0;
	}

	.case-block__icon {
		font-size: 1.5rem;
	}

	.case-block__content p {
		color: #475569;
		font-size: 1rem;
		line-height: 1.7;
		margin: 0 0 1rem 0;
	}

	.case-block__content p:last-child {
		margin-bottom: 0;
	}

	.case-steps {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.case-step {
		display: flex;
		gap: 1.5rem;
		align-items: flex-start;
	}

	.case-step__number {
		width: 48px;
		height: 48px;
		background: rgba(234, 194, 110, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
		font-weight: 900;
		color: #eac26e;
		flex-shrink: 0;
	}

	.case-step__content h3 {
		color: #ffffff;
		font-size: 1.1rem;
		font-weight: 700;
		margin: 0 0 0.5rem 0;
	}

	.case-step__content p {
		color: rgba(255, 255, 255, 0.7);
		font-size: 0.9rem;
		line-height: 1.6;
		margin: 0;
	}

	.case-verdict {
		background: rgba(234, 194, 110, 0.08);
		border: 1px solid rgba(234, 194, 110, 0.2);
		border-radius: 12px;
		padding: 2rem;
	}

	.case-verdict__badge {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: #22c55e;
		color: #ffffff;
		padding: 0.5rem 1rem;
		border-radius: 6px;
		font-size: 0.9rem;
		font-weight: 700;
		margin-bottom: 1.5rem;
	}

	.case-verdict__badge svg {
		width: 18px;
		height: 18px;
	}

	.case-verdict p {
		color: #0a2540;
		font-size: 1rem;
		line-height: 1.7;
		margin: 0 0 1rem 0;
	}

	.case-sidebar {
		position: sticky;
		top: 100px;
		height: fit-content;
		display: flex;
		flex-direction: column;
	}

	.case-sidebar__card {
		background: #ffffff;
		border-radius: 16px;
		padding: 2rem;
		border: 1px solid #e2e8f0;
		margin-bottom: 1.5rem;
		flex-shrink: 0;
	}

	.case-sidebar__card:last-child {
		margin-bottom: 0;
		flex-grow: 1;
	}

	.case-sidebar__card--ad {
		display: flex;
		align-items: stretch;
		padding: 0;
		overflow: hidden;
	}

	.case-sidebar__card--ad :global(.ad-banner) {
		border: none;
		border-radius: 0;
		width: 100%;
	}

	.case-sidebar__title {
		font-size: 1.1rem;
		font-weight: 700;
		color: #0a2540;
		margin: 0 0 1.5rem 0;
		padding-bottom: 1rem;
		border-bottom: 2px solid #eac26e;
	}

	.case-sidebar__info {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.case-sidebar__row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.75rem 0;
		border-bottom: 1px solid #f1f5f9;
	}

	.case-sidebar__row:last-child {
		border-bottom: none;
	}

	.case-sidebar__row span {
		color: #64748b;
		font-size: 0.9rem;
	}

	.case-sidebar__row strong {
		color: #0a2540;
		font-weight: 600;
	}

	.case-sidebar__row strong.success {
		color: #22c55e;
	}

	.case-sidebar__card--lawyer {
		background: linear-gradient(135deg, #0a2540, #1e3050);
		text-align: center;
	}

	.case-sidebar__lawyer-avatar {
		width: 80px;
		height: 80px;
		background: rgba(234, 194, 110, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1rem;
		border: 3px solid #eac26e;
	}

	.case-sidebar__lawyer-avatar svg {
		width: 40px;
		height: 40px;
		color: #eac26e;
	}

	.case-sidebar__card--lawyer h3 {
		color: #ffffff;
		font-size: 1.1rem;
		font-weight: 700;
		margin: 0 0 0.25rem 0;
	}

	.case-sidebar__lawyer-name {
		color: #eac26e;
		font-size: 0.95rem;
		margin: 0 0 1.25rem 0;
	}

	.case-sidebar__lawyer-stats {
		display: flex;
		justify-content: center;
		gap: 1.5rem;
		margin-bottom: 1.5rem;
		padding: 1rem 0;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.case-sidebar__lawyer-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.case-sidebar__lawyer-stat strong {
		color: #ffffff;
		font-size: 1.5rem;
		font-weight: 800;
	}

	.case-sidebar__lawyer-stat span {
		color: rgba(255, 255, 255, 0.6);
		font-size: 0.75rem;
	}

	.case-sidebar__lawyer-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.75rem 1.5rem;
		background: transparent;
		border: 2px solid #eac26e;
		color: #eac26e;
		border-radius: 8px;
		font-size: 0.9rem;
		font-weight: 600;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.case-sidebar__lawyer-link:hover {
		background: #eac26e;
		color: #0a2540;
	}

	.case-sidebar__lawyer-link svg {
		width: 16px;
		height: 16px;
		transition: transform 0.3s ease;
	}

	.case-sidebar__lawyer-link:hover svg {
		transform: translateX(4px);
	}

	@media (max-width: 1024px) {
		.case-grid {
			grid-template-columns: 1fr;
		}

		.case-sidebar {
			position: static;
			display: grid;
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		.case-sidebar__card {
			margin-bottom: 0;
		}
	}

	@media (max-width: 768px) {
		.case-detail-page {
			padding: 0;
		}

		.case-content {
			padding: 2rem 0;
		}

		.case-grid {
			gap: 1.5rem;
		}

		.case-block {
			padding: 1.5rem;
			border-radius: 12px;
			border-left: none;
			border-right: none;
		}

		.case-block__title {
			justify-content: center;
		}

		.case-block__content {
			text-align: center;
		}

		.case-step {
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 0.75rem;
		}

		.case-sidebar {
			grid-template-columns: 1fr;
		}

		.case-sidebar__card {
			border-radius: 12px;
			border-left: none;
			border-right: none;
		}
	}

	@media (max-width: 480px) {
		.case-block {
			padding: 1.25rem;
		}

		.case-block__title {
			font-size: 1.15rem;
		}

		.case-block__content p {
			font-size: 0.9rem;
		}

		.case-step {
			flex-direction: column;
			text-align: center;
			gap: 0.75rem;
		}

		.case-step__number {
			width: 40px;
			height: 40px;
			font-size: 0.9rem;
		}

		.case-step__content h3 {
			font-size: 1rem;
		}

		.case-step__content p {
			font-size: 0.85rem;
		}

		.case-verdict {
			padding: 1.25rem;
		}

		.case-verdict__badge {
			font-size: 0.8rem;
			display: flex;
			justify-content: center;
		}

		.case-sidebar__title {
			font-size: 1rem;
			text-align: center;
		}

		.case-sidebar__row {
			font-size: 0.85rem;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;
			text-align: center;
		}

		.case-sidebar__lawyer-avatar {
			width: 60px;
			height: 60px;
		}

		.case-sidebar__lawyer-avatar svg {
			width: 30px;
			height: 30px;
		}

		.case-sidebar__lawyer-stat strong {
			font-size: 1.25rem;
		}
	}
</style>