"use client";

import { useState } from "react";
import { FAQ_ITEMS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";

function ChevronDown() {
  return (
    <svg className={styles.faqChevron} width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
      <path
        d="M6 9l6 6 6-6"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function FAQSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <section className={`${styles.section} ${styles.faqSection}`} aria-labelledby="faq-heading">
      <div className={`${styles.faqInner} animate__animated animate__fadeInUp`} style={{ animationDelay: "0.15s", animationFillMode: "both" }}>
        <p className={styles.faqEyebrow}>
          <span className={styles.faqEyebrowDot} aria-hidden />
          FAQ
        </p>
        <h2 id="faq-heading" className={styles.faqHeadline}>
          常见问题
        </h2>
        <p className={styles.faqSub}>
          购买前可快速了解会员权益与流程；点击问题展开详情。
        </p>
        <div className={styles.faqList} role="list">
          {FAQ_ITEMS.map((item, i) => {
            const open = openIndex === i;
            const panelId = `faq-panel-${i}`;
            const triggerId = `faq-trigger-${i}`;
            return (
              <div
                key={i}
                className={`${styles.faqItem} ${open ? styles.faqItemOpen : ""}`}
                role="listitem"
              >
                <button
                  type="button"
                  id={triggerId}
                  className={styles.faqTrigger}
                  aria-expanded={open}
                  aria-controls={panelId}
                  onClick={() => setOpenIndex(open ? null : i)}
                >
                  <span className={styles.faqIndex} aria-hidden>
                    {i + 1}
                  </span>
                  <span className={styles.faqQuestionText}>{item.q}</span>
                  <ChevronDown />
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={triggerId}
                  className={`${styles.faqPanel} ${open ? styles.faqPanelOpen : ""}`}
                >
                  <div className={styles.faqPanelInner}>
                    <p className={styles.faqAnswer}>{item.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}