{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faqs-5",
  "type": "registry:block",
  "description": "Responsive FAQ section with filters, search, and accordions for quick answers.",
  "registryDependencies": [
    "accordion",
    "button",
    "input-group",
    "empty"
  ],
  "files": [
    {
      "path": "registry/blocks/faqs/5/faqs-section.tsx",
      "content": "\"use client\";\nimport { Search, SearchSlash } 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 {\n  Empty,\n  EmptyContent,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { cn } from \"@/lib/utils\";\n\nexport function FaqsSection() {\n  const [searchTerm, setSearchTerm] = React.useState(\"\");\n  const [activeCategory, setActiveCategory] = React.useState(\"all\");\n\n  const categories = [\n    { id: \"all\", label: \"All\" },\n    { id: \"getting-started\", label: \"Getting Started\" },\n    { id: \"features\", label: \"Features\" },\n    { id: \"billing\", label: \"Billing\" },\n    { id: \"support\", label: \"Support\" },\n  ];\n\n  const filtered = faqs.filter((faq) => {\n    const matchesCategory =\n      activeCategory === \"all\" || faq.category === activeCategory;\n    const matchesSearch =\n      faq.title.toLowerCase().includes(searchTerm.toLowerCase()) ||\n      faq.content.toLowerCase().includes(searchTerm.toLowerCase());\n    return matchesCategory && matchesSearch;\n  });\n\n  return (\n    <div className=\"mx-auto min-h-screen w-full max-w-3xl md:border-x\">\n      <div className=\"px-4 py-16 lg:px-6\">\n        <h1 className=\"mb-4 font-semibold text-3xl md:text-4xl\">\n          Frequently Asked Questions\n        </h1>\n        <p className=\"mb-8 max-w-2xl text-muted-foreground\">\n          Find answers to common questions about Efferd. Can't find what you're\n          looking for? Our support team is here to help.\n        </p>\n\n        <InputGroup className=\"max-w-sm\">\n          <InputGroupInput\n            onChange={(e) => setSearchTerm(e.target.value)}\n            placeholder=\"Search FAQs...\"\n            value={searchTerm}\n          />\n          <InputGroupAddon>\n            <Search />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n\n      <div className=\"absolute inset-x-0 h-px bg-border\" />\n\n      <div className=\"flex flex-wrap gap-1 border-b px-4 md:gap-3\">\n        {categories.map((cat) => (\n          <button\n            className=\"flex flex-col\"\n            key={cat.id}\n            onClick={() => setActiveCategory(cat.id)}\n            type=\"button\"\n          >\n            <span\n              className={cn(\n                \"p-1 text-muted-foreground text-sm hover:text-primary md:p-2 md:text-base\",\n                activeCategory === cat.id && \"text-primary\"\n              )}\n            >\n              {cat.label}\n            </span>\n            {activeCategory === cat.id && (\n              <span className=\"h-0.5 w-full rounded-full bg-primary\" />\n            )}\n          </button>\n        ))}\n      </div>\n\n      <Accordion\n        className=\"space-y-2 px-4 py-12 lg:px-6\"\n        collapsible\n        defaultValue=\"item-1\"\n        type=\"single\"\n      >\n        {filtered.map((faq) => (\n          <AccordionItem\n            className=\"rounded-md border bg-card/20 shadow outline-none last:border-b has-focus-visible:border-ring data-[state=open]:bg-card\"\n            key={faq.id}\n            value={faq.id.toString()}\n          >\n            <AccordionTrigger className=\"px-4 hover:no-underline focus-visible:ring-0\">\n              {faq.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"px-4 pt-2 pb-4 text-muted-foreground\">\n              {faq.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n\n      {filtered.length === 0 && (\n        <Empty>\n          <EmptyHeader>\n            <EmptyMedia variant=\"icon\">\n              <Search />\n            </EmptyMedia>\n            <EmptyTitle>No FAQs found matching your search.</EmptyTitle>\n          </EmptyHeader>\n          <EmptyContent>\n            <Button onClick={() => setSearchTerm(\"\")} variant=\"outline\">\n              <SearchSlash />\n              Clear search\n            </Button>\n          </EmptyContent>\n        </Empty>\n      )}\n\n      <div className=\"flex items-center px-4 py-6 lg:px-6\">\n        <p className=\"text-muted-foreground\">\n          Can't find what you're looking for?{\" \"}\n          <a className=\"text-primary hover:underline\" href=\"#\">\n            Contact Us\n          </a>\n        </p>\n      </div>\n    </div>\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"
  ]
}