// illustrations.jsx — cute SVG jamnik (dachshund) + kruk (raven) + americana bits
// Shared by all variants. Colors are parametrizable so each theme can re-skin.

function Jamnik({ size = 120, bodyColor = '#8b4a2a', earColor = '#5a2f1a', accent = '#c8342b', pose = 'stand', style }) {
  // pose: stand | sit | jump | sleep | love
  const common = {
    fill: bodyColor,
    stroke: '#2a1810',
    strokeWidth: 2.5,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };
  if (pose === 'jump') {
    return (
      <svg viewBox="0 0 200 140" width={size} height={size * 0.7} style={style}>
        {/* motion lines */}
        <path d="M10 100 L30 100 M15 115 L35 115 M5 85 L25 85" stroke="#2a1810" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.5"/>
        {/* body (arched) */}
        <path d="M45 70 Q100 30 165 70 L165 85 Q100 55 45 85 Z" {...common}/>
        {/* head */}
        <ellipse cx="170" cy="70" rx="22" ry="18" {...common}/>
        {/* snout */}
        <ellipse cx="188" cy="75" rx="10" ry="7" {...common}/>
        {/* ear */}
        <path d="M165 55 Q158 45 162 72 Q168 65 172 58 Z" fill={earColor} stroke="#2a1810" strokeWidth="2"/>
        {/* eye */}
        <circle cx="174" cy="68" r="2" fill="#2a1810"/>
        <circle cx="174.5" cy="67.5" r="0.6" fill="#fff"/>
        {/* nose */}
        <ellipse cx="194" cy="74" rx="3" ry="2.2" fill="#2a1810"/>
        {/* legs (bent, jumping) */}
        <path d="M65 85 Q60 100 70 108" {...common} fill="none" strokeWidth="8"/>
        <path d="M140 85 Q145 100 135 108" {...common} fill="none" strokeWidth="8"/>
        <path d="M85 82 Q82 95 88 102" {...common} fill="none" strokeWidth="7"/>
        <path d="M120 82 Q124 95 118 102" {...common} fill="none" strokeWidth="7"/>
        {/* tail up */}
        <path d="M45 72 Q32 55 28 42" stroke="#2a1810" strokeWidth="7" fill="none" strokeLinecap="round"/>
        <path d="M45 72 Q32 55 28 42" stroke={bodyColor} strokeWidth="4" fill="none" strokeLinecap="round"/>
        {/* collar */}
        <path d="M150 68 Q158 75 154 85" stroke={accent} strokeWidth="3.5" fill="none"/>
      </svg>
    );
  }
  if (pose === 'sleep') {
    return (
      <svg viewBox="0 0 200 100" width={size} height={size * 0.5} style={style}>
        <ellipse cx="100" cy="70" rx="85" ry="20" {...common}/>
        <ellipse cx="165" cy="62" rx="22" ry="16" {...common}/>
        <ellipse cx="182" cy="66" rx="9" ry="6" {...common}/>
        <path d="M160 50 Q156 44 162 68 Q168 60 170 52 Z" fill={earColor} stroke="#2a1810" strokeWidth="2"/>
        <path d="M170 62 Q173 63 176 62" stroke="#2a1810" strokeWidth="1.8" fill="none"/>
        <ellipse cx="187" cy="65" rx="2.5" ry="1.8" fill="#2a1810"/>
        <path d="M30 68 Q18 55 15 45" stroke="#2a1810" strokeWidth="6" fill="none" strokeLinecap="round"/>
        <path d="M30 68 Q18 55 15 45" stroke={bodyColor} strokeWidth="3.2" fill="none" strokeLinecap="round"/>
        {/* zzz */}
        <text x="140" y="35" fontSize="14" fill="#2a1810" fontFamily="serif" fontStyle="italic">z</text>
        <text x="148" y="25" fontSize="18" fill="#2a1810" fontFamily="serif" fontStyle="italic">z</text>
        <text x="158" y="13" fontSize="22" fill="#2a1810" fontFamily="serif" fontStyle="italic">z</text>
      </svg>
    );
  }
  if (pose === 'love') {
    return (
      <svg viewBox="0 0 200 160" width={size} height={size * 0.8} style={style}>
        {/* hearts */}
        <path d="M50 35 Q45 25 55 25 Q65 25 60 35 Q58 42 55 45 Q52 42 50 35 Z" fill={accent}/>
        <path d="M35 20 Q32 14 38 14 Q44 14 41 20 Q40 24 38 26 Q36 24 35 20 Z" fill={accent}/>
        {/* body */}
        <ellipse cx="100" cy="95" rx="68" ry="17" {...common}/>
        {/* head */}
        <ellipse cx="160" cy="85" rx="23" ry="19" {...common}/>
        <ellipse cx="180" cy="90" rx="10" ry="7" {...common}/>
        {/* ear */}
        <path d="M155 70 Q148 60 154 90 Q162 82 165 72 Z" fill={earColor} stroke="#2a1810" strokeWidth="2"/>
        {/* eye - heart */}
        <path d="M163 82 Q161 78 165 78 Q168 78 166 82 Q165 85 163 86 Q162 85 163 82 Z" fill={accent}/>
        <ellipse cx="188" cy="91" rx="3" ry="2.2" fill="#2a1810"/>
        {/* smile */}
        <path d="M183 95 Q187 97 191 94" stroke="#2a1810" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
        {/* legs */}
        <rect x="60" y="105" width="7" height="20" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
        <rect x="80" y="105" width="7" height="20" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
        <rect x="125" y="105" width="7" height="20" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
        <rect x="145" y="105" width="7" height="20" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
        {/* tail wag */}
        <path d="M32 92 Q18 85 22 72" stroke="#2a1810" strokeWidth="7" fill="none" strokeLinecap="round"/>
        <path d="M32 92 Q18 85 22 72" stroke={bodyColor} strokeWidth="4" fill="none" strokeLinecap="round"/>
        {/* collar */}
        <path d="M140 82 Q148 92 145 102" stroke={accent} strokeWidth="3.5" fill="none"/>
      </svg>
    );
  }
  // default: stand
  return (
    <svg viewBox="0 0 200 140" width={size} height={size * 0.7} style={style}>
      {/* body */}
      <ellipse cx="100" cy="80" rx="70" ry="18" {...common}/>
      {/* head */}
      <ellipse cx="165" cy="70" rx="23" ry="19" {...common}/>
      {/* snout */}
      <ellipse cx="185" cy="75" rx="10" ry="7" {...common}/>
      {/* ear */}
      <path d="M160 55 Q152 44 158 75 Q168 68 170 57 Z" fill={earColor} stroke="#2a1810" strokeWidth="2"/>
      {/* eye */}
      <circle cx="168" cy="67" r="2.2" fill="#2a1810"/>
      <circle cx="168.7" cy="66.3" r="0.6" fill="#fff"/>
      {/* brow */}
      <path d="M164 62 Q168 60 172 63" stroke="#2a1810" strokeWidth="1.3" fill="none" strokeLinecap="round"/>
      {/* nose */}
      <ellipse cx="191" cy="74" rx="3" ry="2.2" fill="#2a1810"/>
      {/* mouth */}
      <path d="M186 79 Q189 82 193 79" stroke="#2a1810" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      {/* legs */}
      <rect x="55" y="90" width="7" height="22" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
      <rect x="78" y="90" width="7" height="22" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
      <rect x="128" y="90" width="7" height="22" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
      <rect x="148" y="90" width="7" height="22" rx="3" fill={bodyColor} stroke="#2a1810" strokeWidth="2"/>
      {/* tail */}
      <path d="M32 80 Q18 70 20 55" stroke="#2a1810" strokeWidth="7" fill="none" strokeLinecap="round"/>
      <path d="M32 80 Q18 70 20 55" stroke={bodyColor} strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* collar */}
      <path d="M145 70 Q152 80 148 92" stroke={accent} strokeWidth="3.5" fill="none"/>
      {/* collar tag */}
      <circle cx="149" cy="92" r="2.5" fill="#e8c547" stroke="#2a1810" strokeWidth="1.2"/>
    </svg>
  );
}

