import { getTranslations } from 'next-intl/server';

const STEPS = ['step1', 'step2', 'step3', 'step4'] as const;

export async function HowItWorks({ locale }: { locale: string }) {
  const t = await getTranslations({ locale, namespace: 'home.how_it_works' });

  return (
    <section className="border-b border-neutral-200 bg-[#fafafa]">
      <div className="mx-auto max-w-7xl px-4 py-14 md:py-20">
        <header className="max-w-2xl">
          <span className="text-xs font-medium uppercase tracking-[0.16em] text-neutral-500">
            {t('eyebrow')}
          </span>
          <h2 className="mt-3 font-heading text-3xl font-bold leading-tight text-neutral-900 md:text-4xl">
            {t('heading')}
          </h2>
        </header>

        <ol className="mt-12 grid gap-y-10 gap-x-8 list-none p-0 md:grid-cols-4 md:gap-x-10 md:gap-y-0">
          {STEPS.map((step, i) => (
            <li key={step} className="relative md:pe-4">
              {/* Connecting line between steps (desktop only) */}
              {i < STEPS.length - 1 ? (
                <span
                  aria-hidden
                  className="absolute end-0 top-4 hidden h-px w-8 bg-neutral-300 md:block"
                />
              ) : null}
              <div className="flex items-baseline gap-3">
                <span className="font-heading text-sm font-semibold text-neutral-400 tabular-nums">
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="h-px w-8 bg-neutral-300" aria-hidden />
              </div>
              <h3 className="mt-5 font-heading text-lg font-semibold text-neutral-900 md:text-xl">
                {t(`${step}_title`)}
              </h3>
              <p className="mt-2 max-w-xs text-sm leading-relaxed text-neutral-600">
                {t(`${step}_sub`)}
              </p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}