{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-accordion-block-shadcnui",
  "type": "registry:block",
  "title": "FAQ Accordion",
  "description": "Expandable FAQ section with smooth accordion animations",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/faq-accordion-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ChevronDown, HelpCircle, MessageCircle } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst faqs = [\n  {\n    question: \"What is included in the free plan?\",\n    answer:\n      \"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.\",\n  },\n  {\n    question: \"Can I upgrade or downgrade my plan at any time?\",\n    answer:\n      \"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.\",\n  },\n  {\n    question: \"What payment methods do you accept?\",\n    answer:\n      \"We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for enterprise accounts. All payments are processed securely through Stripe.\",\n  },\n  {\n    question: \"Is there a setup fee or contract required?\",\n    answer:\n      \"No setup fees and no long-term contracts required. You can cancel anytime. For enterprise plans, we offer flexible terms based on your needs.\",\n  },\n  {\n    question: \"Do you offer refunds?\",\n    answer:\n      \"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.\",\n  },\n  {\n    question: \"How does customer support work?\",\n    answer:\n      \"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.\",\n  },\n];\n\nexport function FAQAccordionBlock() {\n  const [openIndex, setOpenIndex] = useState<number | null>(0);\n\n  return (\n    <section className=\"w-full bg-gradient-to-b from-background to-muted/30 px-4 py-16 md:py-24\">\n      <div className=\"mx-auto max-w-4xl\">\n        {/* Header */}\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center md:mb-16\"\n        >\n          <Badge className=\"mb-4\" variant=\"secondary\">\n            <HelpCircle className=\"mr-1 h-3 w-3\" />\n            FAQ\n          </Badge>\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">\n            Frequently Asked Questions\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-base text-muted-foreground md:text-lg\">\n            Have a question? We've got answers. If you don't find what you're\n            looking for, feel free to contact us.\n          </p>\n        </motion.div>\n\n        {/* FAQ Accordion */}\n        <div className=\"space-y-4\">\n          {faqs.map((faq, index) => {\n            const isOpen = openIndex === index;\n\n            return (\n              <motion.div\n                key={index}\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: index * 0.1, duration: 0.4 }}\n              >\n                <Card className=\"overflow-hidden border-border/50 bg-card transition-all hover:border-primary/50 hover:shadow-md\">\n                  <motion.button\n                    onClick={() => setOpenIndex(isOpen ? null : index)}\n                    className=\"flex w-full items-center justify-between p-4 text-left md:p-6\"\n                    whileHover={{\n                      backgroundColor: \"rgba(var(--primary), 0.03)\",\n                    }}\n                  >\n                    <span className=\"pr-4 text-base font-semibold md:text-lg\">\n                      {faq.question}\n                    </span>\n                    <motion.div\n                      animate={{ rotate: isOpen ? 180 : 0 }}\n                      transition={{ duration: 0.3, ease: \"easeInOut\" }}\n                      className=\"flex-shrink-0\"\n                    >\n                      <ChevronDown className=\"h-5 w-5 text-muted-foreground\" />\n                    </motion.div>\n                  </motion.button>\n\n                  <AnimatePresence>\n                    {isOpen && (\n                      <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: \"auto\", opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{ duration: 0.3, ease: \"easeInOut\" }}\n                        className=\"overflow-hidden\"\n                      >\n                        <div className=\"border-t border-border/50 p-4 md:p-6\">\n                          <motion.p\n                            initial={{ y: -10 }}\n                            animate={{ y: 0 }}\n                            className=\"text-sm text-muted-foreground md:text-base\"\n                          >\n                            {faq.answer}\n                          </motion.p>\n                        </div>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </div>\n\n        {/* Bottom CTA */}\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.8 }}\n          className=\"mt-12 text-center md:mt-16\"\n        >\n          <Card className=\"border-border/50 bg-gradient-to-br from-card to-muted/30 p-6 md:p-8\">\n            <MessageCircle className=\"mx-auto mb-4 h-12 w-12 text-primary\" />\n            <h3 className=\"mb-2 text-xl font-bold md:text-2xl\">\n              Still have questions?\n            </h3>\n            <p className=\"mb-6 text-sm text-muted-foreground md:text-base\">\n              Our team is here to help. Get in touch and we'll respond as soon\n              as possible.\n            </p>\n            <div className=\"flex flex-col justify-center gap-3 sm:flex-row\">\n              <Button size=\"lg\">Contact Support</Button>\n              <Button size=\"lg\" variant=\"outline\">\n                View Documentation\n              </Button>\n            </div>\n          </Card>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/faq-accordion-block-shadcnui.tsx"
    }
  ]
}