{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "faq-contact-sidebar",
  "title": "FAQ — With Contact Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/faq-contact-sidebar/faq-contact-sidebar.component.ts",
      "content": "// Accordion of answers beside a sticky support card offering a named contact,\n// response-time expectation, and a link to the docs. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, BookOpen, LucideAngularModule, MessageSquare } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n  UiAccordionComponent,\n  UiAccordionContentComponent,\n  UiAccordionItemComponent,\n  UiAccordionTriggerComponent,\n} from '@/ui/accordion/accordion.component'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface FaqEntry {\n  q: string\n  a: string\n}\n\nconst faqs: FaqEntry[] = [\n  {\n    q: 'Can we trial it against production data?',\n    a: 'Yes, and we recommend it. The connection is read-only, so a trial runs against the real warehouse without a staging copy or a data loading step.',\n  },\n  {\n    q: 'Who owns the definitions after hand-over?',\n    a: 'You do. They live in your repository, reviewed by your team. If the contract ends, the definitions and their history stay where they are.',\n  },\n  {\n    q: 'What happens if the warehouse is down?',\n    a: 'Materialised aggregates keep serving with a visible freshness stamp. Live queries fail loudly rather than returning a stale number silently.',\n  },\n  {\n    q: 'Do you support on-premise warehouses?',\n    a: 'Postgres and SQL Server over a private link, yes. Anything requiring an agent inside your network is on the roadmap but not shipped.',\n  },\n  {\n    q: 'How are restatements handled?',\n    a: 'A restatement is a definition change with an effective date. Prior periods are recomputed and the change log records who approved it and when.',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-faq-contact-sidebar, [ui-faq-contact-sidebar]',\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    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"faq-contact-sidebar\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"grid gap-12 lg:grid-cols-[1.6fr_1fr] lg:gap-16\">\n          <div>\n            <span ui-badge variant=\"secondary\">FAQ</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Before you book a call</h2>\n            <p class=\"text-muted-foreground mt-3 text-lg\">\n              The five questions that come up most, answered without a form in the way.\n            </p>\n\n            <ui-accordion type=\"single\" collapsible class=\"mt-8 w-full\">\n              @for (faq of faqs; track faq.q) {\n                <ui-accordion-item [value]=\"faq.q\">\n                  <button ui-accordion-trigger class=\"text-left font-medium\">{{ faq.q }}</button>\n                  <ui-accordion-content class=\"text-muted-foreground leading-relaxed\">{{ faq.a }}</ui-accordion-content>\n                </ui-accordion-item>\n              }\n            </ui-accordion>\n          </div>\n\n          <!-- Sticky so it stays beside the list however far the accordion expands. -->\n          <aside class=\"lg:sticky lg:top-24 lg:self-start\">\n            <div ui-card>\n              <div ui-card-content class=\"p-6\">\n                <div class=\"flex items-center gap-3\">\n                  <ui-avatar class=\"size-10\">\n                    <ui-avatar-fallback class=\"text-xs\">DB</ui-avatar-fallback>\n                  </ui-avatar>\n                  <div class=\"min-w-0\">\n                    <p class=\"truncate text-sm font-medium\">Daniel Brooks</p>\n                    <p class=\"text-muted-foreground truncate text-xs\">Solutions engineering</p>\n                  </div>\n                </div>\n\n                <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n                  Ask the awkward version of your question. An engineer answers, not a sales inbox.\n                </p>\n\n                <div class=\"mt-5 grid gap-2\">\n                  <button ui-button>\n                    <lucide-icon [img]=\"MessageSquare\" class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                    Ask a question\n                  </button>\n                  <button ui-button variant=\"outline\">\n                    <lucide-icon [img]=\"BookOpen\" class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                    Read the docs\n                  </button>\n                </div>\n\n                <ui-separator class=\"my-5\" />\n\n                <dl class=\"space-y-2 text-xs\">\n                  <div class=\"flex items-center justify-between gap-3\">\n                    <dt class=\"text-muted-foreground\">Median first reply</dt>\n                    <dd class=\"font-medium\">3 h 40 m</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between gap-3\">\n                    <dt class=\"text-muted-foreground\">Coverage</dt>\n                    <dd class=\"font-medium\">Mon–Fri, 08:00–20:00 UTC</dd>\n                  </div>\n                </dl>\n\n                <button ui-button variant=\"link\" class=\"mt-4 h-auto p-0 text-xs\">\n                  See the full FAQ\n                  <lucide-icon [img]=\"ArrowRight\" class=\"ml-1 size-3\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            </div>\n          </aside>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiFaqContactSidebarComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly BookOpen = BookOpen\n  protected readonly MessageSquare = MessageSquare\n\n  protected readonly faqs = faqs\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/faq-contact-sidebar/faq-contact-sidebar.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/faq-contact-sidebar/index.ts",
      "content": "export { UiFaqContactSidebarComponent } from './faq-contact-sidebar.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/faq-contact-sidebar/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/accordion.json",
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Accordion of answers beside a sticky support card offering a named contact, response-time expectation, and a link to the docs, for the questions a page cannot pre-empt.",
  "categories": [
    "marketing"
  ]
}