/* global React, window */
// Logiq Kidz · mascots.jsx — five bold geometric kid-friendly mascot SVGs.
// Each renders crisp at any size. Style: rounded, chunky, bright cartoon.

function MascotShell({ size = 96, children, viewBox = '0 0 100 100' }) {
  return (
    <svg viewBox={viewBox} width={size} height={size} aria-hidden="true" style={{ display: 'block' }}>
      <ellipse cx="50" cy="94" rx="26" ry="3.5" fill="#000" opacity=".10"/>
      {children}
    </svg>
  );
}

// Pico — purple owl (Logic mascot)
function Pico({ size = 96 }) {
  return (
    <MascotShell size={size}>
      <defs>
        <linearGradient id="pico-body" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#8B7BF0"/>
          <stop offset="100%" stopColor="#5B4BD6"/>
        </linearGradient>
      </defs>
      {/* ears */}
      <path d="M22 22 L30 8 L38 22z" fill="#5B4BD6"/>
      <path d="M62 22 L70 8 L78 22z" fill="#5B4BD6"/>
      {/* body */}
      <path d="M50 12 C26 12 16 32 16 52 C16 76 32 90 50 90 C68 90 84 76 84 52 C84 32 74 12 50 12z" fill="url(#pico-body)"/>
      {/* belly */}
      <ellipse cx="50" cy="62" rx="22" ry="22" fill="#EEEAFD"/>
      {/* eye discs */}
      <circle cx="38" cy="44" r="14" fill="#fff"/>
      <circle cx="62" cy="44" r="14" fill="#fff"/>
      {/* eyes */}
      <circle cx="38" cy="44" r="6" fill="#2a2150"/>
      <circle cx="62" cy="44" r="6" fill="#2a2150"/>
      <circle cx="40" cy="42" r="2" fill="#fff"/>
      <circle cx="64" cy="42" r="2" fill="#fff"/>
      {/* beak */}
      <path d="M46 56 L50 64 L54 56z" fill="#FFB02E" stroke="#E29410" strokeWidth=".6"/>
      {/* cheek pink */}
      <circle cx="28" cy="60" r="3" fill="#FF6B9D" opacity=".5"/>
      <circle cx="72" cy="60" r="3" fill="#FF6B9D" opacity=".5"/>
      {/* wing */}
      <path d="M16 52 C16 64 22 72 28 70 L26 56z" fill="#5B4BD6"/>
      <path d="M84 52 C84 64 78 72 72 70 L74 56z" fill="#5B4BD6"/>
    </MascotShell>
  );
}

// Numo — yellow number sprite (Math mascot)
function Numo({ size = 96 }) {
  return (
    <MascotShell size={size}>
      <defs>
        <linearGradient id="numo-body" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#FFD061"/>
          <stop offset="100%" stopColor="#E2950B"/>
        </linearGradient>
      </defs>
      {/* body — rounded square with a "7" silhouette feel */}
      <path d="M22 18 Q22 10 32 10 H68 Q78 10 78 18 V78 Q78 88 68 88 H32 Q22 88 22 78 Z" fill="url(#numo-body)"/>
      {/* face panel */}
      <rect x="30" y="34" width="40" height="32" rx="14" fill="#FFF6DC"/>
      {/* eyes */}
      <circle cx="42" cy="48" r="4.5" fill="#3a2e08"/>
      <circle cx="58" cy="48" r="4.5" fill="#3a2e08"/>
      <circle cx="43.5" cy="46.5" r="1.4" fill="#fff"/>
      <circle cx="59.5" cy="46.5" r="1.4" fill="#fff"/>
      {/* smile */}
      <path d="M42 58 Q50 64 58 58" stroke="#3a2e08" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      {/* cheeks */}
      <circle cx="36" cy="58" r="2.4" fill="#FF6B9D" opacity=".55"/>
      <circle cx="64" cy="58" r="2.4" fill="#FF6B9D" opacity=".55"/>
      {/* plus + minus emblems on body corners */}
      <g fill="#fff" opacity=".85" fontFamily="Baloo 2, sans-serif" fontWeight="800" fontSize="12">
        <text x="28" y="24">+</text>
        <text x="68" y="24">−</text>
        <text x="28" y="82">×</text>
        <text x="68" y="82">=</text>
      </g>
    </MascotShell>
  );
}

