import { IconShieldLock } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { FadeIn } from "@/components/ui/fade-in";

export async function WpSecurityCTA() {
  const t = await getTranslations("wpSecurityCta");

  return (
    <section className="relative overflow-hidden py-12 md:py-32">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        <FadeIn className="mx-auto max-w-5xl" y={20}>
          <div className="relative rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm sm:p-6 md:p-12">
            <div className="mb-8 flex flex-col items-start gap-6 md:flex-row">
              <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10">
                <IconShieldLock
                  className="h-8 w-8 text-[#FD105E]"
                  strokeWidth={1.5}
                />
              </div>
              <div className="flex-1">
                <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:text-5xl">
                  {t("headingLine1")}{" "}
                  <span className="text-[#FD105E]">{t("headingLine2")}</span>
                </h2>
                <p className="text-base text-neutral-200 leading-relaxed md:text-xl">
                  {t("description")}
                </p>
              </div>
            </div>

            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              <ContactButton className="hover:scale-105 hover:shadow-[#FD105E]/25 hover:shadow-lg">
                {t("cta")}
              </ContactButton>
            </div>
          </div>
        </FadeIn>
      </div>

      {/* Decorative bottom gradient */}
      <div
        className="absolute bottom-0 left-0 z-0 h-px w-full"
        style={{
          background:
            "radial-gradient(50% 50% at 50%, rgba(253,16,94,0.24) 0%, rgba(253,16,94,0) 100%)",
        }}
      />
    </section>
  );
}