// Pixel shrimp mascot — geometric SVG
// Variants: 'idle', 'happy', 'sleep', 'excited', 'tiny'

function Shrimp({ size = 160, mood = 'idle', color = 'var(--shrimp)', className = '' }) {
  // Use a 32x32 pixel grid, scaled up — crisp pixel art with viewBox
  // Coordinates are pixel cells
  const body = color;
  const dark = 'var(--line)';
  const pink = 'var(--shrimp-l)';
  const white = 'var(--paper)';
  const ink = 'var(--ink)';

  // Eye / expression variants
  const eye = {
    idle:    <g><rect x="19" y="10" width="2" height="2" fill={dark}/><rect x="19" y="10" width="1" height="1" fill={white}/></g>,
    happy:   <g><path d="M18 11 L19 10 L20 11 L21 10 L22 11" stroke={dark} strokeWidth="1" fill="none"/></g>,
    sleep:   <g><path d="M18 11 L22 11" stroke={dark} strokeWidth="1"/><text x="24" y="8" fontSize="5" fill={dark} fontFamily="monospace">z</text></g>,
    excited: <g><rect x="18" y="9" width="3" height="3" fill={dark}/><rect x="19" y="10" width="1" height="1" fill={white}/></g>,
    tiny:    <rect x="19" y="10" width="2" height="2" fill={dark}/>,
  }[mood] || null;

  const mouth = mood === 'happy' || mood === 'excited'
    ? <rect x="22" y="13" width="2" height="1" fill={dark}/>
    : mood === 'sleep'
      ? <rect x="22" y="13" width="1" height="1" fill={dark}/>
      : <rect x="22" y="13" width="2" height="1" fill={dark}/>;

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      shapeRendering="crispEdges"
      className={className}
      style={{ imageRendering: 'pixelated' }}
    >
      {/* tail fan — 3 triangles */}
      <polygon points="2,12 7,9 7,17" fill={body} stroke={dark} strokeWidth="0.5"/>
      <polygon points="2,16 6,14 7,19" fill={pink} stroke={dark} strokeWidth="0.5"/>
      <polygon points="2,20 7,15 7,22" fill={body} stroke={dark} strokeWidth="0.5"/>

      {/* body segments — 5 curved bands */}
      <path d="M7 10 L22 9 L23 12 L7 14 Z" fill={body} stroke={dark} strokeWidth="0.5"/>
      <path d="M7 14 L23 12 L24 16 L7 18 Z" fill={body} stroke={dark} strokeWidth="0.5"/>
      <path d="M7 18 L24 16 L22 20 L8 22 Z" fill={body} stroke={dark} strokeWidth="0.5"/>

      {/* segment lines */}
      <line x1="11" y1="9.5" x2="12" y2="21.5" stroke={dark} strokeWidth="0.5" opacity="0.6"/>
      <line x1="15" y1="9.2" x2="16" y2="21" stroke={dark} strokeWidth="0.5" opacity="0.6"/>
      <line x1="19" y1="9"   x2="20" y2="20.5" stroke={dark} strokeWidth="0.5" opacity="0.6"/>

      {/* head bulge (front, right side) */}
      <path d="M22 9 L27 11 L27 17 L22 20 L23 15 Z" fill={body} stroke={dark} strokeWidth="0.5"/>

      {/* rostrum / nose spike */}
      <polygon points="27,11 30,9 28,13" fill={body} stroke={dark} strokeWidth="0.5"/>

      {/* antennae */}
      <path d="M28 11 Q30 6 26 3" stroke={dark} strokeWidth="0.7" fill="none"/>
      <path d="M27 13 Q31 12 30 7" stroke={dark} strokeWidth="0.7" fill="none"/>

      {/* eye */}
      {eye}
      {mouth}

      {/* legs — little triangles underneath */}
      <polygon points="10,22 11,25 12,22" fill={dark}/>
      <polygon points="13,22 14,25 15,22" fill={dark}/>
      <polygon points="17,22 18,25 19,22" fill={dark}/>
      <polygon points="20,22 21,25 22,22" fill={dark}/>

      {/* highlight — a single lighter pixel on body */}
      <rect x="14" y="11" width="1" height="1" fill={white} opacity="0.7"/>
      <rect x="20" y="12" width="1" height="1" fill={white} opacity="0.7"/>
    </svg>
  );
}

// Tiny icon-sized shrimp for logo
function ShrimpMark({ size = 28 }) {
  const body = 'var(--ink)';
  const paper = 'var(--paper)';
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" shapeRendering="crispEdges">
      <polygon points="3,12 8,10 8,20" fill={body}/>
      <path d="M8 11 L23 9 L25 16 L22 21 L8 22 Z" fill={body}/>
      <polygon points="25,11 30,10 27,15" fill={body}/>
      <path d="M27 12 Q30 7 26 4" stroke={body} strokeWidth="1.2" fill="none"/>
      <rect x="19" y="12" width="2" height="2" fill={paper}/>
      <polygon points="11,22 12,25 13,22" fill={body}/>
      <polygon points="15,22 16,25 17,22" fill={body}/>
      <polygon points="19,22 20,25 21,22" fill={body}/>
    </svg>
  );
}

window.Shrimp = Shrimp;
window.ShrimpMark = ShrimpMark;