582 lines
21 KiB
Text
582 lines
21 KiB
Text
---
|
||
import SectionHeader from "@components/base/SectionHeader.astro";
|
||
import { CONTACT_CONSTANTS } from "@constants/constants.ts";
|
||
|
||
const contactIcons = {
|
||
phone:
|
||
"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z",
|
||
location:
|
||
"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z",
|
||
email:
|
||
"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
|
||
};
|
||
|
||
const PRACTICE_AREAS = [
|
||
{ value: "civil", label: "Гражданское право" },
|
||
{ value: "admin", label: "Административное право" },
|
||
{ value: "family", label: "Семейное право" },
|
||
{ value: "arbitration", label: "Арбитражные дела" },
|
||
{ value: "realestate", label: "Недвижимость" },
|
||
{ value: "svo", label: "СВО" },
|
||
] as const;
|
||
|
||
interface ContactInfo {
|
||
icon: keyof typeof contactIcons;
|
||
label: string;
|
||
type: "phone" | "address" | "email";
|
||
href?: string;
|
||
value: string;
|
||
}
|
||
|
||
const contactInfo: ContactInfo[] = [
|
||
{
|
||
icon: "phone",
|
||
label: "Телефон",
|
||
type: "phone",
|
||
href: CONTACT_CONSTANTS.phoneHref,
|
||
value: CONTACT_CONSTANTS.phone,
|
||
},
|
||
{
|
||
icon: "location",
|
||
label: "Адрес",
|
||
type: "address",
|
||
value: CONTACT_CONSTANTS.address,
|
||
},
|
||
{
|
||
icon: "email",
|
||
label: "Email",
|
||
type: "email",
|
||
href: `mailto:${CONTACT_CONSTANTS.email}`,
|
||
value: CONTACT_CONSTANTS.email,
|
||
},
|
||
];
|
||
---
|
||
|
||
<section class="relative py-24 bg-gray-50" id="contact">
|
||
<div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
|
||
<SectionHeader
|
||
label="Свяжитесь с нами"
|
||
title="Получите бесплатную консультацию"
|
||
description="Опишите вашу ситуацию, и мы свяжемся с вами в ближайшее время для первичного правового анализа"
|
||
/>
|
||
</div>
|
||
|
||
<div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
|
||
<div class="bg-white rounded-3xl shadow-2xl overflow-hidden">
|
||
<div class="flex flex-col lg:flex-row">
|
||
<!-- Левая колонка -->
|
||
<div
|
||
class="w-full lg:w-2/5 bg-gradient-to-br from-[var(--color-navy)] to-[#1a1f3d] p-10 lg:p-12 text-white relative overflow-hidden"
|
||
>
|
||
<div
|
||
class="absolute top-0 right-0 w-64 h-64 bg-[var(--color-gold)] opacity-10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"
|
||
>
|
||
</div>
|
||
<div
|
||
class="absolute bottom-0 left-0 w-48 h-48 bg-[var(--color-blue-primary)] opacity-20 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"
|
||
>
|
||
</div>
|
||
|
||
<div class="relative z-10">
|
||
<span
|
||
class="block text-[var(--color-gold)] text-xs font-bold uppercase tracking-[0.2em] mb-4"
|
||
>Свяжитесь с нами</span
|
||
>
|
||
<p class="text-gray-400 leading-relaxed mb-12">
|
||
Опишите вашу ситуацию, и мы свяжемся с вами в ближайшее время для
|
||
первичного правового анализа.
|
||
</p>
|
||
|
||
<div class="space-y-8">
|
||
{
|
||
contactInfo.map((item) => (
|
||
<div class="flex items-start gap-4 group">
|
||
<div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-[var(--color-gold)] transition-colors">
|
||
<svg
|
||
class="w-5 h-5 text-[var(--color-gold)] group-hover:text-white transition-colors"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="1.5"
|
||
d={contactIcons[item.icon]}
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<span class="block text-xs text-gray-500 uppercase tracking-wider mb-1">
|
||
{item.label}
|
||
</span>
|
||
{item.href && item.type !== "phone" ? (
|
||
<a
|
||
href={item.href}
|
||
class="text-lg font-bold hover:text-[var(--color-gold)] transition-colors"
|
||
>
|
||
{item.value}
|
||
</a>
|
||
) : item.type === "phone" ? (
|
||
<button
|
||
data-consultation-modal
|
||
class="text-lg font-bold hover:text-[var(--color-gold)] transition-colors cursor-pointer text-left"
|
||
>
|
||
{item.value}
|
||
</button>
|
||
) : (
|
||
<span class="text-lg font-bold">{item.value}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Правая колонка (Форма) -->
|
||
<div class="w-full lg:w-3/5 p-10 lg:p-12 bg-white">
|
||
<form class="space-y-8" id="consultation-form" novalidate>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<!-- Имя -->
|
||
<div class="relative group">
|
||
<label
|
||
for="name"
|
||
class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2"
|
||
>
|
||
Ваше имя <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
name="name"
|
||
required
|
||
minlength="2"
|
||
maxlength="50"
|
||
pattern="[А-Яа-яЁёA-Za-z\s\-]+"
|
||
placeholder="Иван Иванов"
|
||
class="w-full py-3 bg-gray-50 border border-gray-200 rounded-xl px-4 text-gray-900 font-medium focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all"
|
||
/>
|
||
<span class="error-message hidden text-red-500 text-xs mt-1">
|
||
Введите корректное имя (минимум 2 символа)
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Телефон -->
|
||
<div class="relative group">
|
||
<label
|
||
for="phone"
|
||
class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2"
|
||
>
|
||
Телефон <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
name="phone"
|
||
required
|
||
pattern="\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}"
|
||
placeholder="+7 (___) ___-__-__"
|
||
class="w-full py-3 bg-gray-50 border border-gray-200 rounded-xl px-4 text-gray-900 font-medium focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all"
|
||
/>
|
||
<span class="error-message hidden text-red-500 text-xs mt-1">
|
||
Введите полный номер телефона
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Сфера вопроса -->
|
||
<div class="relative">
|
||
<label
|
||
for="practice"
|
||
class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2"
|
||
>
|
||
Сфера вопроса
|
||
</label>
|
||
<div class="relative">
|
||
<select
|
||
id="practice"
|
||
name="practice"
|
||
class="w-full py-3 bg-gray-50 border border-gray-200 rounded-xl px-4 text-gray-900 font-medium focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 appearance-none cursor-pointer transition-all"
|
||
>
|
||
{
|
||
PRACTICE_AREAS.map((area) => (
|
||
<option value={area.value}>{area.label}</option>
|
||
))
|
||
}
|
||
</select>
|
||
<div
|
||
class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
|
||
>
|
||
<svg
|
||
class="w-5 h-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M19 9l-7 7-7-7"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Сообщение -->
|
||
<div class="relative">
|
||
<label
|
||
for="message"
|
||
class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2"
|
||
>
|
||
Ваше сообщение <span class="text-red-500">*</span>
|
||
</label>
|
||
<textarea
|
||
id="message"
|
||
name="message"
|
||
required
|
||
minlength="10"
|
||
maxlength="1000"
|
||
rows="4"
|
||
placeholder="Опишите ситуацию..."
|
||
class="w-full py-3 bg-gray-50 border border-gray-200 rounded-xl px-4 text-gray-900 font-medium focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 resize-none transition-all"
|
||
></textarea>
|
||
<div class="flex justify-between mt-1">
|
||
<span class="error-message hidden text-red-500 text-xs">
|
||
Опишите ситуацию подробнее (минимум 10 символов)
|
||
</span>
|
||
<span class="char-count text-xs text-gray-400 ml-auto">
|
||
0 / 1000
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
id="submit-btn"
|
||
disabled
|
||
class="w-full py-4 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] text-white font-bold rounded-xl shadow-lg shadow-[var(--color-gold)]/30 hover:shadow-xl hover:shadow-[var(--color-gold)]/40 hover:-translate-y-0.5 hover:cursor-pointer transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:transform-none"
|
||
>
|
||
<span class="btn-text">Отправить запрос</span>
|
||
<span class="btn-loading hidden">Отправка...</span>
|
||
</button>
|
||
|
||
<p class="text-center text-xs text-gray-400">
|
||
Нажимая кнопку, вы соглашаетесь с{" "}
|
||
<a
|
||
href="/policy"
|
||
class="text-[var(--color-gold)] hover:underline"
|
||
>
|
||
политикой конфиденциальности
|
||
</a>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// Типы для валидации
|
||
type ValidationRule = {
|
||
pattern?: RegExp;
|
||
minLength?: number;
|
||
maxLength?: number;
|
||
required?: boolean;
|
||
};
|
||
|
||
const validationRules: Record<string, ValidationRule> = {
|
||
name: {
|
||
required: true,
|
||
minLength: 2,
|
||
maxLength: 50,
|
||
pattern: /^[А-Яа-яЁёA-Za-z\s\-]+$/,
|
||
},
|
||
phone: {
|
||
required: true,
|
||
pattern: /^\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}$/,
|
||
},
|
||
message: {
|
||
required: true,
|
||
minLength: 10,
|
||
maxLength: 1000,
|
||
},
|
||
};
|
||
|
||
// Элементы формы
|
||
const form = document.getElementById("consultation-form") as HTMLFormElement;
|
||
const submitBtn = document.getElementById("submit-btn") as HTMLButtonElement;
|
||
const btnText = submitBtn.querySelector(".btn-text") as HTMLSpanElement;
|
||
const btnLoading = submitBtn.querySelector(".btn-loading") as HTMLSpanElement;
|
||
|
||
// Отслеживаем, было ли поле в фокусе (для показа ошибок только после взаимодействия)
|
||
const touchedFields = new Set<string>();
|
||
|
||
// Валидация поля
|
||
function validateField(
|
||
field: HTMLInputElement | HTMLTextAreaElement,
|
||
showError: boolean = false,
|
||
): boolean {
|
||
const name = field.name;
|
||
const rules = validationRules[name];
|
||
const errorEl = field.parentElement?.querySelector(
|
||
".error-message",
|
||
) as HTMLElement;
|
||
|
||
if (!rules) return true;
|
||
|
||
let isValid = true;
|
||
let errorMsg = "";
|
||
|
||
// Проверка обязательности
|
||
if (rules.required && !field.value.trim()) {
|
||
isValid = false;
|
||
errorMsg = "Обязательное поле";
|
||
}
|
||
// Проверка минимальной длины (только если поле не пустое)
|
||
else if (
|
||
rules.minLength &&
|
||
field.value.length > 0 &&
|
||
field.value.length < rules.minLength
|
||
) {
|
||
isValid = false;
|
||
errorMsg = `Минимум ${rules.minLength} символов`;
|
||
}
|
||
// Проверка максимальной длины
|
||
else if (rules.maxLength && field.value.length > rules.maxLength) {
|
||
isValid = false;
|
||
errorMsg = `Максимум ${rules.maxLength} символов`;
|
||
}
|
||
// Проверка паттерна (только если поле не пустое)
|
||
else if (
|
||
rules.pattern &&
|
||
field.value.length > 0 &&
|
||
!rules.pattern.test(field.value)
|
||
) {
|
||
isValid = false;
|
||
errorMsg = "Некорректный формат";
|
||
}
|
||
|
||
// Отображение ошибки только если поле было в фокусе или принудительный показ
|
||
if (errorEl && (showError || touchedFields.has(name))) {
|
||
if (!isValid && (field.value.length > 0 || showError)) {
|
||
errorEl.textContent = errorMsg;
|
||
errorEl.classList.remove("hidden");
|
||
field.classList.add(
|
||
"border-red-500",
|
||
"focus:border-red-500",
|
||
"focus:ring-red-500/20",
|
||
);
|
||
field.classList.remove(
|
||
"focus:border-[var(--color-gold)]",
|
||
"focus:ring-[var(--color-gold)]/20",
|
||
);
|
||
} else {
|
||
errorEl.classList.add("hidden");
|
||
field.classList.remove(
|
||
"border-red-500",
|
||
"focus:border-red-500",
|
||
"focus:ring-red-500/20",
|
||
);
|
||
field.classList.add(
|
||
"focus:border-[var(--color-gold)]",
|
||
"focus:ring-[var(--color-gold)]/20",
|
||
);
|
||
}
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// Проверка всей формы (без показа ошибок, только для активации кнопки)
|
||
function checkFormValidity(): boolean {
|
||
const fields = form.querySelectorAll<
|
||
HTMLInputElement | HTMLTextAreaElement
|
||
>("input[required], textarea[required]");
|
||
let isValid = true;
|
||
|
||
fields.forEach((field) => {
|
||
if (!validateField(field, false)) isValid = false;
|
||
});
|
||
|
||
submitBtn.disabled = !isValid;
|
||
return isValid;
|
||
}
|
||
|
||
// Показать все ошибки (при попытке отправки)
|
||
function showAllErrors(): boolean {
|
||
const fields = form.querySelectorAll<
|
||
HTMLInputElement | HTMLTextAreaElement
|
||
>("input[required], textarea[required]");
|
||
let isValid = true;
|
||
|
||
fields.forEach((field) => {
|
||
touchedFields.add(field.name);
|
||
if (!validateField(field, true)) isValid = false;
|
||
});
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// Маска телефона с ограничением ввода
|
||
const phoneInput = document.getElementById("phone") as HTMLInputElement;
|
||
|
||
phoneInput?.addEventListener("keypress", (e) => {
|
||
// Разрешаем только цифры и управляющие клавиши
|
||
if (
|
||
!/\d/.test(e.key) &&
|
||
!["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)
|
||
) {
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
|
||
phoneInput?.addEventListener("input", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
let value = target.value.replace(/\D/g, "");
|
||
|
||
// Ограничиваем длину
|
||
if (value.length > 11) value = value.slice(0, 11);
|
||
|
||
// Убираем 7 или 8 в начале
|
||
if (value.startsWith("7")) value = value.slice(1);
|
||
if (value.startsWith("8")) value = value.slice(1);
|
||
|
||
// Форматируем
|
||
let formatted = "+7";
|
||
if (value.length > 0) formatted += " (" + value.slice(0, 3);
|
||
if (value.length > 3) formatted += ") " + value.slice(3, 6);
|
||
if (value.length > 6) formatted += "-" + value.slice(6, 8);
|
||
if (value.length > 8) formatted += "-" + value.slice(8, 10);
|
||
|
||
target.value = formatted;
|
||
validateField(target);
|
||
checkFormValidity();
|
||
});
|
||
|
||
// Ограничение ввода для имени (только буквы, пробелы, дефис)
|
||
const nameInput = document.getElementById("name") as HTMLInputElement;
|
||
|
||
nameInput?.addEventListener("keypress", (e) => {
|
||
if (
|
||
!/[А-Яа-яЁёA-Za-z\s\-]/.test(e.key) &&
|
||
!["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)
|
||
) {
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
|
||
nameInput?.addEventListener("input", () => {
|
||
validateField(nameInput);
|
||
checkFormValidity();
|
||
});
|
||
|
||
// Счетчик символов для сообщения
|
||
const messageInput = document.getElementById(
|
||
"message",
|
||
) as HTMLTextAreaElement;
|
||
const charCount = messageInput?.parentElement?.querySelector(
|
||
".char-count",
|
||
) as HTMLElement;
|
||
|
||
messageInput?.addEventListener("input", () => {
|
||
const length = messageInput.value.length;
|
||
if (charCount) {
|
||
charCount.textContent = `${length} / 1000`;
|
||
charCount.classList.toggle("text-red-500", length > 1000);
|
||
}
|
||
validateField(messageInput);
|
||
checkFormValidity();
|
||
});
|
||
|
||
// Отмечаем поле как "тронутое" при фокусе
|
||
form.querySelectorAll("input, textarea").forEach((field) => {
|
||
field.addEventListener("focus", () => {
|
||
touchedFields.add((field as HTMLInputElement).name);
|
||
});
|
||
});
|
||
|
||
// Валидация при потере фокуса (показываем ошибки только если поле было заполнено неверно)
|
||
form.querySelectorAll("input, textarea").forEach((field) => {
|
||
field.addEventListener("blur", () => {
|
||
const input = field as HTMLInputElement;
|
||
touchedFields.add(input.name);
|
||
// Показываем ошибку только если поле не пустое и невалидно, или если пытались отправить
|
||
if (input.value.length > 0) {
|
||
validateField(input, true);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Отправка формы
|
||
form?.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
|
||
// Показываем все ошибки при попытке отправки
|
||
if (!showAllErrors()) return;
|
||
|
||
// Блокировка кнопки
|
||
submitBtn.disabled = true;
|
||
btnText.classList.add("hidden");
|
||
btnLoading.classList.remove("hidden");
|
||
|
||
try {
|
||
const formData = new FormData(form);
|
||
const data = Object.fromEntries(formData);
|
||
|
||
// Отправка на API
|
||
const response = await fetch("/api/contact", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(data),
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (!response.ok) {
|
||
throw new Error(result.error || "Ошибка при отправке");
|
||
}
|
||
|
||
// Успех
|
||
if (typeof window.showToast === "function") {
|
||
window.showToast(
|
||
"Заявка успешно отправлена! Мы свяжемся с вами в ближайшее время.",
|
||
"success",
|
||
5000,
|
||
);
|
||
}
|
||
|
||
form.reset();
|
||
touchedFields.clear();
|
||
checkFormValidity(); // Сброс состояния кнопки
|
||
|
||
// Сброс счётчика символов
|
||
if (charCount) {
|
||
charCount.textContent = "0 / 1000";
|
||
charCount.classList.remove("text-red-500");
|
||
}
|
||
} catch (error) {
|
||
console.error("[ContactForm] Ошибка:", error);
|
||
const errorMessage =
|
||
error instanceof Error
|
||
? error.message
|
||
: "Ошибка при отправке. Попробуйте позже.";
|
||
|
||
if (typeof window.showToast === "function") {
|
||
window.showToast(errorMessage, "error", 5000);
|
||
}
|
||
} finally {
|
||
submitBtn.disabled = false;
|
||
btnText.classList.remove("hidden");
|
||
btnLoading.classList.add("hidden");
|
||
}
|
||
});
|
||
|
||
// Начальная проверка (без показа ошибок)
|
||
checkFormValidity();
|
||
</script>
|