---
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 accident help service
const aboutTabsData = {
    problem: {
        title: "Первые минуты после ДТП решают всё",
        description: "В первые минуты после ДТП <strong>водители в стрессе</strong> и часто допускают ошибки: признают вину, неправильно оформляют документы, <strong>не фиксируют доказательства</strong>. Эти ошибки потом <strong>невозможно исправить</strong> в суде.",
        description2: "Наш юрист <strong>оперативно выезжает на место ДТП</strong>, фиксирует нарушения второй стороны, защищает вас при опросе инспектором и <strong>помогает правильно оформить документы</strong>. Это спасает от лишения прав и несправедливой вины.",
        items: [
            "Признание вины под давлением на месте ДТП",
            "Неправильное оформление документов",
            "Отсутствие фиксации доказательств"
        ],
        visualNumber: "80%",
        visualLabel: "дел решаются на месте ДТП",
        visualNote: "При юристе на месте — до 90% шансов на справедливый исход",
        barWidth: 80
    },
    approach: {
        title: "Оперативная защита на месте",
        description: "Мы обеспечиваем <strong>юридическую защиту с первых минут</strong> после ДТП. Юрист выезжает на место, контролирует правильность оформления, <strong>фиксирует нарушения второй стороны</strong> и защищает ваши права при общении с инспекторами.",
        description2: "Наш опыт — это <strong>сотни спасённых дел</strong> благодаря присутствию на месте ДТП. Мы знаем, <strong>как правильно зафиксировать</strong> доказательства и защитить вас от несправедливой вины.",
        items: [
            { icon: "🚗", title: "Оперативный выезд", desc: "Приезжаем на место ДТП в течение 30 минут" },
            { icon: "📋", title: "Фиксация нарушений", desc: "Записываем все нарушения второй стороны" },
            { icon: "📹", title: "Видеофиксация", desc: "Снимаем всё: повреждения, следы, показания" }
        ],
        steps: ["Звонок юристу", "Выезд на место", "Защита при опросе", "Фиксация нарушений", "Правильное оформление"]
    },
    stats: {
        bigStat: { number: 90, label: "Клиентов защищены на месте", barWidth: 90 },
        stats: [
            { number: 600, label: "Выездов на место ДТП", suffix: "+" },
            { number: 10, label: "Лет практики", suffix: "" },
            { number: 30, label: "Минут — среднее время выезда", suffix: " мин" },
            { number: 100, label: "Возврат при неудаче", suffix: "%" }
        ]
    },
    guarantees: {
        title: "Работаем на результат",
        description: "Мы обеспечиваем <strong>максимальную защиту</strong> уже на месте ДТП. После выезда юриста честно скажем, <strong>как правильно действовать</strong> и что делать дальше.",
        description2: "Работаем <strong>без предоплаты</strong> — оплата только после результата. Если защита на месте не помогла — <strong>предложим стратегию</strong> на следующих этапах.",
        items: [
            { title: "Оперативный выезд", desc: "Приезжаем на место в течение 30 минут" },
            { title: "Оплата за результат", desc: "Платите только после защиты на месте" },
            { title: "Договор", desc: "Фиксируем все условия юридически" },
            { title: "Связь 24/7", desc: "На связи круглосуточно для экстренных случаев" }
        ]
    }
};

const articlesData = [
    { icon: "🚗", title: "Столкновение автомобилей", desc: "Защищаем на месте, фиксируем повреждения, помогаем правильно оформить документы.", chance: "Высокий шанс" },
    { icon: "🚶", title: "Наезд на пешехода", desc: "Защищаем водителя, фиксируем обстоятельства, контролируем опрос инспектором.", chance: "Высокий шанс" },
    { icon: "🏗️", title: "ДТП с препятствием", desc: "Фиксируем повреждения, дорожные условия, помогаем с оформлением.", chance: "Средний шанс" },
    { icon: "🔄", title: "ДТП на перекрёстке", desc: "Определяем виновного, фиксируем приоритет, собираем показания свидетелей.", chance: "Высокий шанс" },
    { icon: "📹", title: "Отсутствие видеозаписи", desc: "Если нет регистратора — фиксируем всё сами: следы, повреждения, показания.", chance: "Средний шанс" },
    { icon: "⚠️", title: "Другие ситуации", desc: "Работаем с любыми ДТП — помогаем правильно оформить и защитить свои права.", chance: "Зависит от дела" }
];

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

const includesData = [
    { icon: "📞", title: "Экстренная связь 24/7", desc: "На связи круглосуточно для вызова на место ДТП" },
    { icon: "🚗", title: "Выезд на место", desc: "Приезжаем в течение 30 минут после звонка" },
    { icon: "📋", title: "Защита при опросе", desc: "Контролируем правильность опроса инспектором" },
    { icon: "📹", title: "Видеофиксация", desc: "Снимаем все обстоятельства ДТП для доказательств" },
    { icon: "📝", title: "Помощь с документами", desc: "Помогаем правильно оформить протокол и схемы" },
    { icon: "✅", title: "Результат", desc: "Правильное оформление и защита прав на месте" }
];

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

const plansData = [
    { badge: "Экстренный", title: "Консультация по телефону", price: "Бесплатно", features: ["Экстренная консультация", "Рекомендации на месте", "Оценка ситуации", "Инструкции по действиям"], btnText: "Позвонить сейчас", btnClass: "" },
    { badge: "Стандарт", title: "Выезд на место ДТП", price: "от 8 000 ₽", features: ["Выезд в течение 30 минут", "Защита при опросе", "Фиксация нарушений", "Помощь с документами"], btnText: "Вызвать юриста", btnClass: "gold", popular: true },
    { badge: "Премиум", title: "Полное сопровождение", price: "от 15 000 ₽", features: ["Всё из Стандарта", "Дальнейшая защита в суде", "Работа со страховой", "Приоритетная поддержка"], btnText: "Обсудить дело", btnClass: "" }
];

const faqsData = [
    { question: "Что делать сразу после ДТП?", answer: "Сразу <strong>позвоните нам</strong>. Не признавайте вину, не подписывайте документы без консультации. Мы выезжаем на место в течение 30 минут." },
    { question: "Как быстро вы приедете?", answer: "Наш специалист приезжает в течение <strong>30 минут</strong> после звонка. Работаем по всему Сургуту и пригороду." },
    { question: "Можно ли признать вину на месте?", answer: "<strong>Нет</strong>, не признавайте вину до консультации с юристом. Даже извинения могут быть использованы против вас." },
    { question: "Нужно ли фотографировать место ДТП?", answer: "<strong>Да</strong>, снимайте всё: повреждения обеих машин, следы торможения, дорожные знаки, светофоры. Но лучше дождитесь юриста." },
    { question: "Что если я вызвал ГИБДД без юриста?", answer: "<strong>Позвоните нам</strong> даже после вызова ГИБДД. Мы приедем и защитим вас при опросе и оформлении документов." },
    { question: "Сколько стоит выезд на место?", answer: "Выезд на место стоит <strong>от 8 000 ₽</strong>. Это включает защиту при опросе, фиксацию нарушений и помощь с документами." }
];
---

<Layout
	title="Помощь при ДТП — автоюрист в Сургуте"
	description="Оперативный выезд на место ДТП. Фиксация нарушений, защита при опросе, помощь с документами. 90% клиентов защищены на месте. Экстренная связь 24/7."
	canonicalLink={`${SITE_URL}/services/accident-help`}
	breadcrumbs={[
		{ label: 'Главная', href: '/' },
		{ label: 'Услуги', href: '/services' },
		{ label: 'Помощь при ДТП' }
	]}
>
	<PageHero
		badgeText="ПОМОЩЬ ПРИ ДТП"
		titleWhite="Защитим"
		titleGold="на месте ДТП"
		description="Оперативный выезд на место ДТП. Фиксация нарушений, защита при опросе, помощь с документами. Экстренная связь 24/7."
		btnText="Вызвать юриста"
		layout="with-image"
		sideImage="/images/services/office-table.avif"
		sideImageAlt="Юрист на месте ДТП"
		experienceBadge={{
			number: "90%",
			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="Ответы на популярные вопросы о помощи при ДТП"
		/>
	</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>
