Cta Giant

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

export interface CtaGiantProps {
  title?: string;
  href?: string;
  note?: string;
  className?: string;
}

/** Full-width CTA as a giant link: the whole headline is the link, an arrow slides in on hover and an ink underline wipes across; a mono note sits below. */
export function CtaGiant({ title = "Start building", href = "#start", note = "Free forever on Personal · No credit card", className }: CtaGiantProps) {
  return (
    <section aria-label="Call to action" className={cn("border-t border-da-border-strong bg-da-bg py-[clamp(4rem,10vw,8rem)] text-da-fg", className)}>
      <div className="da-container">
        <a
          href={href}
          className="group da-focus relative inline-flex items-baseline gap-[0.2em] rounded-da-sm font-da-display text-[clamp(3.5rem,12vw,11rem)] leading-[0.9] font-medium tracking-da-display"
        >
          {title}
          <span
            aria-hidden
            className="inline-block -translate-x-4 opacity-0 transition-[translate,opacity] duration-(--da-duration-slow) ease-da group-hover:translate-x-0 group-hover:opacity-100 motion-reduce:transition-none"
          >
            ↗
          </span>
          <span
            aria-hidden
            className="absolute inset-x-0 -bottom-2 h-1 origin-left scale-x-0 bg-da-accent transition-transform duration-(--da-duration-slow) ease-da group-hover:scale-x-100 motion-reduce:transition-none"
          />
        </a>
        <p className="mt-8 font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{note}</p>
      </div>
    </section>
  );
}

export default CtaGiant;