import {
  MousePointerClick,
  TrendingUp,
  UserPlus,
  Wallet,
  type LucideIcon,
} from "lucide-react";
import { publicTexts } from "@/lib/i18n/public";

const ICONS: LucideIcon[] = [UserPlus, Wallet, MousePointerClick, TrendingUp];

/** Four numbered steps, connected by a dashed rule on wide screens. */
export function HowItWorks() {
  return (
    <section id="how-it-works" className="scroll-mt-24 py-20 lg:py-28">
      <div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
        <header className="max-w-2xl">
          <p className="text-[11px] font-semibold tracking-wider text-primary uppercase">
            {publicTexts.howEyebrow}
          </p>
          <h2 className="mt-3 font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            {publicTexts.howTitle}
          </h2>
          <p className="mt-4 text-base leading-relaxed text-pretty text-muted-foreground">
            {publicTexts.howSubtitle}
          </p>
        </header>

        <div className="relative mt-12">
          <div
            aria-hidden
            className="lp-dashline absolute top-[2.875rem] right-10 left-10 hidden h-px lg:block"
          />
          <ol className="relative grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {publicTexts.howSteps.map((step, i) => {
              const Icon = ICONS[i] ?? UserPlus;
              return (
                <li
                  key={step.title}
                  className="rounded-2xl border bg-card p-6 shadow-sm transition-colors hover:border-primary/40"
                >
                  <div className="flex items-start justify-between">
                    <span
                      aria-hidden
                      className="flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary"
                    >
                      <Icon className="size-5" />
                    </span>
                    <span className="font-mono text-2xl leading-none font-semibold tabular text-muted-foreground/25">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                  </div>
                  <h3 className="mt-5 font-display text-base font-semibold tracking-tight">
                    {step.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                    {step.body}
                  </p>
                </li>
              );
            })}
          </ol>
        </div>
      </div>
    </section>
  );
}

export default HowItWorks;