astro_avtourist/frontend/src/pages/contacts.astro

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

// Логика авторизации (пока статичная переменная)
const isAuthorized = false; // Измените на true, чтобы увидеть форму
---

<Layout
	title="Контакты — автоюрист в Сургуте"
	description="Свяжитесь с нами для консультации по вопросам автоспоров и юридической помощи автовладельцам."
	canonicalLink={`${SITE_URL}/contacts`}
>
	<!-- Hero-секция -->
	<section class="contacts-hero">
		<div class="site-container">
			<div class="hero-content">
				<div class="badge animate-on-scroll" data-animation="fade-up">
					<span class="status-dot"></span>
					БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ
				</div>
				<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
					Свяжитесь <span class="text-gold">с нами</span>
				</h1>
				<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
					Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно.
				</p>
			</div>
		</div>
	</section>

	<!-- Карточки контактов -->
	<section class="contact-cards">
		<div class="site-container">
			<div class="cards-grid">
				<!-- Телефон -->
				<div class="contact-card animate-on-scroll" data-animation="fade-up" data-delay="100">
					<div class="card-icon phone">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
						</svg>
					</div>
					<h3 class="card-title">Телефон</h3>
					<a href={`tel:${COMPANY.phone.replace(/\s/g, '')}`} class="card-link">
						{COMPANY.phone}
					</a>
					<p class="card-description">Звоните в рабочее время</p>
				</div>

				<!-- Email -->
				<div class="contact-card animate-on-scroll" data-animation="fade-up" data-delay="200">
					<div class="card-icon email">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<rect width="20" height="16" x="2" y="4" rx="2"></rect>
							<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
						</svg>
					</div>
					<h3 class="card-title">Email</h3>
					<a href={`mailto:${COMPANY.email}`} class="card-link">
						{COMPANY.email}
					</a>
					<p class="card-description">Ответим в течение 24 часов</p>
				</div>

				<!-- Адрес и часы -->
				<div class="contact-card animate-on-scroll" data-animation="fade-up" data-delay="300">
					<div class="card-icon location">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
							<circle cx="12" cy="10" r="3"></circle>
						</svg>
					</div>
					<h3 class="card-title">Адрес</h3>
					<p class="card-text">{COMPANY.address}</p>
					<div class="work-hours">
						<svg xmlns="http://www.w3.org/2000/svg" class="hours-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<circle cx="12" cy="12" r="10"></circle>
							<polyline points="12 6 12 12 16 14"></polyline>
						</svg>
						<span>{COMPANY.workHours}</span>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Форма обратной связи -->
	<section class="contact-form-section">
		<div class="site-container">
			<div class="form-header">
				<h2 class="section-title animate-on-scroll" data-animation="fade-up">
					Напишите <span class="text-gold">нам</span>
				</h2>
				<p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="100">
					Опишите вашу ситуацию — мы ответим в ближайшее время
				</p>
			</div>

			{isAuthorized ? (
				<form class="contact-form animate-on-scroll" data-animation="fade-up" data-delay="200" action="#" method="POST" id="contact-form">
					<div class="form-row">
						<div class="form-group">
							<label for="contact-name" class="form-label">Ваше имя *</label>
							<input
								type="text"
								id="contact-name"
								name="name"
								class="form-input"
								placeholder="Иван Иванов"
								required
							/>
						</div>
						<div class="form-group">
							<label for="contact-phone" class="form-label">Телефон *</label>
							<input
								type="tel"
								id="contact-phone"
								name="phone"
								class="form-input"
								placeholder="+7 (___) ___-__-__"
								required
							/>
						</div>
					</div>

					<div class="form-group">
						<label for="contact-email" class="form-label">Email</label>
						<input
							type="email"
							id="contact-email"
							name="email"
							class="form-input"
							placeholder="example@mail.ru"
						/>
					</div>

					<div class="form-group">
						<label for="contact-message" class="form-label">Сообщение *</label>
						<textarea
							id="contact-message"
							name="message"
							class="form-textarea"
							placeholder="Опишите вашу ситуацию..."
							rows="5"
							required
						></textarea>
					</div>

					<button type="submit" class="submit-btn">
						Отправить сообщение
					</button>

					<p class="form-privacy">
						Нажимая кнопку, вы соглашаетесь с
						<a href="/privacy" class="privacy-link">политикой конфиденциальности</a>
					</p>
				</form>
			) : (
				<div class="auth-lock-card animate-on-scroll" data-animation="fade-up" data-delay="200">
					<div class="lock-icon-container">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lock-icon">
							<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
							<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
						</svg>
					</div>
					<h3 class="lock-title">Форма доступна только клиентам</h3>
					<p class="lock-text">Чтобы отправить сообщение напрямую юристу, пожалуйста, авторизуйтесь в личном кабинете.</p>
					<a href="/login" class="auth-button">Войти в кабинет</a>
				</div>
			)}
		</div>
	</section>

	<!-- CTA-блок -->
	<section class="contacts-cta">
		<div class="site-container">
			<div class="cta-content">
				<h2 class="cta-title animate-on-scroll" data-animation="fade-up">
					Нужна срочная помощь?
				</h2>
				<p class="cta-text animate-on-scroll" data-animation="fade-up" data-delay="100">
					Запишитесь на бесплатную консультацию прямо сейчас — мы перезвоним в течение 15 минут
				</p>
				<button class="cta-button animate-on-scroll" data-animation="fade-up" data-delay="200" id="consultation-btn" data-modal-target="consultation-modal">
					Записаться на консультацию
				</button>
			</div>
		</div>
	</section>
