Cta Wave

import { cn } from "@/lib/utils";

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

/** Full-width sage band with soft wavy top and bottom edges (SVG), centered serif headline with an italic word, and two pill buttons; flows naturally between cream sections. */
export function CtaWave({
  title = "Ready to grow a lighter business?",
  description = "Join 2,300 teams measuring and reducing with Grove.",
  primary = { label: "Start free", href: "#start" },
  secondary = { label: "Book a walk-through", href: "#demo" },
  className,
}: CtaWaveProps) {
  const [a, b] = title.split("lighter");
  return (
    <section aria-labelledby="os-cw-title" className={cn("bg-da-bg text-da-accent-fg", className)}>
      <svg aria-hidden viewBox="0 0 1440 60" preserveAspectRatio="none" className="block h-10 w-full text-da-accent sm:h-16">
        <path fill="currentColor" d="M0 40C180 8 360 0 540 16s360 44 540 36 270-36 360-40v48H0Z" />
      </svg>
      <div className="bg-da-accent py-16 sm:py-20">
        <div className="da-container text-center">
          <h2 id="os-cw-title" className="mx-auto max-w-3xl font-da-display text-[clamp(2.25rem,5.5vw,4rem)] leading-[1.05] tracking-da-display text-balance">
            {a}
            {b !== undefined && <em>lighter</em>}
            {b}
          </h2>
          <p className="mt-4 text-lg opacity-90">{description}</p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <a
              href={primary.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill bg-da-primary px-7 font-medium text-da-primary-fg hover:bg-da-primary/90"
            >
              {primary.label}
            </a>
            <a
              href={secondary.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill bg-da-surface px-7 font-medium text-da-surface-fg hover:shadow-da-md"
            >
              {secondary.label}
            </a>
          </div>
        </div>
      </div>
      <svg aria-hidden viewBox="0 0 1440 60" preserveAspectRatio="none" className="block h-10 w-full rotate-180 text-da-accent sm:h-16">
        <path fill="currentColor" d="M0 40C200 10 420 4 620 20s380 40 560 30 220-30 260-34v44H0Z" />
      </svg>
    </section>
  );
}

export default CtaWave;