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

<Layout
	title="Условия использования"
	description="Условия использования сайта Автоюрист086 — правила, ограничения и ответственность при использовании материалов сайта."
	canonicalLink={`${SITE_URL}/terms`}
	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="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>
					<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="#info" class="nav-link">Информация</a>
			<a href="#materials" class="nav-link">Материалы</a>
			<a href="#consultations" class="nav-link">Консультации</a>
			<a href="#responsibility" class="nav-link">Ответственность</a>
			<a href="#personal-data" class="nav-link">Персональные данные</a>
			<a href="#changes" class="nav-link">Изменения</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» (далее — Сайт). Используя Сайт, вы подтверждаете своё согласие с настоящими Условиями. Если вы не согласны с какими-либо положениями, пожалуйста, прекратите использование Сайта.</p>
			</section>

			<section id="info" class="content-block">
				<div class="block-header">
					<span class="block-number">02</span>
					<h2>Информация на Сайте</h2>
				</div>
				<p>Все материалы Сайта носят исключительно информационный характер и не являются публичной офертой. Информация не заменяет полноценную юридическую консультацию. Мы прилагаем усилия для обеспечения актуальности и точности данных, однако не гарантируем их полноту и безошибочность.</p>
			</section>

			<section id="materials" class="content-block">
				<div class="block-header">
					<span class="block-number">03</span>
					<h2>Использование материалов</h2>
				</div>
				<p>Все материалы Сайта, включая тексты, изображения, логотипы и графические элементы, защищены законодательством об авторском праве.</p>
				<div class="info-cards">
					<div class="info-card allowed">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
						<div>
							<strong>Допустимо</strong>
							<span>Личное некоммерческое использование</span>
						</div>
					</div>
					<div class="info-card forbidden">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
						<div>
							<strong>Запрещено</strong>
							<span>Копирование без согласия правообладателя</span>
						</div>
					</div>
				</div>
			</section>

			<section id="consultations" class="content-block">
				<div class="block-header">
					<span class="block-number">04</span>
					<h2>Консультации</h2>
				</div>
				<p>Первичная консультация на Сайте проводится бесплатно и носит оценочный характер. Точные сроки, стоимость и перспективы дела определяются после изучения документов и обстоятельств конкретного случая. Окончательное решение о сотрудничестве принимается по обоюдному согласию сторон.</p>
			</section>

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

			<section id="personal-data" class="content-block">
				<div class="block-header">
					<span class="block-number">06</span>
					<h2>Персональные данные</h2>
				</div>
				<p>Обработка персональных данных пользователей осуществляется в соответствии с <a href="/privacy">Политикой конфиденциальности</a>. Оставляя свои данные на Сайте, вы даёте согласие на их обработку.</p>
			</section>

			<section id="changes" class="content-block">
				<div class="block-header">
					<span class="block-number">07</span>
					<h2>Изменение условий</h2>
				</div>
				<p>Администрация Сайта оставляет за собой право вносить изменения в настоящие Условия в любое время без предварительного уведомления. Новая редакция вступает в силу с момента публикации на Сайте. Рекомендуем периодически просматривать данную страницу для отслеживания изменений.</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>г. Сургут, ул. Мира, 15</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:+73462000000">+7 (3462) 00-00-00</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;
	}

	.content-block a {
		color: #d4af37;
		text-decoration: underline;
		transition: color 0.2s ease;
	}

	.content-block a:hover { color: #b8951f; }

	/* Карточки допустимо/запрещено */
	.info-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		margin-top: 1.25rem;
	}

	.info-card {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		border-radius: 10px;
	}

	.info-card svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

	.allowed {
		background: rgba(34, 197, 94, 0.06);
		border: 1px solid rgba(34, 197, 94, 0.2);
	}

	.allowed svg { color: #16a34a; }

	.forbidden {
		background: rgba(239, 68, 68, 0.06);
		border: 1px solid rgba(239, 68, 68, 0.2);
	}

	.forbidden svg { color: #dc2626; }

	.info-card strong {
		display: block;
		font-size: 0.88rem;
		margin-bottom: 0.2rem;
	}

	.info-card 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;
	}

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

	.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; }

		.info-cards { grid-template-columns: 1fr; }

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

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