</Layout>

<style>
	/* ===== HERO ===== */
	.contacts-hero {
		background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
		padding: 8rem 0 4rem;
		position: relative;
		overflow: hidden;
	}

	.contacts-hero::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -10%;
		width: 600px;
		height: 600px;
		background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
		border-radius: 50%;
	}

	.hero-content {
		position: relative;
		z-index: 1;
		text-align: center;
		max-width: 700px;
		margin: 0 auto;
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		background-color: rgba(234, 194, 110, 0.15);
		border: 1px solid rgba(234, 194, 110, 0.3);
		color: #eac26e;
		padding: 0.5rem 1rem;
		border-radius: 6px;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 1.5px;
		margin-bottom: 2rem;
	}

	.status-dot {
		width: 10px;
		height: 10px;
		background: #22c55e;
		border-radius: 50%;
		animation: pulse 2s ease-in-out infinite;
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
		flex-shrink: 0;
	}

	@keyframes pulse {
		0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
		70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
		100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
	}

	.title {
		font-size: clamp(2.5rem, 5vw, 4rem);
		font-weight: 800;
		color: #ffffff;
		margin: 0 0 1.5rem;
		line-height: 1.15;
		letter-spacing: -0.02em;
	}

	.text-gold { color: #eac26e; }

	.description {
		color: rgba(255, 255, 255, 0.8);
		font-size: 1.15rem;
		line-height: 1.6;
		margin: 0;
	}

	/* ===== CONTACT CARDS ===== */
	.contact-cards {
		padding: 5rem 0;
		background: #f8fafc;
	}

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

	.contact-card {
		background: #ffffff;
		border-radius: 1rem;
		padding: 2.5rem 2rem;
		text-align: center;
		border: 2px solid transparent;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.contact-card:hover {
		border-color: #d4af37;
		box-shadow: 0 12px 30px rgba(212, 175, 55, 0.12);
		transform: translateY(-6px);
	}

	.card-icon {
		width: 4rem;
		height: 4rem;
		border-radius: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1.5rem;
	}

	.card-icon.phone { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #2563eb; }
	.card-icon.email { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #d4af37; }
	.card-icon.location { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #16a34a; }

	.card-icon svg { width: 1.75rem; height: 1.75rem; }
	.card-title { color: #1e293b; font-size: 1.25rem; font-weight: 700; margin: 0 0 0.75rem; }
	.card-link { color: #d4af37; font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: color 0.2s ease; display: block; margin-bottom: 0.5rem; }
	.card-link:hover { color: #b8942e; text-decoration: underline; }
	.card-description { color: #94a3b8; font-size: 0.875rem; margin: 0; }
	.card-text { color: #475569; font-size: 1rem; margin: 0 0 0.75rem; line-height: 1.5; }

	.work-hours {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: #64748b;
		font-size: 0.875rem;
		font-weight: 500;
		background: #f1f5f9;
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
	}

	.hours-icon { width: 1rem; height: 1rem; }

	/* ===== FORM SECTION & AUTH LOCK ===== */
	.contact-form-section {
		padding: 5rem 0;
		background: #ffffff;
	}

	.form-header { text-align: center; margin-bottom: 3rem; }
	.section-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: #1e293b; margin: 0 0 1rem; }
	.section-description { color: #64748b; font-size: 1.1rem; margin: 0; }

	/* Auth Lock Card */
	.auth-lock-card {
		max-width: 600px;
		margin: 0 auto;
		background: #f8fafc;
		border: 2px dashed #e2e8f0;
		border-radius: 1.5rem;
		padding: 4rem 2rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lock-icon-container {
		width: 5rem;
		height: 5rem;
		background: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #94a3b8;
		margin-bottom: 1.5rem;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
	}

	.lock-icon { width: 2rem; height: 2rem; }
	.lock-title { color: #1e293b; font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
	.lock-text { color: #64748b; line-height: 1.6; margin: 0 0 2rem; max-width: 400px; }

	.auth-button {
		background: #1e293b;
		color: #ffffff;
		padding: 0.875rem 2rem;
		border-radius: 0.75rem;
		font-weight: 700;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.auth-button:hover { background: #0f172a; transform: translateY(-2px); }

	/* Contact Form Styles */
	.contact-form {
		max-width: 700px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
	.form-label { font-size: 0.9rem; font-weight: 600; color: #1e293b; }

	.form-input, .form-textarea {
		padding: 0.875rem 1rem;
		border: 2px solid #e2e8f0;
		border-radius: 0.75rem;
		font-size: 1rem;
		font-family: inherit;
		transition: all 0.2s ease;
		outline: none;
		background: #f8fafc;
	}

	.form-input:focus, .form-textarea:focus {
		border-color: #d4af37;
		box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
		background: #ffffff;
	}

	.form-textarea { resize: vertical; min-height: 140px; }

	.submit-btn {
		background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
		color: #1e293b;
		border: none;
		padding: 1rem 2rem;
		border-radius: 0.75rem;
		font-size: 1.1rem;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
	}

	.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); }
	.form-privacy { font-size: 0.8rem; color: #94a3b8; text-align: center; }
	.privacy-link { color: #d4af37; text-decoration: underline; }

	/* ===== CTA & MAP ===== */
	.contacts-cta { padding: 5rem 0; background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%); position: relative; overflow: hidden; }
	.cta-content { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; }
	.cta-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #ffffff; margin: 0 0 1rem; }
	.cta-text { color: rgba(255, 255, 255, 0.75); font-size: 1.1rem; margin: 0 0 2rem; }
	.cta-button { background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%); color: #1e293b; border: none; padding: 1rem 2.5rem; border-radius: 0.75rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
	.cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); }

	/* ===== ANIMATIONS ===== */
	.animate-on-scroll { opacity: 0; will-change: opacity, transform; }
	[data-animation="fade-up"] { transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
	.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

	/* ===== RESPONSIVE ===== */
	@media (max-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
	@media (max-width: 768px) {
		.cards-grid { grid-template-columns: 1fr; }
		.form-row { grid-template-columns: 1fr; }
		.auth-lock-card { padding: 3rem 1.5rem; }
	}
</style>

<script>
	const setupAnimations = () => {
		const observerOptions = { threshold: 0.1 };
		const observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					const el = entry.target as HTMLElement;
					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 setupForm = () => {
		// Проверяем наличие формы, так как она может быть скрыта условием isAuthorized
		const form = document.getElementById('contact-form') as HTMLFormElement;
		if (form) {
			form.addEventListener('submit', (e) => {
				e.preventDefault();
				const formData = new FormData(form);
				console.log('Отправка формы:', Object.fromEntries(formData));
				alert('Спасибо! Ваше сообщение отправлено.');
				form.reset();
			});
		}
	};

	// Инициализация
	setupAnimations();
	setupForm();

	// Для поддержки Astro transitions
	document.addEventListener('astro:after-swap', () => {
		setupAnimations();
		setupForm();
	});
</script>