---
import Layout from '@layouts/Layout.astro';
import { SITE_URL, COMPANY } from '@constants';
---

<Layout
	title="Политика конфиденциальности"
	description="Политика конфиденциальности сайта Автоюрист086 — как мы собираем, используем и защищаем персональные данные пользователей."
	canonicalLink={`${SITE_URL}/privacy`}
	breadcrumbs={[
		{ label: 'Главная', href: '/' },
		{ label: 'Политика конфиденциальности' }
	]}
>
	<div class="legal-page">
		<!-- Hero -->
		<header class="page-hero">
			<div class="hero-pattern"></div>
			<div class="hero-content">
				<div class="hero-badge">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
						<path d="m9 12 2 2 4-4"/>
					</svg>
					<span>Защита данных</span>
				</div>
				<h1>Политика конфиденциальности</h1>
				<p class="hero-desc">Как мы собираем, используем и защищаем ваши персональные данные</p>
				<span class="date-badge">Обновлено: 5 апреля 2026</span>
			</div>
		</header>

		<!-- Навигация -->
		<nav class="page-nav">
			<a href="#general" class="nav-link">Общие положения</a>
			<a href="#data" class="nav-link">Собираемые данные</a>
			<a href="#purposes" class="nav-link">Цели обработки</a>
			<a href="#security" class="nav-link">Защита данных</a>
			<a href="#third-party" class="nav-link">Третьи лица</a>
			<a href="#rights" class="nav-link">Ваши права</a>
			<a href="#cookies" class="nav-link">Cookie</a>
			<a href="#contacts" class="nav-link">Контакты</a>
		</nav>

		<!-- Контент -->
		<div class="content">
			<section id="general" class="content-block">
				<div class="block-header">
					<span class="block-number">01</span>
					<h2>Общие положения</h2>
				</div>
				<p>Настоящая Политика конфиденциальности определяет порядок обработки и защиты персональных данных пользователей сайта «Автоюрист086» (далее — Сайт). Мы уважаем вашу конфиденциальность и стремимся к обеспечению максимальной защиты ваших персональных данных в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».</p>
			</section>

			<section id="data" class="content-block">
				<div class="block-header">
					<span class="block-number">02</span>
					<h2>Какие данные мы собираем</h2>
				</div>
				<p>В процессе использования Сайта мы можем собирать следующие данные:</p>
				<ul class="data-list">
					<li class="data-item">
						<div class="data-icon">
							<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>
						<div>
							<strong>Имя и фамилия</strong>
							<span>для идентификации пользователя при обращении</span>
						</div>
					</li>
					<li class="data-item">
						<div class="data-icon">
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
						</div>
						<div>
							<strong>Номер телефона</strong>
							<span>для связи и предоставления консультации</span>
						</div>
					</li>
					<li class="data-item">
						<div class="data-icon">
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
						</div>
						<div>
							<strong>Email</strong>
							<span>для отправки информационных материалов</span>
						</div>
					</li>
					<li class="data-item">
						<div class="data-icon">
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
						</div>
						<div>
							<strong>Данные об обращении</strong>
							<span>описание ситуации для оценки перспектив дела</span>
						</div>
					</li>
					<li class="data-item">
						<div class="data-icon">
							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
						</div>
						<div>
							<strong>Технические данные</strong>
							<span>IP-адрес, тип браузера, файлы cookie</span>
						</div>
					</li>
				</ul>
			</section>

			<section id="purposes" class="content-block">
				<div class="block-header">
					<span class="block-number">03</span>
					<h2>Цели обработки данных</h2>
				</div>
				<p>Мы используем ваши персональные данные исключительно для:</p>
				<ul class="simple-list">
					<li>Предоставления юридических консультаций и услуг</li>
					<li>Связи с пользователем по его запросу</li>
					<li>Улучшения качества обслуживания</li>
					<li>Выполнения обязательств, вытекающих из соглашений с клиентом</li>
				</ul>
			</section>

			<section id="security" class="content-block">
				<div class="block-header">
					<span class="block-number">04</span>
					<h2>Защита данных</h2>
				</div>
				<p>Мы принимаем необходимые организационные и технические меры для защиты ваших персональных данных от несанкционированного доступа, изменения, раскрытия или уничтожения. Доступ к персональным данным имеют только уполномоченные сотрудники, обязанные соблюдать конфиденциальность.</p>
				<div class="security-badges">
					<div class="security-badge">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
						<span>Шифрование данных</span>
					</div>
					<div class="security-badge">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
						<span>Контроль доступа</span>
					</div>
					<div class="security-badge">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
						<span>Мониторинг 24/7</span>
					</div>
				</div>
			</section>

			<section id="third-party" class="content-block">
				<div class="block-header">
					<span class="block-number">05</span>
					<h2>Передача данных третьим лицам</h2>
				</div>
				<p>Мы не передаём ваши персональные данные третьим лицам, за исключением случаев, предусмотренных законодательством Российской Федерации, или когда это необходимо для исполнения обязательств перед пользователем (например, передача данных в суд при ведении дела).</p>
			</section>

			<section id="rights" class="content-block">
				<div class="block-header">
					<span class="block-number">06</span>
					<h2>Права пользователя</h2>
				</div>
				<p>Вы имеете право:</p>
				<ul class="simple-list">
					<li>Получить информацию о хранящихся у нас персональных данных</li>
					<li>Потребовать исправления неточных данных</li>
					<li>Потребовать удаления ваших данных (за исключением случаев, когда хранение обязательно по закону)</li>
					<li>Отозвать согласие на обработку персональных данных в любой момент</li>
				</ul>
			</section>

			<section id="cookies" class="content-block">
				<div class="block-header">
					<span class="block-number">07</span>
					<h2>Файлы cookie</h2>
				</div>
				<p>Сайт может использовать файлы cookie для улучшения качества обслуживания и персонализации контента. Вы можете настроить браузер на отказ от cookie, однако в этом случае некоторые функции Сайта могут работать некорректно.</p>
			</section>

			<section id="contacts" class="content-block highlight-block">
				<div class="block-header">
					<span class="block-number">08</span>
					<h2>Контактная информация</h2>
				</div>
				<p>По всем вопросам, связанным с обработкой персональных данных, обращайтесь:</p>
				<div class="contact-cards">
					<div class="contact-card">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
						<span>{COMPANY.address}</span>
					</div>
					<div class="contact-card">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
						<a href={`tel:${COMPANY.phoneClean}`}>{COMPANY.phone}</a>
					</div>
				</div>
			</section>
		</div>
	</div>
