<!-- Плавающая кнопка FAQ -->
<div class="fixed bottom-4 xs:bottom-6 sm:bottom-8 left-4 xs:left-6 sm:left-8 z-50">
  <button
    id="floating-faq-btn"
    class="group w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl shadow-2xl shadow-blue-500/25 hover:shadow-blue-400/40 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 flex items-center justify-center"
    aria-label="Часто задаваемые вопросы"
  >
    <svg
      class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 group-hover:scale-110 transition-transform duration-300"
      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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
  </button>
  
  <!-- Тултип -->
  <div
    id="faq-tooltip"
    class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 xs:mb-4 px-2 xs:px-4 py-1 xs:py-2 bg-gray-900 text-white text-xs xs:text-sm rounded-lg xs:rounded-xl shadow-lg opacity-0 invisible transition-all duration-300 whitespace-nowrap font-gilroy border border-gray-700"
  >
    Часто задаваемые вопросы
    <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
  </div>
</div>

<!-- Модальное окно FAQ -->
<div
  id="faq-modal"
  class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300 p-4"
>
  <div
    class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl xs:rounded-3xl p-6 xs:p-8 max-w-2xl w-full max-h-[90vh] xs:max-h-[80vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
  >
    <button
      id="close-faq-modal"
      class="absolute top-4 xs:top-6 right-4 xs:right-6 w-8 h-8 xs:w-10 xs:h-10 bg-gray-700 hover:bg-gray-600 text-white rounded-lg xs:rounded-xl transition-colors duration-300 flex items-center justify-center"
    >
      <svg
        class="w-4 h-4 xs:w-5 xs:h-5"
        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-2xl xs:text-3xl font-bold mb-6 xs:mb-8 text-white font-nevduplenysh">
      Быстрые ответы
    </h2>

    <div class="space-y-4 xs:space-y-6">
      <!-- Вопрос 1 -->
      <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
        <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
          Какие драгоценные металлы вы предлагаете?
        </h3>
        <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
          Мы работаем с полным спектром драгоценных металлов: золото, серебро, платина, палладий, родий. Предлагаем различные формы: слитки, гранулы, проволока, фольга.
        </p>
      </div>

      <!-- Вопрос 2 -->
      <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
        <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
          Какова чистота ваших металлов?
        </h3>
        <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
          Мы гарантируем высочайшую чистоту: золото 999,9 пробы, серебро 999,9 пробы, платина 999,5 пробы. Каждая партия сопровождается сертификатом качества.
        </p>
      </div>

      <!-- Вопрос 3 -->
      <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
        <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
          Как быстро происходит доставка?
        </h3>
        <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
          Доставка по Москве — в день заказа, по России — 1-7 дней в зависимости от региона. Все грузы застрахованы и отслеживаются.
        </p>
      </div>
    </div>

    <div class="mt-6 xs:mt-8 text-center">
      <a
        href="/faq"
        class="inline-flex items-center px-6 xs:px-8 py-3 xs:py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-blue-500/25 text-sm xs:text-base"
      >
        <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        Все вопросы и ответы
      </a>
    </div>
  </div>
</div>

<script>
  const faqBtn = document.getElementById("floating-faq-btn");
  const faqModal = document.getElementById("faq-modal");
  const closeFaqModal = document.getElementById("close-faq-modal");
  const faqTooltip = document.getElementById("faq-tooltip");

  // Показать тултип при наведении
  faqBtn?.addEventListener("mouseenter", () => {
    faqTooltip?.classList.remove("opacity-0", "invisible");
    faqTooltip?.classList.add("opacity-100", "visible");
  });

  faqBtn?.addEventListener("mouseleave", () => {
    faqTooltip?.classList.add("opacity-0", "invisible");
    faqTooltip?.classList.remove("opacity-100", "visible");
  });

  // Открыть модальное окно
  faqBtn?.addEventListener("click", () => {
    faqModal?.classList.remove("opacity-0", "invisible");
    faqModal?.classList.add("opacity-100", "visible");
    document.body.style.overflow = "hidden";
  });

  // Закрыть модальное окно
  closeFaqModal?.addEventListener("click", () => {
    faqModal?.classList.add("opacity-0", "invisible");
    faqModal?.classList.remove("opacity-100", "visible");
    document.body.style.overflow = "auto";
  });

  // Закрыть при клике на фон
  faqModal?.addEventListener("click", (e) => {
    if (e.target === faqModal) {
      faqModal?.classList.add("opacity-0", "invisible");
      faqModal?.classList.remove("opacity-100", "visible");
      document.body.style.overflow = "auto";
    }
  });
</script> 