"use client";

import { Reveal } from "@/components/reveal";
import { stats } from "@/data/content";
import { useCounter } from "@/hooks/use-counter";
import { formatCompactNumber } from "@/lib/utils";

function StatItem({ label, value, suffix }: { label: string; value: number; suffix: string }) {
  const { ref, display } = useCounter(value);
  return (
    <div className="text-center">
      <span
        ref={ref}
        className="block bg-gradient-to-b from-white to-white/60 bg-clip-text text-4xl font-bold text-transparent sm:text-5xl"
      >
        {formatCompactNumber(display)}
        {suffix}
      </span>
      <span className="mt-2 block text-sm text-white/50">{label}</span>
    </div>
  );
}

export function Statistics() {
  return (
    <section className="section-pad relative overflow-hidden bg-gradient-to-b from-ink-950 to-ink-900">
      <div className="pointer-events-none absolute inset-0 -z-10 bg-grid opacity-30" />
      <div className="container">
        <Reveal>
          <div className="mx-auto max-w-xl text-center">
            <span className="eyebrow">By the numbers</span>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-white sm:text-4xl">
              Trusted at global scale
            </h2>
          </div>
        </Reveal>

        <div className="mt-16 grid grid-cols-2 gap-10 sm:grid-cols-3 lg:grid-cols-5">
          {stats.map((stat, i) => (
            <Reveal key={stat.label} delay={i * 0.08}>
              <StatItem {...stat} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}