src/components/docs/ProvenanceLadder.tsx

import ProvenanceChip from "@/components/ui/ProvenanceChip";
import type { Provenance } from "@/lib/types";

const LADDER: ReadonlyArray<{ p: Provenance; desc: string }> = [
  {
    p: "platform-verified",
    desc: "Run by the platform harness, on platform hardware, from a pinned model revision. The full run manifest is published beside the number. The only class eligible for a SOTA badge.",
  },
  {
    p: "self-reported",
    desc: "Submitted by the system’s authors with a manifest, reproduced on their hardware rather than ours. Honor-system until the private canary subset ships.",
  },
  {
    p: "api-snapshot",
    desc: "Run through the platform harness against the live commercial API on a given date. We hold the hypotheses and bootstrap CIs, but the service has no pinned revision and runs on the vendor’s hardware — so RTFx is omitted and the row is never SOTA-eligible. Re-run on a quarterly drift schedule.",
  },
  {
    p: "paper-imported",
    desc: "Transcribed from a published paper. Normalizer and decode settings may differ from ours, so these rows wear a dashed outline everywhere they appear.",
  },
];

const STATES: ReadonlyArray<{ p: Provenance; desc: string }> = [
  {
    p: "running",
    desc: "A platform run is executing right now. Metrics appear the moment the run completes and is verified.",
  },
  {
    p: "planned",
    desc: "Queued for a platform run. No numbers yet — the row exists so the roadmap is legible.",
  },
];

/** Trust ladder: three provenance classes ranked, plus the two row states. */
export default function ProvenanceLadder() {
  return (
    <div className="flex flex-col gap-4 stagger-spring">
      <ol className="hairline spotlight-card depth-1 flex flex-col rounded-sm bg-surface px-5 py-1">
        {LADDER.map((item, i) => (
          <li
            key={item.p}
            className={
              "grid grid-cols-[2rem_minmax(9.5rem,11rem)_1fr] items-start gap-x-4 py-4 " +
              (i < LADDER.length - 1 ? "hairline-b" : "")
            }
          >
            <span className="num pt-0.5 text-[12px] text-muted">
              {String(i + 1).padStart(2, "0")}
            </span>
            <ProvenanceChip provenance={item.p} className="justify-self-start" />
            <p className="text-[13px] leading-relaxed text-muted">{item.desc}</p>
          </li>
        ))}
      </ol>

      <div className="hairline spotlight-card depth-1 flex flex-col rounded-sm bg-surface px-5 py-1">
        <p className="num hairline-b py-3 text-[11px] uppercase tracking-[0.18em] text-muted">
          Row states — not trust classes
        </p>
        <ul className="flex flex-col">
          {STATES.map((item, i) => (
            <li
              key={item.p}
              className={
                "grid grid-cols-[2rem_minmax(9.5rem,11rem)_1fr] items-start gap-x-4 py-4 " +
                (i < STATES.length - 1 ? "hairline-b" : "")
              }
            >
              <span aria-hidden className="num pt-0.5 text-[12px] text-muted/50">
                —
              </span>
              <ProvenanceChip provenance={item.p} className="justify-self-start" />
              <p className="text-[13px] leading-relaxed text-muted">
                {item.desc}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}