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