---
import Layout from '@layouts/Layout.astro';
import { SITE_URL, COMPANY } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import CTA from "@components/base/CTA.astro";
// Import child components with custom data
import AboutTabs from '@components/services/AboutTabs.astro';
import ArticlesList from '@components/services/ArticlesList.astro';
import WorkSteps from '@components/services/WorkSteps.astro';
import ServiceIncludes from '@components/services/ServiceIncludes.astro';
import AdvantagesList from '@components/services/AdvantagesList.astro';
import PricingPlans from '@components/services/PricingPlans.astro';
import FaqList from '@components/services/FaqList.astro';

// Custom data for license challenge service
const aboutTabsData = {
    problem: {
        title: "Лишение прав — не приговор",
        description: "Каждый год тысячи водителей лишаются прав <strong>незаконно</strong>. Судебная практика показывает, что до <strong>60% постановлений</strong> о лишении прав могут быть оспорены при грамотной защите.",
        description2: "Мы специализируемся именно на <strong>оспаривании лишения</strong> — находим нарушения в процедуре, анализируем доказательства ГИБДД и строим линию защиты для возврата ваших прав.",
        items: [
            "Нарушение порядка привлечения к ответственности",
            "Неправильная квалификация правонарушения",
            "Отсутствие достаточной доказательной базы"
        ],
        visualNumber: "60%",
        visualLabel: "постановлений можно оспорить",
        visualNote: "При условии своевременного обращения",
        barWidth: 60
    },
    approach: {
        title: "Системный подход к защите",
        description: "Каждое дело о лишении прав мы рассматриваем <strong>комплексно</strong>. Анализируем все материалы, ищем процессуальные нарушения и строим защиту на <strong>всех уровнях</strong>.",
        description2: "Наш опыт — это <strong>сотни выигранных дел</strong> в судах Сургута и ХМАО. Мы знаем практику судей и используем это для защиты ваших интересов.",
        items: [
            { icon: "📋", title: "Полный аудит дела", desc: "Изучаем все материалы от протокола до решения суда" },
            { icon: "⚖️", title: "Поиск нарушений", desc: "Находим процессуальные ошибки на каждом этапе" },
            { icon: "📹", title: "Работа с видео", desc: "Анализируем записи с регистраторов и камер" }
        ],
        steps: ["Обращение", "Аудит дела", "Жалоба", "Суд", "Победа"]
    },
    stats: {
        bigStat: { number: 85, label: "Дел выиграно", barWidth: 85 },
        stats: [
            { number: 350, label: "Успешных апелляций", suffix: "+" },
            { number: 12, label: "Лет в практике", suffix: "" },
            { number: 10, label: "Дней на подачу жалобы", suffix: "" },
            { number: 100, label: "Возврат при неудаче", suffix: "%" }
        ]
    },
    guarantees: {
        title: "Гарантируем результат",
        description: "Мы берёмся только за дела с <strong>реальными перспективами</strong>. Если шансов нет — скажем честно и не будем брать оплату.",
        description2: "Работаем <strong>по договору</strong> с прописанными гарантиями. Если не выиграем дело — <strong>вернём деньги</strong>.",
        items: [
            { title: "Честная оценка", desc: "Говорим о перспективах до начала работы" },
            { title: "Оплата за результат", desc: "Платите только при успешном исходе" },
            { title: "Договор", desc: "Фиксируем все условия юридически" },
            { title: "Возврат средств", desc: "Если дело проиграно — деньги ваши" }
        ]
    }
};

