// Maisy-style illustrations: bold black outlines, flat primary fills.
const INK = "var(--ink)";
const SW = 5;

function Tent({ size = 380 }) {
  return (
    <svg viewBox="0 0 400 340" width={size} height={size * 340 / 400} style={{ display: "block" }}>
      <path d="M10 312 Q40 305 70 312 T130 312 T190 312 T250 312 T310 312 T390 312"
        fill="none" stroke={INK} strokeWidth={SW} strokeLinecap="round" />
      {/* tent body - red and white stripes via two halves with stripes */}
      <path d="M80 310 L200 50 L200 310 Z" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M320 310 L200 50 L200 310 Z" fill="var(--yellow)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* stripes on red side */}
      <path d="M115 310 L200 130" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M150 310 L200 200" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M185 310 L200 270" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      {/* stripes on yellow side */}
      <path d="M285 310 L200 130" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M250 310 L200 200" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M215 310 L200 270" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      {/* door triangle */}
      <path d="M165 310 Q200 230 235 310 Z" fill="var(--cream)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* pole top + flag */}
      <path d="M200 50 L200 18" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M200 22 L246 30 L200 46 Z" fill="var(--blue)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* ground anchors */}
      <path d="M80 310 L60 330" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M320 310 L340 330" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
    </svg>
  );
}

function Sun({ size = 130 }) {
  return (
    <svg viewBox="0 0 140 140" width={size} height={size} style={{ display: "block" }}>
      <circle cx="70" cy="70" r="34" fill="var(--yellow)" stroke={INK} strokeWidth={SW}/>
      {[0,45,90,135,180,225,270,315].map(a => {
        const rad = a * Math.PI / 180;
        const x1 = 70 + Math.cos(rad) * 46, y1 = 70 + Math.sin(rad) * 46;
        const x2 = 70 + Math.cos(rad) * 62, y2 = 70 + Math.sin(rad) * 62;
        return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke={INK} strokeWidth={SW} strokeLinecap="round"/>;
      })}
      <circle cx="58" cy="65" r="3" fill={INK}/>
      <circle cx="82" cy="65" r="3" fill={INK}/>
      <path d="M58 78 Q70 88 82 78" fill="none" stroke={INK} strokeWidth={SW * 0.8} strokeLinecap="round"/>
    </svg>
  );
}

function Cloud({ size = 160 }) {
  return (
    <svg viewBox="0 0 180 100" width={size} height={size * 100 / 180} style={{ display: "block" }}>
      <path d="M30 75 Q10 75 14 55 Q5 35 30 35 Q35 12 65 22 Q80 5 105 22 Q135 12 145 35 Q175 35 168 60 Q175 80 150 78 Q140 92 110 82 Q85 95 60 82 Q40 92 30 75 Z"
        fill="var(--cream)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
    </svg>
  );
}

function Star({ size = 60, fill = "var(--yellow)" }) {
  return (
    <svg viewBox="0 0 60 60" width={size} height={size} style={{ display: "block" }}>
      <path d="M30 6 L36 24 L55 24 L40 35 L46 54 L30 42 L14 54 L20 35 L5 24 L24 24 Z"
        fill={fill} stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
    </svg>
  );
}

function Heart({ size = 60, fill = "var(--red)" }) {
  return (
    <svg viewBox="0 0 60 60" width={size} height={size} style={{ display: "block" }}>
      <path d="M30 52 C 8 38 8 16 22 16 C 28 16 30 22 30 24 C 30 22 32 16 38 16 C 52 16 52 38 30 52 Z"
        fill={fill} stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
    </svg>
  );
}

function Balloon({ size = 80, fill = "var(--blue)" }) {
  return (
    <svg viewBox="0 0 80 130" width={size} height={size * 130 / 80} style={{ display: "block" }}>
      <ellipse cx="40" cy="42" rx="30" ry="36" fill={fill} stroke={INK} strokeWidth={SW}/>
      <path d="M40 78 L36 86 L44 86 Z" fill={INK}/>
      <path d="M40 86 Q 30 100 42 115 Q 50 122 40 130" fill="none" stroke={INK} strokeWidth={SW * 0.7} strokeLinecap="round"/>
      <ellipse cx="30" cy="32" rx="5" ry="8" fill="white" opacity="0.5"/>
    </svg>
  );
}

