---
import type { FAQItem } from "../utils/parseSpecContent";

interface Props {
  items: FAQItem[];
}

const { items } = Astro.props;
---

<section id="faq" class="py-20 sm:py-28">
  <div class="section-container">
    <div class="max-w-3xl mx-auto">
      <!-- Section header -->
      <div class="mb-12 text-center">
        <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
        <p class="text-lg text-gray-600 dark:text-slate-400">
          Common questions about Git Common-Flow
        </p>
      </div>

      <!-- FAQ Items -->
      <div class="space-y-0">
        {
          items.map((item, index) => (
            <div
              class="border-b border-gray-200 dark:border-slate-800"
              data-faq-item
            >
              <button
                class="flex justify-between items-center w-full py-6 text-left
                       font-display text-lg font-semibold cursor-pointer
                       transition-colors
                       text-gray-950 dark:text-slate-50
                       hover:text-sky-600"
                aria-expanded="false"
                data-faq-trigger
              >
                <span class="pr-4">{item.question}</span>
                <svg
                  class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  data-faq-icon
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>
              <div
                class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
                data-faq-content
              >
                <div class="overflow-hidden">
                  <div
                    class="pb-6 text-gray-600 dark:text-slate-400 prose-spec"
                    set:html={item.answer}
                  />
                </div>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  </div>
</section>

<script>
  function initFAQ() {
    const items = document.querySelectorAll("[data-faq-item]");

    items.forEach((item) => {
      const trigger = item.querySelector("[data-faq-trigger]");
      const content = item.querySelector("[data-faq-content]");
      const icon = item.querySelector("[data-faq-icon]");

      if (!trigger || !content || !icon) return;

      trigger.addEventListener("click", () => {
        const isExpanded = trigger.getAttribute("aria-expanded") === "true";

        // Toggle current item
        trigger.setAttribute("aria-expanded", isExpanded ? "false" : "true");
        content.classList.toggle("grid-rows-[1fr]", !isExpanded);
        content.classList.toggle("grid-rows-[0fr]", isExpanded);
        icon.classList.toggle("rotate-180", !isExpanded);
      });
    });
  }

  // Initialize on load
  initFAQ();

  // Re-initialize on Astro page transitions
  document.addEventListener("astro:after-swap", initFAQ);
</script>