const articlesData = [
    { icon: "🍺", title: "Ст. 12.8 — Опьянение", desc: "Оспариваем результаты освидетельствования, проверяем законность направления на медосмотр.", chance: "Высокий шанс" },
    { icon: "🚫", title: "Ст. 12.26 — Отказ от осмотра", desc: "Анализируем законность требования об освидетельствовании, ищем ошибки в процедуре.", chance: "Средний шанс" },
    { icon: "🔄", title: "Ст. 12.15 — Встречная полоса", desc: "Проверяем правильность фиксации нарушения, анализируем разметку и знаки.", chance: "Высокий шанс" },
    { icon: "🚦", title: "Ст. 12.12 — Красный свет", desc: "Оспариваем работу камер, запрашиваем сертификаты оборудования.", chance: "Средний шанс" },
    { icon: "🚗", title: "Ст. 12.27 — Оставление ДТП", desc: "Доказываем отсутствие умысла, собираем смягчающие доказательства.", chance: "Зависит от дела" },
    { icon: "⚠️", title: "Другие статьи", desc: "Работаем со всеми статьями КоАП — анализируем каждое дело индивидуально.", chance: "Анализ дела" }
];

const stepsData = [
    { number: "01", title: "Экстренная консультация", desc: "Связываетесь с нами сразу после получения постановления. Оцениваем шансы, объясняем порядок действий." },
    { number: "02", title: "Глубокий анализ дела", desc: "Запрашиваем все материалы, изучаем протоколы, видео, показания. Ищем процессуальные нарушения." },
    { number: "03", title: "Подготовка апелляционной жалобы", desc: "Составляем мотивированную жалобу с ссылками на нарушения и судебную практику." },
    { number: "04", title: "Представительство в суде", desc: "Ведём дело в апелляционной инстанции. Доказываем незаконность лишения." },
    { number: "05", title: "Возврат прав", desc: "После отмены постановления помогаем с процедурой возврата водительских прав." }
];

const includesData = [
    { icon: "📄", title: "Анализ постановления", desc: "Изучаем законность и обоснованность решения суда" },
    { icon: "🔍", title: "Аудит материалов", desc: "Проверяем все протоколы, рапорты, видеозаписи" },
    { icon: "📝", title: "Апелляционная жалоба", desc: "Готовим мотивированную жалобу в вышестоящий суд" },
    { icon: "👨‍⚖️", title: "Защита в суде", desc: "Представляем ваши интересы в апелляционной инстанции" },
    { icon: "📹", title: "Видеоэкспертиза", desc: "Анализируем записи, запрашиваем оригиналы" },
    { icon: "✅", title: "Результат", desc: "Отмена постановления или возврат денег" }
];

const advantagesData = [
    { number: "01", title: "Специализация на апелляциях", desc: "Мы фокусируемся именно на оспаривании уже вынесенных постановлений. Это наша главная экспертиза." },
    { number: "02", title: "85% выигранных дел", desc: "Высокая статистка благодаря тщательному отбору дел и глубокому анализу материалов." },
    { number: "03", title: "Срочное реагирование", desc: "10 дней на апелляцию — это мало. Мы работаем быстро, чтобы не упустить срок." },
    { number: "04", title: "Без предоплаты", desc: "Оплата только после отмены постановления о лишении. Мы уверены в своей работе." },
    { number: "05", title: "Полное ведение дела", desc: "Вам не нужно ходить по судам. Мы делаем всё от подачи жалобы до получения прав." },
    { number: "06", title: "Связь 24/7", desc: "Всегда на связи. Информируем о каждом шаге и отвечаем на вопросы." }
];

const plansData = [
    { badge: "Экспресс", title: "Анализ + консультация", price: "Бесплатно", features: ["Анализ постановления", "Оценка перспектив", "Рекомендации", "Срочная консультация"], btnText: "Получить анализ", btnClass: "" },
    { badge: "Стандарт", title: "Апелляция под ключ", price: "от 20 000 ₽", features: ["Всё из Экспресс", "Подготовка жалобы", "Сбор доказательств", "Представительство в суде"], btnText: "Начать дело", btnClass: "gold", popular: true },
    { badge: "Премиум", title: "Сложные случаи", price: "от 35 000 ₽", features: ["Всё из Стандарта", "Видеоэкспертиза", "Дополнительные инстанции", "Приоритетная работа"], btnText: "Обсудить дело", btnClass: "" }
];

