{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "faq-two-column",
  "title": "FAQ — Two Column",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/faq-two-column/faq-two-column.component.ts",
      "content": "// Frequently asked questions split across two independent accordion columns, so a\n// long answer on the left never pushes the questions on the right out of alignment.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n  UiAccordionComponent,\n  UiAccordionContentComponent,\n  UiAccordionItemComponent,\n  UiAccordionTriggerComponent,\n} from '@/ui/accordion/accordion.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\nexport interface FaqEntry {\n  q: string\n  a: string\n}\n\nconst faqs: FaqEntry[] = [\n  {\n    q: 'Does our data leave the warehouse?',\n    a: 'No. Metrics resolve against your warehouse at query time using a read-only role. We store definitions and query metadata, never rows.',\n  },\n  {\n    q: 'How long does a rollout take?',\n    a: 'Five weeks from kickoff to hand-over is typical: a week to connect, a week to model, two to pilot with one team, one to roll out.',\n  },\n  {\n    q: 'What happens when a definition changes?',\n    a: 'It opens a pull request. Once merged, every consumer resolves the new definition at once, and reverting is the same single click.',\n  },\n  {\n    q: 'Can we keep using our BI tool?',\n    a: 'Yes. Looker, Hex, and Sigma read certified metrics through the API, so they stop maintaining their own competing definitions.',\n  },\n  {\n    q: 'How is access controlled?',\n    a: 'Row-level scope resolves per query from your identity provider. A shared dashboard link cannot show a viewer more than their own scope.',\n  },\n  {\n    q: 'What does it cost to run?',\n    a: 'Query budgets are enforced per team at run time, so warehouse spend is capped rather than reconciled from an invoice a month later.',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-faq-two-column, [ui-faq-two-column]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAccordionComponent,\n    UiAccordionContentComponent,\n    UiAccordionItemComponent,\n    UiAccordionTriggerComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n  ],\n  template: `\n    <section data-slot=\"faq-two-column\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">FAQ</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Questions we get on the first call</h2>\n        </div>\n\n        <!-- Two independent accordions: a long answer on the left cannot push the\n             questions on the right out of alignment. -->\n        <div class=\"mt-10 grid gap-x-12 gap-y-0 md:grid-cols-2\">\n          @for (column of columns(); track $index) {\n            <ui-accordion type=\"multiple\" class=\"w-full\">\n              @for (faq of column; track faq.q) {\n                <ui-accordion-item [value]=\"faq.q\">\n                  <button ui-accordion-trigger class=\"text-left text-sm font-medium\">{{ faq.q }}</button>\n                  <ui-accordion-content class=\"text-muted-foreground text-sm leading-relaxed\">\n                    {{ faq.a }}\n                  </ui-accordion-content>\n                </ui-accordion-item>\n              }\n            </ui-accordion>\n          }\n        </div>\n\n        <div class=\"border-border mt-10 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n          <p class=\"text-muted-foreground text-sm\">Something not covered here?</p>\n          <button ui-button variant=\"outline\">\n            Talk to an engineer\n            <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiFaqTwoColumnComponent {\n  protected readonly ArrowRight = ArrowRight\n\n  protected readonly faqs = faqs\n\n  @Input('class') className?: string\n\n  // Deal alternately so the two columns stay balanced regardless of answer length.\n  readonly columns = computed<FaqEntry[][]>(() => [\n    faqs.filter((_, index) => index % 2 === 0),\n    faqs.filter((_, index) => index % 2 === 1),\n  ])\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/faq-two-column/faq-two-column.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/faq-two-column/index.ts",
      "content": "export { UiFaqTwoColumnComponent, type FaqEntry } from './faq-two-column.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/faq-two-column/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/accordion.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json"
  ],
  "description": "Frequently asked questions split across two columns of independent accordions, so a long answer in one column never pushes the questions beside it out of alignment.",
  "categories": [
    "marketing"
  ]
}