// Hand-drawn original SVG doodles. All stroke-based, single-color,
// pass `color` + `size` + optional `rot`.
// These are intentionally loose and wobbly — not polished icons.

const wobble = (seed) => {
  // stable per-component jitter for "hand drawn" feel
  let x = Math.sin(seed) * 10000;
  return () => { x = Math.sin(x) * 10000; return (x - Math.floor(x)) * 2 - 1; };
};

const Robot = ({ color = "#1e1e28", size = 64, rot = 0, style }) => (
  <svg viewBox="0 0 64 72" width={size} height={size * 72/64}
       style={{ transform: `rotate(${rot}deg)`, ...style }}>
    <g fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      {/* antennae */}
      <path d="M22 10 L20 3" />
      <circle cx="19.5" cy="2.5" r="2" fill={color}/>
      <path d="M42 10 L44 3" />
      <circle cx="44.5" cy="2.5" r="2" fill={color}/>
      {/* head */}
      <path d="M14 13 L50 11 L51 34 L13 35 Z" />
      {/* eyes */}
      <circle cx="24" cy="22" r="3.2" fill={color}/>
      <circle cx="40" cy="22" r="3.2" fill={color}/>
      {/* smile */}
      <path d="M24 28 Q32 31 40 28" />
      {/* neck */}
      <path d="M28 35 L28 39 L36 39 L36 35" />
      {/* body */}
      <path d="M18 39 L46 39 L47 58 L17 59 Z" />
      <path d="M24 46 L40 46" />
      <circle cx="24" cy="51" r="1.4" fill={color}/>
      <circle cx="32" cy="51" r="1.4" fill={color}/>
      <circle cx="40" cy="51" r="1.4" fill={color}/>
      {/* legs */}
      <path d="M24 59 L23 68" />
      <path d="M40 59 L41 68" />
      <path d="M20 68 L28 68" />
      <path d="M37 68 L45 68" />
      {/* arm */}
      <path d="M18 43 L10 48 L10 55" />
      <path d="M46 43 L54 46 L54 53" />
    </g>
  </svg>
);

const Crab = ({ color = "#b23a2a", size = 56, rot = 0, style }) => (
  <svg viewBox="0 0 64 44" width={size} height={size * 44/64}
       style={{ transform: `rotate(${rot}deg)`, ...style }}>
    <g fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      {/* shell */}
      <path d="M10 26 Q32 8 54 26 Q52 34 32 34 Q12 34 10 26 Z" fill={color} fillOpacity="0.15"/>
      {/* eyes */}
      <path d="M26 20 L24 13" />
      <circle cx="23.5" cy="12" r="1.6" fill={color}/>
      <path d="M38 20 L40 13" />
      <circle cx="40.5" cy="12" r="1.6" fill={color}/>
      {/* smile */}
      <path d="M28 28 Q32 30 36 28" />
      {/* claws */}
      <path d="M12 27 L4 22 L2 14" />
      <path d="M4 14 Q-1 18 4 22" />
      <path d="M52 27 L60 22 L62 14" />
      <path d="M60 14 Q65 18 60 22" />
      {/* legs */}
      <path d="M16 32 L11 40" />
      <path d="M22 34 L20 42" />
      <path d="M42 34 L44 42" />
      <path d="M48 32 L53 40" />
    </g>
  </svg>
);

const Block = ({ color = "#1e1e28", fill = "#5b83c9", size = 80, rot = 0, label, style }) => (
  <svg viewBox="0 0 120 40" width={size} height={size * 40/120}
       style={{ transform: `rotate(${rot}deg)`, ...style }}>
    <g strokeLinejoin="round" strokeLinecap="round">
      <path d="M4 14 L28 6 L116 16 L92 30 Z" fill={fill} stroke={color} strokeWidth="2"/>
      <path d="M92 30 L116 16 L116 26 L92 40 Z" fill={color} opacity="0.45" stroke={color} strokeWidth="2"/>
      <path d="M4 14 L4 24 L92 40 L92 30 Z" fill={color} opacity="0.25" stroke={color} strokeWidth="2"/>
      {label && (
        <text x="58" y="22" textAnchor="middle"
              fontFamily="Azeret Mono, monospace" fontSize="8" fontWeight="600"
              fill={color} transform="rotate(-4 58 22)">{label}</text>
      )}
      {/* squiggle on face */}
      <path d="M18 18 q6 -2 10 0 t10 0 t10 0 t10 0"
            fill="none" stroke={color} strokeWidth="1.5" opacity="0.6"/>
    </g>
  </svg>
);

const Sparkle = ({ color = "#e4b23a", size = 18, style }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} style={style}>
    <path d="M12 2 L13.6 10.4 L22 12 L13.6 13.6 L12 22 L10.4 13.6 L2 12 L10.4 10.4 Z"
          fill={color} stroke={color} strokeWidth="1" strokeLinejoin="round"/>
  </svg>
);

const Coin = ({ color = "#1e1e28", fill = "#e4b23a", size = 28, style }) => (
  <svg viewBox="0 0 32 32" width={size} height={size} style={style}>
    <circle cx="16" cy="16" r="13" fill={fill} stroke={color} strokeWidth="2"/>
    <circle cx="16" cy="16" r="9" fill="none" stroke={color} strokeWidth="1.2" opacity="0.5"/>
    <text x="16" y="21" textAnchor="middle" fontFamily="Azeret Mono, monospace"
          fontSize="14" fontWeight="700" fill={color}>$</text>
  </svg>
);

const Squiggle = ({ color = "#1e1e28", w = 80, style }) => (
  <svg viewBox="0 0 80 12" width={w} height={w * 12/80} style={style}>
    <path d="M2 6 q5 -6 10 0 t10 0 t10 0 t10 0 t10 0 t10 0 t10 0"
          fill="none" stroke={color} strokeWidth="2" strokeLinecap="round"/>
  </svg>
);

const Star4 = ({ color = "#1e1e28", size = 14, style }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} style={style}>
    <path d="M8 0 L9.5 6.5 L16 8 L9.5 9.5 L8 16 L6.5 9.5 L0 8 L6.5 6.5 Z"
          fill={color}/>
  </svg>
);

// arrow scribble (for CTA)
const ArrowScribble = ({ color = "#b23a2a", w = 120, style }) => (
  <svg viewBox="0 0 120 40" width={w} height={w * 40/120} style={style}>
    <g fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 28 Q30 6 62 18 T116 16" />
      <path d="M116 16 L107 10" />
      <path d="M116 16 L110 24" />
    </g>
  </svg>
);

// circle scribble (hand drawn circle around something)
const CircleScribble = ({ color = "#b23a2a", style }) => (
  <svg viewBox="0 0 200 80" preserveAspectRatio="none"
       style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', ...style }}>
    <path d="M20 40 Q10 10 100 8 Q190 6 192 42 Q194 78 100 74 Q6 70 22 38 Q26 30 40 26"
          fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round"/>
  </svg>
);

Object.assign(window, { Robot, Crab, Block, Sparkle, Coin, Squiggle, Star4, ArrowScribble, CircleScribble });