{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "customer-metrics-band",
  "title": "Customer Metrics Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/customer-metrics-band/CustomerMetricsBand.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Gauge } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\n\ntype Cohort = 'all' | 'enterprise' | 'startups'\n\ninterface MetricStat {\n  id: string\n  label: string\n  value: string\n  baseline: string\n  change: string\n  isPositive: boolean\n  description: string\n  details: {\n    before: string\n    after: string\n    impact: string\n  }\n}\n\nconst metricsByCohort: Record<Cohort, MetricStat[]> = {\n  all: [\n    {\n      id: 'velocity',\n      label: 'Time to First Production Release',\n      value: '4.2x',\n      baseline: 'Reduced from 14 weeks to 18 days',\n      change: '+320% Faster',\n      isPositive: true,\n      description: 'Engineering squads ship complete vertical workflows without custom CSS boilerplate.',\n      details: { before: '98 Days average', after: '18 Days average', impact: '80 days saved per major launch' },\n    },\n    {\n      id: 'vitals',\n      label: 'Core Web Vitals Pass Rate',\n      value: '99.4%',\n      baseline: 'Tested across 10M+ mobile pageviews',\n      change: '+28.4% vs monolithic',\n      isPositive: true,\n      description: 'OKLCH zero-runtime styling ensures sub-50ms INP and pristine Lighthouse 100 scores.',\n      details: { before: '71.0% Pass Rate', after: '99.4% Pass Rate', impact: 'Zero layout shift (CLS 0.00)' },\n    },\n    {\n      id: 'maintenance',\n      label: 'Design System Maintenance Cost',\n      value: '-74%',\n      baseline: 'Engineering hours spent upgrading packages',\n      change: '-74% Reduction',\n      isPositive: true,\n      description: 'Direct code ownership eliminates breaking semver dependency conflicts permanently.',\n      details: { before: '24 hrs / developer / mo', after: '6.2 hrs / developer / mo', impact: '17.8 hrs reclaimed' },\n    },\n    {\n      id: 'cloud_savings',\n      label: 'Average Annual Compute & Bandwidth Saved',\n      value: '$184k',\n      baseline: 'Calculated across high-traffic SaaS suites',\n      change: 'Zero AST bloat',\n      isPositive: true,\n      description: 'Zero unused component CSS in bundle output lowers edge bandwidth distribution costs.',\n      details: { before: '640 kB vendor chunks', after: '38 kB tree-shaken chunks', impact: '94% payload reduction' },\n    },\n  ],\n  enterprise: [\n    {\n      id: 'velocity',\n      label: 'Time to First Production Release',\n      value: '5.8x',\n      baseline: 'Enterprise multi-app design alignment',\n      change: '+480% Faster',\n      isPositive: true,\n      description: 'Standardized AST across 20+ squads without package coordination overhead.',\n      details: { before: '180 Days average', after: '31 Days average', impact: '149 days saved per project' },\n    },\n    {\n      id: 'vitals',\n      label: 'Core Web Vitals Pass Rate',\n      value: '99.8%',\n      baseline: 'Internal enterprise portals & dashboards',\n      change: '+34.2% uplift',\n      isPositive: true,\n      description: 'Strict keyboard ergonomics and WCAG AA accessibility out of the box.',\n      details: { before: '65.6% Pass Rate', after: '99.8% Pass Rate', impact: '100% compliance audit pass' },\n    },\n    {\n      id: 'maintenance',\n      label: 'Design System Maintenance Cost',\n      value: '-82%',\n      baseline: 'Eliminated dedicated registry sync team',\n      change: '-82% Saved',\n      isPositive: true,\n      description: 'Engineers customize source code in their own repo without waiting on upstream merges.',\n      details: {\n        before: '3 FTEs maintenance',\n        after: '0.5 FTE maintenance',\n        impact: '2.5 FTEs reallocated to product',\n      },\n    },\n    {\n      id: 'cloud_savings',\n      label: 'Average Annual Compute & Bandwidth Saved',\n      value: '$420k',\n      baseline: 'Tier-1 enterprise infrastructure',\n      change: 'Zero CVE risk',\n      isPositive: true,\n      description: 'No third-party runtime dependencies eliminates transitive package auditing costs.',\n      details: { before: '$650k vendor licensing', after: '$230k infrastructure', impact: '$420k saved annually' },\n    },\n  ],\n  startups: [\n    {\n      id: 'velocity',\n      label: 'Time to First Production Release',\n      value: '6.4x',\n      baseline: 'From idea to paying users in days',\n      change: '+540% Faster',\n      isPositive: true,\n      description: 'Plug-and-play workbenches and CRM blocks ready for Stripe integration on day 1.',\n      details: { before: '45 Days to MVP', after: '7 Days to MVP', impact: '38 days faster to revenue' },\n    },\n    {\n      id: 'vitals',\n      label: 'Core Web Vitals Pass Rate',\n      value: '99.1%',\n      baseline: 'Landing pages and conversion flows',\n      change: '+22.0% uplift',\n      isPositive: true,\n      description: 'Blazing fast mobile experiences drive higher conversion rates for early users.',\n      details: { before: '77.1% Pass Rate', after: '99.1% Pass Rate', impact: '+14% checkout conversion' },\n    },\n    {\n      id: 'maintenance',\n      label: 'Design System Maintenance Cost',\n      value: '-90%',\n      baseline: 'Zero full-time design engineers needed',\n      change: '-90% Overhead',\n      isPositive: true,\n      description: 'Founders and full-stack devs build world-class Linear-grade interfaces independently.',\n      details: {\n        before: 'Hiring UI designer ($140k)',\n        after: 'Self-serve registry ($0)',\n        impact: '$140k runway preserved',\n      },\n    },\n    {\n      id: 'cloud_savings',\n      label: 'Average Annual Compute & Bandwidth Saved',\n      value: '$48k',\n      baseline: 'Vercel / Cloudflare edge usage tier',\n      change: 'Sub-millisecond cold start',\n      isPositive: true,\n      description: 'Compact bundle sizes prevent edge function invocation timeouts and memory spikes.',\n      details: { before: '350ms cold starts', after: '42ms cold starts', impact: '88% compute reduction' },\n    },\n  ],\n}\n\nconst activeCohort = ref<Cohort>('all')\nconst activeMetricId = ref<string>('velocity')\n\nconst currentMetricList = computed(() => metricsByCohort[activeCohort.value])\nconst selectedMetric = computed(\n  () => currentMetricList.value.find((m) => m.id === activeMetricId.value) || currentMetricList.value[0],\n)\n</script>\n\n<template>\n  <section\n    data-slot=\"customer-metrics-band\"\n    class=\"border-border/80 bg-muted/10 relative overflow-hidden border-y px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto max-w-6xl space-y-12\">\n      <!-- Section Header with Cohort Switcher -->\n      <div\n        class=\"border-border/60 flex flex-col items-center justify-between gap-6 border-b pb-8 text-center md:flex-row md:text-left\"\n      >\n        <div class=\"space-y-2\">\n          <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Gauge class=\"text-primary size-3.5\" />\n            Verified Customer Impact Benchmark\n          </Badge>\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight\">\n            Proven engineering velocity at global scale.\n          </h2>\n          <p class=\"text-muted-foreground text-xs sm:text-sm\">\n            Aggregated telemetry from over 1,400+ production applications built with UIPKGE.\n          </p>\n        </div>\n\n        <!-- Cohort Switcher Tabs -->\n        <div class=\"bg-background border-border flex shrink-0 items-center gap-1 rounded-xl border p-1\">\n          <button\n            v-for=\"c in [\n              { id: 'all', label: 'All Teams' },\n              { id: 'enterprise', label: 'Enterprise 500' },\n              { id: 'startups', label: 'High-Growth' },\n            ] as const\"\n            :key=\"c.id\"\n            type=\"button\"\n            class=\"rounded-lg px-3 py-1.5 font-mono text-xs transition-colors\"\n            :class=\"\n              activeCohort === c.id\n                ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"activeCohort = c.id\"\n          >\n            {{ c.label }}\n          </button>\n        </div>\n      </div>\n\n      <!-- 4-Tile KPI Metric Cards Grid -->\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <Card\n          v-for=\"stat in currentMetricList\"\n          :key=\"stat.id\"\n          class=\"border-border bg-card/90 flex cursor-pointer flex-col justify-between space-y-4 rounded-2xl p-5 shadow-sm transition-colors hover:shadow-md\"\n          :class=\"activeMetricId === stat.id ? 'ring-primary border-primary/60 bg-card ring-2' : ''\"\n          @click=\"activeMetricId = stat.id\"\n        >\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground max-w-[160px] truncate font-mono text-xs\">{{ stat.label }}</span>\n              <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                {{ stat.change }}\n              </Badge>\n            </div>\n            <p class=\"text-foreground font-mono text-3xl font-bold tracking-tight sm:text-4xl\">{{ stat.value }}</p>\n          </div>\n\n          <p class=\"text-muted-foreground border-border/60 border-t pt-2 text-xs leading-relaxed\">\n            {{ stat.baseline }}\n          </p>\n        </Card>\n      </div>\n\n      <!-- Interactive Detailed Breakdown Card for Selected KPI -->\n      <Card\n        class=\"border-border bg-card/95 space-y-6 overflow-hidden rounded-2xl p-6 text-left shadow-xl backdrop-blur-md sm:p-8\"\n      >\n        <div\n          class=\"border-border flex flex-col items-start justify-between gap-4 border-b pb-4 sm:flex-row sm:items-center\"\n        >\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"bg-primary size-2 rounded-full\" />\n              <h3 class=\"text-foreground font-mono text-base font-bold\">\n                {{ selectedMetric.label }} &mdash; Deep Dive\n              </h3>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">{{ selectedMetric.description }}</p>\n          </div>\n          <Badge variant=\"secondary\" class=\"text-primary font-mono text-xs font-semibold\">\n            Cohort: {{ activeCohort.toUpperCase() }}\n          </Badge>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n          <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n            <p class=\"text-muted-foreground font-mono text-xs\">Monolithic Package Baseline</p>\n            <p class=\"text-muted-foreground font-mono text-lg font-bold line-through\">\n              {{ selectedMetric.details.before }}\n            </p>\n          </div>\n          <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n            <p class=\"text-success font-mono text-xs font-semibold\">UIPKGE Unbundled Registry</p>\n            <p class=\"text-success font-mono text-lg font-bold\">\n              {{ selectedMetric.details.after }}\n            </p>\n          </div>\n          <div class=\"border-border bg-primary/5 space-y-1 rounded-xl border p-4\">\n            <p class=\"text-primary font-mono text-xs font-semibold\">Net Engineering Impact</p>\n            <p class=\"text-foreground font-mono text-lg font-bold\">{{ selectedMetric.details.impact }}</p>\n          </div>\n        </div>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CustomerMetricsBand.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs High-Growth), 4 verified KPI metric tiles, and deep-dive impact inspector.",
  "categories": [
    "marketing"
  ]
}