Hero Split

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

export interface HeroSplitEvent {
  time: string;
  actor: string;
  text: string;
  kind: "alert" | "page" | "action" | "resolved";
}

export interface HeroSplitProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  bullets?: string[];
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  incidentTitle?: string;
  timeline?: HeroSplitEvent[];
  className?: string;
}

const DOT: Record<HeroSplitEvent["kind"], string> = {
  alert: "bg-da-danger",
  page: "bg-da-warning",
  action: "bg-da-primary",
  resolved: "bg-da-success",
};

const DEFAULT_TIMELINE: HeroSplitEvent[] = [
  { time: "14:02:11", actor: "Datadog", text: "p99 latency > 2s on payments-api", kind: "alert" },
  { time: "14:02:14", actor: "Tracewise", text: "Paged Maya Chen (primary, Payments)", kind: "page" },
  { time: "14:03:40", actor: "Maya Chen", text: "Acknowledged · opened #inc-2481", kind: "action" },
  { time: "14:09:02", actor: "Maya Chen", text: "Rolled back deploy a41f9c2", kind: "action" },
  { time: "14:11:37", actor: "Tracewise", text: "Resolved · status page updated", kind: "resolved" },
];

/** Two-column hero: copy + checklist on the left, a live incident timeline card on the right. */
export function HeroSplit({
  eyebrow = "Incident response",
  title = "From alert to all-clear in minutes, not hours",
  description = "Tracewise pages the right engineer, opens the war room and writes the timeline for you — so your team fixes the problem instead of coordinating it.",
  bullets = ["Setup in 10 minutes with 60+ integrations", "Slack and Microsoft Teams native", "SOC 2 Type II and GDPR ready"],
  primaryCta = { label: "Start for free", href: "#signup" },
  secondaryCta = { label: "Talk to sales", href: "#sales" },
  incidentTitle = "INC-2481 · Payments degraded",
  timeline = DEFAULT_TIMELINE,
  className,
}: HeroSplitProps) {
  return (
    <section className={cn("bg-da-bg py-16 text-da-fg sm:py-24", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-[1.05fr_1fr] lg:gap-16">
        <div>
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h1 className="mt-4 text-[clamp(2.25rem,5vw,3.75rem)] leading-[1.04] font-semibold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-lg text-[17px] leading-relaxed text-pretty text-da-muted-fg">{description}</p>
          <ul className="mt-6 space-y-2.5">
            {bullets.map((b) => (
              <li key={b} className="flex items-center gap-2.5 text-[15px]">
                <span className="grid size-5 shrink-0 place-items-center rounded-full bg-da-accent text-da-accent-fg">
                  <Check aria-hidden className="size-3" strokeWidth={3} />
                </span>
                {b}
              </li>
            ))}
          </ul>
          <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 shadow-da-sm 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 bg-da-surface px-4 text-sm font-medium text-da-surface-fg hover:bg-da-muted"
            >
              {secondaryCta.label}
            </a>
          </div>
        </div>

        <figure className="relative">
          <div aria-hidden className="absolute -inset-6 -z-0 rounded-[28px] bg-da-primary/10 blur-2xl" />
          <div className="da-stroke relative overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg">
            <div className="flex items-center justify-between gap-3 border-b border-da-border px-4 py-3">
              <p className="truncate text-[13px] font-medium">{incidentTitle}</p>
              <span className="inline-flex shrink-0 items-center gap-1.5 rounded-da-pill bg-da-success/12 px-2 py-0.5 text-[11px] font-medium text-da-success">
                <span className="size-1.5 rounded-full bg-da-success" /> Resolved in 9m 26s
              </span>
            </div>
            <ol className="relative px-4 py-4">
              <span aria-hidden className="absolute top-6 bottom-6 left-[calc(1rem+3.5px)] w-px bg-da-border" />
              {timeline.map((e) => (
                <li key={e.time} className="relative flex gap-3 py-2">
                  <span aria-hidden className={cn("mt-1.5 size-2 shrink-0 rounded-full ring-4 ring-da-surface", DOT[e.kind])} />
                  <div className="min-w-0 flex-1">
                    <p className="text-[13px]">
                      <span className="font-medium">{e.actor}</span> <span className="text-da-muted-fg">{e.text}</span>
                    </p>
                  </div>
                  <time className="shrink-0 font-da-mono text-[11px] text-da-muted-fg">{e.time}</time>
                </li>
              ))}
            </ol>
          </div>
          <figcaption className="sr-only">Example incident timeline handled by Tracewise</figcaption>
        </figure>
      </div>
    </section>
  );
}

export default HeroSplit;