// ============================================================================
// Silhouette portraits — one per character
// ============================================================================

function Silhouette({ kind, size = 86, color = '#3a2418' }) {
  const w = size;
  const h = Math.round(size * 0.7);
  const props = { width: w, height: h, viewBox: '0 0 96 66' };
  const baseGrad = `silh-${kind}`;
  const stops = (
    <defs>
      <radialGradient id={baseGrad} cx="50%" cy="35%" r="70%">
        <stop offset="0%" stopColor={color} />
        <stop offset="100%" stopColor="#0a0604" />
      </radialGradient>
    </defs>
  );
  // shared shoulders & face base
  const shoulders = <path d="M14 66 Q14 50 30 46 Q40 44 48 44 Q56 44 66 46 Q82 50 82 66 Z" fill={`url(#${baseGrad})`} />;
  const collar = <path d="M40 38 L40 46 L56 46 L56 38 Z" fill="#0a0604" />;
  const eyes = (
    <g>
      <line x1="42" y1="34" x2="46" y2="34" stroke="#ffb347" strokeWidth="1.4" strokeLinecap="round" />
      <line x1="50" y1="34" x2="54" y2="34" stroke="#ffb347" strokeWidth="1.4" strokeLinecap="round" />
    </g>
  );
  const faceOval = <ellipse cx="48" cy="34" rx="11" ry="10" fill="#0a0604" />;

  // per-character hat / accessory
  let hat = null, extra = null;
  switch (kind) {
    case 'drifter':
      // wide hat
      hat = (
        <g>
          <ellipse cx="48" cy="24" rx="42" ry="4" fill="#0a0604" />
          <path d="M30 24 Q34 8 48 6 Q62 8 66 24 Z" fill="#0a0604" />
          <path d="M30 24 Q30 22 32 22 L64 22 Q66 22 66 24 Z" fill="#1a0f08" />
          {/* hat band */}
          <rect x="32" y="20" width="32" height="2" fill="#2a1810" />
        </g>
      );
      break;
    case 'preacher':
      // tall narrow stovepipe + white collar
      hat = (
        <g>
          <rect x="36" y="2" width="24" height="20" fill="#0a0604" />
          <ellipse cx="48" cy="22" rx="26" ry="3" fill="#0a0604" />
        </g>
      );
      extra = <path d="M42 42 L42 46 L54 46 L54 42 L50 40 L46 40 Z" fill="#e8d4a8" />;
      break;
    case 'gunhand':
      // flat-top hat, bandana
      hat = (
        <g>
          <ellipse cx="48" cy="22" rx="32" ry="3" fill="#0a0604" />
          <rect x="34" y="10" width="28" height="12" fill="#0a0604" />
        </g>
      );
      extra = <path d="M40 40 Q48 44 56 40 L56 46 L40 46 Z" fill="#8b1a1a" />;
      break;
    case 'widow':
      // black veil — drapes over face/shoulders
      hat = (
        <g>
          <ellipse cx="48" cy="22" rx="30" ry="4" fill="#0a0604" />
          <path d="M22 22 Q22 48 36 56 L60 56 Q74 48 74 22 Z" fill="#0a0604" opacity="0.9" />
          {/* faint eye glow through veil */}
        </g>
      );
      return (
        <svg {...props}>
          {stops}
          {shoulders}
          {hat}
          {/* veil glints */}
          <line x1="42" y1="34" x2="46" y2="34" stroke="#ffb347" strokeWidth="1" opacity="0.6" />
          <line x1="50" y1="34" x2="54" y2="34" stroke="#ffb347" strokeWidth="1" opacity="0.6" />
        </svg>
      );
    case 'greenhorn':
      // small cap, baby face
      hat = (
        <g>
          <ellipse cx="48" cy="22" rx="22" ry="3" fill="#0a0604" />
          <path d="M36 22 Q36 12 48 10 Q60 12 60 22 Z" fill="#1a0f08" />
        </g>
      );
      break;
    case 'gambler':
      // visor / dealer cap
      hat = (
        <g>
          <ellipse cx="48" cy="22" rx="32" ry="3" fill="#0a0604" />
          <path d="M30 22 Q30 14 48 12 Q66 14 66 22 Z" fill="#1a0f08" />
          {/* dealer band */}
          <rect x="30" y="18" width="36" height="2" fill="#8b6914" />
        </g>
      );
      break;
    case 'marshal':
      // big lawman hat + star
      hat = (
        <g>
          <ellipse cx="48" cy="24" rx="44" ry="4" fill="#0a0604" />
          <path d="M28 24 Q32 6 48 4 Q64 6 68 24 Z" fill="#0a0604" />
          <path d="M28 24 Q28 22 30 22 L66 22 Q68 22 68 24 Z" fill="#1a0f08" />
        </g>
      );
      extra = (
        <path
          d="M48 52 L49.5 55 L53 55.4 L50.3 57.6 L51.2 60.8 L48 59 L44.8 60.8 L45.7 57.6 L43 55.4 L46.5 55 Z"
          fill="#c9a961"
        />
      );
      break;
    case 'outlaw':
      // bandana over face + tall hat
      hat = (
        <g>
          <ellipse cx="48" cy="22" rx="40" ry="4" fill="#0a0604" />
          <path d="M30 22 Q30 4 48 2 Q66 4 66 22 Z" fill="#0a0604" />
        </g>
      );
      extra = <path d="M36 36 Q48 42 60 36 L60 46 L36 46 Z" fill="#1a1a1a" />;
      break;
    default:
      hat = null;
  }

  return (
    <svg {...props}>
      {stops}
      {hat}
      {shoulders}
      {collar}
      {faceOval}
      {eyes}
      {extra}
    </svg>
  );
}

window.Silhouette = Silhouette;