{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faqs-4",
  "type": "registry:block",
  "description": "Multi-category FAQ section with sidebar filters, adaptive accordion layout, and elegant interactive transitions.",
  "registryDependencies": [
    "accordion",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/faqs/4/faqs-section.tsx",
      "content": "\"use client\";\nimport { CreditCard, Feather, LayoutGrid, LifeBuoy, Power } from \"lucide-react\";\nimport React from \"react\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst categories = [\n  { icon: LayoutGrid, id: \"all\", label: \"All Topics\" },\n  { icon: Power, id: \"getting-started\", label: \"Getting Started\" },\n  { icon: Feather, id: \"features\", label: \"Features\" },\n  { icon: CreditCard, id: \"billing\", label: \"Billing\" },\n  { icon: LifeBuoy, id: \"support\", label: \"Support\" },\n];\n\nexport function FaqsSection() {\n  const [activeCategory, setActiveCategory] = React.useState(\"all\");\n\n  const filtered = faqs.filter((faq) => {\n    const matchesCategory =\n      activeCategory === \"all\" || faq.category === activeCategory;\n    return matchesCategory;\n  });\n\n  const currentCategory = React.useMemo(\n    () => categories.find((cat) => cat.id === activeCategory),\n    [activeCategory]\n  );\n\n  return (\n    <section className=\"mx-auto min-h-screen w-full max-w-5xl\">\n      <div className=\"flex flex-col items-center justify-center gap-4 px-4 py-16\">\n        <h2 className=\"text-balance font-black font-mono text-4xl md:text-5xl lg:font-black\">\n          FaQs\n        </h2>\n        <p className=\"text-muted-foreground\">Your questions answered here.</p>\n      </div>\n      <div className=\"relative grid min-h-full grid-cols-1 py-12 md:grid-cols-3\">\n        <div className=\"flex h-full items-start justify-center border-b pb-2 md:border-b-0\">\n          <div className=\"flex w-max flex-wrap items-start justify-start gap-2 md:flex-col md:justify-center\">\n            {categories.map((cat) => (\n              <Button\n                className={cn(\n                  \"border border-transparent\",\n                  activeCategory === cat.id && \"border-border\"\n                )}\n                key={cat.id}\n                onClick={() => setActiveCategory(cat.id)}\n                variant={activeCategory === cat.id ? \"outline\" : \"ghost\"}\n              >\n                <cat.icon className=\"size-4\" />\n                {cat.label}\n              </Button>\n            ))}\n          </div>\n        </div>\n        <div className=\"col-span-2 space-y-5 px-4 py-5\">\n          {currentCategory && (\n            <div className=\"flex items-center gap-2\">\n              <currentCategory.icon className=\"size-4\" />\n              <span className=\"font-medium\">{currentCategory.label}</span>\n            </div>\n          )}\n          <Accordion\n            className=\"space-y-2\"\n            collapsible\n            defaultValue=\"1\"\n            type=\"single\"\n          >\n            {filtered.map((item) => (\n              <AccordionItem\n                className=\"border-b-0\"\n                key={item.id}\n                value={item.id.toString()}\n              >\n                <AccordionTrigger className=\"border bg-card px-4 shadow hover:no-underline\">\n                  {item.title}\n                </AccordionTrigger>\n\n                <AccordionContent className=\"px-4 py-4\">\n                  {item.content}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nconst faqs = [\n  {\n    id: 1,\n    category: \"getting-started\",\n    title: \"How do I create my first project?\",\n    content:\n      'Click the \"New Project\" button in your dashboard, choose a template or start from scratch, customize your project name and settings, and you\\'ll be ready to start building in seconds.',\n  },\n  {\n    id: 2,\n    category: \"getting-started\",\n    title: \"What are the system requirements?\",\n    content:\n      \"Efferd works on any modern web browser including Chrome, Firefox, Safari, and Edge. No special software installation is required—just visit our platform and log in.\",\n  },\n  {\n    id: 3,\n    category: \"features\",\n    title: \"Can I use Efferd for team collaboration?\",\n    content:\n      \"Absolutely! Invite team members, set role-based permissions, leave comments on components, and track changes in real-time. Our collaboration features are built for teams of all sizes.\",\n  },\n  {\n    id: 4,\n    category: \"features\",\n    title: \"Is there a component library?\",\n    content:\n      \"Yes, Efferd includes a comprehensive library of pre-built, customizable components. You can also create your own reusable components and share them across your projects.\",\n  },\n  {\n    id: 5,\n    category: \"features\",\n    title: \"Do you support custom integrations?\",\n    content:\n      \"We support integrations with GitHub, GitLab, Figma, Slack, and major cloud providers. For custom integrations, contact our support team to discuss your needs.\",\n  },\n  {\n    id: 6,\n    category: \"billing\",\n    title: \"What payment methods do you accept?\",\n    content:\n      \"We accept all major credit cards, PayPal, and bank transfers for annual plans. Invoicing is available for enterprise customers.\",\n  },\n  {\n    id: 7,\n    category: \"billing\",\n    title: \"Can I change my plan anytime?\",\n    content:\n      \"Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate your billing accordingly.\",\n  },\n  {\n    id: 8,\n    category: \"support\",\n    title: \"How do I report a bug?\",\n    content:\n      \"Use the in-app feedback button or email support@efferd.com with details about the issue. Our team typically responds within 24 hours.\",\n  },\n  {\n    id: 9,\n    category: \"support\",\n    title: \"Do you offer training or onboarding?\",\n    content:\n      \"We provide video tutorials, documentation, and live webinars. Premium plans include personalized onboarding sessions with our support team.\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "faqs"
  ]
}