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

// Static background paths (decorative, no animation needed for LCP)
function FloatingPaths({ position }: { position: number }) {
  const paths = Array.from({ length: 36 }, (_, i) => ({
    id: i,
    d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${
      380 - i * 5 * position
    } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${
      152 - i * 5 * position
    } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${
      684 - i * 5 * position
    } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
    width: 0.5 + i * 0.03,
  }));

  return (
    <div className="pointer-events-none absolute inset-0 h-screen">
      <svg
        aria-hidden="true"
        className="h-screen w-full text-white"
        fill="none"
        role="presentation"
        viewBox="0 0 696 316"
      >
        {paths.map((path) => (
          <path
            d={path.d}
            key={path.id}
            stroke="currentColor"
            strokeOpacity={0.1 + path.id * 0.03}
            strokeWidth={path.width}
          />
        ))}
      </svg>
    </div>
  );
}

async function HeroWordPressHeadless() {
  const t = await getTranslations("heroWordpressHeadless");

  return (
    <section className="relative min-h-[85vh] w-full overflow-hidden">
      {/* Background Paths */}
      <div className="absolute inset-0 h-screen w-full opacity-30 motion-reduce:opacity-10">
        <FloatingPaths position={1} />
        <FloatingPaths position={-1} />
      </div>

      {/* 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">
          <span className="bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">
            {t("titleLine1")}
          </span>
          <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">
          {t("description")}
        </p>

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

        {/* Social Proof */}
        <div className="animate-fade-in text-center">
          <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>
  );
}

export { HeroWordPressHeadless };