export function ScoringExplanation() {
  return (
    <div className="app-surface p-5">
      <div className="grid grid-cols-3 gap-3 text-sm">
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500">Skills</div>
          <div className="mt-1 text-gray-600 dark:text-gray-300">
            Quality of skill overlap with the requested stack.
          </div>
        </div>
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500">Availability</div>
          <div className="mt-1 text-gray-600 dark:text-gray-300">
            Conflicts and free capacity during the selected period.
          </div>
        </div>
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500">Cost + Load</div>
          <div className="mt-1 text-gray-600 dark:text-gray-300">
            Cost efficiency and current utilization weighting.
          </div>
        </div>
      </div>
    </div>
  );
}
