1"use client";
2
3import { useState } from "react";
4import { ChevronDown } from "lucide-react";
5
6const faqs = [
7  {
8    question: "What is a FAQ and why is it important?",
9    answer:
10      "A FAQ (Frequently Asked Questions) section provides quick answers to common questions, reducing support workload and improving user experience by addressing concerns proactively.",
11  },
12  {
13    question: "Why should I use a FAQ on my website or app?",
14    answer:
15      "FAQs help users find answers instantly, reduce support tickets, improve SEO, and demonstrate transparency by addressing common concerns upfront.",
16  },
17  {
18    question: "How do I effectively create a FAQ section?",
19    answer:
20      "Start by gathering common customer questions, organize them by category, write clear concise answers, and update regularly based on user feedback and new inquiries.",
21  },
22  {
23    question: "What are the benefits of having a well-maintained FAQ section?",
24    answer:
25      "Benefits include reduced support costs, improved customer satisfaction, better SEO rankings, increased trust, and faster resolution of common issues.",
26  },
27  {
28    question: "How often should I update my FAQ section?",
29    answer:
30      "Review and update your FAQ section quarterly or whenever you launch new features, receive recurring questions, or notice gaps in existing content.",
31  },
32];
33
34export const FaqAccordionSplit = () => {
35  const [openIndex, setOpenIndex] = useState<number | null>(null);
36
37  const toggleFaq = (index: number) => {
38    setOpenIndex(openIndex === index ? null : index);
39  };
40
41  return (
42    <div className="w-full min-h-screen flex items-center justify-center">
43      <div className="w-full max-w-7xl grid lg:grid-cols-2 gap-8 items-start">
44        {/* Left Column */}
45        <div className="lg:sticky lg:top-8">
46          <h2 className="text-5xl font-bold text-primary/80">Need Help?</h2>
47          <p className="text-4xl font-medium text-muted-foreground mt-2">
48            We&apos;re here to assist.
49          </p>
50          <p className="mt-8 text-muted-foreground leading-relaxed">
51            Still have questions? Feel free to contact our friendly{" "}
52            <span className="text-foreground underline underline-offset-4 cursor-pointer">
53              support team
54            </span>{" "}
55            specialists.
56          </p>
57          <button className="mt-8 px-6 py-3 border border-border rounded-lg text-sm font-medium hover:bg-muted transition-colors">
58            View all FAQs
59          </button>
60        </div>
61
62        <div>
63          {faqs.map((faq, index) => (
64            <div
65              key={index}
66              className="rounded-lg overflow-hidden"
67            >
68              <button
69                onClick={() => toggleFaq(index)}
70                className="w-full px-6 py-5 flex items-center justify-between text-left transition-colors"
71              >
72                <span className="font-medium text-foreground pr-4">
73                  {faq.question}
74                </span>
75                <ChevronDown
76                  className={`size-5 text-muted-foreground shrink-0 transition-transform duration-300 ${
77                    openIndex === index ? "rotate-180" : ""
78                  }`}
79                />
80              </button>
81              <div
82                className={`overflow-hidden transition-all duration-300 ease-in-out ${
83                  openIndex === index ? "max-h-96" : "max-h-0"
84                }`}
85              >
86                <div className="px-6 pb-5 pt-2 text-sm text-muted-foreground leading-relaxed">
87                  {faq.answer}
88                </div>
89              </div>
90            </div>
91          ))}
92        </div>
93      </div>
94    </div>
95  );
96};
97