const faqsData = [
    { question: "Сколько времени есть на обжалование?", answer: "На обжалование постановления о лишении прав даётся <strong>10 дней</strong> с момента получения копии постановления. Пропуск срока возможен только по уважительным причинам." },
    { question: "Можно ли вернуть права если срок прошёл?", answer: "Да, есть возможность <strong>восстановить срок</strong> обжалования при уважительных причинах пропуска. Мы поможем подготовить ходатайство." },
    { question: "Каковы шансы на успех?", answer: "Статистика показывает, что около <strong>60% постановлений</strong> могут быть оспорены. Мы честно оценим перспективы после анализа дела." },
    { question: "Нужно ли присутствовать на суде?", answer: "<strong>Нет</strong>, мы работаем по доверенности. Ваше присутствие не требуется — мы ведём дело полностью самостоятельно." },
    { question: "Что если первая апелляция проиграна?", answer: "Есть возможность подачи <strong>кассационной жалобы</strong> в вышестоящий суд. Мы продолжаем борьбу до конца." },
    { question: "С чего начать?", answer: "<strong>Свяжитесь с нами</strong> как можно быстрее. Чем раньше мы начнём, тем больше шансов на успех. Первая консультация бесплатна." }
];
---

<Layout
	title="Оспаривание лишения прав — автоюрист в Сургуте"
	description="Профессиональное оспаривание постановления о лишении водительских прав. Апелляция, анализ дела, 85% успешных дел. Бесплатная консультация."
	canonicalLink={`${SITE_URL}/services/license-challenge`}
	breadcrumbs={[
		{ label: 'Главная', href: '/' },
		{ label: 'Услуги', href: '/services' },
		{ label: 'Оспаривание лишения' }
	]}
>
	<PageHero
		badgeText="ОСПАРИВАНИЕ ЛИШЕНИЯ"
		titleWhite="Отменим"
		titleGold="постановление о лишении"
		description="Оспариваем лишение прав в апелляционном суде. Анализируем материалы дела, находим нарушения. Бесплатная консультация и оценка перспектив."
		btnText="Бесплатная консультация"
		layout="with-image"
		sideImage="/images/services/office-table.avif"
		sideImageAlt="Юрист по оспариванию лишения"
		experienceBadge={{
			number: "85%",
			text: "УСПЕШНЫХ АПЕЛЛЯЦИЙ"
		}}
		bgImage="/images/services/servicesBg.avif"
		icon="shield"
	/>

	<div class="service-detail-page">
		<AboutTabs 
			tabsData={aboutTabsData}
			sectionLabel="Подробнее об услуге"
			sectionTitle="Всё об оспаривании лишения прав"
			sectionDesc="Полная информация об услуге оспаривания постановления о лишении прав"
		/>
		<ArticlesList 
			articles={articlesData}
			sectionLabel="Работаем со статьями"
			sectionTitle="Какие статьи КоАП оспариваем"
			sectionDesc="Оспариваем лишение по всем основным статьям КоАП РФ"
		/>
		<WorkSteps 
			steps={stepsData}
			sectionLabel="Этапы работы"
			sectionTitle="Как мы оспариваем лишение"
			sectionDesc="Прозрачный процесс от консультации до отмены постановления"
		/>
		<ServiceIncludes 
			includes={includesData}
			sectionLabel="Что входит"
			sectionTitle="Что входит в услугу"
			sectionDesc="Полный спектр работ по оспариванию вашего дела"
		/>
		<AdvantagesList 
			advantages={advantagesData}
			sectionLabel="Почему мы"
			sectionTitle="Преимущества работы с нами"
			sectionDesc="Доверьте оспаривание профессионалам с опытом в апелляциях"
		/>
		<PricingPlans 
			plans={plansData}
			sectionLabel="Стоимость"
			sectionTitle="Сколько стоит оспаривание"
			sectionDesc="Прозрачные цены без скрытых платежей"
		/>
		<FaqList 
			faqs={faqsData}
			sectionLabel="Вопросы"
			sectionTitle="Частые вопросы"
			sectionDesc="Ответы на популярные вопросы об оспаривании лишения"
		/>
		<CTA
			icon="consult"
			title="Отменим лишение прав"
			description="Позвоните или оставьте заявку. Бесплатный анализ постановления и оценка перспектив дела."
			btnText="Бесплатная консультация"
		/>
	</div>
