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

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

const steps = [
  { num: '01', titleKey: 'process.step1.title' as TranslationKey, bodyKey: 'process.step1.body' as TranslationKey },
  { num: '02', titleKey: 'process.step2.title' as TranslationKey, bodyKey: 'process.step2.body' as TranslationKey },
  { num: '03', titleKey: 'process.step3.title' as TranslationKey, bodyKey: 'process.step3.body' as TranslationKey },
  { num: '04', titleKey: 'process.step4.title' as TranslationKey, bodyKey: 'process.step4.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 reveal">
      <SectionEyebrow text={t('process.eyebrow')} />
      <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
        {t('process.title')}
      </h2>
    </div>

    <ol class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 md:gap-8 relative stagger">
      <div class="hidden lg:block absolute top-12 left-[12.5%] right-[12.5%] h-px" style="background: linear-gradient(to right, transparent, var(--color-hds-naranja) 20%, var(--color-hds-naranja) 80%, transparent);" aria-hidden="true"></div>

      {steps.map((step) => (
        <li class="relative">
          <div class="font-display leading-none mb-4 relative inline-block" style="font-size: 5rem; color: var(--color-hds-naranja); font-weight: 500; opacity: 0.85;" aria-hidden="true">
            {step.num}
            <span class="absolute -bottom-1 left-0 w-10 h-1" style="background: var(--color-hds-naranja);"></span>
          </div>
          <h3 class="text-xl md:text-2xl font-semibold mb-3" style="color: var(--hds-fg);">
            {t(step.titleKey)}
          </h3>
          <p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
            {t(step.bodyKey)}
          </p>
        </li>
      ))}
    </ol>
  </div>
</section>
