import {
  IconChartDots3,
  IconFlask,
  IconPlugConnected,
  IconRouteAltLeft,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";

const differentiatorKeys = [
  { key: "perf", icon: IconFlask },
  { key: "translation", icon: IconPlugConnected },
  { key: "migration", icon: IconRouteAltLeft },
  { key: "transparency", icon: IconChartDots3 },
] as const;

export async function ServicesWhyUs() {
  const t = await getTranslations("servicesWhyUs");

  const differentiators = differentiatorKeys.map(({ key, icon }) => ({
    id: key,
    icon,
    title: t(`${key}Title`),
    description: t(`${key}Desc`),
  }));

  return (
    <section className="relative overflow-hidden py-12 sm:py-24 md:py-32">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mx-auto mb-8 max-w-4xl text-center md:mb-16">
          <FadeIn>
            <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
              <span className="text-[#FD105E]">{t("titleAccent")}</span>
              <br />
              {t("titleRest")}
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-xl">
              {t("subtitle")}
            </p>
          </FadeIn>
        </div>

        {/* Differentiators Grid */}
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 md:grid-cols-2 md:gap-8">
          {differentiators.map((item, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={item.id}
              viewportAmount={0.2}
            >
              <div className="relative h-full rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-[#1a1a1a] sm:p-6 md:p-8">
                {/* Icon and Title */}
                <div className="mb-4 flex items-start md:mb-6">
                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 transition-transform duration-300 group-hover:scale-110 sm:h-12 sm:w-12 md:h-14 md:w-14">
                    <item.icon
                      className="h-5 w-5 text-[#FD105E] sm:h-6 sm:w-6 md:h-7 md:w-7"
                      strokeWidth={1.5}
                    />
                  </div>
                  <h3 className="mt-1 ml-3 font-bold text-lg text-white sm:text-xl md:mt-2 md:ml-4 md:text-2xl">
                    {item.title}
                  </h3>
                </div>

                {/* Description */}
                <p className="text-neutral-200 text-sm leading-relaxed md:text-base">
                  {item.description}
                </p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}