import { useTranslations } from "next-intl";
import { Settings2, Zap, TrendingUp } from "lucide-react";

const STEPS = [
  { icon: Settings2, numKey: "۱", titleKey: "step1Title", descKey: "step1Desc" },
  { icon: Zap, numKey: "۲", titleKey: "step2Title", descKey: "step2Desc" },
  { icon: TrendingUp, numKey: "۳", titleKey: "step3Title", descKey: "step3Desc" },
] as const;

export function HowItWorks() {
  const t = useTranslations("howItWorks");

  return (
    <section className="bg-gray-50/60 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">
            {t("badge")}
          </span>
          <h2 className="mt-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            {t("title")}
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-gray-500">{t("subtitle")}</p>
        </div>

        <div className="relative mt-16">
          {/* Connector line (desktop) */}
          <div
            aria-hidden
            className="absolute start-[calc(50%-1px)] top-8 hidden h-[calc(100%-4rem)] w-px bg-gradient-to-b from-brand-200 via-brand-100 to-transparent lg:block"
          />

          <div className="grid gap-10 lg:grid-cols-3">
            {STEPS.map(({ icon: Icon, numKey, titleKey, descKey }, idx) => (
              <div key={titleKey} className="relative flex flex-col items-center text-center">
                {/* Step circle */}
                <div className="relative mb-6 flex h-16 w-16 flex-col items-center justify-center rounded-2xl bg-brand-700 shadow-lg shadow-brand-700/30">
                  <Icon className="h-6 w-6 text-white" />
                  <span className="absolute -end-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-white text-[10px] font-bold text-brand-700 shadow-sm ring-1 ring-brand-100">
                    {numKey}
                  </span>
                </div>

                <h3 className="mb-3 text-lg font-semibold text-gray-900">{t(titleKey)}</h3>
                <p className="max-w-xs text-sm leading-relaxed text-gray-500">{t(descKey)}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
