style: chaged blocks

assets/js/main.js

@@ -54,3 +54,107 @@
 
     elements.forEach((element) => observer.observe(element));
 })();
+
+(() => {
+    const bookingForm = document.getElementById("booking-form");
+    const successModal = document.getElementById("booking-success-modal");
+
+    if (!bookingForm || !successModal) return;
+
+    const closeTriggers = Array.from(successModal.querySelectorAll("[data-modal-close]"));
+
+    const openModal = () => {
+        successModal.classList.add("is-open");
+        successModal.setAttribute("aria-hidden", "false");
+    };
+
+    const closeModal = () => {
+        successModal.classList.remove("is-open");
+        successModal.setAttribute("aria-hidden", "true");
+    };
+
+    const triggerAnalytics = () => {
+        const eventName = "заявка";
+
+        const metrikaIdRaw = bookingForm.dataset.metrikaId || document.body.dataset.metrikaId || window.YANDEX_METRIKA_ID;
+        const metrikaId = Number(metrikaIdRaw);
+
+        if (typeof window.ym === "function" && Number.isFinite(metrikaId) && metrikaId > 0) {
+            window.ym(metrikaId, "reachGoal", eventName);
+        }
+
+        const legacyCounterKey = Object.keys(window).find((key) => {
+            return key.startsWith("yaCounter") && typeof window[key]?.reachGoal === "function";
+        });
+
+        if (legacyCounterKey) {
+            window[legacyCounterKey].reachGoal(eventName);
+        }
+
+        if (typeof window.gtag === "function") {
+            window.gtag("event", eventName, {
+                event_category: "lead",
+                event_label: "booking_form"
+            });
+        }
+
+        if (Array.isArray(window.dataLayer)) {
+            window.dataLayer.push({
+                event: eventName,
+                event_category: "lead",
+                event_label: "booking_form"
+            });
+        }
+    };
+
+    const triggerAutoReply = async (email) => {
+        if (!email) return;
+
+        const autoReplyEndpoint = bookingForm.dataset.autoreplyEndpoint || window.BOOKING_AUTOREPLY_ENDPOINT;
+        if (!autoReplyEndpoint) return;
+
+        try {
+            await fetch(autoReplyEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    email,
+                    source: "booking-form"
+                })
+            });
+        } catch (error) {
+            // Auto-reply is optional and should not block form success.
+            console.error("Auto-reply request failed", error);
+        }
+    };
+
+    bookingForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+
+        if (!bookingForm.checkValidity()) {
+            bookingForm.reportValidity();
+            return;
+        }
+
+        const formData = new FormData(bookingForm);
+        const email = String(formData.get("email") || "").trim();
+
+        triggerAnalytics();
+        await triggerAutoReply(email);
+
+        bookingForm.reset();
+        openModal();
+    });
+
+    closeTriggers.forEach((trigger) => {
+        trigger.addEventListener("click", closeModal);
+    });
+
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && successModal.classList.contains("is-open")) {
+            closeModal();
+        }
+    });
+})();