FAQ Accordion

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { Card } from "@/components/ui/card";
6import { AnimatePresence, motion } from "framer-motion";
7import { ChevronDown, HelpCircle, MessageCircle } from "lucide-react";
8import { useState } from "react";
9 
10const faqs = [
11  {
12    question: "What is included in the free plan?",
13    answer:
14      "The free plan includes access to basic components, up to 5 projects, community support, and regular updates. It's perfect for individuals and small projects to get started.",
15  },
16  {
17    question: "Can I upgrade or downgrade my plan at any time?",
18    answer:
19      "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate the billing accordingly. No hassle, no hidden fees.",
20  },
21  {
22    question: "What payment methods do you accept?",
23    answer:
24      "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for enterprise accounts. All payments are processed securely through Stripe.",
25  },
26  {
27    question: "Is there a setup fee or contract required?",
28    answer:
29      "No setup fees and no long-term contracts required. You can cancel anytime. For enterprise plans, we offer flexible terms based on your needs.",
30  },
31  {
32    question: "Do you offer refunds?",
33    answer:
34      "Yes, we offer a 30-day money-back guarantee. If you're not satisfied with our service within the first 30 days, we'll provide a full refund, no questions asked.",
35  },
36  {
37    question: "How does customer support work?",
38    answer:
39      "Free plans get community support through our forum. Pro plans include email support with 24-hour response time. Enterprise plans get priority support with dedicated account managers and SLA guarantees.",
40  },
41];
42 
43export function FAQAccordionBlock() {
44  const [openIndex, setOpenIndex] = useState<number | null>(0);
45 
46  return (
47    <section className="w-full bg-gradient-to-b from-background to-muted/30 px-4 py-16 md:py-24">
48      <div className="mx-auto max-w-4xl">
49        {/* Header */}
50        <motion.div
51          initial={{ opacity: 0, y: -20 }}
52          animate={{ opacity: 1, y: 0 }}
53          transition={{ duration: 0.6 }}
54          className="mb-12 text-center md:mb-16"
55        >
56          <Badge className="mb-4" variant="secondary">
57            <HelpCircle className="mr-1 h-3 w-3" />
58            FAQ
59          </Badge>
60// … truncated