Cta Gradient

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

export interface CtaGradientProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  stats?: { value: string; label: string }[];
  className?: string;
}

/** Bold full-gradient CTA card (primary → accent) with a glass grid overlay, light buttons and three stats in frosted chips. */
export function CtaGradient({
  title = "Spend less time in meetings about meetings",
  description = "Join 18,000 teams who get their recap before the next call starts.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "Book a demo", href: "#demo" },
  stats = [
    { value: "4h", label: "saved per person / week" },
    { value: "10s", label: "to a full recap" },
    { value: "30", label: "languages" },
  ],
  className,
}: CtaGradientProps) {
  return (
    <section className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="relative overflow-hidden rounded-da-lg bg-gradient-to-br from-da-primary via-da-primary to-da-accent px-6 py-14 text-center text-da-primary-fg shadow-da-lg sm:px-12">
          <div
            aria-hidden
            className="absolute inset-0 opacity-20 [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:40px_40px] [mask-image:radial-gradient(ellipse_at_top,black,transparent_70%)]"
          />
          <div aria-hidden className="absolute -top-24 left-1/2 size-72 -translate-x-1/2 rounded-full bg-da-primary-fg/25 blur-3xl" />
          <h2 className="relative mx-auto max-w-2xl font-da-display text-[clamp(1.75rem,4.5vw,3rem)] leading-[1.08] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="relative mx-auto mt-4 max-w-lg text-lg opacity-90">{description}</p>
          <div className="relative mt-8 flex flex-wrap justify-center gap-3">
            <a
              href={primaryCta.href}
              className="da-focus da-transition group inline-flex h-12 items-center gap-2 rounded-da-pill bg-da-primary-fg px-6 font-semibold text-da-primary shadow-da-md hover:-translate-y-0.5"
            >
              {primaryCta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill border border-da-primary-fg/40 bg-da-primary-fg/10 px-6 font-semibold backdrop-blur-da hover:bg-da-primary-fg/20"
            >
              {secondaryCta.label}
            </a>
          </div>
          <dl className="relative mt-10 flex flex-wrap justify-center gap-3">
            {stats.map((s) => (
              <div key={s.label} className="rounded-da-pill border border-da-primary-fg/30 bg-da-primary-fg/10 px-4 py-2 text-sm backdrop-blur-da">
                <dt className="sr-only">{s.label}</dt>
                <dd>
                  <span className="font-da-display font-semibold">{s.value}</span> <span className="opacity-90">{s.label}</span>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

export default CtaGradient;