import { ANATOMY } from '@/content/anatomy';
import { cn } from '@/lib/utils';

/**
 * The definition, before the catalogue.
 *
 * Four cells, one per part of an environment, read from `@/content/anatomy` —
 * the same source `EnvAnatomy` renders on every Play and Evidence tab. That is
 * the whole point: a visitor learns the four labels here, on the landing, and
 * then meets them again on the word game and the fraud screen and reads both
 * as "same machine, different grader". If this strip and the anatomy boxes
 * ever disagreed on the words, the lesson would break at the first click.
 *
 * Hairline above and below; 2×2 at a phone width, four across from `lg`.
 */
export function DefinitionStrip({ className }: { className?: string }) {
  return (
    <ol
      aria-label="The four parts of an environment"
      className={cn(
        'grid grid-cols-2 gap-x-6 gap-y-5 border-y border-border py-5 lg:grid-cols-4 lg:gap-x-8',
        className,
      )}
    >
      {ANATOMY.map((part) => (
        <li key={part.key} className="flex min-w-0 flex-col gap-1">
          <p className="flex items-baseline gap-2">
            <span className="font-mono text-label uppercase tracking-label text-muted">
              {String(part.index).padStart(2, '0')}
            </span>
            <span className="text-ui font-semibold text-fg">{part.kicker}</span>
          </p>
          <p className="text-small text-fg-2">{part.gloss}</p>
        </li>
      ))}
    </ol>
  );
}