// Chibi dino + flask, landscape composition matching brand palette.
const Mascot = ({ size = 320 }) => {
  const C = {
    G: "#4ADE80",   // body green
    L: "#7AE89A",   // highlight
    D: "#0A1F12",   // dark (eye + outline)
    W: "#EAF2EC",   // belly white / flask glass
    Y: "#F2C66B",   // amber accent
    K: "#22302A",   // soft outline
  };

  // 28 wide × 20 tall — leaves room for a small flask on the right.
  const rows = [
    "............................", // 0
    "......GG.....GG.............", // 1 spikes
    "......GG.....GG..........GG.", // 2  flask top
    ".....GGGG...GGGG.........WW.", // 3
    "....GGGGGGGGGGGG.........WW.", // 4 head top
    "...GGGGGGGGGGGGGG........GG.", // 5  flask neck
    "..GGLLGGGGGGGGGGGG......GGGG", // 6 highlight + flask shoulder
    "..GLLLGGDDGGDDGGGG.....GWWWG", // 7 eyes
    "..GGGGGGDDGGDDGGGG....GWWWWW", // 8
    "..GGGGGGGGGGGGGGGG....GWWGWW", // 9
    "..GGGGGGGGGGGGGGGGG...GWWWWW", // 10
    "...GWWWWWWWWWGGGGGG...GWWWWW", // 11 belly start
    "...GWWWWWWWWWGGGGGG...GWWWWW", // 12
    "...GWWWWWWWWWGGGGGG....GGGGG", // 13
    "...GGWWWWWWWWGGGGG..........", // 14
    "...GGGGGGGGGGGGGG...........", // 15
    "...GG......GG.GGG...........", // 16 legs
    "...GG......GG..GG...........", // 17
    "............................", // 18
    "............................", // 19
  ];

  const cells = [];
  for (let y = 0; y < rows.length; y++) {
    for (let x = 0; x < rows[y].length; x++) {
      const ch = rows[y][x];
      const color = C[ch];
      if (!color) continue;
      cells.push(<rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill={color} />);
    }
  }

  return (
    <svg
      viewBox="0 0 28 20"
      width={size}
      shapeRendering="crispEdges"
      style={{ imageRendering: "pixelated", display: "block", maxWidth: "100%", height: "auto" }}
    >
      {cells}
    </svg>
  );
};
window.Mascot = Mascot;