import { STATS } from '@/lib/constants';

export function HeroStatsSSR() {
  return (
    <div id="stats-section" className="pt-16 border-t border-[#E2E8F0]">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
        {STATS.map((stat) => (
          <div 
            key={stat.label}
            className="group cursor-default text-center"
          >
            <div className="text-4xl sm:text-5xl font-bold text-[var(--color-brand-primary)] mb-3">
              {stat.value}
            </div>
            <div className="text-sm text-[#718096] group-hover:text-[#4A5568] transition-colors">
              {stat.label}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}