{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq",
  "title": "Faq",
  "description": "A grouped FAQ composed on the nx-ui Accordion, styled as rounded cards that ring on open.",
  "registryDependencies": [
    "@nx-ui/accordion",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/faq.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\n/**\n * Faq — a grouped FAQ, composed on the nx-ui `Accordion` (Base UI) primitive and\n * dressed in the marketing card style: each question is a rounded, bordered card\n * that gains a brand ring when open. Optionally grouped under category labels.\n *\n * `allowMultiple` lets several answers stay open at once. `onOpen` fires with\n * the question text when an item expands (analytics-free — wire it up yourself).\n */\n\nexport interface FaqItem {\n  question: string\n  answer: React.ReactNode\n}\n\nexport interface FaqCategory {\n  id: string\n  label?: string\n  items: FaqItem[]\n}\n\ninterface FaqProps {\n  categories: FaqCategory[]\n  allowMultiple?: boolean\n  onOpen?: (question: string) => void\n  className?: string\n}\n\nfunction Faq({ categories, allowMultiple = true, onOpen, className }: FaqProps) {\n  const previouslyOpen = React.useRef<Set<string>>(new Set())\n\n  const handleValueChange = React.useCallback(\n    (open: string[] | number[]) => {\n      if (!onOpen) return\n      const openSet = new Set((open as (string | number)[]).map(String))\n      for (const value of openSet) {\n        if (!previouslyOpen.current.has(value)) {\n          // The value encodes \"<categoryId>::<question>\".\n          const question = value.split(\"::\").slice(1).join(\"::\")\n          onOpen(question)\n        }\n      }\n      previouslyOpen.current = openSet\n    },\n    [onOpen]\n  )\n\n  return (\n    <div data-slot=\"faq\" className={cn(\"flex flex-col gap-8\", className)}>\n      {categories.map((category) => (\n        <div key={category.id} className=\"flex flex-col gap-3\">\n          {category.label ? (\n            <h3 className=\"text-sm font-semibold tracking-wide text-text-brand-secondary uppercase\">\n              {category.label}\n            </h3>\n          ) : null}\n          <Accordion\n            multiple={allowMultiple}\n            className=\"flex-col gap-3\"\n            onValueChange={handleValueChange}\n          >\n            {category.items.map((item) => {\n              const value = `${category.id}::${item.question}`\n              return (\n                <AccordionItem\n                  key={value}\n                  value={value}\n                  className=\"rounded-2xl border border-border-secondary bg-bg-primary transition duration-200 ease-linear data-open:border-brand-200 data-open:ring-1 data-open:ring-brand-200\"\n                >\n                  <AccordionTrigger className=\"border-none px-6 py-5 text-md font-semibold text-text-primary\">\n                    {item.question}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"px-6 text-md leading-relaxed text-text-tertiary\">\n                    {item.answer}\n                  </AccordionContent>\n                </AccordionItem>\n              )\n            })}\n          </Accordion>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport { Faq }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/faq.tsx"
    }
  ],
  "type": "registry:block"
}