import { tenextButton as TenextButton } from "@/components/shared/Button";
import { PageContainer } from "@/components/shared/PageContainer";
import { aboutCta } from "@/data/about";

/** AboutCTA — large enterprise call to action on a premium gradient panel. */
export function AboutCTA() {
  return (
    <section className="px-5 py-[60px] md:py-[80px]">
      <div className="relative overflow-hidden rounded-[25px] bg-tenext-dark px-[7vw] py-[80px] text-center md:py-[100px]">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute left-1/2 top-[-40%] h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(103,102,200,0.35),transparent_60%)]" />
          <div className="absolute bottom-[-50%] left-[15%] h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,rgba(69,208,189,0.16),transparent_60%)]" />
        </div>

        <PageContainer className="relative z-10 flex flex-col items-center">
          <h2
            className="max-w-[760px] tracking-[-0.03em] text-white"
            style={{
              fontFamily: "var(--font-dm-sans)",
              fontSize: "clamp(30px, 4vw, 56px)",
              fontWeight: 600,
              lineHeight: 1.1,
            }}
          >
            {aboutCta.title}
          </h2>
          <p className="mt-[22px] max-w-[560px] text-[17px] leading-[1.75] text-white/80">
            {aboutCta.paragraph}
          </p>
          <div className="mt-[40px] flex flex-wrap items-center justify-center gap-[16px]">
            <TenextButton
              href={aboutCta.primaryCta.href}
              variant="gradient-fill"
              className="rounded-[25px] px-[36px] py-[16px] text-[15px] font-semibold"
              showArrow={false}
            >
              {aboutCta.primaryCta.label}
            </TenextButton>
            <TenextButton
              href={aboutCta.secondaryCta.href}
              variant="gradient-border"
              className="rounded-[25px] px-[36px] py-[16px] text-[15px] font-medium text-white"
              showArrow={true}
            >
              {aboutCta.secondaryCta.label}
            </TenextButton>
          </div>
        </PageContainer>
      </div>
    </section>
  );
}