{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-3",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "accordion",
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/faq-3.tsx",
      "content": "\"use client\";\n\nimport { FaPlus, FaMinus } from \"react-icons/fa\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport interface FAQItem {\n  question: string;\n  answer: string;\n}\n\nexport interface FAQSectionProps {\n  badge?: string;\n  heading: string;\n  subheading: string;\n  items: FAQItem[];\n}\n\nexport default function FAQ3({\n  badge = \"Frequently asked questions\",\n  heading,\n  subheading,\n  items,\n}: FAQSectionProps) {\n  return (\n    <section className=\"bg-background flex w-full flex-col items-center justify-center px-4 py-16\">\n      {/* ── Header ── */}\n      <div className=\"mb-12 flex w-full max-w-xl flex-col items-center text-center sm:mb-16\">\n        {badge && (\n          <Badge\n            variant=\"outline\"\n            className=\"border-border bg-background text-muted-foreground mb-5 gap-1.5 rounded-full px-3 py-1 text-xs font-medium tracking-wide\"\n          >\n            <span className=\"bg-primary inline-block h-2 w-2 rounded-full\" />\n            {badge}\n          </Badge>\n        )}\n\n        <h2 className=\"text-foreground mb-4 text-4xl leading-tight font-bold tracking-tight sm:text-5xl\">\n          {heading}\n        </h2>\n\n        <p className=\"text-muted-foreground max-w-sm text-sm leading-relaxed sm:text-base\">\n          {subheading}\n        </p>\n      </div>\n\n      <div className=\"w-full max-w-2xl\">\n        <Accordion type=\"single\" collapsible className=\"flex w-full flex-col\">\n          {items.map((item, i) => {\n            const num = String(i + 1).padStart(2, \"0\");\n            return (\n              <AccordionItem\n                key={i}\n                value={`item-${i}`}\n                className=\"group border-border bg-muted/30 hover:border-border/80 hover:bg-muted/50 data-[state=open]:border-border/80 from-primary/70 to-primary/50 overflow-hidden border transition-all duration-300 data-[state=open]:bg-gradient-to-r data-[state=open]:shadow-sm\"\n              >\n                <AccordionTrigger className=\"flex w-full items-center gap-4 px-5 py-5 hover:no-underline sm:px-7 sm:py-3 [&_[data-slot=accordion-trigger-icon]]:!hidden\">\n                  <span className=\"text-muted-foreground/50 group-hover:text-muted-foreground group-data-[state=open]:text-muted w-8 shrink-0 text-center text-xs font-semibold tracking-widest tabular-nums transition-colors duration-200\">\n                    {num}\n                  </span>\n\n                  <span className=\"text-muted-foreground group-hover:text-foreground group-data-[state=open]:text-muted flex-1 text-left text-sm leading-snug font-medium transition-colors duration-200 sm:text-base\">\n                    {item.question}\n                  </span>\n\n                  <span className=\"group-hover:text-foreground group-data-[state=open]:text-muted flex h-7 w-7 shrink-0 items-center justify-center transition-all duration-300\">\n                    <FaPlus className=\"block h-3 w-3 group-data-[state=open]:hidden\" />\n                    <FaMinus className=\"hidden h-3 w-3 group-data-[state=open]:block\" />\n                  </span>\n                </AccordionTrigger>\n                <AccordionContent className=\"px-5 pt-0 pb-5 pl-[4.25rem] sm:px-7 sm:pb-6\">\n                  <p className=\"text-foreground text-sm leading-relaxed sm:text-base\">\n                    {item.answer}\n                  </p>\n                </AccordionContent>\n              </AccordionItem>\n            );\n          })}\n        </Accordion>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/faq-3.tsx"
    }
  ],
  "type": "registry:ui"
}