Cta Banner

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

export interface CtaBannerProps {
  title?: string;
  description?: string;
  cta?: { label: string; href: string };
  secondary?: { label: string; href: string };
  className?: string;
}

/** Compact inverted (ink) banner in one row: title + one-liner on the left, two actions on the right. Ideal between sections. */
export function CtaBanner({
  title = "Ready to quiet the pager?",
  description = "Free for up to 5 responders. No credit card.",
  cta = { label: "Start free", href: "#signup" },
  secondary = { label: "Contact sales", href: "#sales" },
  className,
}: CtaBannerProps) {
  return (
    <section className={cn("bg-da-bg py-12 text-da-fg", className)}>
      <div className="da-container">
        <div className="relative flex flex-col gap-6 overflow-hidden rounded-da-lg bg-da-fg px-6 py-8 text-da-bg sm:px-10 md:flex-row md:items-center md:justify-between">
          <div
            aria-hidden
            className="absolute inset-0 opacity-[0.07] [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:28px_28px] [mask-image:linear-gradient(to_left,black,transparent_70%)]"
          />
          <div className="relative">
            <h2 className="text-xl font-semibold tracking-da-display sm:text-2xl">{title}</h2>
            <p className="mt-1 text-[15px] opacity-75">{description}</p>
          </div>
          <div className="relative flex flex-wrap gap-3">
            <a
              href={cta.href}
              className="da-focus da-transition group inline-flex h-10 items-center gap-1.5 rounded-da-md bg-da-bg px-4 text-sm font-medium text-da-fg hover:bg-da-bg/90"
            >
              {cta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
            <a
              href={secondary.href}
              className="da-focus da-transition inline-flex h-10 items-center rounded-da-md border border-current/20 px-4 text-sm font-medium hover:bg-da-bg/10"
            >
              {secondary.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaBanner;