import { getTranslations } from "next-intl/server";
import { Badge } from "@/components/ui/badge";
import { ContactButton } from "@/components/ui/contact-button";
import SoftAurora from "../SoftAuroraLazy";

export async function HeroCroService() {
  const t = await getTranslations("heroCro");

  return (
    <section className="relative min-h-[85vh] w-full overflow-hidden">
      {/* Content */}
      <div className="container relative z-10 mx-auto flex min-h-[85vh] flex-col items-center justify-center px-4 text-center sm:px-6 lg:px-8">
        {/* Badge */}
        <div className="mb-6 animate-fade-in">
          <Badge
            className="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"
          >
            {t("badge")}
          </Badge>
        </div>

        {/* Main Headline */}
        <h1
          className="mb-6 animate-fade-in font-bold text-3xl leading-tight sm:text-2xl sm:text-3xl md:text-5xl lg:text-7xl"
          style={{ animationDelay: "0.2s" }}
        >
          <span className="bg-gradient-to-r from-white to-white/80 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>

        {/* Sub-headline */}
        <p
          className="mb-8 max-w-3xl animate-fade-in text-base text-white/80 leading-relaxed md:mb-12 md:text-xl"
          style={{ animationDelay: "0.4s" }}
        >
          {t("description")}
        </p>

        {/* CTA */}
        <div
          className="mb-12 flex animate-fade-in justify-center"
          style={{ animationDelay: "0.6s" }}
        >
          <ContactButton>{t("cta")}</ContactButton>
        </div>

        {/* Social Proof */}
        <div
          className="animate-fade-in text-center"
          style={{ animationDelay: "0.8s" }}
        >
          <p className="text-sm text-white/70">{t("socialProof")}</p>
        </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>
  );
}