{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-12","type":"registry:block","title":"Faq 12","description":"","dependencies":[],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/accordion.json","https://www.diarmuradi.com/r/styles/base-nova/button.json"],"files":[{"path":"faq.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\n\nconst categories = [\n  {\n    title: \"Account\",\n    items: [\n      {\n        value: \"item-1\",\n        trigger: \"How do I change my email address?\",\n        content:\n          \"You can update your email address in your account settings. We'll send a verification link to confirm the change.\",\n      },\n      {\n        value: \"item-2\",\n        trigger: \"Can I update my payment details online?\",\n        content:\n          \"Yes, you can update your payment information anytime in the billing section of your account settings.\",\n      },\n      {\n        value: \"item-3\",\n        trigger: \"What should I do if I forget my password?\",\n        content:\n          \"Click 'Forgot Password' on the login page and follow the reset instructions sent to your email.\",\n      },\n    ],\n  },\n  {\n    title: \"Support\",\n    items: [\n      {\n        value: \"item-4\",\n        trigger: \"How can I contact customer support?\",\n        content:\n          \"You can reach our support team via live chat, email, or phone. We're available 24/7 to help.\",\n      },\n      {\n        value: \"item-5\",\n        trigger: \"Do you provide weekend assistance?\",\n        content:\n          \"Yes, our support team is available 7 days a week, including weekends and holidays.\",\n      },\n      {\n        value: \"item-6\",\n        trigger: \"Is live chat support available?\",\n        content:\n          \"Yes, live chat support is available during business hours. For after-hours issues, please email us.\",\n      },\n    ],\n  },\n  {\n    title: \"Payments\",\n    items: [\n      {\n        value: \"item-7\",\n        trigger: \"How long does it take to process a payment?\",\n        content:\n          \"Most payments are processed within 1-2 business days depending on your payment method.\",\n      },\n      {\n        value: \"item-8\",\n        trigger: \"Are refunds handled automatically?\",\n        content:\n          \"Yes, refunds are processed automatically and typically appear in your account within 3-5 business days.\",\n      },\n    ],\n  },\n]\n\nexport function Faq() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-3xl flex-col gap-8\">\n      <header className=\"flex flex-col gap-3\">\n        <p className=\"w-fit rounded-md bg-muted p-2 text-sm text-foreground\">\n          Knowledge base\n        </p>\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl\">\n            Grouped by topic\n          </h1>\n          <p className=\"text-muted-foreground\">\n            Account, support, and payments live in separate cards so you can\n            scan faster.\n          </p>\n        </div>\n      </header>\n\n      <div className=\"flex flex-col gap-4\">\n        {categories.map((category) => (\n          <div\n            key={category.title}\n            className=\"flex flex-col gap-4 rounded-xl bg-card p-4 shadow-elevated-sm\"\n          >\n            <h2 className=\"text-sm font-medium text-muted-foreground\">\n              {category.title}\n            </h2>\n            <Accordion multiple className=\"gap-2\">\n              {category.items.map((item) => (\n                <AccordionItem\n                  key={item.value}\n                  value={item.value}\n                  className=\"border-none\"\n                >\n                  <AccordionTrigger className=\"text-sm text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground\">\n                    {item.trigger}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"flex flex-col gap-2 pb-2 text-balance text-foreground\">\n                    <p className=\"text-sm\">{item.content}</p>\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col items-start gap-0.5 rounded-lg bg-muted p-2 text-sm text-muted-foreground md:flex-row\">\n        <span>Was your question not answered? You can reach us via email </span>\n        <Button\n          variant=\"link\"\n          className=\"h-auto p-0 text-foreground md:ml-auto\"\n          render={<a href=\"mailto:user@example.com\" />}\n          nativeButton={false}\n        >\n          user@example.com\n        </Button>\n      </div>\n    </div>\n  )\n}","target":"components/faq.tsx"}]}