function Flower({ size = 70, fill = "var(--red)" }) {
  return (
    <svg viewBox="0 0 80 80" width={size} height={size} style={{ display: "block" }}>
      {[0,60,120,180,240,300].map(a => {
        const rad = a * Math.PI / 180;
        const x = 40 + Math.cos(rad) * 18, y = 40 + Math.sin(rad) * 18;
        return <circle key={a} cx={x} cy={y} r="14" fill={fill} stroke={INK} strokeWidth={SW}/>;
      })}
      <circle cx="40" cy="40" r="10" fill="var(--yellow)" stroke={INK} strokeWidth={SW}/>
    </svg>
  );
}

// Maisy — a friendly little mouse, no copyrighted likeness, just a Maisy-ESQUE mouse
function Mouse({ size = 200 }) {
  return (
    <svg viewBox="0 0 200 240" width={size} height={size * 240 / 200} style={{ display: "block" }}>
      {/* dress */}
      <path d="M55 175 Q 60 230 100 232 Q 140 230 145 175 Z"
        fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* polka dots on dress */}
      <circle cx="80" cy="195" r="4" fill="var(--cream)"/>
      <circle cx="115" cy="200" r="4" fill="var(--cream)"/>
      <circle cx="95" cy="215" r="4" fill="var(--cream)"/>
      <circle cx="125" cy="218" r="4" fill="var(--cream)"/>
      {/* arms */}
      <path d="M55 180 Q 30 195 28 218" fill="none" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M145 180 Q 175 175 178 150" fill="none" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <circle cx="28" cy="222" r="9" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      <circle cx="180" cy="148" r="9" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      {/* legs/feet */}
      <path d="M85 230 L80 248" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M115 230 L120 248" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <ellipse cx="75" cy="250" rx="14" ry="6" fill="var(--blue)" stroke={INK} strokeWidth={SW}/>
      <ellipse cx="125" cy="250" rx="14" ry="6" fill="var(--blue)" stroke={INK} strokeWidth={SW}/>
      {/* head */}
      <circle cx="100" cy="110" r="60" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      {/* ears */}
      <circle cx="55" cy="62" r="22" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      <circle cx="145" cy="62" r="22" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      <circle cx="55" cy="62" r="11" fill="var(--pink)" stroke={INK} strokeWidth={SW * 0.6}/>
      <circle cx="145" cy="62" r="11" fill="var(--pink)" stroke={INK} strokeWidth={SW * 0.6}/>
      {/* eyes */}
      <circle cx="82" cy="105" r="5" fill={INK}/>
      <circle cx="118" cy="105" r="5" fill={INK}/>
      {/* cheeks */}
      <circle cx="72" cy="125" r="7" fill="var(--pink)" opacity="0.7"/>
      <circle cx="128" cy="125" r="7" fill="var(--pink)" opacity="0.7"/>
      {/* nose */}
      <ellipse cx="100" cy="128" rx="6" ry="4" fill={INK}/>
      {/* mouth */}
      <path d="M100 132 L100 142" stroke={INK} strokeWidth={SW * 0.8} strokeLinecap="round"/>
      <path d="M88 148 Q 100 158 112 148" fill="none" stroke={INK} strokeWidth={SW * 0.8} strokeLinecap="round"/>
      {/* whiskers */}
      <path d="M65 135 L40 130" stroke={INK} strokeWidth={SW * 0.5} strokeLinecap="round"/>
      <path d="M65 142 L40 145" stroke={INK} strokeWidth={SW * 0.5} strokeLinecap="round"/>
      <path d="M135 135 L160 130" stroke={INK} strokeWidth={SW * 0.5} strokeLinecap="round"/>
      <path d="M135 142 L160 145" stroke={INK} strokeWidth={SW * 0.5} strokeLinecap="round"/>
      {/* bow on ear */}
      <path d="M135 35 L155 25 L155 45 Z" fill="var(--red)" stroke={INK} strokeWidth={SW * 0.7} strokeLinejoin="round"/>
      <path d="M155 35 L175 25 L175 45 Z" fill="var(--red)" stroke={INK} strokeWidth={SW * 0.7} strokeLinejoin="round"/>
      <circle cx="155" cy="35" r="4" fill="var(--yellow)" stroke={INK} strokeWidth={SW * 0.5}/>
    </svg>
  );
}

