"use client";

import {
  Check,
  Building2,
  Smartphone,
  Banknote,
  Plus,
} 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";

const MOCK_RECIPIENTS = [
  {
    initials: "AR",
    name: "Aysha Rahman",
    flag: "🇧🇩",
    type: "Bank",
    detail: "BRAC Bank • ****4821",
    icon: Building2,
    gradient: "from-brand-500 to-brand-700",
  },
  {
    initials: "MK",
    name: "Mateo Kumar",
    flag: "🇲🇽",
    type: "Cash pickup",
    detail: "OXXO • Mexico City",
    icon: Banknote,
    gradient: "from-accent-500 to-accent-700",
  },
  {
    initials: "JN",
    name: "Joyce Nyathi",
    flag: "🇰🇪",
    type: "Mobile wallet",
    detail: "M-Pesa • +254 7•• ••• 042",
    icon: Smartphone,
    gradient: "from-purple-500 to-fuchsia-600",
  },
];

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

  const features = [
    t("recipients.feature1"),
    t("recipients.feature2"),
    t("recipients.feature3"),
    t("recipients.feature4"),
  ];

  return (
    <section className="section bg-slate-50/50 dark:bg-white/[0.02]">
      <Container>
        <div className="grid items-center gap-14 lg:grid-cols-2 lg:gap-20">
          {/* Left: visual */}
          <Reveal className="relative order-2 lg:order-1">
            <div
              aria-hidden
              className="absolute -inset-8 -z-10 rounded-[2.5rem] bg-gradient-to-br from-accent-500/10 via-brand-500/10 to-transparent blur-2xl"
            />
            <Card className="overflow-hidden shadow-elevated">
              <CardContent className="p-5 sm:p-6">
                <div className="flex items-center justify-between border-b border-slate-200/70 pb-4 dark:border-white/[0.06]">
                  <h3 className="text-sm font-bold text-slate-900 dark:text-white">
                    {t("recipients.myRecipients")}
                  </h3>
                  <button
                    type="button"
                    aria-label={t("recipients.addAria")}
                    className="inline-flex h-8 items-center gap-1.5 rounded-full bg-brand-600 px-3 text-xs font-semibold text-white shadow-soft transition hover:bg-brand-700"
                  >
                    <Plus className="h-3.5 w-3.5" />
                    {t("recipients.add")}
                  </button>
                </div>

                <ul className="mt-3 divide-y divide-slate-100 dark:divide-white/[0.06]">
                  {MOCK_RECIPIENTS.map((r) => {
                    const Icon = r.icon;
                    return (
                      <li
                        key={r.name}
                        className="group flex items-center gap-3 py-3.5 transition-colors hover:bg-slate-50/60 dark:hover:bg-white/[0.04]"
                      >
                        <div
                          className={`grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-gradient-to-br text-sm font-bold text-white shadow-soft transition-transform group-hover:scale-105 ${r.gradient}`}
                        >
                          {r.initials}
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center gap-1.5">
                            <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
                              {r.name}
                            </p>
                            <span className="text-sm leading-none" aria-hidden>
                              {r.flag}
                            </span>
                          </div>
                          <p className="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400">
                            {r.detail}
                          </p>
                        </div>
                        <span className="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                          <Icon className="h-3 w-3" />
                          {r.type}
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </CardContent>
            </Card>
          </Reveal>

          {/* Right: copy */}
          <div className="order-1 lg:order-2">
            <SectionHeading
              eyebrow={t("recipients.eyebrow")}
              title={t("recipients.title")}
              subtitle={t("recipients.subtitle")}
              align="left"
            />
            <ul className="mt-8 space-y-3.5">
              {features.map((feature) => (
                <li key={feature} className="flex items-start gap-3">
                  <span className="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-accent-100 text-accent-700 dark:bg-accent-500/15 dark:text-accent-300">
                    <Check className="h-3.5 w-3.5" strokeWidth={3} />
                  </span>
                  <span className="text-base leading-[1.7] text-slate-700 dark:text-slate-200">
                    {feature}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  );
}