// Original black-cat SVG illustrations — graffiti/stencil inspired
// Not copied from any brand; hand-composed silhouettes with drip accents.

const DRIPS = (color = 'currentColor') => (
  <g fill={color} opacity="0.9">
    <path d="M20 85 Q20 95 22 102 Q24 95 24 85 Z"/>
    <path d="M40 88 Q40 100 42 108 Q44 100 44 88 Z"/>
    <path d="M70 86 Q70 96 72 104 Q74 96 74 86 Z"/>
    <circle cx="30" cy="110" r="1.5"/>
    <circle cx="55" cy="112" r="1"/>
    <circle cx="80" cy="108" r="1.2"/>
  </g>
);

// Prowling cat (from-reference-style but original draw): 3/4 view stalking
function CatProwl({ size = 140, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} className={className} style={style} aria-hidden>
      <g fill={color}>
        {/* body */}
        <path d="M50 120 Q40 100 55 85 Q70 70 95 72 Q120 70 145 85 Q160 100 155 120 Q155 140 140 150 Q120 160 100 158 Q75 160 60 150 Q45 140 50 120 Z"/>
        {/* tail curl */}
        <path d="M45 105 Q20 85 15 55 Q14 35 30 28 Q35 30 32 42 Q28 58 38 72 Q46 82 52 92 Z"/>
        <path d="M30 28 Q38 22 44 26 Q42 32 36 34 Z"/>
        {/* head */}
        <path d="M90 95 Q80 75 95 62 Q110 52 125 62 Q140 75 130 95 Z"/>
        {/* ears */}
        <path d="M92 70 L85 50 L100 62 Z"/>
        <path d="M128 70 L135 50 L120 62 Z"/>
        {/* legs */}
        <path d="M70 145 L68 170 Q68 178 74 178 L80 178 Q84 178 82 170 L82 150 Z"/>
        <path d="M120 148 L118 172 Q118 180 124 180 L130 180 Q134 180 132 172 L132 152 Z"/>
        <path d="M95 155 L94 178 Q94 184 99 184 L104 184 Q108 184 107 178 L107 158 Z"/>
      </g>
      {/* eyes (white cutouts) */}
      <ellipse cx="102" cy="80" rx="3" ry="5" fill="#fff"/>
      <ellipse cx="118" cy="80" rx="3" ry="5" fill="#fff"/>
      <ellipse cx="102" cy="81" rx="1.2" ry="3" fill={color}/>
      <ellipse cx="118" cy="81" rx="1.2" ry="3" fill={color}/>
      {/* drips */}
      <g fill={color}>
        <path d="M52 155 Q52 168 54 176 Q56 168 56 155 Z"/>
        <path d="M148 148 Q148 162 150 172 Q152 162 152 148 Z"/>
      </g>
    </svg>
  );
}

// Simple sitting silhouette — for tags, scatter use
function CatSit({ size = 80, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 100 120" width={size} height={size} className={className} style={style} aria-hidden>
      <g fill={color}>
        {/* tail */}
        <path d="M78 95 Q95 80 92 55 Q90 48 84 52 Q86 62 82 72 Q78 82 74 90 Z"/>
        {/* body */}
        <path d="M30 105 Q22 80 28 55 Q35 40 50 38 Q65 40 72 55 Q78 80 70 105 Q60 110 50 110 Q40 110 30 105 Z"/>
        {/* head */}
        <path d="M38 45 Q32 25 40 15 Q50 8 60 15 Q68 25 62 45 Z"/>
        {/* ears */}
        <path d="M38 22 L34 8 L46 18 Z"/>
        <path d="M62 22 L66 8 L54 18 Z"/>
      </g>
      <ellipse cx="44" cy="30" rx="2" ry="3" fill="#fff"/>
      <ellipse cx="56" cy="30" rx="2" ry="3" fill="#fff"/>
      {/* drip */}
      <path d="M40 108 Q40 118 42 122 Q44 118 44 108 Z" fill={color}/>
      <path d="M60 108 Q60 116 62 120 Q64 116 64 108 Z" fill={color}/>
    </svg>
  );
}

