"use client";

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

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

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>常见问题</h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
      >
        {FAQ_ITEMS.map((item, i) => (
          <div
            key={i}
            className={styles.card}
            style={{
              marginBottom: "0.75rem",
              cursor: "pointer",
            }}
            onClick={() => setOpenIndex(openIndex === i ? null : i)}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                fontWeight: 500,
                color: "var(--foreground)",
              }}
            >
              {item.q}
              <span style={{ fontSize: "1.2rem", transition: "transform 0.2s", transform: openIndex === i ? "rotate(180deg)" : "none" }}>
                ▼
              </span>
            </div>
            {openIndex === i && (
              <p
                style={{
                  marginTop: "0.75rem",
                  fontSize: "0.9rem",
                  color: "var(--muted-foreground)",
                  lineHeight: 1.5,
                }}
              >
                {item.a}
              </p>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}