"use client";

import { UserPlus, Search, BarChart3, Rocket } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { howItWorksSteps } from "@/lib/mock-data";
import type { HowItWorksStep } from "@/lib/mock-data";
import { useLanguage } from "@/lib/i18n/context";

const icons: Record<HowItWorksStep["icon"], LucideIcon> = {
  userPlus: UserPlus,
  search: Search,
  barChart3: BarChart3,
  rocket: Rocket,
};

export function HowItWorks() {
  const { t } = useLanguage();

  return (
    <section
      id="how-it-works"
      className="border-t border-border bg-secondary/20 py-20 sm:py-28"
    >
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.howItWorks.eyebrow}
          title={t.howItWorks.title}
          description={t.howItWorks.description}
        />

        <div className="relative grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          <div
            aria-hidden
            className="absolute top-6 right-0 left-0 hidden h-px bg-border lg:block"
          />
          {howItWorksSteps.map((step, i) => {
            const Icon = icons[step.icon];
            const label = t.howItWorks.steps[i];
            return (
              <FadeIn
                key={step.step}
                delay={i * 0.08}
                className="relative flex flex-col items-start gap-4"
              >
                <span className="relative z-10 flex size-12 items-center justify-center rounded-full border border-border bg-background text-primary">
                  <Icon className="size-5" />
                </span>
                <div className="flex flex-col gap-1.5">
                  <p className="text-xs font-medium text-muted-foreground">
                    {t.howItWorks.stepLabel} {step.step}
                  </p>
                  <h3 className="text-base font-semibold text-foreground">
                    {label.title}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {label.description}
                  </p>
                </div>
              </FadeIn>
            );
          })}
        </div>
      </Container>
    </section>
  );
}