{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "counter-section",
  "title": "Counter Section",
  "author": "AlgorizeTech",
  "description": "Ask the user to pick one of 4 counter section variants: https://avaraui.com/view/counter-section. This item holds 4 of them as looks of one component (cyber-hud, spotlight-gradient, minimal-slash, halftone-cinema). Skip the question if the user already named one. A collection of 4 animated high-impact Counter and Stats Sections with viewport-triggered count-up easing, zero shadows, and full adaptive styling.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/CounterSectionBlock.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState, useId } from \"react\";\nimport {\n  TrendingUp,\n  Users,\n  ShieldCheck,\n  Sparkles,\n  Zap,\n  RotateCcw,\n  Star,\n  Globe,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * True while the element is on screen, false again once it has fully left.\n * It flips on when a quarter of it has scrolled in — or when it is already\n * partly showing as the page loads — and off only when none of it shows.\n */\nfunction useInView(ref: React.RefObject<Element | null>, amount: number) {\n  const [inView, setInView] = useState(false);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof IntersectionObserver === \"undefined\") return;\n    const io = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setInView(entry.isIntersecting);\n      },\n      { threshold: amount },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, [ref, amount]);\n  return inView;\n}\n\n// ==========================================\n// TYPES & DATA STRUCTURES\n// ==========================================\nexport type CounterSectionVariant =\n  | \"cyber-hud\"         // High-tech terminal HUD with character scramble/decryption (Light & Dark)\n  | \"minimal-slash\"     // Inspired by image 1: Clean high-impact typographic stats with /MONO labels\n  | \"halftone-cinema\"   // Inspired by image 2: Halftone strip with hairline dividers (Light & Dark)\n  | \"spotlight-gradient\";// Cursor-tracking radial spotlight with shimmering gradient typography\n\nexport interface StatItem {\n  id?: string;\n  value: number;\n  prefix?: string;\n  suffix?: string;\n  decimals?: number;\n  label: string;\n  sublabel?: string;\n  tag?: string;\n  trend?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface CounterSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: CounterSectionVariant;\n  eyebrow?: string;\n  heading?: string;\n  description?: string;\n  stats?: StatItem[];\n  allowReplay?: boolean;\n}\n\n// Default presets for the 5 variants\nconst DEFAULT_STATS: Record<CounterSectionVariant, StatItem[]> = {\n  \"minimal-slash\": [\n    {\n      value: 130,\n      prefix: \"$\",\n      suffix: \"M\",\n      label: \"/REVENUE UNLOCKED\",\n      sublabel: \"Processed securely across global commerce partners\",\n      tag: \"+42% YoY\",\n    },\n    {\n      value: 98,\n      suffix: \"%\",\n      label: \"/CLIENT SATISFACTION\",\n      sublabel: \"Verified feedback score from over 1,200 enterprises\",\n      tag: \"Top 1%\",\n    },\n    {\n      value: 90,\n      suffix: \"+\",\n      label: \"/INDUSTRIES SERVED\",\n      sublabel: \"From fintech innovators to deep-tech logistics\",\n      tag: \"Global\",\n    },\n    {\n      value: 4.9,\n      decimals: 1,\n      suffix: \"★\",\n      label: \"/GLOBAL RATING\",\n      sublabel: \"Independent peer review score on Gartner & G2\",\n      tag: \"Leader\",\n    },\n  ],\n  \"halftone-cinema\": [\n    {\n      value: 60,\n      suffix: \"+\",\n      label: \"Years of experience\",\n      sublabel: \"Pioneering architectural and computational design\",\n    },\n    {\n      value: 97,\n      suffix: \"%\",\n      label: \"Client retention rate\",\n      sublabel: \"Long-term partnership contracts spanning multiple decades\",\n    },\n    {\n      value: 100,\n      suffix: \"+m\",\n      label: \"Sq. Ft. currently managed\",\n      sublabel: \"Sustainable grade-A commercial real estate and facilities\",\n    },\n    {\n      value: 98,\n      label: \"Quality audit score\",\n      sublabel: \"Zero non-compliance marks on international safety audits\",\n    },\n  ],\n  \"spotlight-gradient\": [\n    {\n      value: 850,\n      suffix: \"K+\",\n      label: \"Daily Active Sessions\",\n      sublabel: \"Powering modern user experiences on web and mobile\",\n      tag: \"Fast\",\n      icon: <Users className=\"w-5 h-5\" />,\n    },\n    {\n      value: 12,\n      suffix: \"ms\",\n      label: \"Median Edge Latency\",\n      sublabel: \"Global compute routing under sub-15 millisecond target\",\n      tag: \"Ultra Low\",\n      icon: <Zap className=\"w-5 h-5\" />,\n    },\n    {\n      value: 99.9,\n      decimals: 1,\n      suffix: \"%\",\n      label: \"Security Audit Grade\",\n      sublabel: \"SOC2 Type II, ISO 27001, and HIPAA compliance verified\",\n      tag: \"Certified\",\n      icon: <ShieldCheck className=\"w-5 h-5\" />,\n    },\n    {\n      value: 3.2,\n      decimals: 1,\n      prefix: \"\",\n      suffix: \"x\",\n      label: \"Efficiency Acceleration\",\n      sublabel: \"Average engineering velocity increase reported by engineering teams\",\n      tag: \"Productivity\",\n      icon: <TrendingUp className=\"w-5 h-5\" />,\n    },\n  ],\n  \"cyber-hud\": [\n    {\n      value: 2.4,\n      decimals: 1,\n      prefix: \"$\",\n      suffix: \"B\",\n      label: \"LIQUIDITY POOL RESERVE\",\n      sublabel: \"VERIFIED MULTI-SIG ON-CHAIN VAULT\",\n      tag: \"SEC-L3\",\n    },\n    {\n      value: 99.999,\n      decimals: 3,\n      suffix: \"%\",\n      label: \"CONSENSUS SYNCHRONIZATION\",\n      sublabel: \"ZERO DIVERGENCE EPOCH ROUNDS\",\n      tag: \"BFT-PASS\",\n    },\n    {\n      value: 180,\n      suffix: \"+\",\n      label: \"VALIDATOR EDGE NODES\",\n      sublabel: \"DISTRIBUTED GEOGRAPHIC SHARDING\",\n      tag: \"ACTIVE\",\n    },\n    {\n      value: 45,\n      suffix: \"K/s\",\n      label: \"TPS THROUGHPUT CAPACITY\",\n      sublabel: \"PARALLEL PIPELINED EXECUTION\",\n      tag: \"PEAK\",\n    },\n  ],\n};\n\n// ==========================================\n// ANIMATED NUMBER TICKER\n// ==========================================\ninterface AnimatedNumberProps {\n  value: number;\n  duration?: number;\n  decimals?: number;\n  trigger?: boolean;\n}\n\nexport function AnimatedNumber({\n  value,\n  duration = 2000,\n  decimals = 0,\n  trigger = true,\n}: AnimatedNumberProps) {\n  const [current, setCurrent] = useState(0);\n  // Untriggered, the number rests at 0, so the next count starts from there.\n  if (!trigger && current !== 0) setCurrent(0);\n\n  useEffect(() => {\n    if (!trigger) return;\n\n    const startTime = performance.now();\n    let animId = 0;\n\n    const animate = (currentTime: number) => {\n      const elapsed = currentTime - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // EaseOutQuart easing formula: 1 - pow(1 - x, 4)\n      const easeProgress = 1 - Math.pow(1 - progress, 4);\n      const val = easeProgress * value;\n\n      setCurrent(val);\n\n      if (progress < 1) {\n        animId = requestAnimationFrame(animate);\n      } else {\n        setCurrent(value);\n      }\n    };\n\n    // The latest frame is the one to cancel, so a re-trigger mid-count stops\n    // the old loop instead of leaving two fighting over the number.\n    animId = requestAnimationFrame(animate);\n    return () => cancelAnimationFrame(animId);\n  }, [value, duration, trigger]);\n\n  const formatted =\n    decimals > 0\n      ? current.toFixed(decimals)\n      : Math.round(current).toLocaleString();\n\n  return <span>{formatted}</span>;\n}\n\n// Scramble text effect for Cyber HUD\nfunction ScrambleCounter({\n  value,\n  prefix = \"\",\n  suffix = \"\",\n  decimals = 0,\n  trigger = true,\n}: {\n  value: number;\n  prefix?: string;\n  suffix?: string;\n  decimals?: number;\n  trigger?: boolean;\n}) {\n  const finalStr = `${prefix}${decimals > 0 ? value.toFixed(decimals) : value}${suffix}`;\n  const [display, setDisplay] = useState(finalStr);\n  const chars = \"0123456789ABCDEF#%&*\";\n\n  useEffect(() => {\n    if (!trigger) return;\n\n    let iteration = 0;\n    const totalIterations = 14;\n\n    const interval = setInterval(() => {\n      setDisplay(\n        finalStr\n          .split(\"\")\n          .map((_, index) => {\n            if (index < (iteration / totalIterations) * finalStr.length) {\n              return finalStr[index];\n            }\n            return chars[Math.floor(Math.random() * chars.length)];\n          })\n          .join(\"\")\n      );\n\n      iteration += 1;\n      if (iteration > totalIterations) {\n        clearInterval(interval);\n        setDisplay(finalStr);\n      }\n    }, 45);\n\n    return () => clearInterval(interval);\n  }, [trigger, finalStr]);\n\n  return <span>{display}</span>;\n}\n\n// ==========================================\n// 1. VARIANT: MINIMAL-SLASH (Inspired by Image 1)\n// Clean high-contrast typography, monospace uppercase /LABELS\n// ==========================================\nfunction MinimalSlashSection({\n  stats,\n  isInView,\n  triggerKey,\n}: {\n  stats: StatItem[];\n  isInView: boolean;\n  triggerKey: number;\n}) {\n  return (\n    <div className=\"w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5\">\n      {stats.map((stat, idx) => (\n        <div\n          key={`${stat.label}-${idx}-${triggerKey}`}\n          className=\"group relative rounded-2xl border border-border/80 bg-card/60 dark:bg-card/40 backdrop-blur-md p-6 sm:p-7 flex flex-col justify-between overflow-hidden transition-all duration-300 hover:border-primary/50 hover:bg-card/90\"\n        >\n          {/* Top Shimmer Beam on Hover */}\n          <div className=\"absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-primary/0 to-transparent group-hover:via-primary transition-all duration-500\" />\n\n          {/* Faded Giant Watermark Index in Background */}\n          <span className=\"absolute -right-2 -bottom-4 font-mono font-black text-8xl text-foreground/[0.03] dark:text-foreground/[0.04] select-none pointer-events-none group-hover:text-primary/[0.08] transition-colors duration-500\">\n            0{idx + 1}\n          </span>\n\n          <div>\n            {/* Top row: Slash Index + Badge */}\n            <div className=\"flex items-center justify-between gap-2 mb-4\">\n              <span className=\"inline-flex items-center gap-1 font-mono text-xs font-bold text-muted-foreground/70 group-hover:text-primary transition-colors\">\n                <span className=\"text-primary font-black\">{\"//\"}</span> 0{idx + 1}\n              </span>\n              {stat.tag && (\n                <span className=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-mono font-medium tracking-tight bg-primary/10 text-primary border border-primary/20 group-hover:border-primary/40 transition-colors\">\n                  {idx === 0 && <TrendingUp className=\"w-3 h-3 text-emerald-500\" />}\n                  {idx === 1 && <ShieldCheck className=\"w-3 h-3 text-primary\" />}\n                  {idx === 2 && <Globe className=\"w-3 h-3 text-sky-500\" />}\n                  {idx === 3 && <Star className=\"w-3 h-3 fill-amber-400 text-amber-400\" />}\n                  {stat.tag}\n                </span>\n              )}\n            </div>\n\n            {/* Giant Metric Display */}\n            <div className=\"my-4 flex items-baseline tracking-tight\">\n              {stat.prefix && (\n                <span className=\"text-2xl sm:text-3xl font-light text-muted-foreground/80 mr-1\">\n                  {stat.prefix}\n                </span>\n              )}\n              <span className=\"text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-foreground font-sans transition-colors duration-300 group-hover:text-primary\">\n                <AnimatedNumber\n                  value={stat.value}\n                  decimals={stat.decimals ?? 0}\n                  duration={1800}\n                  trigger={isInView}\n                />\n              </span>\n              {stat.suffix === \"★\" ? (\n                <span className=\"inline-flex items-center text-amber-400 ml-1.5 -translate-y-1\">\n                  <Star className=\"w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 fill-amber-400 text-amber-400\" />\n                </span>\n              ) : (\n                stat.suffix && (\n                  <span className=\"text-2xl sm:text-3xl lg:text-4xl font-bold text-primary ml-1 font-mono\">\n                    {stat.suffix}\n                  </span>\n                )\n              )}\n            </div>\n\n            {/* Animated Horizontal Slash Bar */}\n            <div className=\"h-[2px] w-8 bg-primary/30 group-hover:w-full group-hover:bg-primary transition-all duration-500 ease-out my-3 rounded-full\" />\n          </div>\n\n          {/* Monospace Uppercase Slash Label & Sublabel */}\n          <div className=\"mt-2 pt-2\">\n            <div className=\"flex items-center gap-1.5 font-mono text-xs font-bold tracking-wider text-foreground uppercase group-hover:text-primary transition-colors duration-200\">\n              <span className=\"text-primary font-black text-sm\">/</span>\n              <span>{stat.label.replace(/^\\//, \"\")}</span>\n            </div>\n\n            {stat.sublabel && (\n              <p className=\"text-xs text-muted-foreground leading-relaxed font-sans mt-1.5 line-clamp-2\">\n                {stat.sublabel}\n              </p>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n// ==========================================\n// 2. VARIANT: HALFTONE-CINEMA (Inspired by Image 2)\n// Architectural Halftone Strip - Fully Theme-Adaptive (Clean Light & Moody Dark)\n// ==========================================\nfunction HalftoneCinemaSection({\n  stats,\n  isInView,\n  triggerKey,\n}: {\n  stats: StatItem[];\n  isInView: boolean;\n  triggerKey: number;\n}) {\n  const patternId = useId();\n\n  return (\n    <div className=\"relative w-full rounded-2xl overflow-hidden bg-zinc-50 border border-zinc-200 dark:bg-[#0c0c0f] dark:border-white/10 text-foreground transition-colors duration-200\">\n      {/* Halftone Dot Matrix Pattern overlay - Theme adaptive */}\n      <div className=\"absolute inset-0 pointer-events-none opacity-20 dark:opacity-25 mix-blend-multiply dark:mix-blend-screen\">\n        <svg className=\"w-full h-full\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <pattern\n              id={patternId}\n              width=\"16\"\n              height=\"16\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <circle cx=\"2\" cy=\"2\" r=\"1.2\" fill=\"currentColor\" opacity=\"0.4\" />\n              <circle cx=\"10\" cy=\"10\" r=\"1.8\" fill=\"currentColor\" opacity=\"0.75\" />\n            </pattern>\n          </defs>\n          <rect width=\"100%\" height=\"100%\" fill={`url(#${patternId})`} />\n        </svg>\n      </div>\n\n      {/* Atmospheric gradient fade from center to edges */}\n      <div className=\"absolute inset-0 bg-radial from-transparent via-zinc-100/50 to-zinc-100/90 dark:via-[#0c0c0f]/60 dark:to-[#0c0c0f] pointer-events-none\" />\n\n      {/* Top hairline border */}\n      <div className=\"absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-zinc-300 dark:via-white/30 to-transparent\" />\n\n      <div className=\"relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-zinc-200 dark:divide-white/10\">\n        {stats.map((stat, idx) => (\n          <div\n            key={`${stat.label}-${idx}-${triggerKey}`}\n            className=\"group relative p-6 sm:p-8 lg:p-10 flex flex-col justify-between transition-colors duration-300 hover:bg-black/[0.02] dark:hover:bg-white/[0.03]\"\n          >\n            {/* Top Dot crosshair anchor */}\n            <div className=\"absolute top-0 right-0 w-2 h-2 -mr-1 -mt-1 rounded-full bg-zinc-300 dark:bg-white/20 hidden lg:block pointer-events-none\" />\n\n            <div>\n              {/* Stat Number */}\n              <div className=\"flex items-baseline text-4xl sm:text-5xl lg:text-6xl font-sans font-light tracking-tight text-zinc-950 dark:text-white mb-3\">\n                {stat.prefix && <span className=\"font-extralight text-zinc-600 dark:text-white/80 mr-0.5\">{stat.prefix}</span>}\n                <span className=\"font-semibold text-zinc-950 dark:text-white tracking-tighter\">\n                  <AnimatedNumber\n                    value={stat.value}\n                    decimals={stat.decimals ?? 0}\n                    duration={2000}\n                    trigger={isInView}\n                  />\n                </span>\n                {stat.suffix && (\n                  <span className=\"font-normal text-zinc-800 dark:text-white/90 ml-1 text-3xl sm:text-4xl\">\n                    {stat.suffix}\n                  </span>\n                )}\n              </div>\n\n              {/* Title / Label */}\n              <h4 className=\"text-sm font-medium text-zinc-800 dark:text-white/90 tracking-normal mb-1.5 group-hover:text-primary transition-colors duration-200\">\n                {stat.label}\n              </h4>\n            </div>\n\n            {/* Sublabel description */}\n            {stat.sublabel && (\n              <p className=\"text-xs text-zinc-500 dark:text-white/50 leading-relaxed font-sans mt-3 border-t border-zinc-200 dark:border-white/5 pt-3\">\n                {stat.sublabel}\n              </p>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {/* Bottom hairline border */}\n      <div className=\"absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-zinc-300 dark:via-white/20 to-transparent\" />\n    </div>\n  );\n}\n\n// ==========================================\n// 4. VARIANT: SPOTLIGHT-GRADIENT\n// Interactive mouse-tracking spotlight gradient, glowing modern floating cards\n// ==========================================\nfunction SpotlightGradientSection({\n  stats,\n  isInView,\n  triggerKey,\n}: {\n  stats: StatItem[];\n  isInView: boolean;\n  triggerKey: number;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    setMousePos({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className=\"relative w-full p-6 sm:p-8 rounded-3xl border border-border/70 bg-card/40 backdrop-blur-md overflow-hidden transition-colors\"\n    >\n      {/* Subtle ambient dot grid background */}\n      <div\n        className=\"absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.06]\"\n        style={{\n          backgroundImage: \"radial-gradient(currentColor 1px, transparent 1px)\",\n          backgroundSize: \"24px 24px\",\n        }}\n      />\n\n      {/* Interactive Cursor Spotlight Radial Gradient */}\n      <div\n        className=\"pointer-events-none absolute -inset-px transition-opacity duration-300 z-0\"\n        style={{\n          opacity: isHovered ? 1 : 0,\n          background: `radial-gradient(650px circle at ${mousePos.x}px ${mousePos.y}px, color-mix(in oklab, var(--primary) 20%, transparent), transparent 75%)`,\n        }}\n      />\n\n      {/* 4 Sleek Floating Cards */}\n      <div className=\"relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5\">\n        {stats.map((stat, idx) => (\n          <div\n            key={`${stat.label}-${idx}-${triggerKey}`}\n            className=\"group relative rounded-2xl border border-border/70 bg-background/60 dark:bg-card/40 backdrop-blur-md p-6 flex flex-col justify-between transition-all duration-300 hover:border-primary/50 hover:bg-background/80 dark:hover:bg-card/60\"\n          >\n            {/* Subtle inner top glow beam on hover */}\n            <div className=\"absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-primary/30 group-hover:via-primary to-transparent transition-all duration-500 opacity-60 group-hover:opacity-100\" />\n\n            <div>\n              {/* Header: Icon & Tag */}\n              <div className=\"flex items-center justify-between gap-3\">\n                <div className=\"p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-primary transition-all duration-300 group-hover:bg-primary group-hover:text-primary-foreground group-hover:scale-105\">\n                  {stat.icon || <Sparkles className=\"w-5 h-5\" />}\n                </div>\n                {stat.tag && (\n                  <span className=\"inline-flex items-center gap-1.5 text-[11px] font-mono font-medium px-2.5 py-1 rounded-full bg-muted/80 text-muted-foreground border border-border/80 group-hover:border-primary/30 group-hover:text-foreground transition-colors\">\n                    <span className=\"w-1.5 h-1.5 rounded-full bg-primary/60 group-hover:bg-primary animate-pulse\" />\n                    {stat.tag}\n                  </span>\n                )}\n              </div>\n\n              {/* Metric Counter Number */}\n              <div className=\"mt-6 mb-2\">\n                <div className=\"flex items-baseline gap-0.5\">\n                  {stat.prefix && (\n                    <span className=\"text-2xl font-bold text-muted-foreground/80 mr-0.5\">\n                      {stat.prefix}\n                    </span>\n                  )}\n                  <span className=\"text-4xl sm:text-5xl font-black tracking-tight text-foreground group-hover:text-primary transition-colors duration-300\">\n                    <AnimatedNumber\n                      value={stat.value}\n                      decimals={stat.decimals ?? 0}\n                      duration={2000}\n                      trigger={isInView}\n                    />\n                  </span>\n                  {stat.suffix && (\n                    <span className=\"text-2xl sm:text-3xl font-bold text-primary ml-0.5 font-mono\">\n                      {stat.suffix}\n                    </span>\n                  )}\n                </div>\n              </div>\n\n              {/* Label and Sublabel */}\n              <div className=\"mt-1\">\n                <h4 className=\"text-sm font-semibold text-foreground tracking-tight group-hover:text-primary transition-colors duration-200\">\n                  {stat.label}\n                </h4>\n                {stat.sublabel && (\n                  <p className=\"text-xs text-muted-foreground leading-relaxed mt-1.5\">\n                    {stat.sublabel}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Bottom Micro-Visual Indicator per card */}\n            <div className=\"mt-6 pt-4 border-t border-border/50 flex items-center justify-between text-[11px] text-muted-foreground\">\n              {idx === 0 && (\n                <>\n                  <span className=\"inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400 font-medium\">\n                    <span className=\"w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping\" />\n                    Live traffic\n                  </span>\n                  <span className=\"font-mono text-[10px] text-muted-foreground/80\">99.8% hit</span>\n                </>\n              )}\n              {idx === 1 && (\n                <>\n                  <div className=\"flex items-center gap-1\">\n                    <span className=\"h-1.5 w-3 rounded-full bg-emerald-500\" />\n                    <span className=\"h-1.5 w-3 rounded-full bg-emerald-500\" />\n                    <span className=\"h-1.5 w-3 rounded-full bg-emerald-500\" />\n                    <span className=\"h-1.5 w-3 rounded-full bg-muted-foreground/30\" />\n                  </div>\n                  <span className=\"font-mono text-[10px] text-muted-foreground/80\">32 Edge PoPs</span>\n                </>\n              )}\n              {idx === 2 && (\n                <>\n                  <span className=\"inline-flex items-center gap-1 text-primary font-medium\">\n                    <ShieldCheck className=\"w-3.5 h-3.5\" /> SOC2 Type II\n                  </span>\n                  <span className=\"font-mono text-[10px] text-muted-foreground/80\">Audited</span>\n                </>\n              )}\n              {idx === 3 && (\n                <>\n                  <span className=\"inline-flex items-center gap-1 text-primary font-medium\">\n                    <TrendingUp className=\"w-3.5 h-3.5\" /> +220% output\n                  </span>\n                  <span className=\"font-mono text-[10px] text-muted-foreground/80\">Measured</span>\n                </>\n              )}\n              {idx > 3 && (\n                <>\n                  <span className=\"text-emerald-500 font-medium\">Active</span>\n                  <span className=\"font-mono text-[10px] text-muted-foreground/80\">Verified</span>\n                </>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ==========================================\n// 5. VARIANT: CYBER-HUD\n// High-tech terminal dashboard - Fully Theme-Adaptive (Clean Light & Sleek Dark)\n// ==========================================\nfunction CyberHudSection({\n  stats,\n  isInView,\n  triggerKey,\n}: {\n  stats: StatItem[];\n  isInView: boolean;\n  triggerKey: number;\n}) {\n  return (\n    <div className=\"relative w-full rounded-2xl border border-primary/40 bg-zinc-50 dark:bg-zinc-950 text-foreground dark:text-zinc-100 p-6 sm:p-8 font-mono overflow-hidden transition-colors duration-200\">\n      {/* Corner crosshairs [+] */}\n      <span className=\"absolute top-2 left-2 text-xs text-primary/70 select-none\">[+]</span>\n      <span className=\"absolute top-2 right-2 text-xs text-primary/70 select-none\">[+]</span>\n      <span className=\"absolute bottom-2 left-2 text-xs text-primary/70 select-none\">[+]</span>\n      <span className=\"absolute bottom-2 right-2 text-xs text-primary/70 select-none\">[+]</span>\n\n      {/* Cyber Scanline Overlay */}\n      <div className=\"absolute inset-0 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.12)_50%)] dark:bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%)] bg-[length:100%_4px] pointer-events-none opacity-25 dark:opacity-40 -z-10\" />\n\n      {/* Telemetry Header */}\n      <div className=\"flex items-center justify-between pb-4 mb-6 border-b border-zinc-200 dark:border-zinc-800 text-xs text-muted-foreground\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"inline-block w-2 h-2 rounded-full bg-emerald-500 animate-pulse\" />\n          <span className=\"tracking-wider uppercase text-emerald-600 dark:text-emerald-400 font-semibold\">\n            TELEMETRY NODE // CLUSTER-09\n          </span>\n        </div>\n        <div className=\"hidden sm:flex items-center gap-4 text-[11px] text-zinc-500\">\n          <span>LATENCY: 14MS</span>\n          <span>UPTIME: 99.999%</span>\n          <span>STATUS: ONLINE</span>\n        </div>\n      </div>\n\n      {/* 4 HUD Metric Panels */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        {stats.map((stat, idx) => (\n          <div\n            key={`${stat.label}-${idx}-${triggerKey}`}\n            className=\"relative p-4 rounded-xl border border-zinc-200 bg-white/80 dark:border-zinc-800 dark:bg-zinc-900/60 backdrop-blur-md flex flex-col justify-between group hover:border-primary/60 transition-colors duration-200\"\n          >\n            {/* Top Tag & Code ID */}\n            <div className=\"flex items-center justify-between text-[10px] text-muted-foreground mb-2\">\n              <span className=\"tracking-widest uppercase\">STAT://0{idx + 1}</span>\n              {stat.tag && (\n                <span className=\"px-1.5 py-0.5 rounded bg-primary/10 text-primary dark:bg-primary/20 border border-primary/30 font-semibold\">\n                  {stat.tag}\n                </span>\n              )}\n            </div>\n\n            {/* Giant Metric with Scramble Decryption */}\n            <div className=\"text-3xl sm:text-4xl font-black tracking-tight text-zinc-950 dark:text-white my-2 group-hover:text-primary transition-colors duration-200\">\n              <ScrambleCounter\n                value={stat.value}\n                prefix={stat.prefix}\n                suffix={stat.suffix}\n                decimals={stat.decimals ?? 0}\n                trigger={isInView}\n              />\n            </div>\n\n            {/* Label and Sublabel */}\n            <div className=\"pt-2 border-t border-zinc-200/80 dark:border-zinc-800/80\">\n              <div className=\"text-xs font-semibold tracking-wider text-zinc-800 dark:text-zinc-300 uppercase\">\n                {stat.label}\n              </div>\n              {stat.sublabel && (\n                <div className=\"text-[10px] text-zinc-500 mt-1 uppercase tracking-tight\">\n                  {stat.sublabel}\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ==========================================\n// MAIN EXPORTED COMPONENT: CounterSection\n// ==========================================\nexport function CounterSection({\n  variant = \"cyber-hud\",\n  eyebrow,\n  heading,\n  description,\n  stats,\n  allowReplay = false,\n  className,\n  ...props\n}: CounterSectionProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isInView = useInView(containerRef, 0.25);\n  const [triggerKey, setTriggerKey] = useState(0);\n\n  const activeStats = stats || DEFAULT_STATS[variant];\n\n  const handleReplay = () => {\n    setTriggerKey((k) => k + 1);\n  };\n\n  const hasHeader = Boolean(eyebrow || heading || description || allowReplay);\n\n  return (\n    <section\n      ref={containerRef}\n      className={cn(\"w-full py-2 pl-[15px] pr-[10px]\", className)}\n      {...props}\n    >\n      {/* Optional Section Header - only shown if explicitly provided */}\n      {hasHeader && (\n        <div className=\"flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4 mb-6 sm:mb-8\">\n          <div className=\"max-w-2xl\">\n            {eyebrow && (\n              <span className=\"inline-block text-xs font-mono font-semibold tracking-wider uppercase text-primary mb-2\">\n                {eyebrow}\n              </span>\n            )}\n            {heading && (\n              <h2 className=\"text-2xl sm:text-4xl font-bold tracking-tight text-foreground\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"text-sm sm:text-base text-muted-foreground mt-2 leading-relaxed\">\n                {description}\n              </p>\n            )}\n          </div>\n\n          {allowReplay && (\n            <button\n              onClick={handleReplay}\n              title=\"Replay counter animation\"\n              className=\"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-foreground text-xs font-medium hover:bg-accent transition-colors duration-150 cursor-pointer\"\n            >\n              <RotateCcw className=\"w-3.5 h-3.5\" />\n              Replay\n            </button>\n          )}\n        </div>\n      )}\n\n      {/* Variant Renderer */}\n      {variant === \"minimal-slash\" && (\n        <MinimalSlashSection\n          stats={activeStats}\n          isInView={isInView}\n          triggerKey={triggerKey}\n        />\n      )}\n      {variant === \"halftone-cinema\" && (\n        <HalftoneCinemaSection\n          stats={activeStats}\n          isInView={isInView}\n          triggerKey={triggerKey}\n        />\n      )}\n      {variant === \"spotlight-gradient\" && (\n        <SpotlightGradientSection\n          stats={activeStats}\n          isInView={isInView}\n          triggerKey={triggerKey}\n        />\n      )}\n      {variant === \"cyber-hud\" && (\n        <CyberHudSection\n          stats={activeStats}\n          isInView={isInView}\n          triggerKey={triggerKey}\n        />\n      )}\n    </section>\n  );\n}\n\nexport default CounterSection;\n",
      "type": "registry:component",
      "target": "components/custom/blocks/CounterSectionBlock.tsx"
    }
  ],
  "docs": "Named export: CounterSection. Accepts variant ('cyber-hud' | 'minimal-slash' | 'halftone-cinema' | 'spotlight-gradient') and custom stats array with value, prefix, suffix, decimals, label, sublabel, and tag.",
  "categories": [
    "marketing",
    "data-display"
  ],
  "type": "registry:component"
}