Cta Split

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

export interface CtaSplitProps {
  left?: { label: string; title: string; href: string };
  right?: { label: string; title: string; href: string };
  className?: string;
}

/** Two-door CTA: the section is split into two equal halves (white | ink) with a mono label and a large title each; hovering a half inverts it and nudges the arrow. */
export function CtaSplit({
  left = { label: "For individuals", title: "Start free", href: "#start" },
  right = { label: "For agencies", title: "Talk to sales", href: "#sales" },
  className,
}: CtaSplitProps) {
  const door = "group da-focus da-transition flex min-h-72 flex-col justify-between p-8 sm:p-12";
  return (
    <section aria-label="Get started" className={cn("grid border-y border-da-border-strong md:grid-cols-2", className)}>
      <a href={left.href} className={cn(door, "bg-da-bg text-da-fg hover:bg-da-fg hover:text-da-bg")}>
        <span className="font-da-mono text-xs tracking-da-label uppercase opacity-70">{left.label}</span>
        <span className="flex items-end justify-between font-da-display text-[clamp(2.5rem,6vw,5rem)] leading-none font-medium tracking-da-display">
          {left.title}
          <span aria-hidden className="transition-transform duration-(--da-duration) group-hover:translate-x-1 group-hover:-translate-y-1">
            ↗
          </span>
        </span>
      </a>
      <a href={right.href} className={cn(door, "bg-da-fg text-da-bg hover:bg-da-bg hover:text-da-fg")}>
        <span className="font-da-mono text-xs tracking-da-label uppercase opacity-70">{right.label}</span>
        <span className="flex items-end justify-between font-da-display text-[clamp(2.5rem,6vw,5rem)] leading-none font-medium tracking-da-display">
          {right.title}
          <span aria-hidden className="transition-transform duration-(--da-duration) group-hover:translate-x-1 group-hover:-translate-y-1">
            ↗
          </span>
        </span>
      </a>
    </section>
  );
}

export default CtaSplit;