Cta Split

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

export interface CtaSplitProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  steps?: { title: string; meta: string }[];
  className?: string;
}

/** Wide two-column CTA card: headline + buttons on the left, a numbered “first 10 minutes” checklist on a tinted panel on the right. */
export function CtaSplit({
  title = "Your next incident could be your calmest",
  description = "Start free, import your schedules and route your first alert before your coffee cools.",
  primaryCta = { label: "Start for free", href: "#signup" },
  secondaryCta = { label: "Book a 20-min demo", href: "#demo" },
  steps = [
    { title: "Connect Slack and one monitor", meta: "2 min" },
    { title: "Import schedules from PagerDuty", meta: "5 min" },
    { title: "Send a test page to your phone", meta: "1 min" },
    { title: "Invite your team", meta: "2 min" },
  ],
  className,
}: CtaSplitProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="da-stroke grid overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md lg:grid-cols-2">
          <div className="flex flex-col justify-center p-8 sm:p-12">
            <h2 className="text-[clamp(1.75rem,3.5vw,2.5rem)] leading-[1.1] font-semibold tracking-da-display text-balance">{title}</h2>
            <p className="mt-4 max-w-md text-[16px] text-da-muted-fg">{description}</p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a
                href={primaryCta.href}
                className="da-focus da-transition group inline-flex h-10 items-center gap-1.5 rounded-da-md bg-da-primary px-4 text-sm font-medium text-da-primary-fg hover:bg-da-primary/90"
              >
                {primaryCta.label}
                <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
              </a>
              <a
                href={secondaryCta.href}
                className="da-focus da-transition da-stroke inline-flex h-10 items-center rounded-da-md px-4 text-sm font-medium hover:bg-da-muted"
              >
                {secondaryCta.label}
              </a>
            </div>
          </div>
          <div className="border-t border-da-border bg-da-surface-2 p-8 sm:p-12 lg:border-t-0 lg:border-l">
            <p className="text-sm font-medium">Your first 10 minutes</p>
            <ol className="mt-5 space-y-3">
              {steps.map((s, i) => (
                <li key={s.title} className="da-stroke flex items-center gap-3 rounded-da-md bg-da-surface px-4 py-3 text-sm">
                  <span className="grid size-6 shrink-0 place-items-center rounded-full bg-da-accent font-da-mono text-[11px] font-medium text-da-accent-fg">
                    {i + 1}
                  </span>
                  <span className="flex-1">{s.title}</span>
                  <span className="font-da-mono text-[11px] text-da-muted-fg">{s.meta}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

export default CtaSplit;