"use client";

import {
  LogIn,
  ShieldCheck,
  Smartphone,
  Lock,
  KeyRound,
  Sparkles,
  type LucideIcon,
} from "lucide-react";
import { useLanguage } from "@/components/language-provider";
import { Section, SectionHeading } from "@/components/ui/section";

const ICONS: Record<string, LucideIcon> = {
  signin: LogIn,
  shield: ShieldCheck,
  devices: Smartphone,
  privacy: Lock,
  recovery: KeyRound,
  personalize: Sparkles,
};

export function Capabilities() {
  const { t } = useLanguage();
  return (
    <Section id="capabilities" className="bg-slate-50 dark:bg-ink-soft/40">
      <div className="container-x">
        <SectionHeading
          eyebrow={t.capabilities.eyebrow}
          title={t.capabilities.title}
          subtitle={t.capabilities.subtitle}
        />
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {t.capabilities.items.map((it) => {
            const Icon = ICONS[it.icon] ?? Sparkles;
            return (
              <div key={it.title} className="card card-hover">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-500/10 text-brand-600 dark:text-brand-300">
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="mt-4 text-base font-semibold text-slate-900 dark:text-white">{it.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">{it.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}