---
import type { TranslationKey } from '@/i18n/ui';
import StatCounter from './StatCounter.astro';

interface Props {
  t: (key: TranslationKey) => string;
}
const { t } = Astro.props;

const stats = [
  { value: '26+', label: 'Años de experiencia', sub: 'Desde el 2000' },
  { value: '100+', label: 'Proyectos hospedados', sub: 'Webs, e-commerce, infra' },
  { value: '4', label: 'Países', sub: 'Canadá, USA, Alemania, UY' },
  { value: 'Senior', label: 'Equipo senior', sub: 'SysAdmin / SRE' },
];
---
<section class="py-20 md:py-24" style="background: var(--hds-bg); border-top: 1px solid var(--hds-line); border-bottom: 1px solid var(--hds-line);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-10 md:gap-8">
      {stats.map((stat) => (
        <div class="text-center">
          <div class="font-display leading-none mb-3" style="font-size: clamp(3rem, 6vw, 4.5rem); color: var(--color-hds-naranja); font-weight: 500;">
            {stat.value}
          </div>
          <div class="text-sm font-semibold" style="color: var(--hds-fg-soft);">
            {stat.label}
          </div>
          <div class="text-xs mt-1" style="color: var(--hds-fg-muted);">
            {stat.sub}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>