1"use client";
2
3import { useState } from "react";
4
5const faqs = [
6  {
7    question: "What payment methods do you accept?",
8    answer:
9      "We accept all major credit cards, PayPal, and bank transfers. For enterprise clients, we also offer custom payment terms and invoicing options.",
10  },
11  {
12    question: "How long does it take to get started?",
13    answer:
14      "You can get started immediately after signing up. Our onboarding process takes just 5 minutes, and our team is available 24/7 to help you set up your account.",
15  },
16  {
17    question: "Can I cancel my subscription at any time?",
18    answer:
19      "Yes, you can cancel your subscription at any time with no questions asked. You'll continue to have access until the end of your billing period.",
20  },
21  {
22    question: "Do you offer a free trial?",
23    answer:
24      "Yes! We offer a 14-day free trial with full access to all features. No credit card required to get started.",
25  },
26  {
27    question: "What kind of support do you provide?",
28    answer:
29      "We provide 24/7 email support, live chat during business hours, and dedicated account managers for enterprise clients. We also have extensive documentation and video tutorials.",
30  },
31];
32
33export const FaqAccordion = () => {
34  const [openIndex, setOpenIndex] = useState<number | null>(0);
35
36  return (
37    <div className="w-full min-h-screen bg-[#fafafa] flex items-center justify-center p-8">
38      <div className="w-full max-w-2xl">
39        {/* Header */}
40        <div className="mb-10">
41          <h2 className="text-3xl font-semibold text-[#37352f] mb-2">
42            Frequently Asked Questions
43          </h2>
44          <p className="text-[#787774] text-sm">
45            Everything you need to know about our product and services
46          </p>
47        </div>
48
49        {/* FAQ Items */}
50        <div className="space-y-1">
51          {faqs.map((faq, index) => (
52            <div
53              key={index}
54              className="bg-white rounded-lg overflow-hidden transition-all duration-200"
55            >
56              <button
57                onClick={() => setOpenIndex(openIndex === index ? null : index)}
58                className="w-full px-5 py-4 flex items-center justify-between text-left hover:bg-[#f7f6f3] transition-colors group"
59              >
60                <span className="text-[#37352f] font-medium text-[15px] pr-8">
61                  {faq.question}
62                </span>
63                <div
64                  className={`flex-shrink-0 w-5 h-5 transition-transform duration-200 ${
65                    openIndex === index ? "rotate-180" : ""
66                  }`}
67                >
68                  <svg
69                    className="w-full h-full text-[#9b9a97]"
70                    fill="none"
71                    stroke="currentColor"
72                    viewBox="0 0 24 24"
73                  >
74                    <path
75                      strokeLinecap="round"
76                      strokeLinejoin="round"
77                      strokeWidth={2}
78                      d="M19 9l-7 7-7-7"
79                    />
80                  </svg>
81                </div>
82              </button>
83              <div
84                className={`overflow-hidden transition-all duration-200 ease-in-out ${
85                  openIndex === index ? "max-h-96" : "max-h-0"
86                }`}
87              >
88                <div className="px-5 pb-4 pt-1">
89                  <p className="text-[#787774] text-[14px] leading-relaxed">
90                    {faq.answer}
91                  </p>
92                </div>
93              </div>
94            </div>
95          ))}
96        </div>
97
98        {/* Footer CTA */}
99        <div className="mt-10 pt-8 border-t border-[#e9e9e7]">
100          <p className="text-[#787774] text-sm mb-3">Still have questions?</p>
101          <button className="px-4 py-2 bg-[#37352f] text-white text-sm font-medium rounded-md hover:bg-[#2f2e2b] transition-colors">
102            Contact Support
103          </button>
104        </div>
105      </div>
106    </div>
107  );
108};
109