/* global React, ART_PALETTE, SUIT_COLOR, Pip */
// Card face — generic illustration that adapts per card.
// Each card has: ornate frame, central glyph, suit/number indicators, name plate.

// Major arcana glyphs (simplified line illustrations)
const MAJOR_GLYPHS = {
  'fool':           (c) => <g><circle cx="50" cy="55" r="14" fill="none" stroke={c} strokeWidth="0.8"/><path d="M 35 80 Q 50 95 65 80 L 60 100 L 40 100 Z" fill="none" stroke={c} strokeWidth="0.8"/><path d="M 30 90 L 25 75" stroke={c} strokeWidth="0.7" strokeLinecap="round"/><circle cx="22" cy="73" r="3" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 20 105 Q 50 110 80 105" fill="none" stroke={c} strokeWidth="0.5" strokeDasharray="2 2"/></g>,
  'magician':       (c) => <g><circle cx="50" cy="50" r="3" fill={c}/><path d="M 50 25 L 50 15 M 47 18 L 50 15 L 53 18" stroke={c} strokeWidth="0.6" fill="none"/><circle cx="50" cy="55" r="14" fill="none" stroke={c} strokeWidth="0.8"/><line x1="35" y1="85" x2="65" y2="85" stroke={c} strokeWidth="0.6"/><circle cx="40" cy="90" r="2" fill="none" stroke={c} strokeWidth="0.5"/><line x1="48" y1="88" x2="52" y2="92" stroke={c} strokeWidth="0.5"/><path d="M 56 88 L 60 92 L 56 96" fill="none" stroke={c} strokeWidth="0.5"/><circle cx="64" cy="92" r="1.5" fill={c}/></g>,
  'high-priestess': (c) => <g><line x1="30" y1="30" x2="30" y2="100" stroke={c} strokeWidth="0.6"/><line x1="70" y1="30" x2="70" y2="100" stroke={c} strokeWidth="0.6"/><circle cx="50" cy="35" r="3" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 47 35 a 3 3 0 0 1 6 0" fill={c} opacity="0.3"/><circle cx="50" cy="60" r="14" fill="none" stroke={c} strokeWidth="0.8"/><path d="M 36 95 Q 50 105 64 95" fill="none" stroke={c} strokeWidth="0.6"/></g>,
  'empress':        (c) => <g><circle cx="50" cy="35" r="4" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 42 33 L 38 28 M 50 30 L 50 24 M 58 33 L 62 28" stroke={c} strokeWidth="0.5"/><circle cx="50" cy="60" r="14" fill="none" stroke={c} strokeWidth="0.8"/><path d="M 30 90 Q 50 80 70 90 L 70 105 L 30 105 Z" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 25 105 Q 50 115 75 105" fill="none" stroke={c} strokeWidth="0.4" strokeDasharray="1.5 2"/></g>,
  'emperor':        (c) => <g><path d="M 40 30 L 45 22 L 50 30 L 55 22 L 60 30 L 60 36 L 40 36 Z" fill="none" stroke={c} strokeWidth="0.6"/><circle cx="50" cy="55" r="13" fill="none" stroke={c} strokeWidth="0.8"/><path d="M 32 80 L 32 105 L 68 105 L 68 80 L 60 80 L 60 105 M 40 80 L 40 105" fill="none" stroke={c} strokeWidth="0.6"/></g>,
  'hierophant':     (c) => <g><path d="M 45 25 L 50 18 L 55 25 L 50 32 Z" fill="none" stroke={c} strokeWidth="0.6"/><line x1="50" y1="32" x2="50" y2="42" stroke={c} strokeWidth="0.5"/><circle cx="50" cy="55" r="13" fill="none" stroke={c} strokeWidth="0.8"/><line x1="45" y1="80" x2="45" y2="105" stroke={c} strokeWidth="0.5"/><line x1="55" y1="80" x2="55" y2="105" stroke={c} strokeWidth="0.5"/></g>,
  'lovers':         (c) => <g><circle cx="38" cy="50" r="10" fill="none" stroke={c} strokeWidth="0.7"/><circle cx="62" cy="50" r="10" fill="none" stroke={c} strokeWidth="0.7"/><path d="M 50 80 q -8 0 -8 8 a 6 6 0 0 1 8 -2 a 6 6 0 0 1 8 2 q 0 -8 -8 -8" fill="none" stroke={c} strokeWidth="0.7"/><path d="M 50 30 L 48 22 L 50 14 L 52 22 Z" fill="none" stroke={c} strokeWidth="0.4"/></g>,
  'chariot':        (c) => <g><rect x="32" y="55" width="36" height="22" fill="none" stroke={c} strokeWidth="0.7"/><circle cx="38" cy="82" r="6" fill="none" stroke={c} strokeWidth="0.6"/><circle cx="62" cy="82" r="6" fill="none" stroke={c} strokeWidth="0.6"/><circle cx="50" cy="40" r="4" fill="none" stroke={c} strokeWidth="0.6"/><line x1="42" y1="55" x2="42" y2="50" stroke={c} strokeWidth="0.5"/><line x1="58" y1="55" x2="58" y2="50" stroke={c} strokeWidth="0.5"/></g>,
  'strength':       (c) => <g><path d="M 50 30 Q 45 28 45 35 Q 50 32 55 35 Q 55 28 50 30" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 30 65 Q 30 50 50 50 Q 70 50 70 65 Q 70 90 50 90 Q 30 90 30 65 Z" fill="none" stroke={c} strokeWidth="0.7"/><circle cx="42" cy="62" r="1" fill={c}/><circle cx="58" cy="62" r="1" fill={c}/><path d="M 42 72 Q 50 76 58 72" fill="none" stroke={c} strokeWidth="0.5"/></g>,
  'hermit':         (c) => <g><circle cx="50" cy="35" r="3" fill="none" stroke={c} strokeWidth="0.5"/><path d="M 35 45 Q 50 40 65 45 L 65 95 L 35 95 Z" fill="none" stroke={c} strokeWidth="0.7"/><circle cx="65" cy="55" r="4" fill="none" stroke={c} strokeWidth="0.6"/><circle cx="65" cy="55" r="1.5" fill={c}/><line x1="65" y1="59" x2="65" y2="80" stroke={c} strokeWidth="0.5"/></g>,
  'wheel':          (c) => <g><circle cx="50" cy="60" r="22" fill="none" stroke={c} strokeWidth="0.8"/><circle cx="50" cy="60" r="14" fill="none" stroke={c} strokeWidth="0.5"/><circle cx="50" cy="60" r="3" fill="none" stroke={c} strokeWidth="0.5"/>{Array.from({length:8}).map((_,i)=>{const a=(i*Math.PI*2)/8;return <line key={i} x1={50+Math.cos(a)*3} y1={60+Math.sin(a)*3} x2={50+Math.cos(a)*22} y2={60+Math.sin(a)*22} stroke={c} strokeWidth="0.4"/>;})}</g>,
  'justice':        (c) => <g><line x1="50" y1="30" x2="50" y2="95" stroke={c} strokeWidth="0.7"/><line x1="30" y1="45" x2="70" y2="45" stroke={c} strokeWidth="0.6"/><circle cx="32" cy="55" r="6" fill="none" stroke={c} strokeWidth="0.5"/><circle cx="68" cy="55" r="6" fill="none" stroke={c} strokeWidth="0.5"/><line x1="32" y1="45" x2="32" y2="49" stroke={c} strokeWidth="0.4"/><line x1="68" y1="45" x2="68" y2="49" stroke={c} strokeWidth="0.4"/><path d="M 47 25 L 50 20 L 53 25 Z" fill="none" stroke={c} strokeWidth="0.5"/></g>,
  'hanged-man':     (c) => <g><line x1="25" y1="25" x2="75" y2="25" stroke={c} strokeWidth="0.8"/><line x1="50" y1="25" x2="50" y2="50" stroke={c} strokeWidth="0.5"/><circle cx="50" cy="56" r="6" fill="none" stroke={c} strokeWidth="0.7"/><line x1="50" y1="62" x2="50" y2="85" stroke={c} strokeWidth="0.7"/><line x1="50" y1="85" x2="40" y2="100" stroke={c} strokeWidth="0.5"/><line x1="50" y1="85" x2="60" y2="78" stroke={c} strokeWidth="0.5"/></g>,
  'death':          (c) => <g><circle cx="50" cy="45" r="10" fill="none" stroke={c} strokeWidth="0.7"/><circle cx="46" cy="44" r="1.5" fill={c}/><circle cx="54" cy="44" r="1.5" fill={c}/><line x1="46" y1="50" x2="54" y2="50" stroke={c} strokeWidth="0.4"/><path d="M 35 60 L 65 60 L 60 95 L 40 95 Z" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 30 75 L 25 70 M 70 75 L 75 70" stroke={c} strokeWidth="0.5"/></g>,
  'temperance':     (c) => <g><circle cx="50" cy="40" r="8" fill="none" stroke={c} strokeWidth="0.7"/><path d="M 35 45 Q 30 30 25 35 Q 28 22 40 28 M 65 45 Q 70 30 75 35 Q 72 22 60 28" fill="none" stroke={c} strokeWidth="0.5"/><path d="M 38 55 Q 50 70 62 55 L 60 90 L 40 90 Z" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 35 75 Q 40 78 45 75" fill="none" stroke={c} strokeWidth="0.4"/><path d="M 55 75 Q 60 78 65 75" fill="none" stroke={c} strokeWidth="0.4"/></g>,
  'devil':          (c) => <g><path d="M 40 30 L 35 20 M 60 30 L 65 20" stroke={c} strokeWidth="0.7"/><circle cx="50" cy="40" r="10" fill="none" stroke={c} strokeWidth="0.7"/><circle cx="46" cy="38" r="1" fill={c}/><circle cx="54" cy="38" r="1" fill={c}/><path d="M 46 44 L 50 47 L 54 44" fill="none" stroke={c} strokeWidth="0.4"/><path d="M 38 55 L 62 55 L 60 95 L 40 95 Z" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 35 80 L 25 80 M 65 80 L 75 80" stroke={c} strokeWidth="0.4" strokeDasharray="1 1"/></g>,
  'tower':          (c) => <g><path d="M 38 30 L 62 30 L 65 35 L 35 35 Z" fill="none" stroke={c} strokeWidth="0.6"/><rect x="38" y="35" width="24" height="55" fill="none" stroke={c} strokeWidth="0.7"/><line x1="44" y1="45" x2="44" y2="52" stroke={c} strokeWidth="0.5"/><line x1="56" y1="45" x2="56" y2="52" stroke={c} strokeWidth="0.5"/><path d="M 50 22 L 45 12 M 50 22 L 55 12 M 50 22 L 50 8" stroke={c} strokeWidth="0.5"/><path d="M 30 60 L 22 65 M 70 60 L 78 55" stroke={c} strokeWidth="0.4"/></g>,
  'star':           (c) => <g><path d="M 50 22 L 54 38 L 70 38 L 57 48 L 62 64 L 50 54 L 38 64 L 43 48 L 30 38 L 46 38 Z" fill="none" stroke={c} strokeWidth="0.7"/>{Array.from({length:6}).map((_,i)=>{const a=(i*Math.PI*2)/6+Math.PI/6;return <path key={i} d={`M ${50+Math.cos(a)*30} ${50+Math.sin(a)*30} l 1 -3 l 1 3 l 3 1 l -3 1 l -1 3 l -1 -3 l -3 -1 z`} fill="none" stroke={c} strokeWidth="0.3"/>;})}<path d="M 35 80 Q 50 75 65 80 L 65 95 L 35 95 Z" fill="none" stroke={c} strokeWidth="0.5"/></g>,
  'moon':           (c) => <g><path d="M 35 40 A 18 18 0 1 0 50 22 A 14 14 0 1 1 35 40 Z" fill="none" stroke={c} strokeWidth="0.7"/><path d="M 30 75 Q 50 65 70 75" fill="none" stroke={c} strokeWidth="0.4" strokeDasharray="1.5 2"/><path d="M 35 85 L 38 95 M 65 85 L 62 95 M 50 88 L 50 100" stroke={c} strokeWidth="0.5"/><circle cx="50" cy="100" r="2" fill="none" stroke={c} strokeWidth="0.4"/></g>,
  'sun':            (c) => <g><circle cx="50" cy="50" r="14" fill="none" stroke={c} strokeWidth="0.8"/>{Array.from({length:12}).map((_,i)=>{const a=(i*Math.PI*2)/12;return <line key={i} x1={50+Math.cos(a)*16} y1={50+Math.sin(a)*16} x2={50+Math.cos(a)*22} y2={50+Math.sin(a)*22} stroke={c} strokeWidth="0.5"/>;})}<circle cx="46" cy="48" r="0.8" fill={c}/><circle cx="54" cy="48" r="0.8" fill={c}/><path d="M 45 54 Q 50 58 55 54" fill="none" stroke={c} strokeWidth="0.4"/><path d="M 30 85 Q 50 80 70 85 L 70 100 L 30 100 Z" fill="none" stroke={c} strokeWidth="0.5"/></g>,
  'judgement':      (c) => <g><path d="M 35 30 L 65 30 L 70 25 L 30 25 Z" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 38 30 L 38 50 Q 38 45 42 45 L 42 50" fill="none" stroke={c} strokeWidth="0.5"/><circle cx="50" cy="65" r="8" fill="none" stroke={c} strokeWidth="0.7"/><path d="M 38 80 L 62 80 L 60 100 L 40 100 Z" fill="none" stroke={c} strokeWidth="0.6"/><path d="M 25 50 L 32 55 M 75 50 L 68 55" stroke={c} strokeWidth="0.4" strokeDasharray="1 1"/></g>,
  'world':          (c) => <g><ellipse cx="50" cy="60" rx="20" ry="28" fill="none" stroke={c} strokeWidth="0.8"/><path d="M 45 60 Q 50 50 55 60 Q 50 70 45 60" fill="none" stroke={c} strokeWidth="0.5"/><circle cx="20" cy="30" r="3" fill="none" stroke={c} strokeWidth="0.4"/><circle cx="80" cy="30" r="3" fill="none" stroke={c} strokeWidth="0.4"/><circle cx="20" cy="90" r="3" fill="none" stroke={c} strokeWidth="0.4"/><circle cx="80" cy="90" r="3" fill="none" stroke={c} strokeWidth="0.4"/><path d="M 23 30 Q 35 35 45 38 M 77 30 Q 65 35 55 38" fill="none" stroke={c} strokeWidth="0.3" strokeDasharray="1 1"/></g>,
};

window.MAJOR_GLYPHS = MAJOR_GLYPHS;

