Stats

// Edit the content below to customize your stats
const STATS = [
  { value: '10k+', label: 'Active users' },
  { value: '99.9%', label: 'Uptime' },
  { value: '150+', label: 'Countries' },
  { value: '24/7', label: 'Support' }
]

export default function Stats() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-4xl grid grid-cols-2 md:grid-cols-4 gap-y-8 md:divide-x divide-[#E5E5E5] dark:divide-[#3A3A3A]">
        {STATS.map((s) => (
          <div key={s.label} className="flex flex-col items-center px-4 text-center">
            <p
              className="font-semibold tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]"
              style={{ fontSize: 'clamp(24px, 3vw, 34px)' }}
            >
              {s.value}
            </p>
            <p className="mt-2 text-[13px] text-[#6e6e73] dark:text-[#a1a1a6]">{s.label}</p>
          </div>
        ))}
      </div>
    </section>
  )
}