FAQ Accordion

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { AnimatePresence, motion } from "framer-motion";
5import { ChevronDown, HelpCircle, MessageCircle } from "lucide-react";
6import { useState } from "react";
7 
8const faqs = [
9  {
10    question: "What is included in the free plan?",
11    answer:
12      "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.",
13  },
14  {
15    question: "Can I upgrade or downgrade my plan at any time?",
16    answer:
17      "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.",
18  },
19  {
20    question: "What payment methods do you accept?",
21    answer:
22      "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for enterprise accounts. All payments are processed securely through Stripe.",
23  },
24  {
25    question: "Is there a setup fee or contract required?",
26    answer:
27      "No setup fees and no long-term contracts required. You can cancel anytime. For enterprise plans, we offer flexible terms based on your needs.",
28  },
29  {
30    question: "Do you offer refunds?",
31    answer:
32      "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.",
33  },
34  {
35    question: "How does customer support work?",
36    answer:
37      "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.",
38  },
39];
40 
41export function FAQAccordionBlockBaseui() {
42  const [openIndex, setOpenIndex] = useState<number | null>(0);
43 
44  return (
45    <section className="w-full bg-gradient-to-b from-background to-muted/30 px-4 py-16 md:py-24">
46      <div className="mx-auto max-w-4xl">
47        {/* Header */}
48        <motion.div
49          initial={{ opacity: 0, y: -20 }}
50          animate={{ opacity: 1, y: 0 }}
51          transition={{ duration: 0.6 }}
52          className="mb-12 text-center md:mb-16"
53        >
54          <span className="mb-4 inline-flex items-center rounded-full border border-border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground">
55            <HelpCircle className="mr-1 h-3 w-3" />
56            FAQ
57          </span>
58// … truncated