/* 株次郎 マスコット */

function Mascot({ size = 120, mood = "happy", style = {} }) {
  const moodFilter = {
    happy: "none",
    wink:  "hue-rotate(-8deg) saturate(1.05)",
    think: "saturate(.85) brightness(.98)",
    cheer: "saturate(1.15) brightness(1.03)",
  }[mood] || "none";

  return (
    <div className={`mascot mascot-${mood}`}
      style={{ width: size, height: size, position: "relative", display: "inline-block", ...style }}
      aria-label="株次郎">
      <img src="assets/kabujiro.png" alt="株次郎" style={{
        width: "100%", height: "100%", objectFit: "contain",
        filter: moodFilter, display: "block",
      }} />
      {mood === "cheer" && <span className="mascot-spark" style={{ top:"8%", right:"0%" }}>✨</span>}
      {mood === "think" && <span className="mascot-spark" style={{ top:"0%", left:"-4%", fontSize: size * 0.22 }}>💭</span>}
      {mood === "wink"  && <span className="mascot-spark" style={{ top:"12%", right:"0%" }}>★</span>}
    </div>
  );
}

function Bubble({ from = "kabu", children, mood = "happy" }) {
  return (
    <div className={`bubble bubble-${from}`}>
      <div className="bubble-avatar">
        {from === "kabu" ? <Mascot size={56} mood={mood} /> : null}
        <div className="bubble-name">{from === "kabu" ? "株次郎" : "あなた"}</div>
      </div>
      <div className="bubble-body">{children}</div>
    </div>
  );
}

window.Mascot = Mascot;
window.Bubble = Bubble;