// Inline SVG icons + Mascot

const Icon = ({ name, size = 22, color = "currentColor", stroke = 2.2 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: color, strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case "home":
      return <svg {...common}><path d="M3 11 12 3l9 8" /><path d="M5 10v10h14V10" /><path d="M10 20v-6h4v6" /></svg>;
    case "search":
      return <svg {...common}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>;
    case "calendar":
      return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="3" /><path d="M8 3v4M16 3v4M3 10h18" /></svg>;
    case "book":
      return <svg {...common}><path d="M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z" /><path d="M8 7h7M8 11h7" /></svg>;
    case "trophy":
      return <svg {...common}><path d="M8 4h8v4a4 4 0 0 1-8 0z" /><path d="M5 5h3M16 5h3M9 14h6l-1 7H10z" /></svg>;
    case "chat":
      return <svg {...common}><path d="M21 12c0 4.4-4 8-9 8-1.2 0-2.4-.2-3.4-.6L3 21l1.5-4.4C3.5 15.2 3 13.6 3 12c0-4.4 4-8 9-8s9 3.6 9 8z" /></svg>;
    case "homework":
      return <svg {...common}><path d="M5 4h11l4 4v12H5z" /><path d="M16 4v4h4" /><path d="M9 13h6M9 17h4" /></svg>;
    case "bell":
      return <svg {...common}><path d="M6 9a6 6 0 1 1 12 0c0 4 1.5 5 2 6H4c.5-1 2-2 2-6Z" /><path d="M10 19a2 2 0 0 0 4 0" /></svg>;
    case "settings":
      return <svg {...common}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8L4.2 7a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></svg>;
    case "star":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="m12 2 2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.8 5.8 21.2l1.6-7L2 9.3l7.1-.7Z" /></svg>;
    case "fire":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 2c1 4-3 5-3 9a3 3 0 0 0 2 2.8c-.5-2 1-3 1-4 2 1 4 3 4 6a6 6 0 1 1-12 0c0-3.5 3-5 4-9 1 1 2 2 4-5z" /></svg>;
    case "coin":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><circle cx="12" cy="12" r="9" /></svg>;
    case "plus":
      return <svg {...common}><path d="M12 5v14M5 12h14" /></svg>;
    case "check":
      return <svg {...common}><path d="m5 12 5 5 9-11" /></svg>;
    case "arrow":
      return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "video":
      return <svg {...common}><rect x="3" y="6" width="13" height="12" rx="2" /><path d="m16 10 5-3v10l-5-3z" /></svg>;
    case "upload":
      return <svg {...common}><path d="M12 16V4M6 10l6-6 6 6" /><path d="M4 20h16" /></svg>;
    case "play":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M7 4v16l13-8z" /></svg>;
    case "heart":
      return <svg {...common}><path d="M12 21s-7-4.5-9.3-9C1 8.5 3 5 6.5 5c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3.5 0 5.5 3.5 3.8 7-2.3 4.5-9.3 9-9.3 9z" /></svg>;
    case "user":
      return <svg {...common}><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" /></svg>;
    case "filter":
      return <svg {...common}><path d="M4 5h16M7 12h10M10 19h4" /></svg>;
    case "close":
      return <svg {...common}><path d="m6 6 12 12M18 6 6 18" /></svg>;
    case "line":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 3C6.5 3 2 6.7 2 11.2c0 4 3.6 7.4 8.4 8 .3 0 .8.3.9.6.1.3 0 .8 0 1.1l-.1.9c0 .3-.2 1 .9.5s5.7-3.4 7.8-5.8c1.4-1.6 2.1-3.3 2.1-5.3C22 6.7 17.5 3 12 3z"/></svg>;
    case "sparkle":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></svg>;
    default:
      return null;
  }
};

// Mascot — Stella the Star
const Stella = ({ size = 120, mood = "happy", animated = true, hat = false }) => {
  const eyeY = mood === "wink" ? 50 : 48;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 120 120"
      className={animated ? "mascot" : ""}
      style={{ overflow: "visible" }}
    >
      {/* Glow */}
      <circle cx="60" cy="60" r="55" fill="#FFD668" opacity="0.25" />
      {/* Star body */}
      <path
        d="M60 8 L72 42 L108 44 L80 66 L90 100 L60 80 L30 100 L40 66 L12 44 L48 42 Z"
        fill="#FFD668"
        stroke="#1b1740"
        strokeWidth="3.5"
        strokeLinejoin="round"
      />
      {/* Cheek blush */}
      <ellipse cx="42" cy="62" rx="6" ry="3.5" fill="#FF8A8A" opacity="0.8" />
      <ellipse cx="78" cy="62" rx="6" ry="3.5" fill="#FF8A8A" opacity="0.8" />
      {/* Eyes */}
      {mood === "wink" ? (
        <>
          <circle cx="48" cy="50" r="3.5" fill="#1b1740" />
          <path d="M70 50q4-2 8 0" stroke="#1b1740" strokeWidth="3" strokeLinecap="round" fill="none" />
        </>
      ) : mood === "sleep" ? (
        <>
          <path d="M44 50q4 3 8 0" stroke="#1b1740" strokeWidth="3" strokeLinecap="round" fill="none" />
          <path d="M68 50q4 3 8 0" stroke="#1b1740" strokeWidth="3" strokeLinecap="round" fill="none" />
        </>
      ) : (
        <>
          <ellipse cx="48" cy={eyeY} rx="3.5" ry="4.5" fill="#1b1740" />
          <ellipse cx="72" cy={eyeY} rx="3.5" ry="4.5" fill="#1b1740" />
          <circle cx="49.2" cy={eyeY - 1.2} r="1.2" fill="white" />
          <circle cx="73.2" cy={eyeY - 1.2} r="1.2" fill="white" />
        </>
      )}
      {/* Smile */}
      <path
        d="M50 64 Q60 74 70 64"
        stroke="#1b1740"
        strokeWidth="3"
        strokeLinecap="round"
        fill="none"
      />
      {/* Graduation cap */}
      {hat && (
        <g transform="translate(60 8) rotate(-10)">
          <path d="M-18 -2 L0 -10 L18 -2 L0 6 Z" fill="#1b1740" />
          <rect x="-2" y="-1" width="4" height="14" fill="#FF8A8A" />
          <circle cx="2" cy="14" r="3" fill="#FFD668" stroke="#1b1740" strokeWidth="1.5" />
        </g>
      )}
    </svg>
  );
};

Object.assign(window, { Icon, Stella });