CTA Sticker

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

export interface CtaStickerProps {
  title?: string;
  description?: string;
  cta?: { label: string; href: string };
  /** Text running around the circular sticker. */
  stickerText?: string;
  className?: string;
}

export function CtaSticker({
  title = "Stop writing release notes.",
  description = "Merge. Label. Ship. Shipyard handles the talking.",
  cta = { label: "Start free", href: "#signup" },
  stickerText = "FREE FOR OPEN SOURCE • NO CREDIT CARD • ",
  className,
}: CtaStickerProps) {
  return (
    <section className={cn("da-section da-stroke-b relative overflow-hidden bg-da-accent text-da-accent-fg", className)}>
      <div className="da-container relative text-center">
        <h2 className="mx-auto max-w-5xl font-da-display text-[clamp(2.75rem,9vw,7.5rem)] leading-[0.88] tracking-da-display uppercase">{title}</h2>
        <p className="mx-auto mt-6 max-w-xl text-xl font-bold">{description}</p>
        <a
          href={cta.href}
          className="da-focus da-transition da-stroke group mt-10 inline-flex items-center gap-3 bg-da-fg px-8 py-5 text-xl font-bold text-da-bg shadow-da-lg hover:translate-x-[10px] hover:translate-y-[10px] hover:shadow-none"
        >
          {cta.label}
          <ArrowRight aria-hidden className="da-transition size-6 group-hover:translate-x-1" strokeWidth={3} />
        </a>

        {/* Rotating circular sticker (decorative) */}
        <div aria-hidden className="absolute right-0 -bottom-10 hidden size-36 md:block lg:right-6">
          <svg viewBox="0 0 200 200" className="brutalist-spin size-full">
            <defs>
              <path id="cta-sticker-circle" d="M100,100 m-78,0 a78,78 0 1,1 156,0 a78,78 0 1,1 -156,0" />
            </defs>
            <circle cx="100" cy="100" r="96" fill="var(--da-primary)" stroke="var(--da-border)" strokeWidth="4" />
            <text className="font-da-mono" fontSize="17" fontWeight="700" fill="var(--da-primary-fg)" letterSpacing="2">
              <textPath href="#cta-sticker-circle">{stickerText.repeat(2)}</textPath>
            </text>
            <text x="100" y="115" textAnchor="middle" className="font-da-display" fontSize="44" fill="var(--da-primary-fg)">
              ★
            </text>
          </svg>
        </div>
      </div>
      <style href="brutalist-spin" precedence="default">{`
        @keyframes brutalist-spin { to { rotate: 360deg } }
        .brutalist-spin { animation: brutalist-spin 14s steps(24) infinite }
        @media (prefers-reduced-motion: reduce) { .brutalist-spin { animation: none } }
      `}</style>
    </section>
  );
}

export default CtaSticker;