"use client";

import {
  TrendingUp,
  Gauge,
  Swords,
  PlayCircle,
  UserSearch,
  Wand2,
  BellRing,
  SlidersHorizontal,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { features } from "@/lib/mock-data";
import type { Feature } from "@/lib/mock-data";
import { useLanguage } from "@/lib/i18n/context";

const icons: Record<Feature["icon"], LucideIcon> = {
  trendingUp: TrendingUp,
  gauge: Gauge,
  swords: Swords,
  playCircle: PlayCircle,
  userSearch: UserSearch,
  wand2: Wand2,
  bellRing: BellRing,
  slidersHorizontal: SlidersHorizontal,
};

export function Features() {
  const { t } = useLanguage();

  return (
    <section id="features" className="border-t border-border py-20 sm:py-28">
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.features.eyebrow}
          title={t.features.title}
          description={t.features.description}
        />

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {features.map((feature, i) => {
            const Icon = icons[feature.icon];
            const label = t.features.items[i];
            return (
              <FadeIn
                key={feature.icon}
                delay={(i % 4) * 0.06}
                className="group flex flex-col gap-4 rounded-xl border border-border bg-card/50 p-5 transition-colors hover:border-brand-cyan/40 hover:bg-card"
              >
                <span className="flex size-10 items-center justify-center rounded-lg bg-secondary text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
                  <Icon className="size-5" />
                </span>
                <div className="flex flex-col gap-1.5">
                  <h3 className="text-sm font-semibold text-foreground">
                    {label.title}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {label.description}
                  </p>
                </div>
              </FadeIn>
            );
          })}
        </div>
      </Container>
    </section>
  );
}