/**
 * ThinkSchool Public Website — Accessible FAQ Accordion Component
 */
function FAQSection() {
  const faqConfig = window.FAQ_CONFIG || {};
  const categories = faqConfig.categories || [];

  const [openItems, setOpenItems] = React.useState({});

  const toggleItem = (catIdx, itemIdx) => {
    const key = `${catIdx}-${itemIdx}`;
    setOpenItems((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  return (
    <section id="faq" className="py-24 md:py-32 bg-zinc-950 border-t border-white/10 relative">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={faqConfig.eyebrow || "FAQ"}
          title={faqConfig.title || "Frequently Asked Questions"}
          description={faqConfig.description}
          align="center"
          className="mb-16"
        />

        <div className="space-y-12">
          {categories.map((cat, catIdx) => (
            <div key={cat.name} className="space-y-4">
              <h3 className="text-sm font-mono uppercase tracking-wider text-amber-400 font-semibold px-2">
                {cat.name}
              </h3>

              <div className="space-y-3">
                {cat.items.map((item, itemIdx) => {
                  const key = `${catIdx}-${itemIdx}`;
                  const isOpen = Boolean(openItems[key]);

                  return (
                    <div
                      key={itemIdx}
                      className="rounded-2xl border border-white/10 bg-black/60 overflow-hidden transition-colors hover:border-white/20"
                    >
                      <button
                        type="button"
                        onClick={() => toggleItem(catIdx, itemIdx)}
                        className="w-full p-5 sm:p-6 text-left flex items-center justify-between gap-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 select-none"
                        aria-expanded={isOpen}
                      >
                        <span className="text-base sm:text-lg font-heading italic text-white font-medium">
                          {item.question}
                        </span>
                        <span
                          className={`w-6 h-6 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center shrink-0 text-zinc-400 transition-transform duration-200 ${
                            isOpen ? "rotate-180 text-amber-400 bg-amber-500/10 border-amber-500/30" : ""
                          }`}
                        >
                          <Icon name="chevron-down" size={14} />
                        </span>
                      </button>

                      {isOpen && (
                        <div className="px-5 sm:px-6 pb-6 pt-1 text-sm text-zinc-300 font-body leading-relaxed border-t border-white/5">
                          {item.answer}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQSection = FAQSection;