// Pixel sprite library — characters and small details for the office scene.
// All sprites are 16-tall x 12-wide (same dim as before) but now with more
// detail per sprite kind. Two-frame walk cycles. Top-down-ish 3/4 view.
//
// Color palette (shared):
//   skin tones: #F2C49B (light), #C49070 (medium), #8B5A3C (deep)
//   ink/outline: #1f1530
//   suit black: #14101e
//   white shirt: #e8e8ef
//   tie red: #c2333a
//   sunglasses: #0a0814
//
// Agents (Men in Black look): black suit, white shirt, black tie or red tie,
// sunglasses, earpiece. Differentiated by skin tone + hair + tiny tie color.
// Leads (civilians): varied bright clothing, no sunglasses, varied hair.

// ---- helper ----
function drawGrid(grid, colors){
  return grid.map((row, ry) =>
    row.split('').map((c, rx) => {
      const f = colors[c]; if (!f) return null;
      return <rect key={`${rx}-${ry}`} x={rx} y={ry} width="1" height="1" fill={f}/>;
    })
  );
}

// ============================================================
// AGENT (Men in Black) — 12x18
// Two frames for walking. Idle = same as frame A.
// glyphs:
//   .  empty
//   o  outline (ink #1f1530)
//   s  skin
//   h  hair (top color)
//   B  black suit
//   W  white shirt collar
//   T  tie (red or black)
//   G  sunglasses lens
//   E  earpiece dot
// ============================================================

const agentA = [
  '...oooooo...', // hair top
  '..ohhhhhho..',
  '.ohhhhhhhho.',
  '.osssssssso.', // forehead
  '.osGGoGGoso.', // sunglasses
  '.osssssssso.',
  '..osssssso..', // chin
  '...oWWWWo...', // collar
  '..oBBBTBBBo.', // shoulders + tie top
  '.oBBBBTBBBBo',
  'oBBBBBTBBBBB',
  'oBBBBBTBBBBB',
  'oBBBBBBBBBBB', // belt line
  '.oBBBBBBBBBo',
  '..oBBBoBBBo.', // legs split
  '..oBBBoBBBo.',
  '..oBBBoBBBo.',
  '..ooBoooBoo.', // shoes
];
const agentB = [
  '...oooooo...',
  '..ohhhhhho..',
  '.ohhhhhhhho.',
  '.osssssssso.',
  '.osGGoGGoso.',
  '.osssssssso.',
  '..osssssso..',
  '...oWWWWo...',
  '..oBBBTBBBo.',
  '.oBBBBTBBBBo',
  'oBBBBBTBBBBB',
  'oBBBBBTBBBBB',
  'oBBBBBBBBBBB',
  '.oBBBBBBBBBo',
  '..oBBoBBBoo.',
  '..oBBoBBBoo.',
  '..oBBoBBBoo.',
  '..oooBoooBo.',
];

function AgentSprite({ x, y, frame=0, idle=false, hair='#1f1530', skin='#F2C49B',
                      tie='#c2333a', flip=false }){
  const grid = (idle || frame % 2 === 0) ? agentA : agentB;
  const colors = {
    '.': null,
    'o': '#0d0820',
    'h': hair,
    's': skin,
    'B': '#14101e',
    'W': '#e8e8ef',
    'T': tie,
    'G': '#0a0814',
    'E': '#c2333a',
  };
  return (
    <g transform={`translate(${x} ${y}) ${flip ? 'translate(12 0) scale(-1 1)' : ''}`}>
      {/* sunglass shine */}
      {drawGrid(grid, colors)}
      {/* lens highlight */}
      <rect x={flip ? 8 : 3} y={4} width=".5" height=".5" fill="#fff" opacity=".7"/>
      <rect x={flip ? 4 : 7} y={4} width=".5" height=".5" fill="#fff" opacity=".7"/>
      {/* earpiece curl */}
      <rect x={flip ? 1.5 : 9.5} y={4.2} width=".5" height="1" fill="#0d0820"/>
    </g>
  );
}

// ============================================================
// LEAD (civilian) — 12x18, varied clothing
// glyphs:
//   . empty, o outline, s skin, h hair
//   c clothing primary (shirt/dress)
//   a clothing accent (collar/buttons)
//   p pants/legs
//   e eyes (open dots)
//   m mouth
// ============================================================

const leadA = [
  '...oooooo...',
  '..ohhhhhho..',
  '.ohhhhhhhho.',
  '.osssssssso.',
  '.osseooesso.', // eyes
  '.osssssssso.',
  '..ossmmsso..', // mouth
  '...oaaaao...', // collar
  '..occccccco.',
  '.occcaccccco',
  'occcccccccco',
  'occcccccccco',
  'occccccccccc',
  '.occcccccco.',
  '..oppoppppo.',
  '..oppoppppo.',
  '..oppoppppo.',
  '..ooooooooo.',
];
const leadB = [
  '...oooooo...',
  '..ohhhhhho..',
  '.ohhhhhhhho.',
  '.osssssssso.',
  '.osseooesso.',
  '.osssssssso.',
  '..ossmmsso..',
  '...oaaaao...',
  '..occccccco.',
  '.occccaccccco',
  'occcccccccco',
  'occcccccccco',
  'occccccccccc',
  '.occcccccco.',
  '..oppopppoo.',
  '..oppopppoo.',
  '..oppopppoo.',
  '..ooooooooo.',
];

function LeadSprite({ x, y, frame=0, idle=false, hair='#3D2817', skin='#F2C49B',
                     shirt='#3F8FCB', accent='#1f1530', pants='#1A1A2E', flip=false }){
  const grid = (idle || frame % 2 === 0) ? leadA : leadB;
  const colors = {
    '.': null,
    'o': '#0d0820',
    'h': hair,
    's': skin,
    'c': shirt,
    'a': accent,
    'p': pants,
    'e': '#0d0820',
    'm': '#7a3025',
  };
  return (
    <g transform={`translate(${x} ${y}) ${flip ? 'translate(12 0) scale(-1 1)' : ''}`}>
      {drawGrid(grid, colors)}
    </g>
  );
}

// ============================================================
// LEAD VARIETY — preset civilians
// ============================================================
const LEAD_PRESETS = [
  { name:'Sarah M.',    hair:'#5a2e0c', skin:'#F2C49B', shirt:'#E89A4A', pants:'#3a4a6a' },
  { name:'Marcus J.',   hair:'#1A1A2E', skin:'#8B5A3C', shirt:'#3F8FCB', pants:'#1A1A2E' },
  { name:'Lena R.',     hair:'#c4a06c', skin:'#F2C49B', shirt:'#C04A8D', pants:'#1f1530' },
  { name:'James K.',    hair:'#3D2817', skin:'#C49070', shirt:'#3FA34D', pants:'#5a3520' },
  { name:'Diana W.',    hair:'#2a1a2a', skin:'#F2C49B', shirt:'#7A5BC8', pants:'#1f1530' },
  { name:'The Phams',   hair:'#0d0820', skin:'#C49070', shirt:'#D9A93A', pants:'#3a2655' },
  { name:'Carlos G.',   hair:'#1a1230', skin:'#8B5A3C', shirt:'#a83a3a', pants:'#1A1A2E' },
  { name:'Priya N.',    hair:'#0d0820', skin:'#C49070', shirt:'#3FA34D', pants:'#5a3520' },
];
const AGENT_PRESETS = [
  { id:'a1', name:'Agent Vega',    hair:'#0d0820', skin:'#F2C49B', tie:'#c2333a' },
  { id:'a2', name:'Agent Ortiz',   hair:'#0d0820', skin:'#8B5A3C', tie:'#3F8FCB' },
  { id:'a3', name:'Agent Chen',    hair:'#0d0820', skin:'#C49070', tie:'#3FA34D' },
  { id:'a4', name:'Agent Reyes',   hair:'#5a2e0c', skin:'#C49070', tie:'#D9A93A' },
  { id:'a5', name:'Agent Park',    hair:'#0d0820', skin:'#F2C49B', tie:'#7A5BC8' },
  { id:'a6', name:'Agent Bauer',   hair:'#3D2817', skin:'#F2C49B', tie:'#0d0820' },
];

// ============================================================
// Carry items (held overhead while walking)
// ============================================================
function CarryItem({ kind, x=0, y=0 }){
  if (!kind) return null;
  const items = {
    letter:   <g><rect x="0" y="0" width="5" height="3" fill="#fff" stroke="#1f1530" strokeWidth=".25"/><rect x="0" y="0" width="5" height=".8" fill="#c2333a"/></g>,
    invoice:  <g><rect x="0" y="0" width="4" height="5" fill="#fff" stroke="#1f1530" strokeWidth=".25"/><rect x="1" y="1" width="2" height=".4" fill="#1f1530"/><rect x="1" y="2" width="2" height=".4" fill="#1f1530"/><rect x="1" y="3" width="1" height=".4" fill="#3FA34D"/></g>,
    star:     <g><rect x="2" y="0" width="1" height="1" fill="#F2C84B"/><rect x="1" y="1" width="3" height="1" fill="#F2C84B"/><rect x="0" y="2" width="5" height="1" fill="#F2C84B"/><rect x="1" y="3" width="3" height="1" fill="#F2C84B"/><rect x="0" y="4" width="2" height="1" fill="#F2C84B"/><rect x="3" y="4" width="2" height="1" fill="#F2C84B"/></g>,
    phone:    <g><rect x="0" y="0" width="3" height="5" fill="#1f1530"/><rect x="0" y="1" width="3" height="3" fill="#3F8FCB"/></g>,
    clipboard:<g><rect x="0" y="0" width="4" height="6" fill="#7a4a2a"/><rect x="1" y="0" width="2" height="1" fill="#5a3520"/><rect x="1" y="2" width="2" height=".3" fill="#fff"/><rect x="1" y="3" width="2" height=".3" fill="#fff"/><rect x="1" y="4" width="1" height=".3" fill="#fff"/></g>,
  };
  return <g transform={`translate(${x} ${y})`}>{items[kind] || null}</g>;
}

// Expose
Object.assign(window, {
  AgentSprite, LeadSprite, CarryItem,
  AGENT_PRESETS, LEAD_PRESETS,
});