Cta Blob

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

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

/** Closing CTA inside a large sage organic blob (SVG shape scaled to the content) with a clay pebble and two leaves around it; serif headline and cream pill buttons. */
export function CtaBlob({
  title = "Start with an honest number",
  description = "Your first footprint takes an afternoon. What you do next is up to you — we’ll be here to help.",
  primary = { label: "Start measuring", href: "#start" },
  secondary = { label: "Talk to our team", href: "#contact" },
  className,
}: CtaBlobProps) {
  return (
    <section aria-labelledby="os-cb-title" className={cn("da-section overflow-hidden bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="relative isolate mx-auto max-w-4xl px-8 py-20 text-center text-da-primary-fg sm:px-20 sm:py-24">
          <svg aria-hidden viewBox="0 0 800 480" preserveAspectRatio="none" className="absolute inset-0 -z-10 size-full text-da-primary">
            <path fill="currentColor" d="M92 72C170 6 318-6 446 10s258 50 312 132 40 196-26 262-196 88-330 72S102 432 44 358-2 162 92 72Z" />
          </svg>
          <span aria-hidden className="absolute -top-4 right-4 -z-10 size-24 rounded-[55%_45%_50%_50%/60%_55%_45%_40%] bg-da-secondary sm:right-10" />
          <svg aria-hidden viewBox="0 0 60 60" className="absolute bottom-2 left-2 w-14 text-da-accent sm:left-8">
            <path d="M8 52C8 24 28 8 56 8 56 36 36 52 8 52Z" fill="currentColor" />
            <path d="M8 52 40 22" stroke="var(--da-primary)" strokeWidth="2" />
          </svg>
          <h2 id="os-cb-title" className="font-da-display text-[clamp(2.25rem,5.5vw,4rem)] leading-[1.05] tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mx-auto mt-5 max-w-lg text-lg opacity-90">{description}</p>
          <div className="mt-9 flex flex-wrap justify-center gap-3">
            <a
              href={primary.href}
              className="da-focus da-transition inline-flex h-12 items-center gap-2 rounded-da-pill bg-da-primary-fg px-6 font-medium text-da-primary hover:opacity-90"
            >
              {primary.label} <ArrowRight aria-hidden className="size-4" />
            </a>
            <a
              href={secondary.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill border border-da-primary-fg/50 px-6 font-medium hover:bg-da-primary-fg/10"
            >
              {secondary.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaBlob;