import {
  IconBolt,
  IconChartBar,
  IconCode,
  IconDatabase,
  IconUsers,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { Badge } from "@/components/ui/badge";
import { ContactButton } from "@/components/ui/contact-button";
import SoftAurora from "../SoftAuroraLazy";

const serviceIcons = [IconChartBar, IconCode, IconDatabase, IconUsers] as const;
const serviceKeys = ["Audits", "Platforms", "Migrations", "Training"] as const;

const HeroServices = async () => {
  const t = await getTranslations("heroServices");

  const services = serviceKeys.map((key, i) => ({
    id: key,
    icon: serviceIcons[i],
    title: t(`service${key}Title`),
    description: t(`service${key}Desc`),
  }));

  return (
    <div className="flex min-h-svh w-screen flex-col items-center justify-center p-4 text-white sm:p-6 md:p-8">
      <div className="relative z-10 w-full max-w-6xl space-y-8 md:space-y-12">
        <div className="flex flex-col items-center space-y-8 text-center">
          <Badge
            className="flex items-center gap-2 rounded-xl border border-[#FD105E]/30 bg-white/10 px-4 py-2 text-white backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-[#FD105E]/10"
            variant="secondary"
          >
            <IconBolt className="text-[#FD105E]" size={16} />
            {t("badge")}
          </Badge>

          <div className="flex flex-col items-center justify-center space-y-6">
            <h1 className="max-w-4xl font-bold text-2xl tracking-tight sm:text-4xl md:text-7xl">
              <span className="bg-gradient-to-r from-white to-white bg-clip-text text-transparent">
                {t("titleLine1")}
              </span>
              <br />
              <span className="bg-gradient-to-r from-[#FD105E] to-[#FF3070] bg-clip-text text-transparent">
                {t("titleLine2")}
              </span>
              <br />
              <span className="bg-gradient-to-r from-white/90 to-white/70 bg-clip-text text-transparent">
                {t("titleLine3")}
              </span>
            </h1>
            <div className="space-y-4">
              <p className="font-semibold text-[#FD105E] text-sm tracking-wider md:text-base">
                {t("tagline")}
              </p>
              <p className="max-w-3xl text-base text-neutral-300 leading-relaxed md:text-xl">
                {t("description")}
              </p>
            </div>
            <div className="flex flex-col items-center gap-6">
              <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
                <ContactButton>{t("ctaPrimary")}</ContactButton>
                <ContactButton variant="secondary">
                  {t("ctaSecondary")}
                </ContactButton>
              </div>
            </div>
          </div>
        </div>

        <div className="mx-auto grid max-w-5xl grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3 md:gap-6 lg:grid-cols-4">
          {services.map((service) => (
            <div
              className="group flex h-auto flex-col items-start justify-start space-y-2 rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/30 hover:bg-white/10 sm:h-40 md:h-48 md:space-y-3 md:p-6"
              key={service.id}
            >
              <service.icon
                className="text-white/80 transition-colors duration-300 group-hover:text-[#FD105E] md:h-5 md:w-5"
                size={18}
              />
              <h3 className="font-medium text-sm md:text-base">
                {service.title}
              </h3>
              <p className="text-neutral-400 text-xs md:text-sm">
                {service.description}
              </p>
            </div>
          ))}
        </div>
      </div>
      <div className="absolute inset-0">
        <SoftAurora
          bandHeight={0.5}
          bandSpread={1}
          brightness={0.7}
          color1="#f19bc6"
          color2="#ff3070"
          colorSpeed={1}
          enableMouseInteraction
          layerOffset={0}
          mouseInfluence={0.25}
          noiseAmplitude={1}
          noiseFrequency={2.5}
          octaveDecay={0.1}
          scale={1.5}
          speed={0.6}
        />
      </div>
    </div>
  );
};

export { HeroServices };