'use client' import type { ComponentProps } from 'react' import { useEffect, useMemo, useRef } from 'react' import { animate, motion, useInView, useMotionValue, useReducedMotion, useTransform, } from 'motion/react' import { cn } from '@/lib/utils' export type BusinessMetric = { value: number label: string detail?: string prefix?: string suffix?: string decimals?: number } export type AnimatedStatValueProps = { value: number prefix?: string suffix?: string decimals?: number duration?: number className?: string } export type StatsSectionOneProps = ComponentProps<'section'> & { eyebrow?: string heading?: string description?: string metrics?: readonly BusinessMetric[] } const defaultMetrics: readonly BusinessMetric[] = [ { value: 38, suffix: '%', label: 'Faster delivery', detail: 'Within the first 90 days', }, { value: 18, suffix: ' hrs', label: 'Saved every week', detail: 'Per operations team', }, { value: 3.2, suffix: '×', decimals: 1, label: 'Return on spend', detail: 'Measured over 12 months', }, { value: 99.9, suffix: '%', decimals: 1, label: 'Platform uptime', detail: 'Across all workspaces', }, ] export function AnimatedStatValue({ value, prefix = '', suffix = '', decimals = 0, duration = 1.1, className, }: AnimatedStatValueProps) { const ref = useRef(null) const shouldReduceMotion = useReducedMotion() const isInView = useInView(ref, { once: true, amount: 0.6, }) const animatedValue = useMotionValue(shouldReduceMotion ? value : 0) const formatter = useMemo( () => new Intl.NumberFormat('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }), [decimals], ) const formattedValue = useTransform( animatedValue, (latest) => `${prefix}${formatter.format(latest)}${suffix}`, ) const finalValue = `${prefix}${formatter.format(value)}${suffix}` useEffect(() => { if (!isInView) return if (shouldReduceMotion) { animatedValue.set(value) return } const controls = animate(animatedValue, value, { duration, ease: [0.22, 1, 0.36, 1], }) return () => controls.stop() }, [animatedValue, duration, isInView, shouldReduceMotion, value]) return ( {formattedValue} {finalValue} ) } export function StatsSectionOne({ className, eyebrow = 'Measured impact', heading = 'Outcomes you can measure', description = 'Clear performance metrics that demonstrate the operational and business impact of your product.', metrics = defaultMetrics, ...props }: StatsSectionOneProps) { return (

{eyebrow}

{heading}

{description}

{metric.label}

) } export default StatsSectionOne