// LedgerBeaver — Beaver mascot (real character images)
// 11 named poses mapped to the user's character set.
//
// Use: <Beaver pose="wave" size={120} halo="glow" anim="idle" />
//
// Poses (legacy retained): wave, thumbsup, point, reading, cheer, head, think
// Poses (new in v3):       achievement, free-trial, failed-login, goodbye
//
// Halo treatments (so the beavers blend instead of feeling pasted):
//   none      — no backdrop, just the image with drop-shadow (default)
//   glow      — soft radial amber wash behind, no border
//   stamp     — circular amber-soft disk with thin amber ring (avatars / tight)
//   frame     — rounded card with bg-2 surface + 1px line (toast / chip)
//   spotlight — large radial highlight + halo ring (hero / celebration)
//
// Animations:
//   idle   — gentle bob (default for hero placements)
//   pop    — scale-in on mount (success / state transitions)
//   wave   — small rotational wave (greeting)
//   none   — static
//
// Suggested CTA mapping (v3):
//   wave        → Hello / Welcome back / Sign in
//   thumbsup    → Approved / Confirm / "All caught up" empty success
//   point       → Onboarding tooltip / "Look here" (KEPT FROM V1)
//   reading     → Docs / Empty learning / How-it-works
//   cheer       → Get started / Celebrate / Hero CTA  (now = achievement asset)
//   head        → Avatar / Tab icon / Toast
//   think       → Empty / Loading / "Hmm" / Offline
//   achievement → Setup complete · Vendor "all set" · Payment success hero
//   free-trial  → Pricing / Landing waitlist / Trial banners
//   failed-login→ Sign-in error / Wrong password / Account locked
//   goodbye     → Sign-out · Cancel subscription · Unsubscribe

const Beaver = ({
  pose = 'wave',
  size = 120,
  halo = 'none',
  anim = 'none',
  alt,
  style = {},
  className = '',
  float = false,  // legacy alias for anim="idle"
}) => {
  const src = `assets/beaver-${pose}.png`;
  const effectiveAnim = float ? 'idle' : anim;

  const beaverImg = (
    <img
      src={src}
      alt={alt || `Beaver ${pose}`}
      width={size}
      height={size}
      className={`beaver-img beaver-anim-${effectiveAnim} ${className}`}
      style={{
        width: size,
        height: size,
        objectFit: 'contain',
        ...style,
      }}
    />
  );

  if (halo === 'none') return beaverImg;

  // Padding tuned so beaver feet land cleanly inside the halo
  const pad = halo === 'stamp' ? Math.round(size * 0.10)
            : halo === 'frame' ? Math.round(size * 0.14)
            : halo === 'spotlight' ? Math.round(size * 0.20)
            : Math.round(size * 0.16);

  return (
    <span
      className={`beaver-halo beaver-halo-${halo}`}
      style={{
        width: size + pad * 2,
        height: size + pad * 2,
      }}
    >
      {beaverImg}
    </span>
  );
};

window.Beaver = Beaver;