/* global React */
// Card art — generated SVG illustration per card.
// Style: line-art, restrained palette, art-print quality.

const ART_PALETTE = {
  ink: '#1a1a1a',
  gold: '#8a7048',
  muted: '#a8a6a0',
  paper: '#ffffff',
  wash: '#f6f5f1',
  red: '#8c4030',
  blue: '#384e6e'
};

const SUIT_COLOR = {
  major:    '#8a7048',
  wands:    '#8c4030',
  cups:     '#1a7a7e',
  swords:   '#74788a',
  pentacles:'#6b5a3a'
};

// SVG primitive helpers
const Stars = ({n=5, seed=0}) => {
  const items = [];
  for (let i = 0; i < n; i++) {
    const x = ((seed * 13 + i * 47) % 100);
    const y = ((seed * 7 + i * 31) % 100);
    items.push(<circle key={i} cx={x} cy={y} r="0.4" fill={ART_PALETTE.gold} opacity="0.6"/>);
  }
  return <g>{items}</g>;
};

// Suit pip shapes
const Pip = ({type, x, y, size=8, color}) => {
  const c = color || SUIT_COLOR[type] || ART_PALETTE.ink;
  if (type === 'wands') {
    return <g transform={`translate(${x},${y})`}>
      <line x1={-size/2} y1={size/2} x2={size/2} y2={-size/2} stroke={c} strokeWidth="1.2" strokeLinecap="round"/>
      <circle cx={size/2} cy={-size/2} r="1.5" fill={c}/>
      <circle cx={-size/2} cy={size/2} r="1.5" fill={c}/>
    </g>;
  }
  if (type === 'cups') {
    return <g transform={`translate(${x},${y})`}>
      <path d={`M ${-size/2} ${-size/3} Q 0 ${size/2} ${size/2} ${-size/3} L ${size/3} ${-size/3} L ${-size/3} ${-size/3} Z`} fill="none" stroke={c} strokeWidth="1"/>
      <line x1="0" y1={size/3} x2="0" y2={size/2} stroke={c} strokeWidth="1"/>
    </g>;
  }
  if (type === 'swords') {
    return <g transform={`translate(${x},${y})`}>
      <line x1="0" y1={-size/2} x2="0" y2={size/2} stroke={c} strokeWidth="1.2" strokeLinecap="round"/>
      <line x1={-size/3} y1={size/4} x2={size/3} y2={size/4} stroke={c} strokeWidth="1"/>
    </g>;
  }
  if (type === 'pentacles') {
    return <g transform={`translate(${x},${y})`}>
      <circle cx="0" cy="0" r={size/2} fill="none" stroke={c} strokeWidth="1"/>
      <path d={`M 0 ${-size/2.4} L ${size/3} ${size/4} L ${-size/2.5} ${-size/8} L ${size/2.5} ${-size/8} L ${-size/3} ${size/4} Z`}
        fill="none" stroke={c} strokeWidth="0.7"/>
    </g>;
  }
  return null;
};

window.ART_PALETTE = ART_PALETTE;
window.SUIT_COLOR = SUIT_COLOR;
window.Pip = Pip;
window.Stars = Stars;