Cta Block

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

export interface CtaBlockProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  className?: string;
}

/** Big periwinkle block with rounded corners, playful pastel circles peeking from the corners, centered headline and two pill buttons. */
export function CtaBlock({
  title = "Ready for a calmer week?",
  description = "Set up your first board in two minutes. Free for teams up to 5 — forever.",
  primaryCta = { label: "Get started free", href: "#signup" },
  secondaryCta = { label: "Book a demo", href: "#demo" },
  className,
}: CtaBlockProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="relative overflow-hidden rounded-[40px] bg-da-primary px-6 py-16 text-center text-da-primary-fg sm:px-12 sm:py-20">
          <span aria-hidden className="absolute -top-12 -left-12 size-24 sm:size-40 rounded-full bg-da-accent" />
          <span aria-hidden className="absolute -right-10 -bottom-14 size-28 sm:size-48 rounded-full bg-da-secondary" />
          <span aria-hidden className="absolute top-6 right-8 size-6 sm:top-10 sm:right-16 sm:size-8 rounded-full bg-da-warning" />
          <h2 className="relative mx-auto max-w-2xl font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[1.05] font-extrabold 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-13 items-center gap-2 rounded-da-pill bg-da-primary-fg px-7 font-semibold text-da-primary 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-13 items-center rounded-da-pill bg-da-primary-fg/15 px-7 font-semibold hover:bg-da-primary-fg/25"
            >
              {secondaryCta.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaBlock;