Hero Metrics

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

export interface HeroMetricsProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  metrics?: { value: string; label: string }[];
  logos?: string[];
  logosLabel?: string;
  className?: string;
}

/** Left-aligned editorial hero: huge headline, a row of hairline-separated metrics and a customer wordmark strip. */
export function HeroMetrics({
  title = "The calm way to run on-call.",
  description = "2,400 engineering teams use Tracewise to cut alert noise, share the pager fairly and learn from every incident.",
  primaryCta = { label: "Start free trial", href: "#signup" },
  secondaryCta = { label: "See customer stories", href: "#customers" },
  metrics = [
    { value: "−63%", label: "alert noise in 30 days" },
    { value: "4.2 min", label: "median time to acknowledge" },
    { value: "99.99%", label: "notification delivery SLA" },
  ],
  logos = ["Northwind", "Lumen", "Heliograph", "Parcel", "Quanta", "Oakridge"],
  logosLabel = "Trusted by on-call teams at",
  className,
}: HeroMetricsProps) {
  return (
    <section className={cn("bg-da-bg pt-20 pb-14 text-da-fg sm:pt-28", className)}>
      <div className="da-container">
        <h1 className="max-w-4xl text-[clamp(2.75rem,8vw,6rem)] leading-[0.95] font-semibold tracking-[-0.045em] text-balance">{title}</h1>
        <div className="mt-8 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <p className="max-w-md text-[17px] leading-relaxed text-pretty text-da-muted-fg">{description}</p>
          <div className="flex flex-wrap gap-3">
            <a
              href={primaryCta.href}
              className="da-focus da-transition inline-flex h-10 items-center 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}
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition group inline-flex h-10 items-center gap-1 rounded-da-md px-3 text-sm font-medium text-da-muted-fg hover:text-da-fg"
            >
              {secondaryCta.label}
              <ArrowUpRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </a>
          </div>
        </div>

        <dl className="mt-14 grid border-y border-da-border sm:grid-cols-3">
          {metrics.map((m, i) => (
            <div key={m.label} className={cn("py-6 sm:px-6", i > 0 && "border-t border-da-border sm:border-t-0 sm:border-l", i === 0 && "sm:pl-0")}>
              <dt className="text-sm text-da-muted-fg">{m.label}</dt>
              <dd className="mt-1 font-da-mono text-3xl font-medium tracking-tight tabular-nums">{m.value}</dd>
            </div>
          ))}
        </dl>

        <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:items-center">
          <p className="shrink-0 text-[13px] text-da-muted-fg">{logosLabel}</p>
          <ul className="flex flex-wrap items-center gap-x-8 gap-y-3">
            {logos.map((l) => (
              <li key={l} className="text-[15px] font-semibold tracking-tight text-da-muted-fg">
                {l}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

export default HeroMetrics;