import { Button } from "@/components/Button";
import { OrganicBlob } from "@/components/OrganicBlob";
import { Container } from "@/components/Section";

type CTAProps = {
  title: string;
  lead?: string;
  primaryHref?: string;
  primaryLabel?: string;
  secondaryHref?: string;
  secondaryLabel?: string;
};

export function CTA({
  title,
  lead,
  primaryHref = "/termin-buchen",
  primaryLabel = "Termin buchen",
  secondaryHref = "/kontakt",
  secondaryLabel = "Kontakt aufnehmen",
}: CTAProps) {
  return (
    <section className="relative overflow-hidden bg-anouma-plum py-20 text-anouma-cream-light sm:py-24">
      <OrganicBlob tone="mauve" className="-left-20 -top-20 h-80 w-80 opacity-30" />
      <OrganicBlob tone="rose" className="-bottom-24 -right-16 h-72 w-72 opacity-20" />
      <Container className="relative text-center">
        <h2 className="mx-auto max-w-2xl text-balance font-serif text-4xl font-medium leading-tight sm:text-5xl">
          {title}
        </h2>
        {lead && (
          <p className="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-anouma-cream-light/85">
            {lead}
          </p>
        )}
        <div className="mt-9 flex flex-wrap items-center justify-center gap-4">
          <Button href={primaryHref} variant="invert">
            {primaryLabel}
          </Button>
          <Button href={secondaryHref} variant="invertOutline">
            {secondaryLabel}
          </Button>
        </div>
      </Container>
    </section>
  );
}