CTA Split

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

export interface CtaSplitCard {
  audience: string;
  title: string;
  description: string;
  cta: { label: string; href: string };
}

export interface CtaSplitProps {
  title?: string;
  cards?: [CtaSplitCard, CtaSplitCard];
  className?: string;
}

export function CtaSplit({
  title = "Ready when you are.",
  cards = [
    {
      audience: "For engineers",
      title: "Install the Git app",
      description: "Two minutes, one repo, zero config. Your next merged PR becomes a draft release note.",
      cta: { label: "Connect GitHub", href: "#github" },
    },
    {
      audience: "For product teams",
      title: "Book a 20-min demo",
      description: "See the widget, digests and analytics on your own changelog, with your own data.",
      cta: { label: "Pick a slot", href: "#demo" },
    },
  ],
  className,
}: CtaSplitProps) {
  const tones = ["bg-da-primary text-da-primary-fg", "bg-da-secondary text-da-secondary-fg"];
  const buttons = ["bg-da-fg text-da-bg", "bg-da-surface text-da-surface-fg"];

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="cta-split-title">
      <div className="da-container">
        <h2 id="cta-split-title" className="font-da-display text-[clamp(2.25rem,6vw,4.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {cards.map((c, i) => (
            <a
              key={c.title}
              href={c.cta.href}
              className={cn(
                "da-focus da-transition da-stroke group flex min-h-80 flex-col justify-between p-8 shadow-da-lg hover:translate-x-[10px] hover:translate-y-[10px] hover:shadow-none",
                tones[i % tones.length],
              )}
            >
              <div>
                <p className="font-da-mono text-xs font-bold tracking-da-label uppercase">{c.audience}</p>
                <h3 className="mt-4 font-da-display text-4xl leading-none tracking-da-display uppercase">{c.title}</h3>
                <p className="mt-4 max-w-sm text-lg font-medium opacity-90">{c.description}</p>
              </div>
              <span className={cn("da-stroke mt-8 inline-flex items-center gap-2 self-start px-5 py-3 font-bold", buttons[i % buttons.length])}>
                {c.cta.label}
                <ArrowUpRight aria-hidden className="da-transition size-5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" strokeWidth={3} />
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

export default CtaSplit;