Comparison Table

// Comparison Table — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-21.tsx, export ComparisonTable.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.
// 2 helpers the demo imports are inlined above it, verbatim.

import { useId, useState } from "react";

const PLAN_COLUMNS = ["Free", "Pro", "Team"];

const COMPARE_ROWS = [
  { label: "Core components", values: ["All", "All", "All"] },
  { label: "Bundle budget enforced", values: ["Yes", "Yes", "Yes"] },
  { label: "Test reports", values: ["—", "Included", "Included"] },
  { label: "Shared workspace", values: ["—", "—", "Included"] },
];

export function ComparisonTable() {
  const [active, setActive] = useState(1);
  const captionId = useId();

  return (
    <div className="flex h-full w-full items-center justify-center bg-[#08090f] px-5 py-8">
      <div className="w-full max-w-sm">
        <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-violet-300/70">Compare plans</p>
        <table className="mt-3 w-full border-collapse text-left">
          <caption id={captionId} className="sr-only">
            Three plans compared across four features. Column buttons highlight a plan; they do not sort or filter.
          </caption>
          <thead>
            <tr>
              <th scope="col" className="w-2/5 pb-2 text-[10px] font-semibold uppercase tracking-wider text-ink-faint">
                Feature
              </th>
              {PLAN_COLUMNS.map((plan, i) => (
                <th key={plan} scope="col" className="pb-2">
                  <button
                    type="button"
                    onClick={() => setActive(i)}
                    aria-pressed={active === i}
                    className={`w-full rounded-lg px-2 py-1 text-[11px] font-semibold transition-colors ${
                      active === i ? "bg-violet-400/20 text-violet-100" : "text-ink-faint hover:text-ink"
                    }`}
                  >
                    {plan}
                  </button>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {COMPARE_ROWS.map((row) => (
              <tr key={row.label} className="border-t border-white/8">
                <th scope="row" className="py-2 pr-2 text-[11px] font-medium text-ink-faint">
                  {row.label}
                </th>
                {row.values.map((v, i) => (
                  <td
                    key={PLAN_COLUMNS[i]}
                    className={`py-2 text-[11px] ${i === active ? "font-semibold text-ink" : "text-ink-faint/70"}`}
                  >
                    {v}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
        <p className="mt-3 text-[10px] text-ink-faint">
          The table is the comparison — no column is hidden behind a hover state.
        </p>
      </div>
    </div>
  );
}