{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stats-04","type":"registry:component","title":"Stats 04","description":"A comprehensive performance statistics section with background overlay, featuring main metrics with progress bars, detailed feature statistics, bottom stats grid, and certification badges. Perfect for showcasing platform performance, infrastructure metrics, API statistics, security certifications, and system reliability on landing pages and product showcases.","dependencies":["lucide-react"],"registryDependencies":["badge","progress"],"files":[{"path":"src/registry/blocks/marketing/social-proof/stats/stats-04.tsx","content":"\"use client\";\n\nimport { Globe, Rocket, Shield, Zap } from \"lucide-react\";\nimport Image from \"next/image\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Progress } from \"@/registry/ui/progress\";\n\nexport interface Stats04Props {\n  className?: string;\n}\n\nconst content = {\n  badge: {\n    text: \"Performance Metrics\",\n    showIcon: true,\n  },\n  header: {\n    title: \"Powering the Future of\",\n    highlightText: \"Digital Innovation\",\n    description:\n      \"Our platform delivers exceptional performance and reliability, trusted by industry leaders worldwide.\",\n  },\n  background: {\n    image: \"/placeholder.svg?height=600&width=1200&text=Stats+Background+Image\",\n    show: true,\n  },\n  mainMetrics: [\n    {\n      id: 1,\n      icon: Zap,\n      value: \"99.99%\",\n      label: \"Uptime\",\n      progressValue: 99.99,\n      description: \"Industry leading reliability\",\n      iconBgColor: \"bg-blue-500/20\",\n      iconColor: \"text-blue-400\",\n    },\n    {\n      id: 2,\n      icon: Shield,\n      value: \"<50ms\",\n      label: \"Response Time\",\n      progressValue: 95,\n      description: \"Lightning fast performance\",\n      iconBgColor: \"bg-green-500/20\",\n      iconColor: \"text-green-400\",\n    },\n    {\n      id: 3,\n      icon: Globe,\n      value: \"200+\",\n      label: \"Edge Locations\",\n      progressValue: 87,\n      description: \"Global infrastructure\",\n      iconBgColor: \"bg-purple-500/20\",\n      iconColor: \"text-purple-400\",\n    },\n    {\n      id: 4,\n      icon: Rocket,\n      value: \"10M+\",\n      label: \"Requests/Day\",\n      progressValue: 92,\n      description: \"Massive scale processing\",\n      iconBgColor: \"bg-orange-500/20\",\n      iconColor: \"text-orange-400\",\n    },\n  ],\n  featureStats: [\n    {\n      id: 1,\n      value: \"2.4M+\",\n      label: \"API Calls Per Hour\",\n      detail: { label: \"Peak Load\", value: \"4.8M/hr\" },\n      progressValue: 50,\n    },\n    {\n      id: 2,\n      value: \"256-bit\",\n      label: \"SSL Encryption\",\n      detail: { label: \"Security Score\", value: \"A+\" },\n      progressValue: 100,\n    },\n    {\n      id: 3,\n      value: \"99.7%\",\n      label: \"Accuracy Rate\",\n      detail: { label: \"ML Precision\", value: \"99.9%\" },\n      progressValue: 99.7,\n    },\n  ],\n  bottomStats: [\n    { id: 1, value: \"50K+\", label: \"Active Users\" },\n    { id: 2, value: \"180+\", label: \"Countries\" },\n    { id: 3, value: \"24/7\", label: \"Support\" },\n    { id: 4, value: \"5TB\", label: \"Data Processed\" },\n    { id: 5, value: \"99.9%\", label: \"SLA Guarantee\" },\n  ],\n  certifications: [\n    { id: 1, name: \"SOC 2 Type II\", enabled: true },\n    { id: 2, name: \"ISO 27001\", enabled: true },\n    { id: 3, name: \"GDPR Compliant\", enabled: true },\n    { id: 4, name: \"HIPAA Ready\", enabled: true },\n    { id: 5, name: \"PCI DSS\", enabled: true },\n  ],\n};\n\nexport function Stats04({ className }: Stats04Props) {\n  const handleMetricClick = (metric: (typeof content.mainMetrics)[0]) => {\n    console.log(\"Metric clicked:\", metric);\n  };\n\n  const handleFeatureStatClick = (stat: (typeof content.featureStats)[0]) => {\n    console.log(\"Feature stat clicked:\", stat);\n  };\n\n  const activeCertifications = content.certifications.filter(\n    (cert) => cert.enabled !== false,\n  );\n\n  return (\n    <section className={cn(\"py-16 px-4 relative overflow-hidden\", className)}>\n      {/* Background */}\n      {content.background.show && (\n        <div className=\"absolute inset-0\">\n          <Image\n            src={content.background.image}\n            alt=\"Stats background\"\n            fill\n            className=\"object-cover\"\n            priority\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-r from-slate-900/95 via-slate-900/90 to-slate-900/95\" />\n        </div>\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 max-w-6xl mx-auto text-white\">\n        {/* Header */}\n        <div className=\"text-center space-y-4 mb-16\">\n          <Badge className=\"bg-white/20 text-white border-white/30 backdrop-blur-sm\">\n            {content.badge.showIcon && <Zap className=\"w-3 h-3 mr-1\" />}\n            {content.badge.text}\n          </Badge>\n          <h2 className=\"text-3xl md:text-4xl font-bold\">\n            {content.header.title}\n            <span className=\"block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400\">\n              {content.header.highlightText}\n            </span>\n          </h2>\n          <p className=\"text-xl text-white/80 max-w-2xl mx-auto\">\n            {content.header.description}\n          </p>\n        </div>\n\n        {/* Main Stats Grid */}\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16\">\n          {content.mainMetrics.map((metric) => {\n            const IconComponent = metric.icon;\n\n            return (\n              <button\n                key={metric.id}\n                type=\"button\"\n                className=\"bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20 cursor-pointer hover:bg-white/15 transition-colors w-full text-left\"\n                onClick={() => handleMetricClick(metric)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    handleMetricClick(metric);\n                  }\n                }}\n              >\n                <div className=\"flex items-center gap-3 mb-4\">\n                  <div\n                    className={cn(\n                      \"w-12 h-12 rounded-lg flex items-center justify-center\",\n                      metric.iconBgColor,\n                    )}\n                  >\n                    <IconComponent\n                      className={cn(\"h-6 w-6\", metric.iconColor)}\n                    />\n                  </div>\n                  <div>\n                    <div className=\"text-2xl font-bold\">{metric.value}</div>\n                    <div className=\"text-white/70 text-sm\">{metric.label}</div>\n                  </div>\n                </div>\n                <div className=\"mb-2\">\n                  <Progress\n                    value={metric.progressValue}\n                    className=\"h-2 bg-white/10 [&>div]:bg-white\"\n                  />\n                </div>\n                <div className=\"text-xs text-white/60\">\n                  {metric.description}\n                </div>\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Feature Stats */}\n        <div className=\"grid md:grid-cols-3 gap-8 mb-16\">\n          {content.featureStats.map((stat) => (\n            <button\n              key={stat.id}\n              type=\"button\"\n              className=\"text-center cursor-pointer hover:scale-105 transition-transform w-full\"\n              onClick={() => handleFeatureStatClick(stat)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  handleFeatureStatClick(stat);\n                }\n              }}\n            >\n              <div className=\"bg-white/5 backdrop-blur-sm rounded-lg p-8 border border-white/10\">\n                <div className=\"text-4xl font-bold mb-2\">{stat.value}</div>\n                <div className=\"text-white/70 mb-4\">{stat.label}</div>\n                <div className=\"space-y-2\">\n                  <div className=\"flex justify-between text-sm\">\n                    <span className=\"text-white/60\">{stat.detail.label}</span>\n                    <span className=\"text-white\">{stat.detail.value}</span>\n                  </div>\n                  <Progress\n                    value={stat.progressValue}\n                    className=\"h-1 bg-white/10 [&>div]:bg-white\"\n                  />\n                </div>\n              </div>\n            </button>\n          ))}\n        </div>\n\n        {/* Bottom Stats Row */}\n        <div className=\"bg-gradient-to-r from-blue-600/20 to-purple-600/20 backdrop-blur-sm rounded-lg p-8 border border-white/20 mb-12\">\n          <div className=\"grid grid-cols-2 md:grid-cols-5 gap-6 text-center\">\n            {content.bottomStats.map((stat) => (\n              <div key={stat.id}>\n                <div className=\"text-2xl font-bold mb-1\">{stat.value}</div>\n                <div className=\"text-white/70 text-sm\">{stat.label}</div>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Trust Indicators */}\n        {activeCertifications.length > 0 && (\n          <div className=\"text-center\">\n            <p className=\"text-white/60 mb-6\">\n              Certified and compliant with industry standards\n            </p>\n            <div className=\"flex flex-wrap items-center justify-center gap-8 text-white/40\">\n              {activeCertifications.map((cert) => (\n                <div key={cert.id} className=\"text-sm font-medium\">\n                  {cert.name}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}