---
/**
 * FAQ Section Component
 *
 * Displays a list of frequently asked questions using CSS-only
 * <details>/<summary> accordion elements with smooth height animation.
 * Includes Schema.org FAQPage structured data for SEO.
 *
 * @example
 * ```astro
 * <FAQ
 *   title="Frequently Asked Questions"
 *   subtitle="Everything you need to know"
 *   faqs={[
 *     {
 *       question: "What is AstroDeck?",
 *       answer: "AstroDeck is an open-source component library for Astro.js."
 *     },
 *     {
 *       question: "Is it free?",
 *       answer: "Yes, AstroDeck is completely free and open-source."
 *     }
 *   ]}
 * />
 * ```
 *
 * @customization
 * - Adjust max width of accordion list via max-w-* on the inner wrapper
 * - Change section vertical padding via py-* classes on <section>
 * - Modify animation duration in the <style> block below
 */
interface FAQ {
  question: string;
  answer: string;
}

interface Props {
  title: string;
  subtitle?: string;
  faqs: FAQ[];
}

const { title, subtitle, faqs } = Astro.props;

const structuredData = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: faqs.map((faq) => ({
    "@type": "Question",
    name: faq.question,
    acceptedAnswer: {
      "@type": "Answer",
      text: faq.answer,
    },
  })),
};
---

<section class="py-20 px-6">
  <div class="container max-w-3xl mx-auto">
    <div class="flex flex-col items-center space-y-4 text-center mb-12" data-animate>
      <h2 class="text-3xl font-bold leading-[1.1] sm:text-3xl md:text-5xl">
        {title}
      </h2>
      {
        subtitle && (
          <p class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
            {subtitle}
          </p>
        )
      }
    </div>

    <div class="faq-list divide-y divide-border border-y border-border" data-animate data-delay="1">
      {
        faqs.map((faq) => (
          <details class="faq-item group" name="faq">
            <summary class="flex cursor-pointer items-center justify-between gap-4 py-5 text-left font-medium text-foreground transition-colors hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm">
              <span class="text-base sm:text-lg">{faq.question}</span>
              <span
                class="faq-icon shrink-0 text-muted-foreground transition-transform duration-300 group-open:rotate-45"
                aria-hidden="true"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <line x1="12" y1="5" x2="12" y2="19" />
                  <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
              </span>
            </summary>
            <div class="faq-body overflow-hidden">
              <p class="pb-5 text-sm sm:text-base text-muted-foreground leading-relaxed">
                {faq.answer}
              </p>
            </div>
          </details>
        ))
      }
    </div>
  </div>
</section>

<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

<style>
  /* Enable smooth height transitions from 0 to auto */
  .faq-list {
    interpolate-size: allow-keywords;
  }

  .faq-body {
    height: 0;
    transition: height 0.3s ease;
  }

  details[open] .faq-body {
    height: auto;
  }

  /* Remove default marker in all browsers */
  details summary {
    list-style: none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }
</style>