// A little duck friend
function Duck({ size = 140 }) {
  return (
    <svg viewBox="0 0 160 150" width={size} height={size * 150 / 160} style={{ display: "block" }}>
      {/* body */}
      <ellipse cx="85" cy="95" rx="55" ry="40" fill="var(--yellow)" stroke={INK} strokeWidth={SW}/>
      {/* tail */}
      <path d="M30 80 L10 70 L25 95 Z" fill="var(--yellow)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* head */}
      <circle cx="115" cy="55" r="32" fill="var(--yellow)" stroke={INK} strokeWidth={SW}/>
      {/* beak */}
      <path d="M140 50 Q 158 55 140 65 Z" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* eye */}
      <circle cx="120" cy="48" r="5" fill={INK}/>
      <circle cx="122" cy="46" r="1.5" fill="white"/>
      {/* wing */}
      <path d="M70 80 Q 90 70 105 95 Q 80 100 70 80 Z" fill="var(--yellow)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* feet */}
      <path d="M70 132 L62 145 L78 145 Z" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M100 132 L92 145 L108 145 Z" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
    </svg>
  );
}

// A pencil/crayon
function Crayon({ size = 200, fill = "var(--blue)" }) {
  return (
    <svg viewBox="0 0 240 60" width={size} height={size * 60 / 240} style={{ display: "block" }}>
      <path d="M30 10 L210 10 Q 220 30 210 50 L30 50 Q 20 30 30 10 Z" fill={fill} stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M210 10 Q 220 30 210 50 L235 38 Q 240 30 235 22 Z" fill="var(--cream)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M50 10 L50 50 M75 10 L75 50 M100 10 L100 50 M125 10 L125 50 M150 10 L150 50 M175 10 L175 50" stroke={INK} strokeWidth={SW * 0.5} strokeLinecap="round"/>
    </svg>
  );
}

// A simple little house
function House({ size = 140 }) {
  return (
    <svg viewBox="0 0 160 160" width={size} height={size} style={{ display: "block" }}>
      <rect x="30" y="75" width="100" height="70" fill="var(--cream)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M20 80 L80 25 L140 80 Z" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <rect x="65" y="100" width="30" height="45" fill="var(--blue)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <circle cx="88" cy="125" r="3" fill={INK}/>
      <rect x="38" y="90" width="20" height="20" fill="var(--yellow)" stroke={INK} strokeWidth={SW * 0.8}/>
      <path d="M48 90 L48 110 M38 100 L58 100" stroke={INK} strokeWidth={SW * 0.6}/>
      <rect x="102" y="90" width="20" height="20" fill="var(--yellow)" stroke={INK} strokeWidth={SW * 0.8}/>
      <path d="M112 90 L112 110 M102 100 L122 100" stroke={INK} strokeWidth={SW * 0.6}/>
    </svg>
  );
}

// Birds in flight (m shape)
function Bird({ size = 50 }) {
  return (
    <svg viewBox="0 0 60 30" width={size} height={size * 30 / 60} style={{ display: "block" }}>
      <path d="M5 22 Q 15 5 30 18 Q 45 5 55 22" fill="none" stroke={INK} strokeWidth={SW} strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Rocket
function Rocket({ size = 160 }) {
  return (
    <svg viewBox="0 0 120 180" width={size} height={size * 180 / 120} style={{ display: "block" }}>
      <path d="M60 10 Q 90 50 90 110 L 30 110 Q 30 50 60 10 Z" fill="var(--cream)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <circle cx="60" cy="65" r="14" fill="var(--blue)" stroke={INK} strokeWidth={SW}/>
      <path d="M30 110 L10 145 L 35 130 Z" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M90 110 L110 145 L 85 130 Z" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M30 110 L60 145 L90 110" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M48 145 Q 55 165 50 175 M60 145 L60 178 M72 145 Q 65 165 70 175" stroke="var(--orange)" strokeWidth={SW} strokeLinecap="round" fill="none"/>
    </svg>
  );
}

// Big hero launch rocket — bold, friendly, blasting off a little planet
function LaunchRocket({ size = 340 }) {
  return (
    <svg viewBox="0 0 360 400" width={size} height={size * 400 / 360} style={{ display: "block" }}>
      {/* little planet / ground */}
      <ellipse cx="180" cy="372" rx="150" ry="26" fill="var(--green)" stroke={INK} strokeWidth={SW}/>
      <circle cx="120" cy="368" r="6" fill="var(--cream)" stroke={INK} strokeWidth="2.5"/>
      <circle cx="245" cy="372" r="5" fill="var(--cream)" stroke={INK} strokeWidth="2.5"/>
      {/* launch smoke puffs */}
      <circle cx="150" cy="345" r="22" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      <circle cx="210" cy="345" r="22" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      <circle cx="180" cy="352" r="26" fill="var(--cream)" stroke={INK} strokeWidth={SW}/>
      {/* flame */}
      <path d="M158 290 Q150 330 168 348 Q180 360 192 348 Q210 330 202 290 Z" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M170 300 Q166 326 178 340 Q190 326 186 300 Z" fill="var(--yellow)" stroke={INK} strokeWidth={SW * 0.7} strokeLinejoin="round"/>
      {/* body */}
      <path d="M180 30 Q235 95 235 235 L125 235 Q125 95 180 30 Z" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* belly stripe */}
      <path d="M127 175 Q180 195 233 175 L233 200 Q180 220 127 200 Z" fill="var(--cream)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* window */}
      <circle cx="180" cy="120" r="34" fill="var(--blue)" stroke={INK} strokeWidth={SW}/>
      <circle cx="180" cy="120" r="34" fill="none" stroke="var(--cream)" strokeWidth={SW * 0.5}/>
      <path d="M165 112 Q180 100 195 112" fill="none" stroke="var(--cream)" strokeWidth={SW * 0.8} strokeLinecap="round"/>
      {/* fins */}
      <path d="M125 200 L88 268 L125 248 Z" fill="var(--blue)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M235 200 L272 268 L235 248 Z" fill="var(--blue)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      {/* nose tip */}
      <path d="M180 30 L180 12" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      <circle cx="180" cy="10" r="7" fill="var(--yellow)" stroke={INK} strokeWidth={SW * 0.7}/>
      {/* sparkles around */}
      <path d="M300 90 l5 13 13 5 -13 5 -5 13 -5 -13 -13 -5 13 -5 z" fill="var(--yellow)" stroke={INK} strokeWidth="2.5" strokeLinejoin="round"/>
      <path d="M58 140 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4 z" fill="var(--pink)" stroke={INK} strokeWidth="2.5" strokeLinejoin="round"/>
    </svg>
  );
}

// Small zooming rocket (decoration) — points up-right with a dotted trail
function ZoomRocket({ size = 90, fill = "var(--red)" }) {
  return (
    <svg viewBox="0 0 140 140" width={size} height={size} style={{ display: "block" }}>
      <g transform="rotate(-45 70 70)">
        {/* dotted trail */}
        <circle cx="70" cy="128" r="5" fill="var(--orange)" stroke={INK} strokeWidth="2"/>
        <circle cx="70" cy="112" r="6.5" fill="var(--yellow)" stroke={INK} strokeWidth="2"/>
        {/* flame */}
        <path d="M58 92 Q62 112 70 120 Q78 112 82 92 Z" fill="var(--orange)" stroke={INK} strokeWidth="3.5" strokeLinejoin="round"/>
        {/* body */}
        <path d="M70 14 Q96 52 96 92 L44 92 Q44 52 70 14 Z" fill={fill} stroke={INK} strokeWidth="4" strokeLinejoin="round"/>
        <circle cx="70" cy="52" r="12" fill="var(--blue)" stroke={INK} strokeWidth="4"/>
        {/* fins */}
        <path d="M44 76 L26 104 L44 94 Z" fill="var(--blue)" stroke={INK} strokeWidth="4" strokeLinejoin="round"/>
        <path d="M96 76 L114 104 L96 94 Z" fill="var(--blue)" stroke={INK} strokeWidth="4" strokeLinejoin="round"/>
      </g>
    </svg>
  );
}

// A simple cat
function Cat({ size = 160 }) {
  return (
    <svg viewBox="0 0 160 180" width={size} height={size * 180 / 160} style={{ display: "block" }}>
      <ellipse cx="80" cy="130" rx="50" ry="40" fill="var(--orange)" stroke={INK} strokeWidth={SW}/>
      <circle cx="80" cy="70" r="45" fill="var(--orange)" stroke={INK} strokeWidth={SW}/>
      <path d="M40 45 L48 78 L62 60 Z" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <path d="M120 45 L112 78 L98 60 Z" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round"/>
      <circle cx="65" cy="68" r="5" fill={INK}/>
      <circle cx="95" cy="68" r="5" fill={INK}/>
      <path d="M75 82 Q 80 88 85 82" fill="var(--pink)" stroke={INK} strokeWidth={SW * 0.7} strokeLinejoin="round"/>
      <path d="M80 88 Q 72 96 65 92 M80 88 Q 88 96 95 92" stroke={INK} strokeWidth={SW * 0.7} fill="none" strokeLinecap="round"/>
      <path d="M50 75 L25 70 M50 80 L25 82 M110 75 L135 70 M110 80 L135 82" stroke={INK} strokeWidth={SW * 0.5} strokeLinecap="round"/>
      <path d="M130 130 Q 155 110 145 90" fill="none" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
    </svg>
  );
}

// Squiggle arrow
function Arrow({ size = 100, color = INK }) {
  return (
    <svg viewBox="0 0 120 60" width={size} height={size * 60 / 120} style={{ display: "block" }}>
      <path d="M5 30 Q 30 10 60 30 T 110 30" fill="none" stroke={color} strokeWidth={SW} strokeLinecap="round"/>
      <path d="M110 30 L98 20 M110 30 L98 40" stroke={color} strokeWidth={SW} strokeLinecap="round" fill="none"/>
    </svg>
  );
}

// Sparkle
function Sparkle({ size = 40, color = "var(--yellow)" }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size} style={{ display: "block" }}>
      <path d="M20 4 L24 18 L38 22 L24 26 L20 38 L16 26 L2 22 L16 18 Z"
        fill={color} stroke={INK} strokeWidth={SW * 0.7} strokeLinejoin="round"/>
    </svg>
  );
}

