import { Gamepad2, Tv, Briefcase, Download, Globe } from "lucide-react";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import { useI18n } from "@/i18n/context";
import type { TranslationKeys } from "@/i18n/translations";

const cases: { icon: typeof Gamepad2; titleKey: TranslationKeys; descKey: TranslationKeys }[] = [
  { icon: Gamepad2, titleKey: "case_gaming", descKey: "case_gaming_desc" },
  { icon: Tv, titleKey: "case_streaming", descKey: "case_streaming_desc" },
  { icon: Briefcase, titleKey: "case_work", descKey: "case_work_desc" },
  { icon: Download, titleKey: "case_downloads", descKey: "case_downloads_desc" },
  { icon: Globe, titleKey: "case_browsing", descKey: "case_browsing_desc" },
];

export function UseCasesSection() {
  const { ref, isVisible } = useScrollAnimation();
  const { t } = useI18n();

  return (
    <section className="relative px-4 pb-0 pt-5 sm:pb-0 sm:pt-5">
      <div className="mx-auto max-w-5xl" ref={ref}>
        <h2 className={`mb-8 text-center text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
          {t("cases_title_1")} <span className="gradient-text">{t("cases_title_2")}</span>
        </h2>

        <div className="flex flex-wrap justify-center gap-4">
          {cases.map((c, i) => (
            <div
              key={c.titleKey}
              className={`glass-card group flex items-center gap-3 rounded-full px-6 py-3 transition-all duration-500 hover:scale-[1.03] hover:shadow-lg hover:shadow-gekon-green/10 ${
                isVisible ? "animate-fade-up" : "opacity-0"
              }`}
              style={{
                animationName: isVisible ? "fade-up, float" : undefined,
                animationDuration: isVisible ? "0.6s, 5.4s" : undefined,
                animationTimingFunction: isVisible ? "ease-out, ease-in-out" : undefined,
                animationIterationCount: isVisible ? "1, infinite" : undefined,
                animationFillMode: isVisible ? "both, both" : undefined,
                animationDelay: isVisible ? `${i * 0.08}s, ${0.2 + i * 0.16}s` : `${i * 0.08}s`,
              }}
            >
              <div className="rounded-full bg-gekon-green/10 p-1.5 transition-all duration-300 group-hover:bg-gekon-green/20 group-hover:shadow-[0_0_18px_rgba(16,185,129,0.25)]">
                <c.icon size={19} className="text-gekon-green transition-transform duration-300 group-hover:scale-110" />
              </div>
              <div>
                <span className="font-semibold text-foreground transition-colors group-hover:text-gekon-green">{t(c.titleKey)}</span>
                <span className="ml-2 text-sm text-muted-foreground">{t(c.descKey)}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}