{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "faq-two-column",
  "title": "FAQ — Two Column",
  "type": "registry:block",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/faq-two-column/faq-two-column.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { ArrowRight } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/accordion/accordion'\nimport '../../components/badge/badge'\nimport '../../components/button/button'\n\nconst faqs = [\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// Deal alternately so the two columns stay balanced regardless of answer length.\nconst columns = [faqs.filter((_, index) => index % 2 === 0), faqs.filter((_, index) => index % 2 === 1)]\n\n/**\n * <uip-faq-two-column> — the registry FaqTwoColumn block as a web component.\n *\n * Class strings are React's FaqTwoColumn verbatim. The two independent\n * accordions are <uip-accordion> (type multiple) with flat light-DOM\n * trigger/content children paired by `data-value`, so a long answer on the\n * left never shifts the questions on the right.\n */\nexport class UipFaqTwoColumn extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'faq-two-column')\n  }\n\n  render() {\n    return html`\n      <section data-slot=\"faq-two-column\" class=\"bg-background\">\n        <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n          <div class=\"max-w-2xl\">\n            <uip-badge variant=\"secondary\">FAQ</uip-badge>\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          <div class=\"mt-10 grid gap-x-12 gap-y-0 md:grid-cols-2\">\n            ${columns.map(\n              (column) => html`<uip-accordion type=\"multiple\" class=\"w-full\">\n                ${column.map(\n                  (faq) => html`<span slot=\"trigger\" data-value=${faq.q} class=\"text-left text-sm font-medium\"\n                      >${faq.q}</span\n                    >\n                    <div slot=\"content\" data-value=${faq.q} class=\"text-muted-foreground text-sm leading-relaxed\">\n                      ${faq.a}\n                    </div>`,\n                )}\n              </uip-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            <uip-button variant=\"outline\">\n              Talk to an engineer ${icon(ArrowRight, 'arrow-right', 'ml-2 size-4')}\n            </uip-button>\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-faq-two-column') || customElements.define('uip-faq-two-column', UipFaqTwoColumn)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-faq-two-column': UipFaqTwoColumn\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/faq-two-column/faq-two-column.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/accordion.json",
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}