import {
  IconDatabaseImport,
  IconRefresh,
  IconRocket,
  IconTestPipe2,
} 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 featureIcons = [
  IconTestPipe2,
  IconDatabaseImport,
  IconRefresh,
  IconRocket,
];
const featureKeys = [
  { title: "featureAbTestTitle", desc: "featureAbTestDesc" },
  { title: "featureDataDrivenTitle", desc: "featureDataDrivenDesc" },
  { title: "featureContentTitle", desc: "featureContentDesc" },
  { title: "featurePerformanceTitle", desc: "featurePerformanceDesc" },
];
const HeroSection = async () => {
  const t = await getTranslations("hero");

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

          <div className="flex flex-col items-center justify-center space-y-6">
            <h1 className="max-w-4xl font-bold text-3xl 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>
            </h1>
            <div className="space-y-4">
              <p className="font-semibold text-[#FD105E] text-sm uppercase 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 href="/services" 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 md:gap-6 lg:grid-cols-4">
          {featureKeys.map((feature, idx) => {
            const Icon = featureIcons[idx];
            return (
              <div
                className="group flex flex-row items-center gap-3 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:flex-col sm:items-start sm:gap-0 sm:space-y-3 sm:text-center md:p-6"
                key={feature.title}
              >
                <Icon className="h-5 w-5 shrink-0 text-white/80 transition-colors duration-300 group-hover:text-[#FD105E] sm:mx-auto md:h-6 md:w-6 lg:h-10 lg:w-10" />
                <div className="min-w-0">
                  <h2 className="font-medium text-sm md:text-base">
                    {t(feature.title)}
                  </h2>
                  <p className="text-neutral-400 text-xs sm:mt-2 md:text-sm">
                    {t(feature.desc)}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      {/* [OPTIMIZATION] Scene 3D desktop only — hidden on mobile to save ~300kb JS */}
      <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 { HeroSection };