// Running cat — side profile mid-stride, for the globe traversal
function CatRun({ size = 140, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 220 140" width={size} height={size * 140/220} className={className} style={style} aria-hidden>
      <g fill={color}>
        {/* tail streaming back */}
        <path d="M28 55 Q5 45 2 25 Q10 35 22 40 Q30 44 38 50 Z"/>
        {/* body elongated */}
        <path d="M35 75 Q40 55 70 50 Q110 46 150 52 Q180 58 185 78 Q180 92 155 95 Q110 98 70 95 Q45 92 35 75 Z"/>
        {/* head forward */}
        <path d="M160 70 Q170 55 188 58 Q200 65 196 80 Q190 88 175 88 Q162 86 160 70 Z"/>
        {/* ears back */}
        <path d="M168 58 L162 45 L178 52 Z"/>
        <path d="M186 58 L192 45 L180 54 Z"/>
        {/* front legs extended */}
        <path d="M155 92 L175 120 Q178 125 173 127 L168 127 Q163 125 160 118 L150 100 Z"/>
        <path d="M135 94 L120 122 Q118 127 124 128 L129 128 Q134 126 136 120 L144 102 Z"/>
        {/* back legs pushing */}
        <path d="M60 92 L40 115 Q38 120 44 121 L50 121 Q56 119 58 114 L70 100 Z"/>
        <path d="M78 94 L88 118 Q90 124 85 125 L80 125 Q75 123 74 118 L72 102 Z"/>
      </g>
      <ellipse cx="185" cy="72" rx="2" ry="3" fill="#fff"/>
    </svg>
  );
}

// Diving/falling cat — limbs splayed
function CatDive({ size = 160, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 200 240" width={size * 200/240} height={size} className={className} style={style} aria-hidden>
      <g fill={color}>
        {/* body vertical diving */}
        <path d="M80 60 Q70 30 100 20 Q130 30 120 60 Q125 120 115 170 Q100 180 85 170 Q75 120 80 60 Z"/>
        {/* tail curled up */}
        <path d="M100 20 Q90 5 110 2 Q125 5 128 22 Q120 18 112 22 Q105 18 100 20 Z"/>
        {/* head */}
        <path d="M80 40 Q75 15 100 10 Q125 15 120 40 Z"/>
        {/* ears */}
        <path d="M82 22 L78 5 L92 15 Z"/>
        <path d="M118 22 L122 5 L108 15 Z"/>
        {/* front paws splayed */}
        <path d="M78 80 L40 95 Q30 100 35 108 L42 106 L80 95 Z"/>
        <path d="M122 80 L165 92 Q175 95 170 105 L162 104 L120 95 Z"/>
        {/* back paws */}
        <path d="M85 170 L60 220 Q58 230 68 230 L78 225 L95 185 Z"/>
        <path d="M115 170 L140 220 Q142 230 132 230 L122 225 L105 185 Z"/>
      </g>
      <ellipse cx="92" cy="25" rx="2" ry="3" fill="#fff"/>
      <ellipse cx="108" cy="25" rx="2" ry="3" fill="#fff"/>
    </svg>
  );
}

// Tiny tag (paw+face combo) for scattering
function CatTag({ size = 40, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 60 60" width={size} height={size} className={className} style={style} aria-hidden>
      <g fill={color}>
        <path d="M15 35 Q12 20 22 15 Q30 12 38 15 Q48 20 45 35 Q44 42 30 44 Q16 42 15 35 Z"/>
        <path d="M18 18 L14 6 L24 12 Z"/>
        <path d="M42 18 L46 6 L36 12 Z"/>
      </g>
      <ellipse cx="24" cy="28" rx="1.5" ry="2.5" fill="#fff"/>
      <ellipse cx="36" cy="28" rx="1.5" ry="2.5" fill="#fff"/>
    </svg>
  );
}

// Paw print
function PawPrint({ size = 30, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size} className={className} style={style} aria-hidden>
      <g fill={color}>
        <ellipse cx="20" cy="26" rx="8" ry="7"/>
        <ellipse cx="10" cy="14" rx="3" ry="4"/>
        <ellipse cx="16" cy="8" rx="3" ry="4"/>
        <ellipse cx="24" cy="8" rx="3" ry="4"/>
        <ellipse cx="30" cy="14" rx="3" ry="4"/>
      </g>
    </svg>
  );
}

// Spray splat / graffiti accent
function SprayBurst({ size = 100, color = 'currentColor', className = '', style = {} }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} className={className} style={style} aria-hidden>
      <g fill={color}>
        <circle cx="50" cy="50" r="25" opacity="0.9"/>
        <circle cx="20" cy="30" r="3"/>
        <circle cx="85" cy="25" r="2.5"/>
        <circle cx="12" cy="60" r="2"/>
        <circle cx="90" cy="70" r="3.5"/>
        <circle cx="30" cy="85" r="2"/>
        <circle cx="70" cy="88" r="2.8"/>
        <circle cx="78" cy="12" r="1.5"/>
        <circle cx="25" cy="15" r="1.8"/>
        <circle cx="50" cy="5" r="2"/>
        <circle cx="5" cy="45" r="1.5"/>
        <circle cx="95" cy="50" r="1.2"/>
      </g>
    </svg>
  );
}

Object.assign(window, { CatProwl, CatSit, CatRun, CatDive, CatTag, PawPrint, SprayBurst });