"use client";

import {
  UserPlus,
  Activity,
  BadgeCheck,
  ShieldCheck,
  CircleDollarSign,
  Headset,
  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: UserPlus, titleKey: "agentFeatures.feature1Title", descKey: "agentFeatures.feature1Desc" },
  { icon: Activity, titleKey: "agentFeatures.feature2Title", descKey: "agentFeatures.feature2Desc" },
  { icon: BadgeCheck, titleKey: "agentFeatures.feature3Title", descKey: "agentFeatures.feature3Desc" },
  { icon: ShieldCheck, titleKey: "agentFeatures.feature4Title", descKey: "agentFeatures.feature4Desc" },
  { icon: CircleDollarSign, titleKey: "agentFeatures.feature5Title", descKey: "agentFeatures.feature5Desc" },
  { icon: Headset, titleKey: "agentFeatures.feature6Title", descKey: "agentFeatures.feature6Desc" },
];

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

  return (
    <section className="section bg-slate-50/50 dark:bg-slate-900/50">
      <Container>
        <SectionHeading
          eyebrow={t("agentFeatures.eyebrow")}
          title={t("agentFeatures.title")}
          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 border-slate-200 dark:border-blue-900/30 bg-white dark:bg-slate-900">
                  {/* Top-right bluish glow on hover */}
                  <div
                    aria-hidden
                    className="pointer-events-none absolute -right-12 -top-12 h-64 w-64 rounded-full bg-brand-500/0 blur-3xl transition-colors duration-500 group-hover:bg-brand-500/20 dark:group-hover:bg-brand-500/30"
                  />
                  
                  <CardContent className="p-6 sm:p-8">
                    <div className="flex items-start justify-between">
                      {/* Icon */}
                      <div className="relative z-10">
                        <div className="grid h-12 w-12 place-items-center rounded-2xl bg-brand-600 text-white shadow-soft transition-transform duration-300 group-hover:scale-105">
                          <Icon className="h-5 w-5" />
                        </div>
                      </div>
                      
                      {/* Number */}
                      <span className="text-4xl font-black text-slate-200 transition-colors duration-300 group-hover:text-brand-500/60 dark:text-slate-800 dark:group-hover:text-brand-500/50">
                        0{idx + 1}
                      </span>
                    </div>
                    
                    <div className="relative z-10 mt-8">
                      <h3 className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
                        {t(feature.titleKey)}
                      </h3>
                      <p className="mt-3 text-sm sm:text-base leading-[1.7] text-slate-600 dark:text-slate-400">
                        {t(feature.descKey)}
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}