{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-11",
  "title": "FAQ 11",
  "description": "A simple FAQ block",
  "files": [
    {
      "path": "src/registry/blocks/radix/faq-11/components/faq.tsx",
      "content": "\"use client\";\n\nimport {\n  BanknoteArrowDown,\n  CircleDollarSign,\n  Package,\n  Users,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nconst categorizedFaqs = [\n  {\n    category: \"Orders & Shipping\",\n    icon: Package,\n    faqs: [\n      {\n        question: \"How long does shipping take?\",\n        answer:\n          \"Shipping typically takes 3-7 business days depending on your location.\",\n      },\n      {\n        question: \"Can I cancel or change my order?\",\n        answer:\n          \"You can cancel or modify your order within 2 hours of placing it. After that, it may be processed for shipment.\",\n      },\n      {\n        question: \"Do you ship internationally?\",\n        answer:\n          \"Yes, we offer international shipping. Delivery times and charges vary depending on the destination.\",\n      },\n      {\n        question: \"How can I track my order?\",\n        answer:\n          \"Once your order is shipped, a tracking link will be sent via email. You can also view it in your account.\",\n      },\n      {\n        question: \"What should I do if my order is delayed?\",\n        answer:\n          \"If your order is delayed, please contact our support team and we'll look into it immediately.\",\n      },\n    ],\n  },\n  {\n    category: \"Returns & Refunds\",\n    icon: BanknoteArrowDown,\n    faqs: [\n      {\n        question: \"What is your return policy?\",\n        answer:\n          \"We offer a 30-day return policy on unused items in their original packaging.\",\n      },\n      {\n        question: \"How do I initiate a return?\",\n        answer:\n          \"Log into your account, go to 'Orders', and select the return option or contact support for help.\",\n      },\n      {\n        question: \"How long does it take to process a refund?\",\n        answer:\n          \"Refunds are usually processed within 5-7 business days after we receive the returned item.\",\n      },\n      {\n        question: \"Can I return a used product?\",\n        answer:\n          \"No, we only accept returns for unused products in original condition.\",\n      },\n      {\n        question: \"Are return shipping charges covered?\",\n        answer:\n          \"Return shipping is free for defective or incorrect items. For other returns, the cost is deducted from the refund.\",\n      },\n    ],\n  },\n  {\n    category: \"Payments\",\n    icon: CircleDollarSign,\n    faqs: [\n      {\n        question: \"What payment methods do you accept?\",\n        answer:\n          \"We accept credit/debit cards, UPI, PayPal, Apple Pay, and net banking.\",\n      },\n      {\n        question: \"Is my payment information secure?\",\n        answer:\n          \"Absolutely. We use SSL encryption and secure payment gateways to protect your data.\",\n      },\n      {\n        question: \"Why was my payment declined?\",\n        answer:\n          \"Payments may be declined due to incorrect info or issues with the card issuer. Try again or contact your bank.\",\n      },\n      {\n        question: \"Do you offer cash on delivery (COD)?\",\n        answer:\n          \"Currently, we do not offer COD. All payments must be made online.\",\n      },\n      {\n        question: \"Will I receive an invoice for my purchase?\",\n        answer:\n          \"Yes, an invoice will be emailed to you after successful payment.\",\n      },\n    ],\n  },\n  {\n    category: \"Account & Support\",\n    icon: Users,\n    faqs: [\n      {\n        question: \"Do I need an account to place an order?\",\n        answer:\n          \"No, you can check out as a guest. However, having an account gives you access to order tracking and faster checkouts.\",\n      },\n      {\n        question: \"I forgot my password. What should I do?\",\n        answer:\n          \"Click on 'Forgot password' on the login page and follow the instructions to reset it.\",\n      },\n      {\n        question: \"How can I contact customer support?\",\n        answer:\n          \"You can reach us via email at support@example.com or through live chat on our website.\",\n      },\n      {\n        question: \"How do I update my profile information?\",\n        answer:\n          \"Log in to your account and go to 'Profile Settings' to update your personal details.\",\n      },\n      {\n        question: \"Do you offer 24/7 support?\",\n        answer:\n          \"Yes, our customer support team is available around the clock to help you.\",\n      },\n    ],\n  },\n];\n\nconst FAQ = () => {\n  const [activeCategory, setActiveCategory] = useState<string | null>(\n    categorizedFaqs[0].category\n  );\n  const activeFaqs = categorizedFaqs.find(\n    ({ category }) => category === activeCategory\n  )?.faqs;\n\n  return (\n    <div className=\"mx-auto max-w-7xl px-6 py-12 sm:py-20\">\n      <h2 className=\"text-balance text-center font-medium text-4xl tracking-[-0.04em] sm:text-[2.75rem]\">\n        Frequently Asked Questions\n      </h2>\n      <p className=\"mt-3 text-balance text-center text-lg text-muted-foreground md:text-2xl md:tracking-[-0.015em]\">\n        Find answers to common questions about our products and services\n      </p>\n\n      <div className=\"mx-auto mt-12 max-w-4xl sm:mt-16\">\n        {/* Mobile FAQs */}\n        <div className=\"flex flex-col divide-y sm:hidden\">\n          {categorizedFaqs.map(({ category, icon: Icon, faqs }) => (\n            <div className=\"pt-8 pb-10\" key={category}>\n              <div className=\"mb-2 flex items-center gap-3 pb-3 pl-2\">\n                <Icon className=\"size-6\" />\n                <span className=\"font-medium text-lg\">{category}</span>\n              </div>\n              <FAQList faqs={faqs} />\n            </div>\n          ))}\n        </div>\n\n        {/* Desktop FAQs */}\n        <div className=\"hidden gap-8 sm:flex\">\n          <div className=\"flex flex-col gap-4\">\n            {categorizedFaqs.map(({ category, icon: Icon }) => (\n              <Button\n                className={cn(\"h-11 justify-start gap-1 font-semibold\", {\n                  \"text-foreground/70 hover:text-foreground\":\n                    activeCategory !== category,\n                })}\n                key={category}\n                onClick={() => setActiveCategory(category)}\n                variant={activeCategory === category ? \"default\" : \"ghost\"}\n              >\n                <Icon className=\"mr-2.5 size-5\" />\n                {category}\n              </Button>\n            ))}\n          </div>\n\n          <div className=\"flex grow flex-col gap-4\">\n            <FAQList faqs={activeFaqs ?? []} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nfunction FAQList({ faqs }: { faqs: (typeof categorizedFaqs)[0][\"faqs\"] }) {\n  return (\n    <Accordion className=\"space-y-4\" collapsible type=\"single\">\n      {faqs?.map((faq, index) => (\n        <AccordionItem\n          className=\"rounded-xl not-last:border-b-0 bg-muted px-5\"\n          key={index}\n          value={faq.question}\n        >\n          <AccordionTrigger className=\"font-medium text-lg\">\n            <div className=\"flex items-center gap-2\">{faq.question}</div>\n          </AccordionTrigger>\n          <AccordionContent className=\"text-base\">\n            {faq.answer}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n\nexport default FAQ;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}