</Layout>

<style>
	/* Hero */
	.page-hero {
		position: relative;
		background: linear-gradient(135deg, #0a2540 0%, #162d47 50%, #1e3050 100%);
		padding: 4.5rem 2rem 3.5rem;
		text-align: center;
		overflow: hidden;
	}

	.hero-pattern {
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(ellipse 600px 400px at 50% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
		pointer-events: none;
	}

	.hero-pattern::after {
		content: '';
		position: absolute;
		inset: 0;
		opacity: 0.025;
		background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L0 20h8l12-12 12 12h8L20 0zm0 40L0 20h8l12 12 12-12h8L20 40z' fill='%23d4af37' fill-rule='evenodd'/%3E%3C/svg%3E");
	}

	.hero-content {
		position: relative;
		z-index: 2;
		max-width: 650px;
		margin: 0 auto;
	}

	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1.25rem;
		background: rgba(212, 175, 55, 0.1);
		border: 1px solid rgba(212, 175, 55, 0.25);
		border-radius: 100px;
		color: #d4af37;
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.5px;
		margin-bottom: 1.5rem;
	}

	.hero-badge svg {
		width: 16px;
		height: 16px;
	}

	.hero-content h1 {
		font-size: clamp(1.6rem, 4vw, 2.5rem);
		font-weight: 800;
		color: #ffffff;
		margin: 0 0 0.75rem;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}

	.hero-desc {
		color: rgba(255, 255, 255, 0.65);
		font-size: 1.05rem;
		margin-bottom: 1.5rem;
		line-height: 1.5;
	}

	.date-badge {
		display: inline-block;
		padding: 0.4rem 1rem;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		color: rgba(255, 255, 255, 0.5);
		font-size: 0.8rem;
	}

	/* Навигация */
	.page-nav {
		max-width: 860px;
		margin: -1.5rem auto 2.5rem;
		padding: 1.25rem 1.5rem;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		position: relative;
		z-index: 3;
	}

	.nav-link {
		padding: 0.5rem 1rem;
		color: #1e3050;
		font-size: 0.82rem;
		font-weight: 500;
		text-decoration: none;
		border-radius: 6px;
		transition: all 0.2s ease;
	}

	.nav-link:hover {
		background: rgba(212, 175, 55, 0.1);
		color: #b8951f;
	}

	/* Контент */
	.content {
		max-width: 860px;
		margin: 0 auto;
		padding: 0 1.5rem 4rem;
	}

	.content-block {
		background: #ffffff;
		border-radius: 12px;
		padding: 2rem;
		margin-bottom: 1.5rem;
		border: 1px solid #e8ecf1;
		transition: box-shadow 0.3s ease, border-color 0.3s ease;
	}

	.content-block:hover {
		border-color: rgba(212, 175, 55, 0.25);
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	}

	.block-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.25rem;
		padding-bottom: 1.25rem;
		border-bottom: 1px solid #f0f2f5;
	}

	.block-number {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		height: 36px;
		background: linear-gradient(135deg, #0a2540, #1e3050);
		color: #d4af37;
		font-size: 0.75rem;
		font-weight: 700;
		border-radius: 8px;
		letter-spacing: 0.5px;
	}

	.block-header h2 {
		font-size: 1.2rem;
		font-weight: 700;
		color: #1e3050;
		margin: 0;
	}

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

	/* Список данных */
	.data-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: 0.75rem;
	}

	.data-item {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
		padding: 1rem;
		background: #f8fafc;
		border-radius: 8px;
		transition: background 0.2s ease;
	}

	.data-item:hover {
		background: #f1f5f9;
	}

	.data-icon {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(234, 194, 110, 0.05));
		border-radius: 8px;
		color: #b8951f;
	}

	.data-icon svg {
		width: 18px;
		height: 18px;
	}

	.data-item strong {
		display: block;
		color: #1e3050;
		font-size: 0.9rem;
		margin-bottom: 0.15rem;
	}

	.data-item span {
		color: #64748b;
		font-size: 0.82rem;
	}

	/* Простой список */
	.simple-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: 0.6rem;
	}

	.simple-list li {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		color: #475569;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.simple-list li::before {
		content: '';
		flex-shrink: 0;
		width: 6px;
		height: 6px;
		background: #d4af37;
		border-radius: 50%;
		margin-top: 0.5rem;
	}

	/* Бейджи безопасности */
	.security-badges {
		display: flex;
		gap: 0.75rem;
		flex-wrap: wrap;
		margin-top: 1.25rem;
	}

	.security-badge {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.6rem 1rem;
		background: rgba(212, 175, 55, 0.06);
		border: 1px solid rgba(212, 175, 55, 0.15);
		border-radius: 8px;
		color: #1e3050;
		font-size: 0.82rem;
		font-weight: 500;
	}

	.security-badge svg {
		width: 16px;
		height: 16px;
		color: #b8951f;
	}

	/* Выделенный блок контактов */
	.highlight-block {
		background: linear-gradient(135deg, #0a2540, #1e3050);
		border: none;
		color: #ffffff;
	}

	.highlight-block .block-header {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}

	.highlight-block .block-number {
		background: rgba(212, 175, 55, 0.2);
	}

	.highlight-block .block-header h2 {
		color: #ffffff;
	}

	.highlight-block p {
		color: rgba(255, 255, 255, 0.7);
	}

	.contact-cards {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		margin-top: 1rem;
	}

	.contact-card {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 10px;
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.9rem;
		transition: all 0.2s ease;
	}

	.contact-card:hover {
		background: rgba(255, 255, 255, 0.1);
		border-color: rgba(212, 175, 55, 0.3);
	}

	.contact-card svg {
		width: 20px;
		height: 20px;
		color: #d4af37;
		flex-shrink: 0;
	}

	.contact-card a {
		color: #d4af37;
		text-decoration: none;
		font-weight: 600;
	}

	.contact-card a:hover {
		text-decoration: underline;
	}

	/* Адаптивность */
	@media (max-width: 768px) {
		.page-hero {
			padding: 3rem 1rem 3rem;
		}

		.page-nav {
			margin: -1rem 1rem 2rem;
			padding: 1rem;
			gap: 0.35rem;
		}

		.nav-link {
			font-size: 0.75rem;
			padding: 0.4rem 0.75rem;
		}

		.content {
			padding: 0 1rem 3rem;
		}

		.content-block {
			padding: 1.5rem;
		}

		.block-header {
			gap: 0.75rem;
		}

		.data-item {
			flex-direction: column;
			gap: 0.5rem;
		}

		.security-badges {
			flex-direction: column;
		}

		.contact-cards {
			flex-direction: column;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.content-block,
		.nav-link,
		.data-item,
		.contact-card {
			transition: none;
		}
	}
</style>