"use client";

import {
  KeyRound,
  UserCheck,
  Fingerprint,
  Lock,
  ShieldCheck,
  Radar,
  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 Feature = { icon: LucideIcon; titleKey: string; descKey: string };

const FEATURES: Feature[] = [
  { icon: KeyRound, titleKey: "security.feature1Title", descKey: "security.feature1Desc" },
  { icon: UserCheck, titleKey: "security.feature2Title", descKey: "security.feature2Desc" },
  { icon: Fingerprint, titleKey: "security.feature3Title", descKey: "security.feature3Desc" },
  { icon: Lock, titleKey: "security.feature4Title", descKey: "security.feature4Desc" },
  { icon: ShieldCheck, titleKey: "security.feature5Title", descKey: "security.feature5Desc" },
  { icon: Radar, titleKey: "security.feature6Title", descKey: "security.feature6Desc" },
];

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

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

        <div className="mt-16 grid gap-5 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map((feature, idx) => {
            const Icon = feature.icon;
            return (
              <Reveal key={feature.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="relative inline-flex">
                      <div
                        aria-hidden
                        className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-brand-500/20 to-accent-500/10 blur-xl transition-opacity duration-500 opacity-0 group-hover:opacity-100"
                      />
                      <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-all duration-300 group-hover:-rotate-3 group-hover:scale-105">
                        <Icon className="h-5 w-5" />
                      </div>
                    </div>
                    <h3 className="mt-6 text-lg font-bold tracking-tight text-slate-900 dark:text-white">
                      {t(feature.titleKey)}
                    </h3>
                    <p className="mt-2 text-base leading-[1.7] text-slate-600 dark:text-slate-300">
                      {t(feature.descKey)}
                    </p>
                  </CardContent>
                </Card>
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}