import { useT } from '@/lib/i18n/react';
import { Image } from '@/components/ui/primitives/Image';

const STEPS = [
  { key: 'step1', svg: '/affiliate-program/step1.svg' },
  { key: 'step2', svg: '/affiliate-program/step2.svg' },
  { key: 'step3', svg: '/affiliate-program/step3.svg' },
] as const;

type Props = { cookieDays?: number };

export function HowItWorks({ cookieDays = 14 }: Props) {
  const t = useT('affiliate_landing');

  const getBody = (key: (typeof STEPS)[number]['key']) => {
    const raw = t(`${key}_body` as Parameters<typeof t>[0]);
    if (key === 'step2') {
      return raw.replace('{{cookieDays}}', String(cookieDays));
    }
    return raw;
  };

  return (
    <section aria-labelledby="how-heading" className="py-16">
      <h2 id="how-heading" className="mb-10 text-center text-3xl font-bold text-(--color-text)">
        {t('how_heading')}
      </h2>
      <ol className="mx-auto grid max-w-4xl list-none grid-cols-1 gap-8 sm:grid-cols-3">
        {STEPS.map((step, i) => (
          <li key={step.key} className="flex flex-col items-center text-center">
            <div className="mb-4 w-48" aria-hidden="true">
              <Image
                src={step.svg}
                alt=""
                decorative
                width={192}
                height={144}
                loading="lazy"
                className="mx-auto"
              />
            </div>
            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-full bg-(--color-primary) text-lg font-bold text-white">
              {i + 1}
            </div>
            <h3 className="mb-1 text-lg font-semibold text-(--color-text)">
              {t(`${step.key}_title` as Parameters<typeof t>[0])}
            </h3>
            <p className="text-sm text-(--color-text-muted)">
              {getBody(step.key)}
            </p>
          </li>
        ))}
      </ol>
    </section>
  );
}