{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-4",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "accordion",
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/faq-4.tsx",
      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Button } from \"@/components/ui/button\";\nimport { FaChevronDown } from \"react-icons/fa\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FaqItem {\n  id: string;\n  question: string;\n  answer: string;\n}\n\nexport interface Faq4Props {\n  badge?: string;\n  title: string;\n  description?: string;\n  buttonText?: string;\n  buttonHref?: string;\n  faqs: FaqItem[];\n  className?: string;\n}\n\nexport function Faq4({\n  badge,\n  title,\n  description,\n  buttonText,\n  buttonHref,\n  faqs,\n  className,\n}: Faq4Props) {\n  const leftFaqs = faqs.filter((_, i) => i % 2 === 0);\n  const rightFaqs = faqs.filter((_, i) => i % 2 !== 0);\n\n  return (\n    <section className={cn(\"mx-auto w-full max-w-5xl px-4 py-16\", className)}>\n      <div className=\"mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-end\">\n        <div className=\"max-w-2xl\">\n          {badge && (\n            <div className=\"bg-primary/10 text-primary border-primary/20 mb-4 inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium\">\n              {badge}\n            </div>\n          )}\n          <h2 className=\"text-foreground mb-4 text-3xl font-semibold tracking-tight md:text-5xl\">\n            {title}\n          </h2>\n          {description && (\n            <p className=\"text-muted-foreground text-base md:text-lg\">\n              {description}\n            </p>\n          )}\n        </div>\n        {buttonText && buttonHref && (\n          <div className=\"mb-2 shrink-0 md:mb-0\">\n            <Button asChild size=\"lg\" className=\"rounded-full\">\n              <a href={buttonHref}>{buttonText}</a>\n            </Button>\n          </div>\n        )}\n      </div>\n\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n        <div className=\"grid grid-cols-1 gap-2 md:grid-cols-2\">\n          <div className=\"flex flex-col gap-2\">\n            {leftFaqs.map((faq) => (\n              <AccordionItem\n                key={faq.id}\n                value={faq.id}\n                className=\"bg-muted/50 data-[state=open]:ring-primary data-[state=open]:bg-primary/10 dark:data-[state=open]:bg-primary/20 rounded-2xl border-none px-6 transition-all duration-300 data-[state=open]:ring-2\"\n              >\n                <AccordionTrigger className=\"group flex items-center justify-between py-5 hover:no-underline [&_[data-slot=accordion-trigger-icon]]:!hidden\">\n                  <span className=\"text-foreground pr-4 text-left text-base font-medium\">\n                    {faq.question}\n                  </span>\n                  <div className=\"text-muted-foreground flex shrink-0 items-center justify-center\">\n                    <FaChevronDown className=\"block h-4 w-4 rotate-180 transition-transform group-data-[state=open]:rotate-0\" />\n                  </div>\n                </AccordionTrigger>\n                <AccordionContent className=\"pt-0 pb-5\">\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                    {faq.answer}\n                  </p>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            {rightFaqs.map((faq) => (\n              <AccordionItem\n                key={faq.id}\n                value={faq.id}\n                className=\"bg-muted/50 data-[state=open]:ring-primary data-[state=open]:bg-primary/10 dark:data-[state=open]:bg-primary/20 rounded-2xl border-none px-6 transition-all duration-300 data-[state=open]:ring-2\"\n              >\n                <AccordionTrigger className=\"group flex items-center justify-between py-5 hover:no-underline [&_[data-slot=accordion-trigger-icon]]:!hidden\">\n                  <span className=\"text-foreground pr-4 text-left text-base font-medium\">\n                    {faq.question}\n                  </span>\n                  <div className=\"text-muted-foreground flex shrink-0 items-center justify-center\">\n                    <FaChevronDown className=\"block h-4 w-4 rotate-180 transition-transform group-data-[state=open]:rotate-0\" />\n                  </div>\n                </AccordionTrigger>\n                <AccordionContent className=\"pt-0 pb-5\">\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                    {faq.answer}\n                  </p>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </div>\n        </div>\n      </Accordion>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/faq-4.tsx"
    }
  ],
  "type": "registry:ui"
}