{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "roi-calculator-inputs",
  "title": "ROI — Calculator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/roi-calculator-inputs/RoiCalculatorInputs.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\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'\nimport { Slider } from '@/components/ui/slider'\n\n// Stating the model beneath the number is what stops this reading as a toy.\n// Every figure below is derived from the three inputs and nothing else.\nconst DAYS_SAVED_SHARE = 0.55\nconst CLOSES_PER_YEAR = 12\n\nexport function RoiCalculatorInputs() {\n  const [analysts, setAnalysts] = useState([6])\n  const [closeDays, setCloseDays] = useState([9])\n  const [rate, setRate] = useState([520])\n\n  const daysSaved = Math.round(closeDays[0] * DAYS_SAVED_SHARE * 10) / 10\n  const annualSaving = Math.round(daysSaved * CLOSES_PER_YEAR * analysts[0] * rate[0])\n  const formatted = `£${annualSaving.toLocaleString('en-GB')}`\n\n  const inputs = [\n    {\n      id: 'analysts',\n      label: 'People involved in close',\n      value: analysts,\n      set: setAnalysts,\n      min: 1,\n      max: 40,\n      step: 1,\n      display: `${analysts[0]}`,\n    },\n    {\n      id: 'days',\n      label: 'Days the close takes today',\n      value: closeDays,\n      set: setCloseDays,\n      min: 2,\n      max: 20,\n      step: 1,\n      display: `${closeDays[0]} days`,\n    },\n    {\n      id: 'rate',\n      label: 'Fully-loaded day rate',\n      value: rate,\n      set: setRate,\n      min: 200,\n      max: 1200,\n      step: 20,\n      display: `£${rate[0]}`,\n    },\n  ]\n\n  return (\n    <section data-slot=\"roi-calculator-inputs\" 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\">Estimate</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What the close currently costs you</h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            Three inputs, one arithmetic model, stated in full underneath. Adjust anything that looks wrong.\n          </p>\n        </div>\n\n        <Card className=\"mt-10\">\n          <CardContent className=\"grid gap-8 p-6 sm:grid-cols-[1.2fr_1fr] sm:p-8\">\n            <div className=\"space-y-6\">\n              {inputs.map((input) => (\n                <div key={input.id}>\n                  <div className=\"flex items-baseline justify-between gap-4\">\n                    <label htmlFor={input.id} className=\"text-sm font-medium\">\n                      {input.label}\n                    </label>\n                    <span className=\"font-mono text-sm tabular-nums\">{input.display}</span>\n                  </div>\n                  <Slider\n                    id={input.id}\n                    value={input.value}\n                    onValueChange={input.set}\n                    min={input.min}\n                    max={input.max}\n                    step={input.step}\n                    className=\"mt-3\"\n                    aria-label={input.label}\n                  />\n                </div>\n              ))}\n            </div>\n\n            <div className=\"border-border bg-muted/30 flex flex-col justify-center rounded-lg border p-6 text-center\">\n              <p className=\"text-muted-foreground text-xs tracking-wide uppercase\">Estimated annual saving</p>\n              <p className=\"font-display mt-2 text-4xl font-bold tracking-tight tabular-nums\">{formatted}</p>\n              <p className=\"text-muted-foreground mt-2 text-xs\">\n                {daysSaved} days saved per close, {CLOSES_PER_YEAR} closes a year\n              </p>\n              <Button className=\"mt-5\">\n                Check it against your numbers\n                <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n          </CardContent>\n\n          <Separator />\n\n          <div className=\"px-6 py-4 sm:px-8\">\n            <p className=\"text-muted-foreground text-xs leading-relaxed\">\n              <span className=\"font-medium\">The model. </span>\n              Saving = days saved × closes per year × people × day rate, where days saved assumes{' '}\n              {Math.round(DAYS_SAVED_SHARE * 100)}% of close time is reconciliation that certified definitions remove.\n              That share is the median across 240 rollouts; yours will differ, and the figure is only as good as that\n              assumption.\n            </p>\n          </div>\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/RoiCalculatorInputs.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/slider.json"
  ],
  "description": "Input-driven ROI estimate where team size, close days, and analyst rate drive a computed saving, with the assumptions stated beneath the figure.",
  "categories": [
    "marketing"
  ]
}