{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq",
  "title": "FAQ",
  "description": "Accordion FAQ with editable CONTENT and ITEMS.",
  "dependencies": [
    "lucide-react",
    "next"
  ],
  "files": [
    {
      "path": "registry/default/blocks/faq.tsx",
      "content": "\"use client\"\n\nimport { ArrowRight, ChevronDown } from \"lucide-react\"\nimport Link from \"next/link\"\nimport { useState } from \"react\"\n\n/**\n * Edit CONTENT / ITEMS to match your FAQ. Accordion on all breakpoints\n * (no motion deps).\n */\nconst CONTENT = {\n  stamp: \"FAQ\",\n  headlineBefore: \"Questions we get\",\n  headlineAccent: \"a lot\",\n  headlineAfter: \".\",\n  ctaLabel: \"Still unsure? Talk to us\",\n  ctaHref: \"/contact\",\n}\n\nconst ITEMS = [\n  {\n    id: \"fixed-price\",\n    category: \"Engagement\",\n    question: \"Why fixed-price instead of hourly?\",\n    answer:\n      \"Hourly aligns incentives against you. Fixed price means we scope carefully up-front and ship on time - if we go over, that's our problem, not yours.\",\n  },\n  {\n    id: \"stack\",\n    category: \"Technical\",\n    question: \"What stack do you use?\",\n    answer:\n      \"Next.js (App Router), TypeScript, Tailwind, Postgres / Supabase, and Vercel. Happy to work in other stacks, but we ship fastest here.\",\n  },\n  {\n    id: \"team\",\n    category: \"Engagement\",\n    question: \"Can you work with my existing team?\",\n    answer:\n      \"Yes. We slot in like a senior engineer: PR reviews, shared boards, and we adopt your conventions.\",\n  },\n  {\n    id: \"timeline\",\n    category: \"Process\",\n    question: \"How fast can we start?\",\n    answer:\n      \"Usually within a week of scope lock. Two project slots open per quarter - ask early if timing is tight.\",\n  },\n]\n\nexport function Faq() {\n  const [openId, setOpenId] = useState(ITEMS[0]?.id ?? \"\")\n\n  return (\n    <section className=\"border-t border-border-subtle\">\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 text-center sm:px-10 sm:py-16\">\n          <p className=\"text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase\">\n            {CONTENT.stamp}\n          </p>\n          <h2 className=\"mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl\">\n            {CONTENT.headlineBefore}{\" \"}\n            <span className=\"italic text-[var(--color-brand,#0b7bff)]\">\n              {CONTENT.headlineAccent}\n            </span>\n            {CONTENT.headlineAfter}\n          </h2>\n        </div>\n      </div>\n\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle\">\n          <ul className=\"divide-y divide-border-subtle\">\n            {ITEMS.map((item) => {\n              const open = openId === item.id\n              return (\n                <li key={item.id}>\n                  <button\n                    type=\"button\"\n                    aria-expanded={open}\n                    onClick={() => setOpenId(open ? \"\" : item.id)}\n                    className=\"flex min-h-14 w-full items-start justify-between gap-4 px-6 py-4 text-left sm:px-8\"\n                  >\n                    <span className=\"text-base font-medium text-foreground sm:text-lg\">\n                      {item.question}\n                    </span>\n                    <ChevronDown\n                      className={`mt-1 size-4 shrink-0 text-muted-foreground transition-transform ${\n                        open\n                          ? \"rotate-180 text-[var(--color-brand,#0b7bff)]\"\n                          : \"\"\n                      }`}\n                      aria-hidden\n                    />\n                  </button>\n                  {open ? (\n                    <div className=\"px-6 pb-5 sm:px-8\">\n                      <p className=\"text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase\">\n                        {item.category}\n                      </p>\n                      <p className=\"mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground\">\n                        {item.answer}\n                      </p>\n                    </div>\n                  ) : null}\n                </li>\n              )\n            })}\n          </ul>\n          <div className=\"border-t border-border-subtle px-6 py-5 sm:px-8\">\n            <Link\n              href={CONTENT.ctaHref}\n              className=\"inline-flex h-10 items-center gap-1.5 text-sm font-medium\"\n            >\n              {CONTENT.ctaLabel}\n              <ArrowRight className=\"size-3.5\" aria-hidden />\n            </Link>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/faq.tsx"
    }
  ],
  "type": "registry:block"
}