// ============================================================
// LENNY, the LOCALACT Llama (brand render art)
// Image-based mascot. Face crop for avatars; three full poses
// (laptop, think, map) for guides and hero moments.
// ============================================================
// API (unchanged for existing call sites):
//   <LennyLlama size mood style bg />
//     style="head" (default) -> circular face avatar
//     style="full" OR pose="laptop|think|map" -> full standing pose
//   moods map to a pose when full: happy/idle->laptop, thinking->think, alert->map
// ============================================================

const LENNY_ASSETS = {
  face:   'assets/lenny-face.png',
  laptop: 'assets/lenny-laptop.png',
  think:  'assets/lenny-think.png',
  map:    'assets/lenny-map.png',
};
const LENNY_MOOD_POSE = {
  happy: 'laptop', idle: 'laptop', celebrating: 'laptop',
  thinking: 'think', sleeping: 'think',
  alert: 'map',
};

function LennyLlama({ size = 52, mood = 'idle', style = 'head', bg = 'none', pose }) {
  const isFull = style === 'full' || !!pose;

  if (isFull) {
    const key = pose || LENNY_MOOD_POSE[mood] || 'laptop';
    return (
      <img
        src={LENNY_ASSETS[key] || LENNY_ASSETS.laptop}
        alt="Lenny the LOCALACT llama"
        draggable={false}
        style={{ height: size, width: 'auto', display: 'block', objectFit: 'contain', userSelect: 'none' }}
      />
    );
  }

  // Avatar: square face crop, clipped to a circle. Corners are transparent,
  // so borderRadius makes a clean circle on any surface.
  return (
    <img
      src={LENNY_ASSETS.face}
      alt="Lenny"
      draggable={false}
      style={{
        width: size, height: size, display: 'block',
        objectFit: 'cover', objectPosition: '50% 42%',
        borderRadius: '50%', userSelect: 'none',
        background: bg === 'circle' ? 'var(--cream-2, #f3ede2)' : 'transparent',
      }}
    />
  );
}

window.LennyLlama = LennyLlama;
window.LENNY_ASSETS = LENNY_ASSETS;