---
import { CONTACT_CONSTANTS } from '@constants/constants.ts';
---

<!-- Модальное окно с номером -->
<div
    id="phone-modal"
    class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[9999] hidden items-center justify-center p-4"
>
    <div class="bg-white rounded-2xl p-8 max-w-md w-full relative shadow-2xl animate-fade-in">
        <!-- Кнопка закрытия -->
        <button
            id="close-modal"
            class="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors cursor-pointer"
            aria-label="Закрыть"
        >
            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <!-- Иконка -->
        <div class="w-16 h-16 bg-[#bf9b58] rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
            </svg>
        </div>

        <!-- Заголовок -->
        <h3 class="text-xl font-bold text-center text-gray-900 mb-2">
            Позвоните нам
        </h3>

        <!-- Номер телефона -->
        <a
            href={CONTACT_CONSTANTS.phoneHref}
            class="block text-3xl font-bold text-[#bf9b58] text-center mb-4 hover:underline"
        >
            {CONTACT_CONSTANTS.phone}
        </a>

        <p class="text-gray-500 text-center text-sm mb-6">
            Нажмите на номер, чтобы позвонить, или скопируйте его
        </p>

        <!-- Кнопка копирования -->
        <button
            id="copy-phone-btn"
            class="w-full py-3 border-2 border-[#bf9b58] text-[#bf9b58] font-bold rounded-xl hover:bg-[#bf9b58] hover:text-white transition-all flex items-center justify-center gap-2 cursor-pointer"
        >
            <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="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 01-2-2V5a2 2 0 012-2h4"></path>
            </svg>
            <span id="copy-text">Скопировать номер</span>
        </button>
    </div>
</div>

<style>
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animate-fade-in {
        animation: fade-in 0.2s ease-out;
    }
</style>

<script>
    const PHONE_NUMBER = "+79222538375";

    const consultationBtns = document.querySelectorAll<HTMLElement>("[data-consultation-modal]");
    const phoneModal = document.getElementById("phone-modal");
    const closeModal = document.getElementById("close-modal");
    const copyPhoneBtn = document.getElementById("copy-phone-btn");
    const copyText = document.getElementById("copy-text");

    // Открытие модального окна для всех кнопок
    consultationBtns.forEach(btn => {
        btn.addEventListener("click", (e) => {
            e.preventDefault();
            if (phoneModal) {
                phoneModal.classList.remove("hidden");
                phoneModal.classList.add("flex");
            }
        });
    });

    // Закрытие модального окна
    closeModal?.addEventListener("click", () => {
        if (phoneModal) {
            phoneModal.classList.add("hidden");
            phoneModal.classList.remove("flex");
        }
    });

    // Закрытие по клику вне окна
    phoneModal?.addEventListener("click", (e) => {
        if (e.target === phoneModal) {
            phoneModal.classList.add("hidden");
            phoneModal.classList.remove("flex");
        }
    });

    // Копирование номера
    copyPhoneBtn?.addEventListener("click", async () => {
        try {
            await navigator.clipboard.writeText(PHONE_NUMBER);
            if (copyText) {
                copyText.textContent = "Скопировано!";
            }
            copyPhoneBtn?.classList.add("bg-[#bf9b58]", "text-white");
            copyPhoneBtn?.classList.remove("text-[#bf9b58]");

            setTimeout(() => {
                if (copyText) {
                    copyText.textContent = "Скопировать номер";
                }
                copyPhoneBtn?.classList.remove("bg-[#bf9b58]", "text-white");
                copyPhoneBtn?.classList.add("text-[#bf9b58]");
            }, 2000);
        } catch (err) {
            console.error("Не удалось скопировать номер:", err);
        }
    });

    // Закрытие по Escape
    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && phoneModal && !phoneModal.classList.contains("hidden")) {
            phoneModal.classList.add("hidden");
            phoneModal.classList.remove("flex");
        }
    });
</script>
