{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-section",
  "type": "registry:component",
  "title": "Faq section",
  "description": "An FAQ section with a heading column and an accessible accordion: one answer open at a time, arrow key navigation, aria-expanded and smooth row animation.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/faq-section.tsx",
      "type": "registry:ui",
      "target": "components/ui/faq-section.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { PlusIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/*\n * FaqSection: a heading column with a contact line, and an accordion whose\n * answers open by animating grid rows (no measuring), plus rotating to a\n * cross. One open at a time; arrow keys move between questions.\n */\n\ntype Faq = { q: string; a: React.ReactNode }\n\ntype FaqSectionProps = {\n  eyebrow?: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  items?: Faq[]\n  className?: string\n}\n\nconst ITEMS: Faq[] = [\n  { q: \"How long does setup take?\", a: \"Most teams connect their first three sources in under 20 minutes. The baselines are ready the next morning.\" },\n  { q: \"Do you store our data?\", a: \"We store aggregated metrics, not raw records. Keys are read-only and encrypted, and you can pick EU or US residency.\" },\n  { q: \"Can Lumen change anything in our systems?\", a: \"No. Lumen only reads. When it suggests an action, a person approves it, and every answer is logged.\" },\n  { q: \"What happens after the trial?\", a: \"You pick a plan or drop to Starter, which is free forever for one person. We never charge without asking.\" },\n  { q: \"Do you offer discounts for startups?\", a: \"Yes. Companies under two years old and under $1M ARR get Team at half price for the first year.\" },\n]\n\nfunction FaqSection({\n  eyebrow = \"FAQ\",\n  title = \"Questions, answered.\",\n  description = \"Something else on your mind? Write to us and a person replies the same day.\",\n  items = ITEMS,\n  className,\n}: FaqSectionProps) {\n  const [open, setOpen] = React.useState<number | null>(0)\n  const refs = React.useRef<(HTMLButtonElement | null)[]>([])\n  const id = React.useId()\n  return (\n    <section data-slot=\"faq-section\" className={cn(\"mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8\", className)}>\n      <div className=\"grid gap-12 lg:grid-cols-[1fr_1.4fr]\">\n        <div>\n          {eyebrow ? <p className=\"font-mono text-[11px] tracking-[0.08em] text-accent-fg uppercase\">{eyebrow}</p> : null}\n          <h2 className=\"mt-3 text-4xl leading-[1.05] font-medium tracking-[-0.04em] text-balance text-fg sm:text-5xl\">{title}</h2>\n          {description ? <p className=\"mt-4 max-w-sm text-[15px] leading-[1.65] text-fg-muted\">{description}</p> : null}\n        </div>\n        <div className=\"divide-y divide-border border-y border-border\">\n          {items.map((it, i) => {\n            const on = open === i\n            return (\n              <div key={it.q}>\n                <h3>\n                  <button\n                    ref={(el) => {\n                      refs.current[i] = el\n                    }}\n                    type=\"button\"\n                    id={`${id}-q${i}`}\n                    aria-expanded={on}\n                    aria-controls={`${id}-a${i}`}\n                    onClick={() => setOpen(on ? null : i)}\n                    onKeyDown={(e) => {\n                      const d = e.key === \"ArrowDown\" ? 1 : e.key === \"ArrowUp\" ? -1 : 0\n                      if (!d) return\n                      e.preventDefault()\n                      refs.current[(i + d + items.length) % items.length]?.focus()\n                    }}\n                    className=\"group/q flex w-full items-center justify-between gap-6 py-5 text-left text-[16px] font-medium tracking-[-0.01em] text-fg outline-none focus-visible:text-accent-fg\"\n                  >\n                    {it.q}\n                    <span className={cn(\"grid size-7 shrink-0 place-items-center rounded-full border transition-[transform,background-color,border-color,color] duration-300 ease-hairline\", on ? \"rotate-45 border-ink bg-ink text-on-ink\" : \"border-border text-fg-muted group-hover/q:border-border-strong group-hover/q:text-fg\")}>\n                      <PlusIcon className=\"size-3.5\" />\n                    </span>\n                  </button>\n                </h3>\n                <div\n                  id={`${id}-a${i}`}\n                  role=\"region\"\n                  aria-labelledby={`${id}-q${i}`}\n                  className={cn(\"grid transition-[grid-template-rows] duration-300 ease-hairline\", on ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\")}\n                >\n                  <div className=\"overflow-hidden\">\n                    <p className={cn(\"max-w-xl pb-6 text-[15px] leading-[1.65] text-fg-muted transition-opacity duration-300\", on ? \"opacity-100 delay-75\" : \"opacity-0\")}>{it.a}</p>\n                  </div>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { FaqSection }\nexport type { FaqSectionProps, Faq }\n"
    }
  ]
}