function Kruk({ size = 100, bodyColor = '#1a1420', accent = '#c8342b', pose = 'stand', style }) {
  const common = {
    fill: bodyColor,
    stroke: '#000',
    strokeWidth: 2,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };
  if (pose === 'fly') {
    return (
      <svg viewBox="0 0 180 140" width={size} height={size * 0.78} style={style}>
        {/* body */}
        <ellipse cx="90" cy="80" rx="32" ry="22" {...common}/>
        {/* head */}
        <circle cx="120" cy="70" r="18" {...common}/>
        {/* beak */}
        <path d="M135 70 L155 68 L135 76 Z" fill="#d4a028" stroke="#2a1810" strokeWidth="1.5" strokeLinejoin="round"/>
        {/* eye */}
        <circle cx="122" cy="67" r="2.5" fill="#e8c547"/>
        <circle cx="122" cy="67" r="1" fill="#000"/>
        {/* wings spread */}
        <path d="M75 70 Q40 30 10 45 Q35 60 60 75 Z" {...common}/>
        <path d="M100 72 Q135 35 165 45 Q140 65 115 80 Z" {...common}/>
        {/* wing details */}
        <path d="M30 50 Q50 55 60 70" stroke="#000" strokeWidth="1.2" fill="none" opacity="0.4"/>
        <path d="M140 50 Q125 60 115 75" stroke="#000" strokeWidth="1.2" fill="none" opacity="0.4"/>
        {/* tail */}
        <path d="M62 85 L45 100 L55 88 L48 108 L60 92 Z" {...common}/>
        {/* feet tucked */}
        <path d="M85 98 L82 108 M95 98 L98 108" stroke="#d4a028" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    );
  }
  if (pose === 'heart') {
    return (
      <svg viewBox="0 0 140 160" width={size} height={size * 1.14} style={style}>
        {/* heart in beak */}
        <path d="M65 22 Q60 10 72 10 Q84 10 78 22 Q74 32 72 36 Q69 32 65 22 Z" fill={accent} stroke="#2a1810" strokeWidth="1.5"/>
        {/* body */}
        <ellipse cx="70" cy="105" rx="34" ry="38" {...common}/>
        {/* head */}
        <circle cx="70" cy="65" r="22" {...common}/>
        {/* beak holding heart */}
        <path d="M68 48 L72 32 L76 48 Z" fill="#d4a028" stroke="#2a1810" strokeWidth="1.5" strokeLinejoin="round"/>
        {/* eyes */}
        <circle cx="63" cy="62" r="2.5" fill="#e8c547"/>
        <circle cx="63" cy="62" r="1.1" fill="#000"/>
        <circle cx="77" cy="62" r="2.5" fill="#e8c547"/>
        <circle cx="77" cy="62" r="1.1" fill="#000"/>
        {/* wing */}
        <path d="M50 95 Q35 110 48 135 Q55 120 58 100 Z" fill="#000" opacity="0.3"/>
        {/* feet */}
        <path d="M62 142 L58 152 M62 142 L62 152 M62 142 L66 152" stroke="#d4a028" strokeWidth="1.8" strokeLinecap="round"/>
        <path d="M78 142 L74 152 M78 142 L78 152 M78 142 L82 152" stroke="#d4a028" strokeWidth="1.8" strokeLinecap="round"/>
      </svg>
    );
  }
  // default: stand
  return (
    <svg viewBox="0 0 140 160" width={size} height={size * 1.14} style={style}>
      {/* body */}
      <ellipse cx="70" cy="105" rx="34" ry="38" {...common}/>
      {/* head */}
      <circle cx="70" cy="65" r="22" {...common}/>
      {/* beak */}
      <path d="M85 63 L105 65 L85 72 Z" fill="#d4a028" stroke="#2a1810" strokeWidth="1.5" strokeLinejoin="round"/>
      {/* eye */}
      <circle cx="75" cy="60" r="3" fill="#e8c547"/>
      <circle cx="75" cy="60" r="1.3" fill="#000"/>
      <circle cx="75.5" cy="59.5" r="0.5" fill="#fff"/>
      {/* wing */}
      <path d="M55 90 Q40 110 55 138 Q62 118 65 95 Z" fill="#000" opacity="0.35"/>
      <path d="M55 90 Q45 105 55 130" stroke="#000" strokeWidth="1" fill="none" opacity="0.5"/>
      {/* feet */}
      <path d="M62 142 L58 152 M62 142 L62 152 M62 142 L66 152" stroke="#d4a028" strokeWidth="1.8" strokeLinecap="round"/>
      <path d="M78 142 L74 152 M78 142 L78 152 M78 142 L82 152" stroke="#d4a028" strokeWidth="1.8" strokeLinecap="round"/>
      {/* little bowtie */}
      <path d="M62 82 L55 78 L55 86 Z M78 82 L85 78 L85 86 Z" fill={accent} stroke="#2a1810" strokeWidth="1"/>
      <circle cx="70" cy="82" r="2" fill={accent} stroke="#2a1810" strokeWidth="1"/>
    </svg>
  );
}

// star for americana bg
function Star({ size = 20, color = '#c8342b', style }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} style={style}>
      <path d="M12 2 L14.5 9 L22 9 L16 13.5 L18.5 21 L12 16.5 L5.5 21 L8 13.5 L2 9 L9.5 9 Z" fill={color} stroke="#2a1810" strokeWidth="1"/>
    </svg>
  );
}

// banner ribbon for labels
function Ribbon({ children, bg = '#c8342b', fg = '#fff8e7', w = 280, h = 60, style }) {
  return (
    <div style={{position:'relative', width:w, height:h, display:'inline-flex', alignItems:'center', justifyContent:'center', ...style}}>
      <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h} style={{position:'absolute', inset:0}}>
        <path d={`M10 10 L${w-10} 10 L${w-25} ${h/2} L${w-10} ${h-10} L10 ${h-10} L25 ${h/2} Z`} fill={bg} stroke="#2a1810" strokeWidth="2"/>
        <path d={`M0 5 L15 ${h/2} L0 ${h-5} Z`} fill={bg} stroke="#2a1810" strokeWidth="2"/>
        <path d={`M${w} 5 L${w-15} ${h/2} L${w} ${h-5} Z`} fill={bg} stroke="#2a1810" strokeWidth="2"/>
      </svg>
      <span style={{position:'relative', color:fg, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', fontSize:h*0.32}}>{children}</span>
    </div>
  );
}

// stamp-style badge
function Stamp({ children, color = '#8b2a2a', rotate = -8, style }) {
  return (
    <div style={{
      display:'inline-block',
      border:`3px double ${color}`,
      color: color,
      padding:'6px 14px',
      fontFamily:'"Special Elite", "Courier New", monospace',
      textTransform:'uppercase',
      letterSpacing:'0.15em',
      fontSize:12,
      fontWeight:700,
      transform:`rotate(${rotate}deg)`,
      opacity:0.88,
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { Jamnik, Kruk, Star, Ribbon, Stamp });
