"use client";

import { Building2, Banknote, Smartphone, 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 Method = {
  icon: LucideIcon;
  titleKey: string;
  descKey: string;
  count: string;
  gradient: string;
  iconBg: string;
};

const METHODS: Method[] = [
  {
    icon: Building2,
    titleKey: "methods.bankTitle",
    descKey: "methods.bankDesc",
    count: "80+",
    gradient: "from-brand-500/15 via-brand-500/5 to-transparent",
    iconBg: "from-brand-500 to-brand-700",
  },
  {
    icon: Banknote,
    titleKey: "methods.cashTitle",
    descKey: "methods.cashDesc",
    count: "200k+",
    gradient: "from-accent-500/15 via-accent-500/5 to-transparent",
    iconBg: "from-accent-500 to-accent-700",
  },
  {
    icon: Smartphone,
    titleKey: "methods.mobileTitle",
    descKey: "methods.mobileDesc",
    count: "40+",
    gradient: "from-purple-500/15 via-purple-500/5 to-transparent",
    iconBg: "from-purple-500 to-fuchsia-600",
  },
];

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

  return (
    <section className="section bg-slate-50/50 dark:bg-white/[0.02]">
      <Container>
        <SectionHeading
          eyebrow={t("methods.eyebrow")}
          title={t("methods.title")}
          subtitle={t("methods.subtitle")}
        />

        <div className="mt-16 grid gap-6 md:grid-cols-3">
          {METHODS.map((m, idx) => {
            const Icon = m.icon;
            return (
              <Reveal key={m.titleKey} delay={idx * 0.05}>
                <Card interactive className="group relative h-full overflow-hidden">
                  <div
                    aria-hidden
                    className={`pointer-events-none absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${m.gradient}`}
                  />
                  <CardContent className="relative">
                    <div
                      className={`grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br text-white shadow-soft transition-all duration-300 ease-snappy group-hover:scale-105 group-hover:shadow-glow-sm ${m.iconBg}`}
                    >
                      <Icon className="h-6 w-6" />
                    </div>
                    <h3 className="mt-6 text-xl font-bold tracking-tight text-slate-900 dark:text-white">
                      {t(m.titleKey)}
                    </h3>
                    <p className="mt-3 text-base leading-[1.7] text-slate-600 dark:text-slate-300">
                      {t(m.descKey)}
                    </p>
                    <div className="mt-6 flex items-baseline gap-2 border-t border-slate-200/70 pt-5 dark:border-white/[0.06]">
                      <span className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
                        {m.count}
                      </span>
                      <span className="text-sm text-slate-500 dark:text-slate-400">
                        {t("methods.countries")}
                      </span>
                    </div>
                  </CardContent>
                </Card>
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}