Features Steps

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

export interface FeaturesStepsItem {
  title: string;
  description: string;
  meta: string;
}

export interface FeaturesStepsProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  steps?: FeaturesStepsItem[];
  className?: string;
}

const DEFAULT_STEPS: FeaturesStepsItem[] = [
  { title: "Detect", description: "Monitors from Datadog, Grafana or Sentry open an incident with the right severity.", meta: "t + 0s" },
  { title: "Page", description: "The primary on-call is called, texted and pushed. No ack in 5 min? Escalate.", meta: "t + 3s" },
  { title: "Coordinate", description: "A Slack channel, a Zoom bridge and a status-page draft appear automatically.", meta: "t + 5s" },
  { title: "Resolve", description: "Mark resolved from Slack; stakeholders and the status page are updated for you.", meta: "t + 9m" },
  { title: "Learn", description: "An AI-drafted postmortem and tracked follow-ups close the loop.", meta: "t + 1d" },
];

/** Horizontal numbered workflow (vertical on mobile) with a connecting hairline and timing labels. */
export function FeaturesSteps({
  eyebrow = "Workflow",
  title = "One incident, five steps, zero copy-paste",
  description = "Tracewise automates the busywork around an incident so humans only do the part that needs judgement.",
  steps = DEFAULT_STEPS,
  className,
}: FeaturesStepsProps) {
  return (
    <section aria-labelledby="features-steps-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="features-steps-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-[17px] text-da-muted-fg">{description}</p>
        </div>
        <ol className="relative mt-14 grid gap-8 lg:grid-cols-5 lg:gap-6">
          <span aria-hidden className="absolute top-4 bottom-4 left-4 w-px bg-da-border lg:top-4 lg:right-0 lg:bottom-auto lg:left-0 lg:h-px lg:w-full" />
          {steps.map((s, i) => (
            <li key={s.title} className="relative flex gap-4 lg:block">
              <span
                className={cn(
                  "da-stroke relative grid size-8 shrink-0 place-items-center rounded-full bg-da-surface font-da-mono text-xs font-medium text-da-surface-fg",
                  i === 0 && "border-da-primary bg-da-primary text-da-primary-fg",
                )}
              >
                {i + 1}
              </span>
              <div className="lg:mt-5">
                <p className="font-da-mono text-[11px] text-da-muted-fg">{s.meta}</p>
                <h3 className="mt-1 text-[15px] font-medium">{s.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-da-muted-fg">{s.description}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

export default FeaturesSteps;