CTA Glow

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

export interface CtaGlowProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  /** Keyboard hint shown next to the primary CTA. */
  shortcut?: string;
  className?: string;
}

export function CtaGlow({
  title = "Your next incident is already on its way",
  description = "Be ready for it. Set up routing, on-call and a status page in under an hour — free for up to five responders.",
  primaryCta = { label: "Start for free", href: "#signup" },
  secondaryCta = { label: "Talk to an engineer", href: "#demo" },
  shortcut = "S",
  className,
}: CtaGlowProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke relative isolate overflow-hidden rounded-da-lg bg-da-surface px-6 py-16 text-center text-da-surface-fg shadow-da-md sm:px-16 sm:py-24">
          <div aria-hidden className="absolute -bottom-40 left-1/2 -z-10 h-80 w-[640px] -translate-x-1/2 rounded-full bg-da-primary/30 blur-[100px]" />
          <div aria-hidden className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-da-fg/25 to-transparent" />
          <h2 className="mx-auto max-w-2xl text-[clamp(1.875rem,4.5vw,3rem)] leading-[1.08] font-semibold tracking-da-display text-balance">{title}</h2>
          <p className="mx-auto mt-5 max-w-lg text-[17px] leading-relaxed text-da-muted-fg">{description}</p>
          <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
            <a
              href={primaryCta.href}
              className="da-focus da-transition group inline-flex h-10 items-center gap-2 rounded-da-md bg-da-fg pr-2 pl-4 text-sm font-medium text-da-bg hover:bg-da-fg/85"
            >
              {primaryCta.label}
              {shortcut && (
                <kbd aria-hidden className="rounded-da-sm bg-da-bg/15 px-1.5 py-0.5 font-da-mono text-[11px]">
                  {shortcut}
                </kbd>
              )}
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition group inline-flex h-10 items-center gap-1.5 rounded-da-md px-4 text-sm font-medium text-da-muted-fg hover:text-da-fg"
            >
              {secondaryCta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaGlow;