// SVG sigils / crests for each advisor (deterministic, abstract)
// Generated by hand to evoke mystical / celestial without AI-slop.

const Crest = ({ kind = 'sun', size = 64, hue = 'purple' }) => {
  const palettes = {
    purple: ['#8e8cf0', '#5e6ffd', '#aa8aca'],
    orange: ['#f2994a', '#bb6bd9', '#f5ad6e'],
    aqua:   ['#56ccf2', '#5e6ffd', '#aa8aca'],
    pink:   ['#bb6bd9', '#c989e1', '#8e8cf0'],
    emerald:['#4dab75', '#1c9478', '#5e6ffd'],
    cobalt: ['#5060b1', '#2b58a2', '#8e8cf0'],
  };
  const p = palettes[hue] || palettes.purple;
  const id = `g-${kind}-${hue}`;

  const Marks = {
    sun: (
      <g>
        <circle cx="32" cy="32" r="11" fill={`url(#${id})`} />
        {Array.from({length: 12}).map((_, i) => {
          const a = (i * 30) * Math.PI / 180;
          const x1 = 32 + Math.cos(a) * 16, y1 = 32 + Math.sin(a) * 16;
          const x2 = 32 + Math.cos(a) * (i % 2 ? 24 : 22), y2 = 32 + Math.sin(a) * (i % 2 ? 24 : 22);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={p[0]} strokeWidth="1.5" strokeLinecap="round"/>;
        })}
      </g>
    ),
    moon: (
      <g>
        <path d="M40 18 A14 14 0 1 0 40 46 A11 11 0 1 1 40 18 Z" fill={`url(#${id})`} />
        <circle cx="22" cy="22" r="1" fill={p[0]} />
        <circle cx="48" cy="50" r="1" fill={p[0]} />
        <circle cx="14" cy="38" r=".8" fill={p[0]} />
      </g>
    ),
    star: (
      <g>
        <path d="M32 14 L36 28 L50 32 L36 36 L32 50 L28 36 L14 32 L28 28 Z" fill={`url(#${id})`} />
        <circle cx="32" cy="32" r="2" fill="white" opacity=".9" />
      </g>
    ),
    eye: (
      <g>
        <path d="M10 32 Q32 16 54 32 Q32 48 10 32 Z" fill="none" stroke={p[0]} strokeWidth="1.5" />
        <circle cx="32" cy="32" r="7" fill={`url(#${id})`} />
        <circle cx="32" cy="32" r="2.5" fill="#0c0c1a" />
        <circle cx="33" cy="31" r="1" fill="white" />
      </g>
    ),
    triangle: (
      <g>
        <path d="M32 14 L52 46 L12 46 Z" fill="none" stroke={p[0]} strokeWidth="1.5" />
        <path d="M32 22 L46 44 L18 44 Z" fill={`url(#${id})`} opacity=".9" />
        <line x1="20" y1="36" x2="44" y2="36" stroke={p[2]} strokeWidth="1" opacity=".7" />
      </g>
    ),
    hand: (
      <g>
        <path d="M22 22 L22 44 Q22 48 26 48 L38 48 Q42 48 42 44 L42 22 Q42 18 38 18 Q34 18 34 22 L34 32 M34 22 Q34 18 30 18 Q26 18 26 22 L26 32" fill={`url(#${id})`} stroke={p[0]} strokeWidth="1" />
        <circle cx="32" cy="34" r="3" fill="#0c0c1a" />
        <circle cx="32" cy="34" r="1" fill={p[0]} />
      </g>
    ),
  };

  return (
    <svg viewBox="0 0 64 64" width={size} height={size}>
      <defs>
        <radialGradient id={id} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={p[0]} />
          <stop offset="60%" stopColor={p[1]} />
          <stop offset="100%" stopColor={p[2]} />
        </radialGradient>
      </defs>
      {Marks[kind] || Marks.star}
    </svg>
  );
};

window.Crest = Crest;