const STEP_ART: Record<string, { paths: string; accent: string }> = {
  Remember: {
    accent: '#f97316',
    paths: 'M32 8 C20 8 12 18 12 28 C12 38 20 48 32 52 C44 48 52 38 52 28 C52 18 44 8 32 8 M32 20 v16 M24 28 h16',
  },
  Retrieve: {
    accent: '#fb923c',
    paths: 'M16 28 L32 12 L48 28 M24 28 v16 h16 v-16',
  },
  Restore: {
    accent: '#fbbf24',
    paths: 'M12 32 C12 20 20 12 32 12 C44 12 52 20 52 32 M20 32 h24 M32 20 v24',
  },
  Rise: {
    accent: '#f97316',
    paths: 'M32 48 L16 28 L24 28 L24 12 L40 12 L40 28 L48 28 Z',
  },
};

export function PhilosophyStepGraphic({ verb, index }: { verb: string; index: number }) {
  const art = STEP_ART[verb] ?? STEP_ART.Remember;

  return (
    <div className="relative mb-4 flex h-16 w-16 items-center justify-center" aria-hidden>
      <div
        className="absolute inset-0 rounded-2xl opacity-20"
        style={{ background: `radial-gradient(circle at 30% 30%, ${art.accent}, transparent 70%)` }}
      />
      <svg viewBox="0 0 64 64" className="h-14 w-14" xmlns="http://www.w3.org/2000/svg">
        <rect x="4" y="4" width="56" height="56" rx="14" fill="#111827" stroke="#374151" strokeWidth="1" />
        <path
          d={art.paths}
          fill="none"
          stroke={art.accent}
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          transform="translate(0 4)"
        />
        <text x="32" y="58" textAnchor="middle" fill="#6b7280" fontSize="8" fontWeight="600">
          {String(index + 1).padStart(2, '0')}
        </text>
      </svg>
    </div>
  );
}
