einfach-produktiv/app/components/CheckoutSteps.tsx

const STEP_LABELS = ["Warenkorb", "Adresse", "Zahlung", "Abschluss"];

type StepState = "done" | "active" | "upcoming";

function StepCircle({ state, number }: { state: StepState; number: number }) {
  if (state === "done") {
    return (
      <div className="flex size-9 items-center justify-center rounded-full bg-brand text-text-primary">
        <svg viewBox="0 0 20 20" className="size-4" fill="none" aria-hidden="true">
          <path d="m4 10 4 4 8-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    );
  }
  if (state === "active") {
    return (
      <div className="flex size-9 items-center justify-center rounded-full bg-brand font-bold text-body-sm text-bg-white">
        {number}
      </div>
    );
  }
  return (
    // Back to the shared border-border (reverted 2026-07-24 per feedback —
    // only the connector line below should be the darker #c4b8a0).
    <div className="flex size-9 items-center justify-center rounded-full border border-border font-bold text-body-sm text-text-muted">
      {number}
    </div>
  );
}

// Shared by /checkout (mid-flow, one step active) and /bestellbestaetigung
// (every step done — `current` past the last step number makes every
// stepNum < current true, so passing STEP_LABELS.length + 1 there marks
// the whole bar complete without a separate "all done" branch).
export function CheckoutSteps({ current }: { current: number }) {
  return (
    <div className="flex items-center w-full max-w-[50rem]">
      {STEP_LABELS.map((label, i) => {
        const stepNum = i + 1;
        const state: StepState = stepNum < current ? "done" : stepNum === current ? "active" : "upcoming";
        return (
          <div key={label} className="flex items-center flex-1 last:flex-initial">
            <div className="flex flex-col items-center gap-0 shrink-0">
              <div className="flex items-center gap-3">
                <StepCircle state={state} number={stepNum} />
                <span
                  className={`hidden sm:block text-body-sm whitespace-nowrap ${
                    state === "upcoming" ? "text-text-muted" : "font-semibold text-text-primary"
                  }`}
                >
                  {label}
                </span>
              </div>
            </div>
            {i < STEP_LABELS.length - 1 && <div className="h-px bg-[#c4b8a0] flex-1 mx-4 min-w-4" />}
          </div>
        );
      })}
    </div>
  );
}