---
interface Props {
  question: string;
  answer: string;
  isOpen?: boolean;
  index?: number;
}

const { question, answer, isOpen = false, index = 1 } = Astro.props;
---

<div
  class="faq-item group relative bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-2xl overflow-hidden transition-all duration-500 hover:border-[var(--color-gold)]/30 hover:shadow-lg hover:shadow-[var(--color-gold)]/5"
  class:list={[
    {
      active: isOpen,
      "border-[var(--color-gold)]/40 shadow-lg shadow-[var(--color-gold)]/10":
        isOpen,
    },
  ]}
>
  <!-- Номер вопроса (декоративный) -->
  <div
    class="absolute top-4 right-4 text-6xl font-black text-[var(--color-gold)] opacity-5 pointer-events-none select-none"
  >
    {String(index).padStart(2, "0")}
  </div>

  <button
    class="faq-question w-full px-6 py-5 text-left flex items-center justify-between focus:outline-none transition-all duration-300 relative z-10 hover:cursor-pointer"
    aria-expanded={isOpen}
  >
    <div class="flex items-center gap-4 pr-8">
      <div
        class="w-10 h-10 rounded-xl bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 flex items-center justify-center flex-shrink-0 transition-all duration-300 group-hover:bg-[var(--color-gold)]/20 group-[.active]:bg-[var(--color-gold)] group-[.active]:text-[var(--color-white)]"
      >
        <svg
          class="w-5 h-5 text-[var(--color-gold)] group-[.active]:text-[var(--color-white)] transition-colors"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <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>
      </div>
      <span
        class="font-bold text-[var(--color-white)] text-lg group-hover:text-[var(--color-gold)] transition-colors duration-300 leading-tight"
      >
        {question}
      </span>
    </div>

    <div
      class="w-8 h-8 rounded-full bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 flex items-center justify-center flex-shrink-0 ml-4 transition-all duration-300 group-hover:border-[var(--color-gold)]/30 group-[.active]:bg-[var(--color-gold)] group-[.active]:border-[var(--color-gold)]"
    >
      <svg
        class="faq-icon w-4 h-4 text-[var(--color-gray-400)] group-hover:text-[var(--color-gold)] transform transition-transform duration-300 group-[.active]:text-[var(--color-white)] group-[.active]:rotate-180"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"></path>
      </svg>
    </div>
  </button>

  <div
    class="faq-answer overflow-hidden transition-all duration-500 ease-out"
    style={`max-height: ${isOpen ? "500px" : "0"}; opacity: ${isOpen ? "1" : "0"}`}
  >
    <div class="px-6 pb-6 pt-2">
      <div
        class="pl-14 text-[var(--color-gray-400)] leading-relaxed border-l-2 border-[var(--color-gold)]/30"
      >
        {answer}
      </div>
    </div>
  </div>
</div>

<script>
  function initFaqAccordion() {
    const faqItems = document.querySelectorAll(".faq-item");

    faqItems.forEach((item) => {
      const questionBtn = item.querySelector(".faq-question");
      const answerDiv = item.querySelector<HTMLElement>(".faq-answer");
      const icon = item.querySelector(".faq-icon");

      if (questionBtn && answerDiv && icon) {
        // Устанавливаем начальное состояние
        if (item.classList.contains("active")) {
          setTimeout(() => {
            answerDiv.style.maxHeight = answerDiv.scrollHeight + "px";
            answerDiv.style.opacity = "1";
            icon.classList.add("rotate-180");
          }, 10);
        } else {
          answerDiv.style.maxHeight = "0";
          answerDiv.style.opacity = "0";
        }

        questionBtn.addEventListener("click", () => {
          const isOpen = item.classList.contains("active");

          // Закрываем все другие элементы
          faqItems.forEach((otherItem) => {
            if (otherItem !== item && otherItem.classList.contains("active")) {
              otherItem.classList.remove("active");
              const otherAnswer =
                otherItem.querySelector<HTMLElement>(".faq-answer");
              const otherIcon = otherItem.querySelector(".faq-icon");
              if (otherAnswer) {
                otherAnswer.style.maxHeight = "0px";
                otherAnswer.style.opacity = "0";
              }
              if (otherIcon) {
                otherIcon.classList.remove("rotate-180");
              }
            }
          });

          // Переключаем текущий элемент
          if (isOpen) {
            item.classList.remove("active");
            answerDiv.style.maxHeight = "0px";
            answerDiv.style.opacity = "0";
            icon.classList.remove("rotate-180");
          } else {
            item.classList.add("active");
            answerDiv.style.maxHeight = answerDiv.scrollHeight + "px";
            answerDiv.style.opacity = "1";
            icon.classList.add("rotate-180");
          }
        });
      }
    });
  }

  document.addEventListener("astro:page-load", initFaqAccordion);
  initFaqAccordion();
</script>
