"use client"

import { useState } from "react"
import { HOME_FAQS } from "@/lib/site-content"

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

  return (
    <section className="section overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="faq-wrapper"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="w-layout-grid faqs-v1-wrapper"
        >
          <div>
            <div className="subtitle">FAQ</div>
            <div className="mg-top-4x-extra-small">
              <h2>常见问题</h2>
            </div>
          </div>
          <div className="w-layout-grid faqs-v1-grid" role="list">
            {HOME_FAQS.map((faq, i) => (
              <div
                key={faq.question}
                className="card accordion-card-v1"
                role="listitem"
                style={{ cursor: "pointer" }}
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
              >
                <div className="accordion-number">
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div className="accordion-body">
                  <div className="accordion-title">{faq.question}</div>
                  <div
                    className="accordion-content"
                    style={{
                      maxHeight: openIndex === i ? "200px" : "0",
                      overflow: "hidden",
                      transition: "max-height 0.3s ease-out",
                      opacity: openIndex === i ? 1 : 0,
                    }}
                  >
                    <p>{faq.answer}</p>
                  </div>
                </div>
                <div className="accordion-arrow">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="100%"
                    viewBox="0 0 16 16"
                    fill="none"
                    style={{
                      transform: openIndex === i ? "rotate(180deg)" : "rotate(0deg)",
                      transition: "transform 0.3s ease-out",
                    }}
                  >
                    <path
                      d="M4 6L8 10L12 6"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}