<!-- Модальное окно -->
<div
  id="modal"
  class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
>
  <div
    class="bg-gray-100 rounded-xl p-8 max-w-md w-full mx-4 lg:mx-auto relative"
  >
    <button
      id="closeModal"
      class="absolute top-4 right-4 text-gray-600 hover:text-gray-900"
    >
      <svg
        class="w-6 h-6"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>

    <h2 class="text-3xl font-semibold mb-4 text-center font-gilroy">Обсудить заказ</h2>
    <p class="text-center text-gray-700 mb-6 font-gilroy">
      Оставьте ваши контактные данные. Наши менеджеры отправят вам актуальную
      информацию о ценах и наличии продукции на складе.
    </p>
    <form id="contactForm">
      <input
        type="text"
        id="name"
        placeholder="Ваше имя"
        class="w-full mb-4 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 font-gilroy"
        required
      />
      <input
        type="tel"
        id="phone"
        placeholder="Телефон"
        class="w-full mb-4 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 font-gilroy"
        required
      />
      <textarea
        id="comment"
        placeholder="Комментарий"
        class="w-full mb-4 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 font-gilroy"
        rows="4"
        required></textarea>
      <button
        type="submit"
        class="w-full py-3 bg-yellow-500 text-white rounded-lg font-semibold hover:bg-yellow-600 transition font-gilroy"
      >
        Отправить
      </button>
    </form>
  </div>
</div>

<header
  class="fixed text-white top-1 xs:top-2 sm:top-3 md:top-4 left-1/2 transform -translate-x-1/2 w-[95%] xs:w-11/12 max-w-screen-xl z-50 flex justify-between items-center px-2 py-1.5 xs:px-3 xs:py-2 sm:px-4 sm:py-3 md:px-6 md:py-4 bg-black bg-opacity-70 backdrop-blur-sm rounded-lg xs:rounded-xl sm:rounded-2xl border border-white border-opacity-20"
>
  <a href="/" class="flex items-center min-w-0 flex-shrink-0">
    <img src="/logo.svg" alt="Логотип" class="h-5 xs:h-6 sm:h-8 md:h-10 lg:h-12 flex-shrink-0" />
    <span class="ml-1 xs:ml-1.5 sm:ml-2 font-bold text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl font-gilroy truncate">
      ООО «ДМДК»
    </span>
  </a>

  <nav class="hidden lg:flex items-center space-x-6">
    <ul class="flex text-lg space-x-8">
      <li>
        <a href="/#about" class="hover:text-yellow-400 font-gilroy transition-colors">О НАС</a>
      </li>
      <li>
        <a href="/#products" class="hover:text-yellow-400 font-gilroy transition-colors">ПРОДУКЦИЯ</a>
      </li>
      <li>
        <a href="/blog" class="hover:text-yellow-400 font-gilroy transition-colors">БЛОГ</a>
      </li>
      <li>
        <a href="/faq" class="hover:text-yellow-400 font-gilroy transition-colors">FAQ</a>
      </li>
      <li class="relative group">
        <a href="/#contacts" class="hover:text-yellow-400 font-gilroy transition-colors">КОНТАКТЫ</a>
        <div
          class="absolute invisible group-hover:visible opacity-0 group-hover:opacity-100 bg-black bg-opacity-90 backdrop-blur-sm text-white p-6 rounded-xl mt-2 w-80 left-1/2 transform -translate-x-1/2 transition-all duration-300 ease-in-out scale-95 group-hover:scale-100 border border-white border-opacity-20"
        >
          <div class="flex justify-center items-center mb-4">
            <img src="/logo.svg" alt="Логотип" class="h-8" />
            <span class="ml-2 font-bold font-gilroy">ООО «ДМДК»</span>
          </div>
          <div class="space-y-2 text-center font-gilroy">
            <p>+7 (925) 104-50-50</p>
            <p>+7 (926) 664-62-46</p>
            <p>ooo.dmdk@mail.ru</p>
            <p>Режим работы:<br /> <span class="text-lg">9:00 - 21:00</span></p>
          </div>
          <div class="flex justify-center space-x-4 mt-4">
            <a href="https://t.me/OOO_DMDK" class="social-icon">
              <img
                src="/icons/tg.svg"
                alt="Telegram"
                class="w-8 h-8"
              />
            </a>
            <a href="https://wa.me/79251045050" class="social-icon">
              <img
                src="/icons/ws.svg"
                alt="WhatsApp"
                class="w-8 h-8"
              />
            </a>
          </div>
        </div>
      </li>
    </ul>

    <!-- Кнопка "Оставить заявку" -->
    <button
      class="open-modal ml-6 px-4 py-2 xl:px-6 xl:py-3 text-base xl:text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
    >
      Оставить заявку
    </button>
  </nav>

  <!-- Кнопка мобильного меню -->
  <div class="lg:hidden flex items-center space-x-2">
    <!-- Компактная кнопка заявки для планшетов -->
    <button class="open-modal hidden md:block lg:hidden px-3 py-2 text-sm font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy">
      Заявка
    </button>
    
    <button id="menu-toggle" class="focus:outline-none p-1 hover:text-yellow-400 transition-colors">
      <svg
        class="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 6h16M4 12h16m-7 6h7"></path>
      </svg>
    </button>
  </div>
</header>

<div
  id="mobile-menu"
  class="fixed inset-0 bg-black bg-opacity-95 backdrop-blur-sm text-white flex flex-col justify-center items-center space-y-4 xs:space-y-6 md:space-y-8 transform translate-y-full transition-transform duration-300 ease-in-out z-50"
