import { IconChartLine } 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";

export async function HeroAudit() {
  const t = await getTranslations("heroAudit");

  return (
    <div className="flex min-h-[85vh] w-screen 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-8">
        <div className="flex flex-col items-center space-y-8 text-center">
          {/* Badge */}
          <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"
          >
            <IconChartLine
              className="mr-2 inline-block h-4 w-4"
              strokeWidth={2}
            />
            {t("badge")}
          </Badge>

          <div className="flex flex-col items-center justify-center space-y-6">
            {/* Headline */}
            <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">
              {/* Sub-headline */}
              <p className="max-w-3xl text-base text-neutral-300 leading-relaxed md:text-lg">
                {t("description")}
              </p>
            </div>

            {/* CTA */}
            <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("cta")}</ContactButton>
              </div>

              {/* Social Proof Caption */}
              <p className="text-sm text-white/50 italic">{t("socialProof")}</p>
            </div>
          </div>
        </div>
      </div>

      {/* [OPTIMIZATION] Scene 3D desktop only */}
      <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>
  );
}