"use client";

import {
  Calculator,
  Users,
  Ticket,
  Clock,
  Bell,
  UserCircle,
  Settings,
  ShieldCheck,
  LifeBuoy,
  type LucideIcon,
} from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { PageHero } from "@/components/common/PageHero";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";
import { FEATURE_LIST } from "@/data/features";

const ICONS: Record<string, LucideIcon> = {
  Calculator,
  Users,
  Ticket,
  Clock,
  Bell,
  UserCircle,
  Settings,
  ShieldCheck,
  LifeBuoy,
};

export default function FeaturesPage() {
  const { t } = useTranslation();

  return (
    <>
      <PageHero
        eyebrow={t("nav.features")}
        title={t("features.title")}
        subtitle={t("features.subtitle")}
      />

      <section className="section">
        <Container>
          <div className="grid gap-5 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
            {FEATURE_LIST.map((feature, idx) => {
              const Icon = ICONS[feature.icon] ?? Calculator;
              return (
                <Reveal key={feature.id} 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 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                        />
                        <div className="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-brand-50 to-brand-100 text-brand-600 transition-all duration-300 group-hover:scale-105 dark:from-brand-500/15 dark:to-brand-500/5 dark:text-brand-300">
                          <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>
    </>
  );
}