<!-- Компонент поиска по сайту с модальным окном -->
<div
  class="bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-white/50"
>
  <h4 class="font-bold text-gray-900 mb-6 flex items-center gap-2 justify-center text-center md:justify-start">
    <svg
      class="w-5 h-5 text-[var(--color-gold)] flex-shrink-0"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
    <span class="text-center">Поиск</span>
  </h4>

  <!-- Кнопка для открытия модального окна -->
  <button
    id="openSearchModal"
    class="w-full px-5 py-3.5 text-sm bg-gray-50 hover:bg-gray-100 border border-gray-100 rounded-xl text-left text-gray-500 placeholder:text-gray-400 transition-all duration-300 flex items-center gap-3 cursor-pointer group"
    aria-label="Открыть поиск"
  >
    <svg
      class="w-5 h-5 text-gray-400 group-hover:text-[var(--color-blue-primary)] transition-colors"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
    <span>Поиск статей...</span>
    <kbd
      class="ml-auto hidden sm:inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-400 bg-gray-100 rounded-md"
    >
      <svg
        class="w-3 h-3"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 19l-7-7 7-7"></path>
      </svg>
      K
    </kbd>
  </button>

  <div class="mt-4 flex flex-wrap gap-2">
    <span
      class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider"
      >Популярные запросы:</span
    >
    <a
      href="/blog/category/ugolovnoe-pravo"
      class="text-[10px] font-medium text-[var(--color-blue-primary)] hover:text-[var(--color-gold)] transition-colors bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded-full"
    >
      Уголовное право
    </a>
    <a
      href="/blog/category/grazhdanskoe-pravo"
      class="text-[10px] font-medium text-[var(--color-blue-primary)] hover:text-[var(--color-gold)] transition-colors bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded-full"
    >
      Гражданское право
    </a>
    <a
      href="/blog/category/novosti"
      class="text-[10px] font-medium text-[var(--color-blue-primary)] hover:text-[var(--color-gold)] transition-colors bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded-full"
    >
      Новости
    </a>
  </div>
</div>

<!-- Модальное окно поиска -->
<div
  id="searchModal"
  class="fixed inset-0 z-50 hidden"
  role="dialog"
  aria-modal="true"
  aria-labelledby="searchModalTitle"