// Stack of colorful building blocks — "Building Tomorrow, Today"
function BlockTower({ size = 320 }) {
  return (
    <svg viewBox="0 0 360 380" width={size} height={size * 380 / 360} style={{ display: "block" }}>
      {/* ground squiggle */}
      <path d="M10 355 Q40 348 70 355 T130 355 T190 355 T250 355 T310 355 T350 355"
        fill="none" stroke={INK} strokeWidth={SW} strokeLinecap="round"/>
      {/* sun rising behind */}
      <circle cx="280" cy="120" r="50" fill="var(--yellow)" stroke={INK} strokeWidth={SW}/>
      {[0,30,60,90,120,150,180,210,240,270,300,330].map(a => {
        const rad = a * Math.PI / 180;
        const x1 = 280 + Math.cos(rad) * 62, y1 = 120 + Math.sin(rad) * 62;
        const x2 = 280 + Math.cos(rad) * 78, y2 = 120 + Math.sin(rad) * 78;
        return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke={INK} strokeWidth={SW} strokeLinecap="round"/>;
      })}
      {/* bottom row — 3 blocks */}
      <rect x="40" y="280" width="80" height="75" fill="var(--red)" stroke={INK} strokeWidth={SW} strokeLinejoin="round" transform="rotate(-2 80 317)"/>
      <rect x="130" y="280" width="80" height="75" fill="var(--blue)" stroke={INK} strokeWidth={SW} strokeLinejoin="round" transform="rotate(1 170 317)"/>
      <rect x="220" y="280" width="80" height="75" fill="var(--green)" stroke={INK} strokeWidth={SW} strokeLinejoin="round" transform="rotate(-1 260 317)"/>
      {/* letter A on red block */}
      <text x="80" y="332" textAnchor="middle" fontFamily="'Baloo 2',sans-serif" fontWeight="800" fontSize="44" fill="var(--cream)" stroke={INK} strokeWidth="1.5" transform="rotate(-2 80 317)">A</text>
      <text x="170" y="332" textAnchor="middle" fontFamily="'Baloo 2',sans-serif" fontWeight="800" fontSize="44" fill="var(--cream)" stroke={INK} strokeWidth="1.5" transform="rotate(1 170 317)">B</text>
      <text x="260" y="332" textAnchor="middle" fontFamily="'Baloo 2',sans-serif" fontWeight="800" fontSize="44" fill="var(--cream)" stroke={INK} strokeWidth="1.5" transform="rotate(-1 260 317)">C</text>
      {/* middle row — 2 blocks */}
      <rect x="85" y="205" width="80" height="75" fill="var(--yellow)" stroke={INK} strokeWidth={SW} strokeLinejoin="round" transform="rotate(2 125 242)"/>
      <rect x="175" y="205" width="80" height="75" fill="var(--orange)" stroke={INK} strokeWidth={SW} strokeLinejoin="round" transform="rotate(-2 215 242)"/>
      {/* star on yellow */}
      <path d="M125 232 L131 247 L147 247 L134 256 L139 271 L125 262 L111 271 L116 256 L103 247 L119 247 Z"
        fill="var(--red)" stroke={INK} strokeWidth="2" strokeLinejoin="round" transform="rotate(2 125 242)"/>
      {/* heart on orange */}
      <path d="M215 262 C 202 251 202 235 211 235 C 215 235 215 240 215 240 C 215 240 215 235 219 235 C 228 235 228 251 215 262 Z"
        fill="var(--red)" stroke={INK} strokeWidth="2" strokeLinejoin="round" transform="rotate(-2 215 242)"/>
      {/* top block — single */}
      <rect x="130" y="130" width="80" height="75" fill="var(--pink)" stroke={INK} strokeWidth={SW} strokeLinejoin="round" transform="rotate(-3 170 167)"/>
      <circle cx="170" cy="167" r="20" fill="var(--cream)" stroke={INK} strokeWidth={SW * 0.7} transform="rotate(-3 170 167)"/>
      <circle cx="163" cy="163" r="3" fill={INK}/>
      <circle cx="177" cy="163" r="3" fill={INK}/>
      <path d="M162 173 Q170 180 178 173" fill="none" stroke={INK} strokeWidth={SW * 0.6} strokeLinecap="round"/>
      {/* tiny flag on top */}
      <path d="M165 130 L165 95" stroke={INK} strokeWidth={SW * 0.7} strokeLinecap="round"/>
      <path d="M165 98 L195 105 L165 120 Z" fill="var(--red)" stroke={INK} strokeWidth={SW * 0.8} strokeLinejoin="round"/>
      {/* sparkle */}
      <path d="M40 100 L44 110 L54 114 L44 118 L40 128 L36 118 L26 114 L36 110 Z"
        fill="var(--yellow)" stroke={INK} strokeWidth={SW * 0.6} strokeLinejoin="round"/>
    </svg>
  );
}

// Tiny logo block-stack (for nav)
function LogoMark({ size = 40 }) {
  return (
    <svg viewBox="0 0 48 48" width={size} height={size * 48 / 48} style={{ display: "block" }}>
      <rect x="4" y="28" width="18" height="16" fill="var(--red)" stroke={INK} strokeWidth="3" strokeLinejoin="round"/>
      <rect x="24" y="28" width="18" height="16" fill="var(--blue)" stroke={INK} strokeWidth="3" strokeLinejoin="round"/>
      <rect x="14" y="12" width="18" height="16" fill="var(--yellow)" stroke={INK} strokeWidth="3" strokeLinejoin="round"/>
      <path d="M23 12 L23 4" stroke={INK} strokeWidth="3" strokeLinecap="round"/>
      <path d="M23 5 L33 8 L23 11 Z" fill="var(--green)" stroke={INK} strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  );
}

window.MaisyArt = { Tent, BlockTower, LogoMark, LaunchRocket, ZoomRocket, Sun, Cloud, Star, Heart, Balloon, Flower, Mouse, Duck, Crayon, House, Bird, Rocket, Cat, Arrow, Sparkle };