// Sparky — teal lightbulb (STEM mascot)
function Sparky({ size = 96 }) {
  return (
    <MascotShell size={size}>
      <defs>
        <radialGradient id="sparky-body" cx="40%" cy="35%" r="70%">
          <stop offset="0%" stopColor="#A6F0E8"/>
          <stop offset="60%" stopColor="#4ECDC4"/>
          <stop offset="100%" stopColor="#2A9D95"/>
        </radialGradient>
      </defs>
      {/* bulb base (screw) */}
      <rect x="38" y="76" width="24" height="6" rx="2" fill="#7e8a92"/>
      <rect x="40" y="82" width="20" height="4" rx="2" fill="#5e6a72"/>
      <rect x="42" y="86" width="16" height="3" rx="1.5" fill="#5e6a72"/>
      {/* glass bulb */}
      <path d="M50 10 C28 10 18 28 22 46 C24 56 32 60 34 70 L66 70 C68 60 76 56 78 46 C82 28 72 10 50 10z" fill="url(#sparky-body)"/>
      {/* highlight */}
      <ellipse cx="38" cy="28" rx="8" ry="14" fill="#fff" opacity=".4"/>
      {/* eyes */}
      <circle cx="42" cy="42" r="5" fill="#0d3a37"/>
      <circle cx="58" cy="42" r="5" fill="#0d3a37"/>
      <circle cx="43.6" cy="40.5" r="1.6" fill="#fff"/>
      <circle cx="59.6" cy="40.5" r="1.6" fill="#fff"/>
      {/* smile */}
      <path d="M42 54 Q50 60 58 54" stroke="#0d3a37" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      {/* spark rays */}
      <g stroke="#FFB02E" strokeWidth="2.4" strokeLinecap="round">
        <path d="M10 22 L18 26"/>
        <path d="M90 22 L82 26"/>
        <path d="M8 50 L16 50"/>
        <path d="M92 50 L84 50"/>
        <path d="M14 76 L22 70"/>
        <path d="M86 76 L78 70"/>
      </g>
    </MascotShell>
  );
}

// Bytey — orange pixel robot (Coding mascot)
function Bytey({ size = 96 }) {
  return (
    <MascotShell size={size}>
      <defs>
        <linearGradient id="bytey-body" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#FFA374"/>
          <stop offset="100%" stopColor="#E76A2C"/>
        </linearGradient>
      </defs>
      {/* antenna */}
      <line x1="50" y1="10" x2="50" y2="20" stroke="#FF6B9D" strokeWidth="2.4"/>
      <circle cx="50" cy="8" r="3.5" fill="#FF6B9D"/>
      {/* head */}
      <rect x="22" y="18" width="56" height="48" rx="10" fill="url(#bytey-body)"/>
      {/* screen */}
      <rect x="30" y="28" width="40" height="26" rx="6" fill="#1a0e08"/>
      {/* pixel eyes (square) */}
      <rect x="38" y="36" width="6" height="6" fill="#FFD061"/>
      <rect x="56" y="36" width="6" height="6" fill="#FFD061"/>
      {/* smile pixels */}
      <rect x="40" y="46" width="4" height="4" fill="#FFD061"/>
      <rect x="56" y="46" width="4" height="4" fill="#FFD061"/>
      <rect x="44" y="49" width="12" height="3" fill="#FFD061"/>
      {/* neck + body */}
      <rect x="44" y="66" width="12" height="4" fill="#A04416"/>
      <rect x="30" y="70" width="40" height="16" rx="5" fill="url(#bytey-body)"/>
      {/* chest light */}
      <circle cx="50" cy="78" r="3.5" fill="#4ECDC4"/>
      {/* arms */}
      <rect x="14" y="40" width="8" height="20" rx="3" fill="#E76A2C"/>
      <rect x="78" y="40" width="8" height="20" rx="3" fill="#E76A2C"/>
    </MascotShell>
  );
}

// Rooky — friendly chess rook (Chess mascot)
function Rooky({ size = 96 }) {
  return (
    <MascotShell size={size}>
      <defs>
        <linearGradient id="rooky-body" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#FF9CBE"/>
          <stop offset="100%" stopColor="#E64C82"/>
        </linearGradient>
      </defs>
      {/* crenellations */}
      <rect x="22" y="14" width="8" height="12" fill="#E64C82"/>
      <rect x="34" y="14" width="8" height="12" fill="#E64C82"/>
      <rect x="46" y="14" width="8" height="12" fill="#E64C82"/>
      <rect x="58" y="14" width="8" height="12" fill="#E64C82"/>
      <rect x="70" y="14" width="8" height="12" fill="#E64C82"/>
      {/* top band */}
      <rect x="20" y="26" width="60" height="8" rx="3" fill="url(#rooky-body)"/>
      {/* tower body */}
      <path d="M28 34 Q28 60 24 80 L76 80 Q72 60 72 34z" fill="url(#rooky-body)"/>
      {/* base */}
      <rect x="18" y="80" width="64" height="8" rx="3" fill="#E64C82"/>
      {/* face area lighter */}
      <ellipse cx="50" cy="56" rx="20" ry="16" fill="#FFE1EC"/>
      {/* eyes */}
      <circle cx="42" cy="54" r="4" fill="#3a0e1f"/>
      <circle cx="58" cy="54" r="4" fill="#3a0e1f"/>
      <circle cx="43.2" cy="52.8" r="1.4" fill="#fff"/>
      <circle cx="59.2" cy="52.8" r="1.4" fill="#fff"/>
      {/* smile */}
      <path d="M44 62 Q50 67 56 62" stroke="#3a0e1f" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      {/* cheek */}
      <circle cx="34" cy="62" r="2.4" fill="#E64C82" opacity=".6"/>
      <circle cx="66" cy="62" r="2.4" fill="#E64C82" opacity=".6"/>
    </MascotShell>
  );
}

function Mascot({ which, size = 96 }) {
  const map = { pico: Pico, numo: Numo, sparky: Sparky, bytey: Bytey, rooky: Rooky };
  const Cmp = map[which] || Pico;
  return <Cmp size={size}/>;
}

window.LKMascots = { Mascot, Pico, Numo, Sparky, Bytey, Rooky };
