Cta Illustrated

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

export interface CtaIllustratedProps {
  title?: string;
  description?: string;
  cta?: { label: string; href: string };
  note?: string;
  className?: string;
}

/** Split CTA on a white card: copy and ink pill button on the left, a flat illustration of stacked pastel shapes (circle, pill, square) on the right. */
export function CtaIllustrated({
  title = "Start small. Stay organized.",
  description = "Planta grows with you — from a personal to-do list to a whole team’s roadmap.",
  cta = { label: "Create your first board", href: "#signup" },
  note = "Takes 2 minutes · No credit card",
  className,
}: CtaIllustratedProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="grid items-center gap-10 rounded-[40px] bg-da-surface p-8 shadow-da-md sm:p-12 md:grid-cols-[1.2fr_1fr]">
          <div>
            <h2 className="font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.05] font-extrabold tracking-da-display text-balance">{title}</h2>
            <p className="mt-4 max-w-md text-lg text-da-muted-fg">{description}</p>
            <a
              href={cta.href}
              className="da-focus da-transition mt-8 inline-flex h-13 items-center rounded-da-pill bg-da-fg px-7 font-semibold text-da-bg hover:-translate-y-0.5"
            >
              {cta.label}
            </a>
            <p className="mt-3 text-sm text-da-muted-fg">{note}</p>
          </div>
          <div aria-hidden className="relative mx-auto h-64 w-full max-w-xs">
            <span className="absolute top-2 left-4 size-32 rounded-full bg-da-accent" />
            <span className="absolute top-10 right-2 h-16 w-40 rounded-da-pill bg-da-primary/25" />
            <span className="absolute bottom-4 left-10 size-28 rotate-12 rounded-[28px] bg-da-secondary" />
            <span className="absolute right-10 bottom-10 size-14 rounded-full bg-da-warning" />
            <span className="absolute top-24 left-28 grid size-20 place-items-center rounded-da-lg bg-da-surface text-3xl shadow-da-md">✅</span>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaIllustrated;