Cta Band

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CtaBandProps {
  title?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  className?: string;
}

/** Full-width primary-blue band with a faint grid pattern, headline + subline on the left and inverted white + outlined buttons on the right. */
export function CtaBand({
  title = "Ready to close faster?",
  description = "Start a 14-day free trial. No credit card, no implementation fee.",
  primary = { label: "Start free trial", href: "#trial" },
  secondary = { label: "Talk to sales", href: "#sales" },
  className,
}: CtaBandProps) {
  return (
    <section aria-labelledby="nc-band-title" className={cn("relative isolate overflow-hidden bg-da-primary py-16 text-da-primary-fg sm:py-20", className)}>
      <div
        aria-hidden
        className="absolute inset-0 -z-10 opacity-20 [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:40px_40px] [mask-image:linear-gradient(90deg,transparent,black)]"
      />
      <div className="da-container flex flex-col items-start justify-between gap-8 lg:flex-row lg:items-center">
        <div>
          <h2 id="nc-band-title" className="font-da-display text-[clamp(1.75rem,4vw,2.5rem)] leading-tight font-extrabold tracking-da-display">
            {title}
          </h2>
          <p className="mt-2 text-lg opacity-90">{description}</p>
        </div>
        <div className="flex flex-wrap gap-3">
          <a
            href={primary.href}
            className="da-focus da-transition inline-flex h-11 items-center gap-2 rounded-da-md bg-da-primary-fg px-5 font-semibold text-da-primary hover:opacity-90"
          >
            {primary.label} <ArrowRight aria-hidden className="size-4" />
          </a>
          <a
            href={secondary.href}
            className="da-focus da-transition inline-flex h-11 items-center rounded-da-md border border-current/40 px-5 font-semibold hover:bg-da-primary-fg/10"
          >
            {secondary.label}
          </a>
        </div>
      </div>
    </section>
  );
}

export default CtaBand;