</Layout>

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

	.site-container {
		max-width: var(--site-max-width, 1400px);
		margin: 0 auto;
	}

	section {
		padding: 5rem 1.5rem;
	}

	.section-header {
		text-align: center;
		margin-bottom: 3.5rem;
	}

	.section-label {
		display: inline-block;
		color: #eac26e;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 3px;
		margin-bottom: 1rem;
		padding: 0.5rem 1rem;
		background: rgba(234, 194, 110, 0.1);
		border-radius: 6px;
	}

	.section-label.center {
		display: flex;
		justify-content: center;
	}

	.section-header h2 {
		color: #0a2540;
		font-size: clamp(1.75rem, 3.5vw, 2.5rem);
		font-weight: 800;
		margin: 0 0 1rem 0;
		line-height: 1.2;
	}

	.section-desc {
		color: #64748b;
		font-size: 1.05rem;
		max-width: 650px;
		margin: 0 auto;
		line-height: 1.6;
	}

	@media (max-width: 768px) {
		section {
			padding: 3.5rem 1rem;
		}
		.section-header {
			margin-bottom: 2.5rem;
		}
	}

	@media (max-width: 480px) {
		section {
			padding: 2.5rem 0.75rem;
		}
	}
</style>

<script is:inline>
	// Анимации при скролле
	document.addEventListener('DOMContentLoaded', () => {
		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;
					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);
		});

		// Табы
		const tabButtons = document.querySelectorAll('.tab-btn');
		const tabPanels = document.querySelectorAll('.tab-panel');

		tabButtons.forEach(btn => {
			btn.addEventListener('click', () => {
				const tabId = btn.dataset.tab;

				// Убираем active со всех кнопок
				tabButtons.forEach(b => {
					b.classList.remove('active');
					b.setAttribute('aria-selected', 'false');
				});

				// Убираем active со всех панелей
				tabPanels.forEach(panel => {
					panel.classList.remove('active');
				});

				// Активируем нужный таб
				btn.classList.add('active');
				btn.setAttribute('aria-selected', 'true');

				const targetPanel = document.getElementById(`tab-${tabId}`);
				if (targetPanel) {
					targetPanel.classList.add('active');

					// Запускаем анимацию счётчиков если это таб статистики
					if (tabId === 'stats') {
						animateCounters(targetPanel);
					}
				}
			});
		});

		// Анимация счётчиков
		function animateCounters(panel) {
			const counters = panel.querySelectorAll('[data-count]');

			counters.forEach(counter => {
				const target = parseInt(counter.dataset.count || '0');
				const suffix = counter.textContent?.replace(/[0-9]/g, '') || '';
				const duration = 1500;
				const startTime = performance.now();

				const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);

				const update = (currentTime) => {
					const elapsed = currentTime - startTime;
					const progress = Math.min(elapsed / duration, 1);
					const easedProgress = easeOutCubic(progress);
					const currentValue = Math.round(easedProgress * target);

					counter.textContent = `${currentValue}${suffix}`;

					if (progress < 1) {
						requestAnimationFrame(update);
					}
				};

				requestAnimationFrame(update);
			});

			// Анимация полосок статистики
			const statBars = panel.querySelectorAll('[data-width]');
			statBars.forEach(bar => {
				const width = bar.dataset.width;
				setTimeout(() => {
					bar.style.width = `${width}%`;
				}, 200);
			});
		}
	});
</script>