import { Zap, Rocket, Globe, Wrench, BarChart3, Settings } from "lucide-react";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import { useI18n } from "@/i18n/context";
import type { TranslationKeys } from "@/i18n/translations";

const features: { icon: typeof Zap; titleKey: TranslationKeys; descKey: TranslationKeys }[] = [
  { icon: Zap, titleKey: "feature_1_title", descKey: "feature_1_desc" },
  { icon: Rocket, titleKey: "feature_2_title", descKey: "feature_2_desc" },
  { icon: Globe, titleKey: "feature_3_title", descKey: "feature_3_desc" },
  { icon: Wrench, titleKey: "feature_4_title", descKey: "feature_4_desc" },
  { icon: BarChart3, titleKey: "feature_5_title", descKey: "feature_5_desc" },
  { icon: Settings, titleKey: "feature_6_title", descKey: "feature_6_desc" },
];

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

  return (
    <section id="technology" className="relative px-4 pb-0 pt-5 sm:pb-0 sm:pt-5">
      <div className="mx-auto max-w-7xl" ref={ref}>
        <div className="mb-7 text-center">
          <h2 className={`mb-3 text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
            {t("features_title_1")} <span className="gradient-text">{t("features_title_2")}</span>
          </h2>
          <p className={`mx-auto max-w-2xl text-muted-foreground ${isVisible ? "animate-fade-up-delay-1" : "opacity-0"}`}>
            {t("features_subtitle")}
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, i) => (
            <div
              key={feature.titleKey}
              className={`glass-card group rounded-lg p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-gekon-green/5 ${
                isVisible ? "animate-fade-up" : "opacity-0"
              }`}
              style={{ animationDelay: `${i * 0.1}s` }}
            >
              <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-md bg-gradient-to-br from-gekon-green/20 to-gekon-cyan/20 transition-all group-hover:from-gekon-green/30 group-hover:to-gekon-cyan/30">
                <feature.icon size={19} className="text-gekon-green" />
              </div>
              <h3 className="mb-1.5 text-base font-semibold text-foreground">{t(feature.titleKey)}</h3>
              <p className="text-sm leading-snug text-muted-foreground">{t(feature.descKey)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}