>
  <button id="close-menu" class="absolute top-4 xs:top-6 right-4 xs:right-6 text-white hover:text-yellow-400 transition-colors">
    <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8" 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="flex items-center mb-4 xs:mb-6">
    <img src="/logo.svg" alt="Логотип" class="h-8 xs:h-10 sm:h-12" />
    <span class="ml-2 xs:ml-3 font-bold text-lg xs:text-xl sm:text-2xl font-gilroy">ООО «ДМДК»</span>
  </div>
  
  <a href="/#about" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">О НАС</a>
  <a href="/#products" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">ПРОДУКЦИЯ</a>
  <a href="/blog" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">БЛОГ</a>
  <a href="/faq" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">FAQ</a>
  <a href="/#contacts" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">КОНТАКТЫ</a>
  
  <!-- Контактная информация в мобильном меню -->
  <div class="mt-6 xs:mt-8 text-center space-y-2 xs:space-y-3">
    <div class="text-sm xs:text-base text-gray-300 font-gilroy">
      <p>+7 (925) 104-50-50</p>
      <p>+7 (926) 664-62-46</p>
      <p>ooo.dmdk@mail.ru</p>
    </div>
    <div class="flex justify-center space-x-4 mt-4">
      <a href="https://t.me/OOO_DMDK" class="social-icon">
        <img src="/icons/tg.svg" alt="Telegram" class="w-8 h-8" />
      </a>
      <a href="https://wa.me/79251045050" class="social-icon">
        <img src="/icons/ws.svg" alt="WhatsApp" class="w-8 h-8" />
      </a>
    </div>
  </div>
  
  <!-- Кнопка "Оставить заявку" в мобильном меню -->
  <button
    class="open-modal mt-6 xs:mt-8 px-6 xs:px-8 py-3 xs:py-4 text-base xs:text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg xs:rounded-xl shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
  >
    Оставить заявку
  </button>
</div>

<script>
  // Получение всех кнопок с классом "open-modal"
  const openModalButtons = document.querySelectorAll(".open-modal");
  const closeModalBtn = document.getElementById("closeModal");
  const modal = document.getElementById("modal");
  const contactForm = document.getElementById("contactForm") as HTMLFormElement;

  // Привязка события открытия модального окна ко всем кнопкам
  openModalButtons.forEach((button) => {
    button.addEventListener("click", () => {
      modal?.classList.remove("hidden");
    });
  });

  // Закрытие модального окна при клике на крестик
  closeModalBtn?.addEventListener("click", () => {
    modal?.classList.add("hidden");
  });

  // Закрытие модального окна при клике на фон
  modal?.addEventListener("click", (e) => {
    if (e.target === modal) {
      modal.classList.add("hidden");
    }
  });

  // Отправка данных в Telegram
  contactForm?.addEventListener("submit", function (e) {
    e.preventDefault();

    const nameInput = document.getElementById("name") as HTMLInputElement;
    const phoneInput = document.getElementById("phone") as HTMLInputElement;
    const commentInput = document.getElementById("comment") as HTMLTextAreaElement;

    const name = nameInput?.value || '';
    const phone = phoneInput?.value || '';
    const comment = commentInput?.value || '';

    const message = `Новая заявка:\n\nИмя: ${name}\nТелефон: ${phone}\nКомментарий: ${comment}`;

    const token = "7413445274:AAGFPUJZypcq5fG6r-Eq6pu81RHf6GOW2oU";
    const chatId = "-1002176656869";
    const url = `https://api.telegram.org/bot${token}/sendMessage?chat_id=${chatId}&text=${encodeURIComponent(
      message,
    )}`;

    fetch(url)
      .then((response) => {
        if (response.ok) {
          alert("Заявка успешно отправлена!");
          contactForm?.reset();
          modal?.classList.add("hidden");
        } else {
          alert("Ошибка при отправке заявки. Попробуйте позже.");
        }
      })
      .catch((error) => {
        console.error("Error:", error);
        alert("Ошибка при отправке заявки. Попробуйте позже.");
      });
  });

  // Функционал мобильного меню
  const menuToggle = document.getElementById("menu-toggle");
  const mobileMenu = document.getElementById("mobile-menu");
  const closeMenu = document.getElementById("close-menu");
  const mobileMenuLinks = document.querySelectorAll(".mobile-menu-link");

  // Функция для открытия мобильного меню
  function openMobileMenu() {
    mobileMenu?.classList.remove("translate-y-full");
    mobileMenu?.classList.add("translate-y-0");
    document.body.style.overflow = "hidden"; // Блокируем скролл
  }

  // Функция для закрытия мобильного меню
  function closeMobileMenu() {
    mobileMenu?.classList.add("translate-y-full");
    mobileMenu?.classList.remove("translate-y-0");
    document.body.style.overflow = ""; // Разблокируем скролл
  }

  // Открытие мобильного меню
  menuToggle?.addEventListener("click", openMobileMenu);

  // Закрытие мобильного меню по кнопке закрытия
  closeMenu?.addEventListener("click", closeMobileMenu);

  // Закрытие мобильного меню при клике на ссылку
  mobileMenuLinks.forEach((link) => {
    link.addEventListener("click", closeMobileMenu);
  });

  // Закрытие мобильного меню при изменении размера экрана на десктопный
  window.addEventListener("resize", () => {
    if (window.innerWidth >= 1028) { // lg breakpoint
      closeMobileMenu();
    }
  });
</script>