>
  <!-- Затемнение фона (клик по нему закрывает модалку) -->
  <div
    id="searchModalBackdrop"
    class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity opacity-0 cursor-pointer"
  >
  </div>

  <!-- Модальное окно (клик по контенту НЕ закрывает модалку) -->
  <div
    id="searchModalContainer"
    class="relative min-h-screen flex items-center justify-center p-4 pointer-events-none"
  >
    <div
      id="searchModalPanel"
      class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl transform transition-all scale-95 opacity-0 pointer-events-auto"
    >
      <!-- Заголовок -->
      <div
        class="flex items-center justify-between p-6 border-b border-gray-100"
      >
        <div class="flex items-center gap-3">
          <svg
            class="w-6 h-6 text-[var(--color-gold)]"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
          <h3 id="searchModalTitle" class="text-xl font-bold text-gray-900">
            Поиск по сайту
          </h3>
        </div>
        <button
          id="closeSearchModal"
          class="w-10 h-10 flex items-center justify-center rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-700 transition-all duration-300 hover:cursor-pointer"
          aria-label="Закрыть поиск"
        >
          <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="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <!-- Форма поиска -->
      <form action="/blog/search" method="GET" class="p-6">
        <div class="relative">
          <input
            type="text"
            name="q"
            id="searchInput"
            placeholder="Введите запрос для поиска статей..."
            class="w-full px-6 py-4 pr-14 text-base bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--color-blue-primary)] focus:border-transparent transition-all duration-300 placeholder:text-gray-400 text-gray-900"
            autocomplete="off"
            autofocus
          />
          <button
            type="submit"
            class="absolute right-3 top-1/2 -translate-y-1/2 w-11 h-11 bg-[var(--color-blue-primary)] hover:bg-[var(--color-gold)] text-white rounded-lg flex items-center justify-center transition-all duration-300 hover:shadow-lg hover:shadow-[var(--color-gold)]/30 cursor-pointer"
            aria-label="Найти"
          >
            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </button>
        </div>

        <!-- Подсказки -->
        <div class="mt-4 flex items-center gap-2 text-xs text-gray-500">
          <svg
            class="w-4 h-4"
            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>
          <span>Поиск осуществляется по заголовкам и содержанию статей</span>
        </div>
      </form>

      <!-- Популярные запросы в модальном окне -->
      <div class="px-6 pb-6">
        <div class="flex items-center gap-2 mb-3">
          <svg
            class="w-4 h-4 text-[var(--color-gold)]"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
            ></path>
          </svg>
          <span class="text-sm font-semibold text-gray-700"
            >Популярные запросы:</span
          >
        </div>
        <div class="flex flex-wrap gap-2">
          <a
            href="/blog/category/ugolovnoe-pravo"
            class="px-4 py-2 text-sm bg-gray-100 hover:bg-[var(--color-blue-primary)] text-gray-700 hover:text-white rounded-lg transition-all duration-300"
          >
            Уголовное право
          </a>
          <a
            href="/blog/category/grazhdanskoe-pravo"
            class="px-4 py-2 text-sm bg-gray-100 hover:bg-[var(--color-blue-primary)] text-gray-700 hover:text-white rounded-lg transition-all duration-300"
          >
            Гражданское право
          </a>
          <a
            href="/blog/category/novosti"
            class="px-4 py-2 text-sm bg-gray-100 hover:bg-[var(--color-blue-primary)] text-gray-700 hover:text-white rounded-lg transition-all duration-300"
          >
            Новости
          </a>
          <a
            href="/blog/category/biznes"
            class="px-4 py-2 text-sm bg-gray-100 hover:bg-[var(--color-blue-primary)] text-gray-700 hover:text-white rounded-lg transition-all duration-300"
          >
            Бизнес
          </a>
          <a
            href="/blog/category/semejnoe-pravo"
            class="px-4 py-2 text-sm bg-gray-100 hover:bg-[var(--color-blue-primary)] text-gray-700 hover:text-white rounded-lg transition-all duration-300"
          >
            Семейное право
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Элементы модального окна
  const openBtn = document.getElementById("openSearchModal");
  const closeBtn = document.getElementById("closeSearchModal");
  const modal = document.getElementById("searchModal");
  const backdrop = document.getElementById("searchModalBackdrop");
  const panel = document.getElementById("searchModalPanel");
  const searchInput = document.getElementById("searchInput");

  // Открытие модального окна
  function openModal() {
    modal?.classList.remove("hidden");
    // Небольшая задержка для анимации
    setTimeout(() => {
      backdrop?.classList.remove("opacity-0");
      backdrop?.classList.add("opacity-100");
      panel?.classList.remove("scale-95", "opacity-0");
      panel?.classList.add("scale-100", "opacity-100");
      searchInput?.focus();
    }, 10);
  }

  // Закрытие модального окна
  function closeModal() {
    backdrop?.classList.add("opacity-0");
    backdrop?.classList.remove("opacity-100");
    panel?.classList.add("scale-95", "opacity-0");
    panel?.classList.remove("scale-100", "opacity-100");
    setTimeout(() => {
      modal?.classList.add("hidden");
      searchInput?.blur();
    }, 300);
  }

  // Обработчики событий
  openBtn?.addEventListener("click", openModal);
  closeBtn?.addEventListener("click", closeModal);

  // Закрытие по клику на backdrop (затемненный фон)
  if (backdrop) {
    backdrop.addEventListener("click", closeModal);
  }

  // Закрытие по Escape
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal && !modal.classList.contains("hidden")) {
      closeModal();
    }
    // Открытие по Ctrl+K или Cmd+K
    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
      e.preventDefault();
      if (modal?.classList.contains("hidden")) {
        openModal();
      }
    }
  });

  // Предотвращаем закрытие при клике на само модальное окно
  if (panel) {
    panel.addEventListener("click", (e) => {
      e.stopPropagation();
    });
  }
</script>
