---
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
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';
---

<Layout
	title="Защита до составления протокола — автоюрист в Сургуте"
	description="Юридическая помощь водителям с момента остановки инспектором. Контроль законности действий, фиксация нарушений, проверка протокола. Бесплатная консультация."
	canonicalLink={`${SITE_URL}/services/license-return`}
	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: "95%",
			text: "УСПЕШНЫХ ДЕЛ"
		}}
		bgImage="/images/services/servicesBg.avif"
		icon="shield"
	/>

	<div class="service-detail-page">
		<AboutTabs />
		<ArticlesList />
		<WorkSteps />
		<ServiceIncludes />
		<AdvantagesList />
		<PricingPlans />
		<FaqList />
		<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;
		}
	}

	/* AboutTabs стили */
	.about-section {
		background: #f8fafc;
	}

	.tabs-container {
		max-width: 1000px;
		margin: 0 auto;
	}

	.tabs-nav {
		display: flex;
		gap: 0.5rem;
		background: #ffffff;
		padding: 0.5rem;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
		margin-bottom: 2rem;
		flex-wrap: wrap;
	}

	.tab-btn {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.875rem 1.25rem;
		background: transparent;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s ease;
		color: #64748b;
		font-size: 0.9rem;
		font-weight: 600;
	}

	.tab-btn:hover {
		background: rgba(234, 194, 110, 0.1);
		color: #0a2540;
	}

	.tab-btn.active {
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		color: #0a2540;
		box-shadow: 0 4px 12px rgba(234, 194, 110, 0.3);
	}

	.tab-icon {
		font-size: 1.25rem;
	}

	.tab-text {
		white-space: nowrap;
	}

	.tabs-content {
		background: #ffffff;
		border-radius: 16px;
		padding: 2.5rem;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	}

	.tab-panel {
		display: none;
	}

	.tab-panel.active {
		display: block;
	}

	.tab-grid {
		display: grid;
		grid-template-columns: 1.2fr 0.8fr;
		gap: 2.5rem;
		align-items: start;
	}

	.tab-text h3 {
		color: #0a2540;
		font-size: 1.5rem;
		font-weight: 800;
		margin: 0 0 1.25rem 0;
		line-height: 1.3;
	}

	.tab-text p {
		color: #475569;
		font-size: 0.95rem;
		line-height: 1.7;
		margin-bottom: 1rem;
	}

	.tab-text strong {
		color: #0a2540;
		font-weight: 700;
	}

	.problem-list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-top: 1.5rem;
	}

	.problem-item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		background: #f8fafc;
		border-radius: 8px;
		color: #0a2540;
		font-size: 0.9rem;
		font-weight: 500;
	}

	.problem-item svg {
		width: 20px;
		height: 20px;
		color: #eac26e;
		flex-shrink: 0;
	}

	.tab-visual {
		max-width: 100%;
	}

	.visual-card {
		background: linear-gradient(135deg, #0a2540, #1e3050);
		border-radius: 12px;
		padding: 2rem;
		color: #ffffff;
	}

	.visual-number {
		font-size: 3rem;
		font-weight: 900;
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		line-height: 1;
		margin-bottom: 0.75rem;
	}

	.visual-label {
		font-size: 1rem;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 1.5rem;
	}

	.visual-bar {
		height: 8px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 1rem;
	}

	.visual-bar-fill {
		height: 100%;
		background: linear-gradient(90deg, #eac26e, #ce9f40);
		border-radius: 4px;
		transition: width 1s ease;
	}

	.visual-note {
		font-size: 0.85rem;
		color: rgba(255, 255, 255, 0.6);
		padding-top: 1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.approach-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: 1.5rem;
	}

	.approach-item {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
	}

	.approach-icon {
		font-size: 1.75rem;
		flex-shrink: 0;
	}

	.approach-info {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.approach-info strong {
		color: #0a2540;
		font-size: 0.95rem;
	}

	.approach-info span {
		color: #64748b;
		font-size: 0.85rem;
	}

	.steps-mini {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-bottom: 1.25rem;
	}

	.step-mini {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		color: rgba(255, 255, 255, 0.7);
		font-size: 0.9rem;
	}

	.step-mini-num {
		width: 32px;
		height: 32px;
		background: rgba(234, 194, 110, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		color: #eac26e;
		flex-shrink: 0;
	}

	.step-mini.active .step-mini-num {
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		color: #0a2540;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	.stat-big-card {
		grid-column: 1 / -1;
		background: linear-gradient(135deg, #0a2540, #1e3050);
		border-radius: 12px;
		padding: 2.5rem;
		text-align: center;
	}

	.stat-big-number {
		font-size: 4rem;
		font-weight: 900;
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		line-height: 1;
		margin-bottom: 0.5rem;
	}

	.stat-big-label {
		font-size: 1.1rem;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 1.5rem;
	}

	.stat-bar {
		height: 12px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		overflow: hidden;
	}

	.stat-bar-fill {
		height: 100%;
		background: linear-gradient(90deg, #eac26e, #ce9f40);
		border-radius: 6px;
		transition: width 1.5s ease;
		width: 0%;
	}

	.stat-card {
		background: #f8fafc;
		border-radius: 12px;
		padding: 1.5rem;
		text-align: center;
		border: 1px solid #e2e8f0;
	}

	.stat-number {
		font-size: 2rem;
		font-weight: 800;
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		line-height: 1;
		margin-bottom: 0.5rem;
	}

	.stat-label {
		font-size: 0.85rem;
		color: #64748b;
	}

	.guarantees-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: 1.5rem;
	}

	.guarantee-item {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
	}

	.guarantee-check {
		width: 36px;
		height: 36px;
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.guarantee-check svg {
		width: 18px;
		height: 18px;
		color: #0a2540;
	}

	.guarantee-item strong {
		display: block;
		color: #0a2540;
		font-size: 0.95rem;
		margin-bottom: 0.15rem;
	}

	.guarantee-item span {
		color: #64748b;
		font-size: 0.85rem;
	}

	.guarantee-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		min-height: 280px;
	}

	.guarantee-shield {
		width: 80px;
		height: 80px;
		background: rgba(234, 194, 110, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5rem;
	}

	.guarantee-shield svg {
		width: 40px;
		height: 40px;
		color: #eac26e;
	}

	.guarantee-text {
		font-size: 1.25rem;
		font-weight: 800;
		color: #eac26e;
		margin-bottom: 0.5rem;
	}

	.guarantee-subtext {
		font-size: 0.9rem;
		color: rgba(255, 255, 255, 0.6);
	}

	/* Articles стили */
	.articles-section {
		background: #ffffff;
	}

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

	.article-card {
		background: #f8fafc;
		border-radius: 12px;
		padding: 1.75rem;
		border: 1px solid #e2e8f0;
		transition: all 0.3s ease;
	}

	.article-card:hover {
		border-color: rgba(234, 194, 110, 0.3);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		transform: translateY(-4px);
	}

	.article-card .article-icon {
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	.article-card h3 {
		color: #0a2540;
		font-size: 1.1rem;
		font-weight: 700;
		margin: 0 0 0.75rem 0;
	}

	.article-card p {
		color: #64748b;
		font-size: 0.9rem;
		line-height: 1.6;
		margin-bottom: 1rem;
	}

	.article-chance {
		display: inline-block;
		padding: 0.4rem 0.75rem;
		background: rgba(234, 194, 110, 0.1);
		color: #ce9f40;
		border-radius: 6px;
		font-size: 0.8rem;
		font-weight: 600;
	}

	/* WorkSteps стили */
	.steps-section {
		background: linear-gradient(135deg, #0a2540 0%, #1e3050 100%);
		color: #ffffff;
	}

	.steps-section .section-header h2 {
		color: #ffffff;
	}

	.steps-section .section-desc {
		color: rgba(255, 255, 255, 0.7);
	}

	.steps-section .section-label {
		color: #eac26e;
		background: rgba(234, 194, 110, 0.1);
	}

	.steps-timeline {
		max-width: 800px;
		margin: 0 auto;
		position: relative;
	}

	.steps-timeline::before {
		content: '';
		position: absolute;
		left: 32px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: linear-gradient(to bottom, #eac26e, rgba(234, 194, 110, 0.1));
	}

	.step-item {
		display: flex;
		gap: 2rem;
		margin-bottom: 2.5rem;
		position: relative;
	}

	.step-item:last-child {
		margin-bottom: 0;
	}

	.step-item .step-number {
		width: 64px;
		height: 64px;
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		font-weight: 900;
		color: #0a2540;
		flex-shrink: 0;
		position: relative;
		z-index: 2;
		box-shadow: 0 8px 20px rgba(234, 194, 110, 0.3);
	}

	.step-content h3 {
		color: #eac26e;
		font-size: 1.25rem;
		font-weight: 700;
		margin: 0 0 0.5rem 0;
	}

	.step-content p {
		color: rgba(255, 255, 255, 0.7);
		font-size: 0.95rem;
		line-height: 1.6;
		margin: 0;
	}

	/* ServiceIncludes стили */
	.includes-section {
		background: #f8fafc;
	}

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

	.include-item {
		background: #ffffff;
		border-radius: 12px;
		padding: 1.75rem;
		border: 1px solid #e2e8f0;
		text-align: center;
		transition: all 0.3s ease;
	}

	.include-item:hover {
		border-color: rgba(234, 194, 110, 0.3);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		transform: translateY(-4px);
	}

	.include-item .include-icon {
		width: 56px;
		height: 56px;
		margin: 0 auto 1.25rem;
		background: linear-gradient(135deg, #0a2540, #1e3050);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.include-item .include-icon span {
		font-size: 1.75rem;
	}

	.include-item h4 {
		color: #0a2540;
		font-size: 1.05rem;
		font-weight: 700;
		margin: 0 0 0.5rem 0;
	}

	.include-item p {
		color: #64748b;
		font-size: 0.9rem;
		line-height: 1.5;
		margin: 0;
	}

	/* AdvantagesList стили */
	.advantages-section {
		background: #ffffff;
	}

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

	.advantage-card {
		background: linear-gradient(135deg, #0a2540, #1e3050);
		border-radius: 12px;
		padding: 2rem;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.advantage-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 30px rgba(10, 37, 64, 0.3);
	}

	.advantage-number {
		font-size: 2.5rem;
		font-weight: 900;
		color: rgba(234, 194, 110, 0.1);
		position: absolute;
		top: 1rem;
		right: 1rem;
	}

	.advantage-card h3 {
		color: #eac26e;
		font-size: 1.1rem;
		font-weight: 700;
		margin: 0 0 0.75rem 0;
	}

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

	/* PricingPlans стили */
	.pricing-section {
		background: #f8fafc;
	}

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

	.pricing-card {
		background: #ffffff;
		border-radius: 16px;
		padding: 2.5rem 2rem;
		border: 1px solid #e2e8f0;
		text-align: center;
		transition: all 0.3s ease;
		position: relative;
	}

	.pricing-card:hover {
		border-color: rgba(234, 194, 110, 0.3);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
		transform: translateY(-4px);
	}

	.pricing-card.featured {
		border-color: #eac26e;
		box-shadow: 0 12px 30px rgba(234, 194, 110, 0.2);
	}

	.pricing-badge {
		display: inline-block;
		padding: 0.4rem 1rem;
		background: rgba(10, 37, 64, 0.1);
		color: #0a2540;
		border-radius: 100px;
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 1.25rem;
	}

	.pricing-badge.popular {
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		color: #0a2540;
	}

	.pricing-card h3 {
		color: #0a2540;
		font-size: 1.25rem;
		font-weight: 700;
		margin: 0 0 1rem 0;
	}

	.price {
		margin-bottom: 1.5rem;
	}

	.price-value {
		font-size: 2rem;
		font-weight: 800;
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.pricing-features {
		list-style: none;
		padding: 0;
		margin: 0 0 2rem 0;
		text-align: left;
	}

	.pricing-features li {
		padding: 0.5rem 0;
		color: #475569;
		font-size: 0.9rem;
		position: relative;
		padding-left: 1.5rem;
	}

	.pricing-features li::before {
		content: '✓';
		position: absolute;
		left: 0;
		color: #eac26e;
		font-weight: 700;
	}

	.pricing-btn {
		display: inline-block;
		padding: 0.875rem 2rem;
		background: linear-gradient(135deg, #0a2540, #1e3050);
		color: #eac26e;
		border-radius: 8px;
		text-decoration: none;
		font-weight: 700;
		font-size: 0.95rem;
		transition: all 0.3s ease;
		border: 1px solid rgba(234, 194, 110, 0.3);
	}

	.pricing-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(10, 37, 64, 0.3);
	}

	.pricing-btn.gold {
		background: linear-gradient(135deg, #eac26e, #ce9f40);
		color: #0a2540;
		border: none;
	}

	.pricing-btn.gold:hover {
		box-shadow: 0 8px 20px rgba(234, 194, 110, 0.4);
	}

	/* FaqList стили */
	.faq-section {
		background: #ffffff;
	}

	.faq-list {
		max-width: 800px;
		margin: 0 auto;
	}

	.faq-item {
		border-bottom: 1px solid #e2e8f0;
	}

	.faq-item summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.5rem 0;
		cursor: pointer;
		list-style: none;
	}

	.faq-item summary::-webkit-details-marker {
		display: none;
	}

	.faq-question {
		color: #0a2540;
		font-size: 1.05rem;
		font-weight: 600;
		flex: 1;
	}

	.faq-icon {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		color: #eac26e;
		transition: transform 0.3s ease;
	}

	.faq-item[open] .faq-icon {
		transform: rotate(180deg);
	}

	.faq-answer {
		padding: 0 0 1.5rem 0;
	}

	.faq-answer p {
		color: #475569;
		font-size: 0.95rem;
		line-height: 1.7;
		margin: 0;
	}

	.faq-answer strong {
		color: #0a2540;
	}

	/* Анимации */
	.animate-on-scroll {
		opacity: 0;
		will-change: opacity, transform;
	}

	[data-animation="fade-up"] {
		transform: translateY(30px);
		transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.animate-on-scroll.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Адаптивность */
	@media (max-width: 1024px) {
		.tab-grid {
			grid-template-columns: 1fr;
		}

		.tab-visual {
			position: static;
		}

		.stats-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.articles-grid,
		.includes-grid,
		.advantages-grid,
		.pricing-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		.tabs-nav {
			flex-direction: column;
			gap: 0.35rem;
		}

		.tab-btn {
			justify-content: flex-start;
			padding: 0.75rem 1rem;
		}

		.tabs-content {
			padding: 1.5rem;
		}

		.tab-grid {
			gap: 1.5rem;
		}

		.stat-big-number {
			font-size: 3rem;
		}

		.stats-grid,
		.articles-grid,
		.includes-grid,
		.advantages-grid,
		.pricing-grid {
			grid-template-columns: 1fr;
		}

		.steps-timeline::before {
			left: 28px;
		}

		.step-item .step-number {
			width: 56px;
			height: 56px;
			font-size: 1rem;
		}

		.step-item {
			gap: 1.5rem;
		}

		.pricing-card.featured {
			order: -1;
		}
	}

	@media (max-width: 480px) {
		.step-item {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.steps-timeline::before {
			display: none;
		}
	}
</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>
