---
import SectionEyebrow from './SectionEyebrow.astro';
import type { TranslationKey } from '@/i18n/ui';
import MateIcon from './icons/MateIcon.astro';
import SovereigntyIcon from './icons/SovereigntyIcon.astro';
import GlobeIcon from './icons/GlobeIcon.astro';

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

const items = [
  { Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey },
  { Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey },
  { Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
];
---
<section class="py-20 md:py-28" style="background: var(--hds-bg-soft);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mb-14 md:mb-20">
      <SectionEyebrow text={t('diff.eyebrow')} />
      <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
        {t('diff.title')}
      </h2>
      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
        {t('diff.subtitle')}
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {items.map((item) => (
        <article class="service-card">
          <div class="icon-circle mb-6">
            <item.Icon class="w-7 h-7" />
          </div>
          <h3 class="text-xl md:text-2xl font-semibold mb-3" style="color: var(--hds-fg);">
            {t(item.titleKey)}
          </h3>
          <p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
            {t(item.bodyKey)}
          </p>
        </article>
      ))}
    </div>
  </div>
</section>