import Link from "next/link";
import { Reveal } from "@/components/motion/Reveal";
import Magnetic from "@/components/motion/Magnetic";

export default function CTABand({
  title = "Let's build what's next.",
  arabic = "لنبنِ المستقبل معاً",
  body = "The Kingdom's IT market is racing from $20 billion to $45 billion by 2030 — and your digital roadmap decides your share of it. Tell us where your organization is headed; we'll bring an architecture, a plan, and a team that has done it before, within one week of your brief.",
  primaryHref = "/contact",
  primaryLabel = "Book a discovery call",
}: {
  title?: string;
  arabic?: string;
  body?: string;
  primaryHref?: string;
  primaryLabel?: string;
}) {
  return (
    <section className="sadu-band relative overflow-clip bg-[linear-gradient(120deg,#1450B8,#0C2F6B_45%,#030D1F_100%)] py-[clamp(4.5rem,9vw,7rem)] text-thi">
      <div className="mx-auto flex w-full max-w-[1280px] flex-wrap items-center justify-between gap-10 px-5 md:px-10">
        <Reveal className="max-w-[620px]">
          <h2 className="text-[clamp(1.9rem,4vw,3rem)] font-semibold">
            {title}{" "}
            <span className="ar font-semibold text-ice" lang="ar">
              {arabic}
            </span>
          </h2>
          <p className="mt-4 max-w-[52ch] text-tmid">{body}</p>
        </Reveal>
        <Reveal delay={0.12} className="flex flex-wrap gap-4">
          <Magnetic>
            <Link href={primaryHref} className="btn btn-ice">
              {primaryLabel} <span className="arrow" aria-hidden>→</span>
            </Link>
          </Magnetic>
          <a href="mailto:hello@vira.sa" className="btn btn-ghost-dark">
            hello@vira.sa
          </a>
        </Reveal>
      </div>
    </section>
  );
}