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

interface Props {
  t: (key: TranslationKey) => string;
  lang?: 'es' | 'en';
}
const { t, lang = 'es' } = Astro.props;

const stats = [
  { valueKey: 'stats.value1', labelKey: 'stats.label1' as TranslationKey, subKey: 'stats.sub1' as TranslationKey },
  { valueKey: 'stats.value2', labelKey: 'stats.label2' as TranslationKey, subKey: 'stats.sub2' as TranslationKey },
  { valueKey: 'stats.value3', labelKey: 'stats.label3' as TranslationKey, subKey: 'stats.sub3' as TranslationKey },
  { valueKey: 'stats.value4', labelKey: 'stats.label4' as TranslationKey, subKey: 'stats.sub4' as TranslationKey },
];

const values = lang === 'en'
  ? ['26+', '100+', '4', 'Pro']
  : ['26+', '100+', '4', 'Pro'];
---
<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 stagger">
      {stats.map((stat, idx) => (
        <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;">
            {values[idx]}
          </div>
          <div class="text-sm font-semibold" style="color: var(--hds-fg-soft);">
            {t(stat.labelKey)}
          </div>
          <div class="text-xs mt-1" style="color: var(--hds-fg-muted);">
            {t(stat.subKey)}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
