export function DeploymentStatusCard() {
  const stages = [
    { label: "Build", state: "done" },
    { label: "Test", state: "done" },
    { label: "Deploy", state: "active" },
    { label: "Verify", state: "pending" },
  ] as const;

  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-xl border border-[#1111111A] bg-white p-5 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow">
        {/* Header */}
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="flex items-center gap-2 font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
              <span>⎌ production</span>
              <span aria-hidden>·</span>
              <span>iad-1</span>
            </div>
            <h3 className="mt-1.5 text-[16px] font-medium tracking-tight">
              velyn-web · main
            </h3>
            <p className="mt-0.5 font-mono text-[11.5px] text-[#6B6B66] truncate">
              d8f49b5 — fix(auth): handle expired magic-link tokens
            </p>
          </div>
          <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-100 text-amber-800 px-2.5 py-1 text-[11px] font-mono uppercase tracking-[0.14em]">
            <span className="relative flex h-1.5 w-1.5">
              <span className="absolute inset-0 rounded-full bg-amber-500 animate-ping" />
              <span className="relative h-1.5 w-1.5 rounded-full bg-amber-500" />
            </span>
            Deploying
          </span>
        </div>

        {/* Stages */}
        <ol className="mt-5 flex items-stretch gap-2">
          {stages.map((s) => (
            <li key={s.label} className="flex-1">
              <div
                className={`h-1.5 rounded-full ${
                  s.state === "done"
                    ? "bg-emerald-500"
                    : s.state === "active"
                    ? "bg-amber-500/30"
                    : "bg-[#1111111A]"
                } relative overflow-hidden`}
              >
                {s.state === "active" && (
                  <span
                    className="absolute inset-0 bg-amber-500"
                    style={{ animation: "deploy-fill 1.6s ease-in-out infinite alternate" }}
                  />
                )}
              </div>
              <div
                className={`mt-2 font-mono text-[10px] uppercase tracking-[0.16em] ${
                  s.state === "pending" ? "text-[#6B6B66]" : "text-[#111111]"
                }`}
              >
                {s.label}
              </div>
            </li>
          ))}
        </ol>

        {/* Meta */}
        <div className="mt-5 grid grid-cols-3 border-t border-[#1111111A] pt-4 text-[11px]">
          <Meta label="By" value="@elena" />
          <Meta label="Started" value="00:00:42 ago" />
          <Meta label="Region" value="iad-1" />
        </div>

        <button
          type="button"
          className="mt-4 w-full rounded-md border border-[#1111111A] py-2 text-[12px] font-medium hover:bg-[#F7F6F2] transition-colors flex items-center justify-center gap-2"
        >
          <span>View live logs</span>
          <span className="transition-transform group-hover:translate-x-1" aria-hidden>→</span>
        </button>
        <style>{`
          @keyframes deploy-fill {
            0% { transform: translateX(-60%); }
            100% { transform: translateX(20%); }
          }
        `}</style>
      </article>
    </div>
  );
}

function Meta({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="font-mono text-[9.5px] uppercase tracking-[0.18em] text-[#6B6B66]">{label}</div>
      <div className="mt-0.5">{value}</div>
    </div>
  );
}
Deployment Status Card

velyn-web · main
