import type { LucideIcon } from 'lucide-react';
import { BarChart3, Coins, Gift } from 'lucide-react';
import { useT } from '@/lib/i18n/react';

const BENEFITS: ReadonlyArray<{ key: 'benefit1' | 'benefit2' | 'benefit3'; icon: LucideIcon }> = [
  { key: 'benefit1', icon: Gift },
  { key: 'benefit2', icon: Coins },
  { key: 'benefit3', icon: BarChart3 },
];

export function Benefits() {
  const t = useT('affiliate_landing');

  return (
    <section aria-labelledby="benefits-heading" className="bg-(--color-surface-raised) py-16">
      <h2
        id="benefits-heading"
        className="mb-10 text-center text-3xl font-bold text-(--color-text)"
      >
        {t('benefits_heading')}
      </h2>
      <ul className="mx-auto grid max-w-4xl list-none grid-cols-1 gap-6 sm:grid-cols-3">
        {BENEFITS.map(({ key, icon: Icon }) => (
          <li
            key={key}
            className="flex flex-col items-center rounded-2xl border border-(--color-border) bg-(--color-surface) p-8 text-center shadow-sm"
          >
            <Icon className="mb-4 h-12 w-12 text-(--color-text-secondary)" aria-hidden="true" />
            <h3 className="mb-2 text-xl font-bold text-(--color-text)">
              {t(`${key}_title` as Parameters<typeof t>[0])}
            </h3>
            <p className="text-sm text-(--color-text-secondary)">
              {t(`${key}_body` as Parameters<typeof t>[0])}
            </p>
          </li>
        ))}
      </ul>
    </section>
  );
}