"use client";

import {
  UserPlus,
  ShieldCheck,
  Fingerprint,
  Users,
  Send,
  Bell,
  ArrowRight,
  type LucideIcon,
} from "lucide-react";
import Link from "next/link";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { ButtonLink } from "@/components/common/Button";
import { PageHero } from "@/components/common/PageHero";
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 default function HowItWorksPage() {
  const { t, dir } = useTranslation();

  return (
    <>
      <PageHero
        eyebrow={t("nav.howItWorks")}
        title={t("howItWorks.title")}
        subtitle={t("howItWorks.subtitle")}
      />

      <section className="section">
        <Container>
          <div className="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="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 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-slate-700/70 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>

          <Reveal className="mt-16 flex flex-col items-center gap-4 text-center">
            <ButtonLink href="/calculator" size="lg">
              {t("cta.primary")}
              <ArrowRight
                className="h-4 w-4"
                style={{ transform: dir === "rtl" ? "scaleX(-1)" : undefined }}
              />
            </ButtonLink>
            <Link
              href="/features"
              className="text-sm font-semibold text-slate-600 transition-colors hover:text-brand-700 dark:text-slate-300 dark:hover:text-brand-300"
            >
              {t("nav.features")} →
            </Link>
          </Reveal>
        </Container>
      </section>
    </>
  );
}