src/components/docs/PipelineSteps.tsx

export interface PipelineStep {
  title: string;
  detail: string;
  /** mono stat shown beside the title, e.g. "64,232 entries" */
  stat?: string;
}

export interface PipelineStepsProps {
  steps: PipelineStep[];
}

/** Numbered construction-pipeline steps with a hairline connector spine. */
export default function PipelineSteps({ steps }: PipelineStepsProps) {
  return (
    <ol className="flex flex-col stagger-spring">
      {steps.map((step, i) => (
        <li
          key={step.title}
          className="relative grid grid-cols-[2.5rem_1fr] gap-x-4 pb-7 last:pb-0"
        >
          {i < steps.length - 1 && (
            <span
              aria-hidden
              className="absolute bottom-0 left-5 top-11 w-px bg-line"
            />
          )}
          <span
            aria-hidden
            className="num hairline flex size-10 items-center justify-center rounded-sm bg-surface-2 text-[13px] text-text"
          >
            {String(i + 1).padStart(2, "0")}
          </span>
          <div className="pt-1.5">
            <div className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5">
              <h3 className="text-sm font-medium text-text">{step.title}</h3>
              {step.stat && (
                <span className="num text-[12px] text-muted">{step.stat}</span>
              )}
            </div>
            <p className="mt-1 max-w-xl text-[13px] leading-relaxed text-muted">
              {step.detail}
            </p>
          </div>
        </li>
      ))}
    </ol>
  );
}