"use client" import * as React from "react" import { motion, useInView, useReducedMotion } from "framer-motion" import { cn } from "@/lib/utils" import { Section } from "@/components/marketing/section" import { transition, duration } from "@/lib/animations" export interface Stat { value: string label: string } export interface StatsStripProps { /** Stats to display in a horizontal row. */ stats: Stat[] className?: string } /** Parse a stat value like "53" or "∞" into a countable number + suffix. */ function parseStatValue(value: string): { number: number | null; prefix: string; suffix: string } { const match = value.match(/^([^0-9]*)(\d+)(.*)$/) if (!match) return { number: null, prefix: "", suffix: value } return { number: parseInt(match[2], 10), prefix: match[1], suffix: match[3] } } /** Animated counter that counts up from 0 to target when in view. */ function AnimatedStat({ value, label, delay }: { value: string; label: string; delay: number }) { const ref = React.useRef(null) // Use `amount` threshold instead of `margin` — more reliable across production // environments where rootMargin percentage can behave inconsistently. const framerInView = useInView(ref, { once: true, amount: 0.2 }) const reduced = useReducedMotion() const { number, prefix, suffix } = parseStatValue(value) const [count, setCount] = React.useState(0) // Separate trigger state so we can set it from either framerInView or the // mount-time fallback that catches the hydration race condition. const [triggered, setTriggered] = React.useState(false) // Production safety net: if JS hydrates AFTER the user has already scrolled // past the stats section, framerInView never fires (once:true). Check the // element's current position at mount and fire immediately if already visible. React.useEffect(() => { if (!ref.current) return const { top, bottom } = ref.current.getBoundingClientRect() if (top < window.innerHeight && bottom > 0) { setTriggered(true) } }, []) React.useEffect(() => { if (framerInView) setTriggered(true) }, [framerInView]) React.useEffect(() => { if (!triggered || number === null || reduced) return const target = number const animDuration = duration.dramatic * 1000 * 1.5 const delayMs = delay * 1000 let raf: number let startTime: number | null = null function tick(now: number) { if (startTime === null) startTime = now const elapsed = now - startTime - delayMs if (elapsed < 0) { raf = requestAnimationFrame(tick) return } const progress = Math.min(elapsed / animDuration, 1) const eased = 1 - Math.pow(1 - progress, 3) setCount(Math.round(eased * target)) if (progress < 1) raf = requestAnimationFrame(tick) } raf = requestAnimationFrame(tick) return () => cancelAnimationFrame(raf) }, [triggered, number, delay, reduced]) const displayValue = number === null || reduced ? value : `${prefix}${count}${suffix}` return (

{displayValue}

{label}

) } /** * Horizontal stats strip — a non-card visual break between * card-heavy sections. Numbers + monospace labels, divided by lines. * Numbers count up on scroll with staggered entrance. * * @example * */ export function StatsStrip({ stats, className }: StatsStripProps) { const headRef = React.useRef(null) const headInView = useInView(headRef, { once: true, amount: 0.2 }) const reduced = useReducedMotion() return (

By the numbers

{stats.map((stat, i) => ( ))}

) }