{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq80",
  "title": "Two Column Answer Grid",
  "description": "An always-open FAQ laid out as a two-column grid of numbered, hairline-separated question and answer entries, closing with a soft support panel that pairs a short prompt with two actions.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/faq80/faq80.tsx",
      "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { Badge23 } from \"@/components/beste/component/badge23\";\nimport { Button21 } from \"@/components/beste/component/button21\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Badge {\n  label: string;\n}\n\ninterface ActionLink {\n  label: string;\n  href: string;\n  tone?: \"primary\" | \"neutral\" | \"outline\";\n}\n\ninterface FaqItem {\n  question: string;\n  answer: string;\n}\n\ninterface Support {\n  title: string;\n  description: string;\n  buttons?: ActionLink[];\n}\n\ninterface Faq80Props {\n  badge?: Badge;\n  heading?: string;\n  description?: string;\n  items?: FaqItem[];\n  support?: Support;\n  className?: string;\n}\n\nexport const faq80Demo: Faq80Props = {\n  badge: { label: \"Answers\" },\n  heading: \"Everything teams ask before they move\",\n  description:\n    \"No sales call required. The details that usually decide it are written down here, in plain language.\",\n  items: [\n    {\n      question: \"How long does a migration actually take?\",\n      answer:\n        \"Most practices are running live within a week. You import members and appointments from a spreadsheet or a direct export, connect billing, then invite the team from a guided checklist.\",\n    },\n    {\n      question: \"Who owns the data we bring in?\",\n      answer:\n        \"You do, always. Every record stays yours and can be exported in full at any time, in an open format, with no request queue and no exit fee.\",\n    },\n    {\n      question: \"Can each site keep its own workflow?\",\n      answer:\n        \"Yes. Locations share one member directory but keep their own calendars, rooms, and templates, so a group rollout never forces a single way of working.\",\n    },\n    {\n      question: \"What happens when a member cancels late?\",\n      answer:\n        \"Your cancellation window and fee are set once per service. The slot reopens automatically, the waitlist is notified, and the fee lands on the next invoice.\",\n    },\n    {\n      question: \"Does it handle claims and insurers?\",\n      answer:\n        \"Claims are raised from the same record as the appointment, submitted in batches, and reconciled against payments so nothing sits unmatched at month end.\",\n    },\n    {\n      question: \"How is access controlled across the team?\",\n      answer:\n        \"Roles scope what each person can open, from front desk to clinician to finance. Every view and edit on a record is logged and searchable.\",\n    },\n    {\n      question: \"Is there a limit on members or appointments?\",\n      answer:\n        \"No. Plans are priced on seats, not on volume, so a busy month never turns into a surprise line on your bill.\",\n    },\n    {\n      question: \"What does support look like after launch?\",\n      answer:\n        \"Guided setup is included on every plan, and larger groups get a named contact who stays with you through rollout and training.\",\n    },\n  ],\n  support: {\n    title: \"Still weighing something up?\",\n    description:\n      \"Send us the question and a real person on the product team answers, usually the same working day.\",\n    buttons: [\n      { label: \"Talk to the team\", href: \"https://beste.co\" },\n      { label: \"Read the docs\", href: \"https://beste.co\", tone: \"outline\" },\n    ],\n  },\n};\n\nexport function Faq80({ badge, heading, description, items = [], support, className }: Faq80Props) {\n  return (\n    <section className={cn(\"bg-background py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-6\">\n        {badge && <Badge23 label={badge.label} />}\n\n        <div className=\"mt-6 border-t border-border pt-8 md:pt-10\">\n          <div className=\"grid gap-6 md:grid-cols-2 md:gap-12\">\n            {heading && (\n              <h2 className=\"text-3xl font-light leading-[1.1] tracking-tight text-foreground md:text-5xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <div className=\"flex md:justify-end\">\n                <p className=\"max-w-md text-base leading-relaxed text-muted-foreground\">\n                  {description}\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"mt-12 grid gap-x-12 md:mt-16 md:grid-cols-2\">\n          {items.map((item, index) => (\n            <div key={index} className=\"border-t border-border py-6 md:py-8\">\n              <span className=\"text-sm text-muted-foreground\">\n                {String(index + 1).padStart(2, \"0\")}\n              </span>\n              <h3 className=\"mt-3 text-lg font-medium text-foreground\">\n                {item.question}\n              </h3>\n              <p className=\"mt-3 max-w-lg text-base leading-relaxed text-muted-foreground\">\n                {item.answer}\n              </p>\n            </div>\n          ))}\n        </div>\n\n        {support && (\n          <div className=\"mt-12 flex flex-col gap-6 rounded-md bg-muted p-8 md:mt-16 md:flex-row md:items-center md:justify-between md:p-10\">\n            <div className=\"max-w-md\">\n              <p className=\"text-xl font-light tracking-tight text-foreground md:text-2xl\">\n                {support.title}\n              </p>\n              <p className=\"mt-2 text-base leading-relaxed text-muted-foreground\">\n                {support.description}\n              </p>\n            </div>\n            {support.buttons && support.buttons.length > 0 && (\n              <div className=\"flex flex-wrap gap-3\">\n                {support.buttons.map((button, index) => (\n                  <Button21 key={index} asChild label={button.label} tone={button.tone}>\n                    <Link href={button.href} />\n                  </Button21>\n                ))}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/faq80.tsx"
    },
    {
      "path": "registry-components/badge23/badge23.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"muted\" | \"foreground\" | \"primary\";\n\ninterface Badge23Props {\n  /** Eyebrow label (rendered uppercase) */\n  label: string;\n  /** Text/border tone */\n  tone?: Tone;\n  /** Additional classes merged onto the root */\n  className?: string;\n}\n\nconst toneStyles: Record<Tone, string> = {\n  muted: \"border-border text-muted-foreground\",\n  foreground: \"border-foreground/30 text-foreground\",\n  primary: \"border-primary/40 text-primary\",\n};\n\nexport const badge23Demo: Badge23Props = {\n  label: \"Product\",\n};\n\nexport function Badge23({ label, tone = \"muted\", className }: Badge23Props) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-md border bg-transparent px-2.5 py-1 font-mono text-sm uppercase leading-none tracking-widest\",\n        toneStyles[tone],\n        className\n      )}\n    >\n      {label}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/component/badge23.tsx"
    },
    {
      "path": "registry-components/button21/button21.tsx",
      "content": "\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"primary\" | \"neutral\" | \"outline\";\n\ninterface Button21Props {\n  /** Button label */\n  label: string;\n  /**\n   * Compose the rendered element shadcn-style (radix asChild): your element\n   * (e.g. a router Link) becomes the root and the button content is injected\n   * as its children. Pass the element without children of its own.\n   */\n  asChild?: boolean;\n  /** The element to render when `asChild` is set (e.g. your framework's Link) */\n  children?: React.ReactElement;\n  /**\n   * Fallback link: renders a plain `<a>`. Prefer `asChild` with your\n   * framework's Link component for client-side navigation.\n   */\n  href?: string;\n  /** Optional trailing icon */\n  icon?: LucideIcon;\n  /** Surface tone: solid accent (default), soft neutral pill, or hairline outline */\n  tone?: Tone;\n  /** Click handler (used when there is no href and no asChild) */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Additional classes merged onto the button */\n  className?: string;\n}\n\nconst toneStyles: Record<Tone, string> = {\n  primary: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n  neutral: \"bg-muted text-foreground hover:bg-muted/70\",\n  outline: \"border border-border bg-transparent text-foreground hover:bg-muted\",\n};\n\nexport const button21Demo: Button21Props = {\n  label: \"Book a demo\",\n};\n\nexport function Button21({\n  label,\n  asChild = false,\n  children,\n  href,\n  icon: Icon,\n  tone = \"primary\",\n  onClick,\n  className,\n}: Button21Props) {\n  const classes = cn(\n    \"group/button21 h-auto w-fit gap-2 rounded-md px-5 py-2.5 text-sm font-medium tracking-tight transition-colors\",\n    toneStyles[tone],\n    className\n  );\n\n  const inner = (\n    <>\n      {label}\n      {Icon && (\n        <Icon className=\"size-4 transition-transform motion-safe:group-hover/button21:translate-x-0.5\" />\n      )}\n    </>\n  );\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <Button asChild className={classes}>\n        {React.cloneElement(children, undefined, inner)}\n      </Button>\n    );\n  }\n\n  if (href) {\n    return (\n      <Button asChild className={classes}>\n        <a href={href}>{inner}</a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button type=\"button\" className={classes} onClick={onClick}>\n      {inner}\n    </Button>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/component/button21.tsx"
    }
  ],
  "type": "registry:block"
}