src/components/docs/TracksTable.tsx

import clsx from "clsx";
import Badge from "@/components/ui/Badge";

type TrackStatus = "live" | "config-ready" | "roadmap";

const STATUS: Record<
  TrackStatus,
  { label: string; variant: "accent" | "outline" | "ghost" }
> = {
  live: { label: "Live", variant: "accent" },
  "config-ready": { label: "Config-ready", variant: "outline" },
  roadmap: { label: "Roadmap", variant: "ghost" },
};

const TRACKS: ReadonlyArray<{
  id: string;
  name: string;
  rule: string;
  status: TrackStatus;
}> = [
  {
    id: "A",
    name: "Zero-shot",
    rule: "The model exactly as released. No dataset-specific signal of any kind — no prompts, no bias lists, no weight updates.",
    status: "live",
  },
  {
    id: "B",
    name: "Contextual biasing",
    rule: "Bias lists (medical-term hotwords or prompts) allowed at decode time. No weight updates; the bias list is recorded in the run manifest.",
    status: "live",
  },
  {
    id: "C",
    name: "Adapted",
    rule: "Weights updated using the dataset's frozen Train split only; Valid for tuning. No other in-domain data of any kind.",
    status: "live",
  },
  {
    id: "D",
    name: "Open",
    rule: "Any external data or method, fully disclosed. The anything-goes track.",
    status: "roadmap",
  },
  {
    id: "E",
    name: "Efficiency",
    rule: "Deployment-realistic constraints: under 1B parameters, CPU decode, under 8GB VRAM.",
    status: "config-ready",
  },
  {
    id: "F",
    name: "Conversational",
    rule: "WER + DER on multi-speaker dialogue. Requires conversational corpora (VietMed, clinic data) — the track closest to production.",
    status: "roadmap",
  },
];

/** Tracks A–F: what each track allows, with launch-status chips. */
export default function TracksTable() {
  return (
    <div className="hairline spotlight-row depth-1 overflow-x-auto rounded-sm bg-surface">
      <table className="w-full min-w-[640px] border-collapse text-sm">
        <caption className="sr-only">
          Evaluation tracks A through F with their rules and launch status
        </caption>
        <thead>
          <tr className="hairline-b text-left">
            <th
              scope="col"
              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
            >
              Track
            </th>
            <th
              scope="col"
              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
            >
              Allowed signal
            </th>
            <th
              scope="col"
              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
            >
              Status
            </th>
          </tr>
        </thead>
        <tbody>
          {TRACKS.map((t, i) => {
            const dim = t.status === "roadmap";
            return (
              <tr
                key={t.id}
                className={i < TRACKS.length - 1 ? "hairline-b align-top" : "align-top"}
              >
                <th
                  scope="row"
                  className="whitespace-nowrap px-4 py-3.5 text-left"
                >
                  <span className="inline-flex items-baseline gap-2.5">
                    <span
                      className={clsx(
                        "num text-base",
                        dim ? "text-muted/70" : "text-text",
                      )}
                    >
                      {t.id}
                    </span>
                    <span
                      className={clsx(
                        "text-sm font-medium",
                        dim ? "text-muted/70" : "text-text",
                      )}
                    >
                      {t.name}
                    </span>
                  </span>
                </th>
                <td
                  className={clsx(
                    "min-w-[20rem] px-4 py-3.5 text-[13px] leading-relaxed",
                    dim ? "text-muted/70" : "text-muted",
                  )}
                >
                  {t.rule}
                </td>
                <td className="whitespace-nowrap px-4 py-3.5">
                  <Badge variant={STATUS[t.status].variant}>
                    {STATUS[t.status].label}
                  </Badge>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}