"use client"

import { useState } from "react"
import Link from "next/link"
import { CONTACT_FAQS } from "@/lib/site-content"

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

  return (
    <section className="section-small">
      <div className="w-layout-blockcontainer container-default w-container">
        <div className="w-layout-grid faqs-v1-wrapper">
          <div className="sticky-top static-mbl">
            <div data-w-id="e69dfbb3-1a44-4cc6-11e0-94df71efbf76" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _260px _100-mbl">
              <div className="subtitle">
                FAQ
              </div>
              <div className="mg-top-4x-extra-small">
                <h2>常见问题</h2>
              </div>
              <div className="mg-top-4x-extra-small">
                <p>
                  如果下面几条还不够覆盖你的情况，直接提交表单会更高效。
                </p>
              </div>
              <div className="mg-top-2x-extra-small">
                <div className="buttons-row left">
                  <Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" data-wf--primary-button--variant="base" href="#contact-form" className="primary-button w-inline-block">
                    <div className="button-content">
                      <div>
                        提交需求
                      </div>
                      <div className="button-icon-wrapper primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
                          <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
                          </path>
                        </svg>
                        <div className="button-icon-bg">
                        </div>
                        <div className="button-icon-bg-inside">
                        </div>
                      </div>
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="w-layout-grid faqs-v1-grid">
            {CONTACT_FAQS.map((faq, i) => (
              <div key={i} className="card-accordion-v1-wrapper sibling-blur-item" onClick={() => setOpenIndex(openIndex === i ? null : i)} style={{ cursor: "pointer" }}>
                <div className="card accordion-card-v1">
                  <div className="accordion-number">
                    <div>{String(i + 1).padStart(2, "0")}</div>
                  </div>
                  <div className="accordion-content">
                    <h3 className="accordion-title">{faq.question}</h3>
                    <div className="accordion-body" style={{ maxHeight: openIndex === i ? "200px" : "0px", overflow: "hidden", transition: "max-height 0.3s ease" }}>
                      <p className="mg-top-4x-extra-small">{faq.answer}</p>
                    </div>
                  </div>
                  <div className="accordion-arrow" style={{ transform: openIndex === i ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.3s ease" }}>
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none">
                      <path d="M15.5 7.03847L10 12.9615L4.5 7.03847" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
                    </svg>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}