astro_avtourist/frontend/src/pages/contacts.astro

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

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

<Layout
	title="Контакты — автоюрист в Сургуте"
	description="Свяжитесь с нами для консультации по вопросам автоспоров и юридической помощи автовладельцам."
	canonicalLink={`${SITE_URL}/contacts`}
	breadcrumbs={[
		{ label: 'Главная', href: '/' },
		{ label: 'Контакты' }
	]}
>
	<PageHero
		badgeText="БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ"
		titleWhite="Свяжитесь"
		titleGold="с нами"
		description="Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно."
		layout="with-image"
		sideImage="/images/contacts/conImg.avif"
		sideImageAlt="Автоюрист Сургут"
		experienceBadge={{
			number: "15",
			text: "МИНУТ НА СВЯЗИ"
		}}
		bgImage="/images/contacts/conBg.avif"
		icon="phone"
	/>

	<!-- Карточки контактов -->
	<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>
			) : (
				<AuthLockBlock
					title="Авторизуйтесь, чтобы написать"
					description="Чтобы отправить сообщение напрямую юристу, пожалуйста, войдите в личный кабинет."
					buttonText="Войти в кабинет"
					buttonHref="/auth/sign-in"
					className="animate-on-scroll"
					dataAnimation="fade-up"
					dataDelay="200"
				/>
			)}
		</div>
	</section>
</Layout>

<style>
	/* ===== 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 ===== */
	.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; }

	/* 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; }

	/* ===== 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; }
	}
</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>