import { IconBrain } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import SoftAurora from "../SoftAuroraLazy";

export async function HeroAiTraining() {
  const t = await getTranslations("heroAiTraining");

  return (
    <section className="relative flex min-h-[85vh] items-center overflow-hidden">
      <div className="container relative z-10 mx-auto px-4 py-16 sm:px-6 md:py-32 lg:px-8">
        <div className="mx-auto max-w-5xl text-center">
          {/* Badge */}
          <div className="mb-8 inline-flex animate-fade-in items-center gap-2 rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 px-4 py-2">
            <IconBrain className="h-4 w-4 text-[#FD105E]" strokeWidth={2} />
            <span className="font-semibold text-[#FD105E] text-sm uppercase tracking-wide">
              {t("badge")}
            </span>
          </div>

          {/* Main Heading */}
          <h1 className="mb-8 animate-fade-in font-bold text-3xl text-white leading-tight sm:text-4xl md:text-7xl lg:text-8xl">
            {t("titleLine1")}
            <br />
            <span className="text-[#FD105E]">{t("titleLine2")}</span>
          </h1>

          {/* Subheading */}
          <p className="mx-auto mb-8 max-w-3xl animate-fade-in text-base text-neutral-200 leading-relaxed md:mb-12 md:text-xl">
            {t("description")}
          </p>

          {/* CTA */}
          <div className="flex animate-fade-in flex-col items-center justify-center gap-4 sm:flex-row">
            <ContactButton>{t("cta")}</ContactButton>
          </div>

          {/* Trust Indicator */}
          <div className="mt-12 animate-fade-in border-white/10 border-t pt-8">
            <p className="mb-4 text-neutral-400 text-sm">{t("trustIntro")}</p>
            <div className="flex flex-wrap items-center justify-center gap-2 text-neutral-300 text-xs sm:gap-4 sm:text-sm md:gap-6">
              <span>{t("trustContentSave")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustOnBrand")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustTools")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustPromptLib")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustWorkflows")}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Three.js Hyperspeed Background */}
      <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>
    </section>
  );
}