"use client";

import {
  UserPlus,
  ShieldCheck,
  Fingerprint,
  Users,
  Send,
  Bell,
  type LucideIcon,
} from "lucide-react";
import { Container } from "@/components/common/Container";
import { SectionHeading } from "@/components/common/SectionHeading";
import { Card, CardContent } from "@/components/common/Card";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";

type Step = { icon: LucideIcon; titleKey: string; descKey: string };

const STEPS: Step[] = [
  { icon: UserPlus, titleKey: "howItWorks.step1Title", descKey: "howItWorks.step1Desc" },
  { icon: ShieldCheck, titleKey: "howItWorks.step2Title", descKey: "howItWorks.step2Desc" },
  { icon: Fingerprint, titleKey: "howItWorks.step3Title", descKey: "howItWorks.step3Desc" },
  { icon: Users, titleKey: "howItWorks.step4Title", descKey: "howItWorks.step4Desc" },
  { icon: Send, titleKey: "howItWorks.step5Title", descKey: "howItWorks.step5Desc" },
  { icon: Bell, titleKey: "howItWorks.step6Title", descKey: "howItWorks.step6Desc" },
];

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

  return (
    <section className="section relative">
      <Container>
        <SectionHeading
          eyebrow={t("nav.howItWorks")}
          title={t("howItWorks.title")}
          subtitle={t("howItWorks.subtitle")}
        />

        <div className="mt-16 grid gap-5 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
          {STEPS.map((step, idx) => {
            const Icon = step.icon;
            return (
              <Reveal key={step.titleKey} delay={(idx % 3) * 0.05}>
                <Card interactive className="group relative h-full overflow-hidden">
                  <div
                    aria-hidden
                    className="pointer-events-none absolute -top-10 -right-10 h-44 w-44 rounded-full bg-gradient-to-br from-brand-500/5 to-accent-500/0 blur-xl transition-all duration-500 group-hover:from-brand-500/40 group-hover:to-accent-500/25 group-hover:scale-110"
                  />
                  <CardContent>
                    <div className="flex items-start justify-between">
                      <div className="relative grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-600 text-white shadow-soft transition-transform duration-300 ease-snappy group-hover:-rotate-3 group-hover:scale-105">
                        <Icon className="h-5 w-5" />
                      </div>
                      <span className="text-4xl font-bold leading-none text-slate-200/60 transition-all duration-300 group-hover:text-brand-300 group-hover:scale-110 dark:text-white/[0.06] dark:group-hover:text-brand-400/60">
                        {String(idx + 1).padStart(2, "0")}
                      </span>
                    </div>
                    <h3 className="mt-6 text-lg font-bold tracking-tight text-slate-900 dark:text-white">
                      {t(step.titleKey)}
                    </h3>
                    <p className="mt-2 text-base leading-[1.7] text-slate-600 dark:text-slate-300">
                      {t(step.descKey)}
                    </p>
                  </CardContent>
                </Card>
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}