import {
  IconApi,
  IconBrandNextjs,
  IconBrandReact,
  IconBrandTailwind,
  IconBrandTypescript,
  IconCalendar,
  IconCloud,
  IconDatabase,
  IconServer,
  IconShoppingCart,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { FadeIn } from "@/components/ui/fade-in";

const techIcons = [
  IconBrandNextjs,
  IconBrandReact,
  IconBrandTypescript,
  IconShoppingCart,
  IconDatabase,
  IconBrandTailwind,
  IconApi,
  IconServer,
  IconCloud,
];

const techKeys = [
  "nextjs",
  "react",
  "typescript",
  "shopify",
  "sanity",
  "tailwind",
  "microservices",
  "apiFirst",
  "serverless",
] as const;

const techNames = [
  "Next.js 16",
  "React 19",
  "TypeScript",
  "Shopify Plus",
  "Sanity CMS",
  "Tailwind CSS v4",
  "Microservices",
  "API-first",
  "Serverless",
];

export async function DetailedTechStack() {
  const t = await getTranslations("detailedTechStack");

  const technologies = techKeys.map((key, i) => ({
    name: techNames[i],
    icon: techIcons[i],
    color: "text-[#FD105E]",
    description: t(`${key}Desc`),
    concepts: [t(`${key}Concept1`), t(`${key}Concept2`), t(`${key}Concept3`)],
  }));

  return (
    <section className="relative overflow-hidden py-12 md:py-24 lg:py-32">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        <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">
              {t("headingPrefix")}
              <br />
              <span className="text-[#FD105E]">{t("headingHighlight")}</span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-lg">
              {t("subtitle")}
            </p>
          </FadeIn>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {technologies.map((tech, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.08}
              duration={0.5}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={tech.name}
              scale={0.95}
              viewportAmount={0.2}
              y={20}
            >
              {/* Card */}
              <div className="relative flex h-full flex-col justify-between 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">
                <div className="relative">
                  {/* Icon and title */}
                  <div className="mb-4 flex items-center">
                    {tech.icon && (
                      <tech.icon
                        className={`mr-3 h-10 w-10 ${tech.color} transition-transform duration-300 group-hover:scale-110`}
                        strokeWidth={1.5}
                      />
                    )}
                    <h3 className="font-bold text-lg text-white md:text-xl">
                      {tech.name}
                    </h3>
                  </div>

                  {/* Description */}
                  <p className="mb-6 text-neutral-200 text-sm leading-relaxed">
                    {tech.description}
                  </p>
                </div>

                {/* Concepts badges */}
                <div className="relative">
                  <div className="flex flex-wrap gap-2">
                    {tech.concepts.map((concept) => (
                      <span
                        className="rounded-xl border border-[#333333] bg-[#333333]/50 px-3 py-1 text-neutral-200 text-xs transition-all duration-300 group-hover:border-[#FD105E]/50 group-hover:text-[#FD105E]"
                        key={concept}
                      >
                        {concept}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>

        {/* Bottom CTA */}
        <FadeIn className="mt-16 text-center" delay={0.4} y={20}>
          <p className="mb-6 text-lg text-neutral-200">{t("ctaText")}</p>
          <ContactButton className="hover:scale-105">
            <IconCalendar className="h-4 w-4" />
            {t("ctaButton")}
          </ContactButton>
        </FadeIn>
      </div>
    </section>
  );
}