"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useInView, animate } from "framer-motion"; const AnimatedCounter = ({ value, prefix = "", suffix = "", decimals = 0 }: { value: number, prefix?: string, suffix?: string, decimals?: number }) => { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: "0px" }); useEffect(() => { if (inView && ref.current) { const controls = animate(0, value, { duration: 2, ease: [0.22, 1, 0.36, 1], onUpdate: (v) => { if (ref.current) { ref.current.textContent = `${prefix}${v.toFixed(decimals)}${suffix}`; } }, }); return () => controls.stop(); } }, [inView, value, prefix, suffix, decimals]); return {prefix}0{suffix}; }; const STATS_DATA = [ { id: "01", label: "Global Capital Processed", value: 12.4, prefix: "$", suffix: "B", decimals: 1, accent: "bg-[#FF3366]", details: "Capital flow verified across 4,200 decentralized nodes in Q3. Processing speed increased by 40% year-over-year.", chartPoints: "0,50 20,40 40,60 60,20 80,40 100,10" }, { id: "02", label: "Network Latency", value: 8, prefix: "", suffix: "ms", decimals: 0, accent: "bg-[#00E676]", details: "Average response time optimized globally. Edge routing protocols active across all major data centers.", chartPoints: "0,20 20,25 40,15 60,20 80,10 100,5" }, { id: "03", label: "Active Protocols", value: 942, prefix: "", suffix: "", decimals: 0, accent: "bg-[#2979FF]", details: "Smart contracts deployed and actively interacting with the mainnet without collision or memory leaks.", chartPoints: "0,80 20,60 40,70 60,40 80,20 100,0" }, { id: "04", label: "System Uptime", value: 99.99, prefix: "", suffix: "%", decimals: 2, accent: "bg-[#FFD600]", details: "SLA guaranteed architecture. Redundant failovers maintained seamless operation through last cycle.", chartPoints: "0,10 20,10 40,15 60,10 80,10 100,10" } ]; export default function AccordionStatsBento() { const [hoveredIndex, setHoveredIndex] = useState(0); const [isMounted, setIsMounted] = useState(false); useEffect(() => setIsMounted(true), []); if (!isMounted) return null; return (

Live Network Metrics

Real-time verification

{/* Mobile: Vertical Accordion (flex-col, height 800px) Desktop (@4xl): Horizontal Accordion (flex-row, height 600px) */}

{STATS_DATA.map((stat, idx) => { const isActive = hoveredIndex === idx; return ( setHoveredIndex(idx)} onClick={() => setHoveredIndex(idx)} layout initial={false} animate={{ flex: isActive ? 4 : 1, }} transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1], }} className={`relative overflow-hidden flex flex-col justify-between bg-white dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 rounded-3xl transition-all cursor-pointer @4xl:cursor-default min-h-[90px] @4xl:min-h-0 @4xl:min-w-[100px] ${ isActive ? "shadow-2xl shadow-zinc-200/50 dark:shadow-none" : "shadow-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/50" }`} >

/{stat.id}

{stat.label}

{stat.details}

); })}

); }