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

export async function HeroWordPressMaintenance() {
  const t = await getTranslations("heroWpMaintenance");

  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">
            <IconTools 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 leading-tight tracking-tight sm:text-4xl md:text-7xl lg:text-8xl"
            style={{ animationDelay: "0.1s" }}
          >
            <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>

          {/* 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"
            style={{ animationDelay: "0.2s" }}
          >
            {t("description")}
          </p>

          {/* CTA Buttons */}
          <div
            className="flex animate-fade-in flex-col items-center justify-center gap-4 sm:flex-row"
            style={{ animationDelay: "0.3s" }}
          >
            <ContactButton>{t("ctaPrimary")}</ContactButton>
            <ContactButton href="#tier-pro" variant="secondary">
              {t("ctaSecondary")}
            </ContactButton>
          </div>

          {/* Trust Indicator */}
          <div
            className="mt-12 animate-fade-in border-white/10 border-t pt-8"
            style={{ animationDelay: "0.5s" }}
          >
            <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("trustUptime")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustSites")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustResponse")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustBackup")}</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>
  );
}