{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-cases-scenario-walkthrough",
  "title": "Use Cases — Scenario Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/use-cases-scenario-walkthrough/UseCasesScenarioWalkthrough.tsx",
      "content": "'use client'\n\nimport { ArrowRight } 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'\n\n// One concrete scenario beats four abstract ones: the reader can check it\n// against their own Tuesday.\nconst steps = [\n  {\n    actor: 'Controller',\n    action: 'Notices Q1 revenue in the board deck is £41k above the close pack.',\n    recorded: 'Nothing yet — this is the part that used to take a day to explain.',\n  },\n  {\n    actor: 'Controller',\n    action: 'Opens the metric and reads its history instead of asking the analytics team.',\n    recorded: 'Definition v127, changed 14 Feb by finance-analytics, reviewed by A. Reyes.',\n  },\n  {\n    actor: 'Analyst',\n    action: 'Sees the deck was built on v126, before the trailing window changed.',\n    recorded: 'Consumer list shows which dashboards still resolve the older version.',\n  },\n  {\n    actor: 'Analyst',\n    action: 'Republishes the deck against the current definition; the gap disappears.',\n    recorded: 'Publish event, with the before and after figures attached.',\n  },\n  {\n    actor: 'Auditor',\n    action: 'Six months later, asks why Q1 was restated.',\n    recorded: 'The whole chain above, exported as a single PDF in under a minute.',\n  },\n]\n\nexport function UseCasesScenarioWalkthrough() {\n  return (\n    <section data-slot=\"use-cases-scenario-walkthrough\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">A Tuesday</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            Two numbers disagree. Here is the whole sequence.\n          </h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            Not a feature list — the actual path, including what the system writes down at each step.\n          </p>\n        </div>\n\n        <ol className=\"mt-12 space-y-4\">\n          {steps.map((step, index) => (\n            <li key={step.action} className=\"grid grid-cols-[auto_1fr] gap-x-5\">\n              <div className=\"flex flex-col items-center\">\n                <span className=\"border-border bg-card text-muted-foreground relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border font-mono text-xs font-semibold\">\n                  {String(index + 1).padStart(2, '0')}\n                </span>\n                {index < steps.length - 1 && <span className=\"bg-border w-px grow\" aria-hidden=\"true\" />}\n              </div>\n\n              <Card className=\"mb-4\">\n                <CardContent className=\"p-5\">\n                  <Badge variant=\"outline\">{step.actor}</Badge>\n                  <p className=\"mt-3 text-sm leading-relaxed\">{step.action}</p>\n                  <Separator className=\"my-3\" />\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    <span className=\"font-medium\">Recorded: </span>\n                    {step.recorded}\n                  </p>\n                </CardContent>\n              </Card>\n            </li>\n          ))}\n        </ol>\n\n        <div className=\"border-border mt-6 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n          <p className=\"text-muted-foreground text-sm\">Total elapsed, start to resolution: about nine minutes.</p>\n          <Button>\n            Walk through it yourself\n            <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/UseCasesScenarioWalkthrough.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"
  ],
  "description": "One concrete scenario walked end to end as a numbered sequence of what happens, who does it, and what the system records at each step.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "use-cases"
}