{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "case-study-metric-comparison",
  "title": "Case Study — Metric Comparison",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/case-study-metric-comparison/CaseStudyMetricComparison.tsx",
      "content": "'use client'\n\nimport { ArrowRight, TrendingDown, TrendingUp } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\n// `better` records which direction is good, so the delta colour never has to be\n// hard-coded per row — a falling close time is good, falling accuracy is not.\nconst metrics = [\n  { name: 'Days to close', before: '9.4', after: '4.2', delta: '−55%', better: 'down' },\n  { name: 'Ad-hoc data requests / month', before: '212', after: '61', delta: '−71%', better: 'down' },\n  { name: 'Certified metrics published', before: '0', after: '340', delta: '+340', better: 'up' },\n  { name: 'Forecast accuracy band', before: '±6.1pp', after: '±3.7pp', delta: '−2.4pp', better: 'down' },\n]\n\nexport function CaseStudyMetricComparison() {\n  return (\n    <section data-slot=\"case-study-metric-comparison\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <Badge variant=\"secondary\">Northwind Logistics</Badge>\n        <h2 className=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n          Two quarters either side of the rollout\n        </h2>\n        <p className=\"text-muted-foreground mt-3 text-lg\">\n          Their numbers, their definitions, measured the same way before and after. Nothing normalised.\n        </p>\n\n        <Card className=\"mt-8\">\n          <CardContent className=\"p-0\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Metric</TableHead>\n                  <TableHead className=\"text-right\">Q4 2025</TableHead>\n                  <TableHead className=\"text-right\">Q2 2026</TableHead>\n                  <TableHead className=\"text-right\">Change</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {metrics.map((metric) => {\n                  const Trend = metric.better === 'down' ? TrendingDown : TrendingUp\n                  return (\n                    <TableRow key={metric.name}>\n                      <TableCell className=\"font-medium\">{metric.name}</TableCell>\n                      <TableCell className=\"text-muted-foreground text-right font-mono text-sm\">\n                        {metric.before}\n                      </TableCell>\n                      <TableCell className=\"text-right font-mono text-sm font-semibold\">{metric.after}</TableCell>\n                      <TableCell className=\"text-right\">\n                        <span className=\"text-success inline-flex items-center gap-1.5 font-mono text-sm\">\n                          <Trend className=\"size-3.5\" aria-hidden=\"true\" />\n                          {metric.delta}\n                        </span>\n                      </TableCell>\n                    </TableRow>\n                  )\n                })}\n              </TableBody>\n            </Table>\n\n            <Separator />\n\n            <p className=\"text-muted-foreground px-6 py-4 text-xs leading-relaxed\">\n              Measured from their own close calendar and ticket queue. The rollout completed between the two quarters;\n              no headcount was added or removed in finance during the period.\n            </p>\n          </CardContent>\n        </Card>\n\n        <Button className=\"mt-8\">\n          Read how they did it\n          <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CaseStudyMetricComparison.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Single customer result shown as a before-and-after table of four metrics, each row carrying the prior value, the current value, and the delta, under a short context line.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "case-study"
}