{
  "name": "CostCompare",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/CostCompare.tsx",
  "chapterTag": "05 Cards & Surfaces",
  "chapter": "06-cards-and-surfaces.html",
  "sectionId": "cost-compare",
  "elName": "Acquire vs. work the lead",
  "demoUrl": "https://brand.magicblocks.ai/components/06-cards-and-surfaces#cost-compare",
  "hasLiveDemo": false,
  "description": "Side-by-side cost-comparison bars. Two horizontal bars stacked vertically:\na full-width muted bar on top labelled with the high-cost baseline, and a\nnarrow brand-accent bar below labelled with the low-cost contrast. The\ngap between the two bars is the rhetorical point — call it out with\n`gapLabel`.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "CostCompare",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "CostCompareProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "CostCompareSide",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { CostCompare } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "high",
      "optional": false,
      "type": "CostCompareSide",
      "doc": "Top side — the high-cost baseline. Renders as a full-width muted bar."
    },
    {
      "name": "low",
      "optional": false,
      "type": "CostCompareSide",
      "doc": "Bottom side — the low-cost contrast. Renders as a thin accent bar. The visual gap *is* the argument — the brand bar shrinks to `ratio`% of the high bar's width."
    },
    {
      "name": "ratio",
      "optional": true,
      "type": "number",
      "doc": "Bar width % for the low-cost contrast (0–100). Default `5`. The pricing-page case is roughly 5–8% (e.g. $4 / $80 ≈ 5%, $4 / $50 ≈ 8%). Pass an explicit ratio if your numbers diverge from that range, or to preserve the visual proportion when the values change."
    },
    {
      "name": "gapLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Mono caption rendered between the two bars (e.g. `\"5–10% of what you already spent\"`). Optional but recommended — it names the gap the visual is showing."
    }
  ],
  "classesUsed": [
    "cost-compare",
    "cost-compare-bar",
    "cost-compare-gap",
    "cost-compare-label",
    "cost-compare-meta",
    "cost-compare-row",
    "cost-compare-unit",
    "cost-compare-value"
  ],
  "examples": {
    "react": "<CostCompare\n    high={{\n      label: \"Cost to acquire a lead\",\n      value: \"$30–$80\",\n      unit: \"/ lead\",\n    }}\n    low={{\n      label: \"Cost to work that lead\",\n      value: \"$2.50–$4.00\",\n      unit: \"/ lead\",\n    }}\n    gapLabel=\"5–10% of what you already spent\"\n  />",
    "html": "<div class=\"cost-compare-demo\">\n          <div class=\"cost-compare\">\n            <div class=\"cost-compare-row is-high\">\n              <div class=\"cost-compare-meta\">\n                <span class=\"cost-compare-label\">Cost to acquire a lead</span>\n                <span class=\"cost-compare-value\">$30&ndash;$80<span class=\"cost-compare-unit\"> / lead</span></span>\n              </div>\n              <div class=\"cost-compare-bar is-high\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"cost-compare-gap\">5&ndash;10% of what you already spent</div>\n            <div class=\"cost-compare-row is-low\">\n              <div class=\"cost-compare-meta\">\n                <span class=\"cost-compare-label\">Cost to work that lead</span>\n                <span class=\"cost-compare-value\">$2.50&ndash;$4.00<span class=\"cost-compare-unit\"> / lead</span></span>\n              </div>\n              <div class=\"cost-compare-bar is-low\" style=\"--cost-compare-ratio: 5%;\" aria-hidden=\"true\"></div>\n            </div>\n          </div>\n        </div>",
    "css": ".cost-compare {\n  display: grid; grid-template-rows: auto auto 1fr auto;\n  gap: var(--s-3);\n  width: 100%; max-width: 680px; margin: 0 auto;\n  font-family: var(--f-body);\n}\n.cost-compare {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2, 8px);\n  font-family: var(--font-sans, \"Inter\", system-ui, -apple-system, sans-serif);\n}\n\n.cost-compare-bar {\n  height: 14px;\n  border-radius: 999px;\n  display: block;\n}\n\n.cost-compare-gap {\n  font-family: var(--font-mono, ui-monospace, \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  padding: var(--s-2, 8px) 0;\n  text-align: center;\n  border-top: 1px dashed var(--hair);\n  border-bottom: 1px dashed var(--hair);\n}\n\n.cost-compare-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--fg);\n  letter-spacing: -0.005em;\n}\n\n.cost-compare-meta {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--s-3, 12px);\n  flex-wrap: wrap;\n}\n\n.cost-compare-row {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.cost-compare-unit {\n  font-weight: 400;\n  font-size: 13px;\n  color: var(--fg-dim);\n  letter-spacing: 0;\n}\n\n.cost-compare-value {\n  font-family: var(--font-mono, ui-monospace, \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace);\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--fg);\n}"
  }
}