// Shared primitives: mascot, frame, label, etc.

// Mascot — a geometric pet using only simple primitives (circles, rects).
// Variants change accessory + base color; no complex SVG drawing.
const Mascot = ({ size = 88, variant = "default", expression = "happy" }) => {
  const palette = {
    default: { body: "var(--coral)", accent: "var(--gold)" },
    space:   { body: "var(--sky)", accent: "var(--gold)" },
    dino:    { body: "var(--moss)", accent: "var(--coral)" },
    ninja:   { body: "var(--ink)", accent: "var(--cyan)" },
    jungle:  { body: "var(--moss)", accent: "var(--gold)" },
  }[variant] || { body: "var(--coral)", accent: "var(--gold)" };
  const eyeY = expression === "wink" ? 0 : 0;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: "block" }}>
      {/* shadow */}
      <ellipse cx="50" cy="92" rx="28" ry="3" fill="rgba(0,0,0,0.12)"/>
      {/* body */}
      <rect x="14" y="22" width="72" height="64" rx="22"
            fill={palette.body} stroke="var(--rule-bold)" strokeWidth="2.5"/>
      {/* belly panel */}
      <rect x="28" y="44" width="44" height="34" rx="14"
            fill="var(--paper-card)" stroke="var(--rule-bold)" strokeWidth="2"/>
      {/* eyes */}
      <circle cx="38" cy={56 + eyeY} r="4" fill="var(--ink)"/>
      {expression === "wink"
        ? <path d="M58 56 L66 56" stroke="var(--ink)" strokeWidth="3" strokeLinecap="round"/>
        : <circle cx="62" cy={56 + eyeY} r="4" fill="var(--ink)"/>}
      {/* smile */}
      <path d="M42 68 Q50 74 58 68" stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round" fill="none"/>
      {/* antenna */}
      <line x1="50" y1="22" x2="50" y2="10" stroke="var(--rule-bold)" strokeWidth="2.5"/>
      <circle cx="50" cy="8" r="4" fill={palette.accent} stroke="var(--rule-bold)" strokeWidth="2"/>
      {/* ears */}
      <rect x="6" y="40" width="10" height="18" rx="5" fill={palette.body} stroke="var(--rule-bold)" strokeWidth="2"/>
      <rect x="84" y="40" width="10" height="18" rx="5" fill={palette.body} stroke="var(--rule-bold)" strokeWidth="2"/>
    </svg>
  );
};

// XP bar with chunky outline
const XPBar = ({ value = 64, max = 100, level = 7 }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <div style={{
      display: "grid", placeItems: "center",
      width: 38, height: 38, borderRadius: "50%",
      background: "var(--gold)", border: "1.5px solid var(--rule-bold)",
      boxShadow: "var(--sh-1)", fontWeight: 800, fontSize: 14,
    }}>{level}</div>
    <div style={{ flex: 1 }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, fontWeight: 700, color: "var(--ink-soft)", marginBottom: 4 }}>
        <span>LEVEL {level}</span><span>{value}/{max} XP</span>
      </div>
      <div className="progress"><i style={{ width: `${(value/max)*100}%` }}/></div>
    </div>
  </div>
);

// Section header with eyebrow + title
const SectionHead = ({ eyebrow, title, action }) => (
  <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 14 }}>
    <div>
      {eyebrow && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 4 }}>{eyebrow}</div>}
      <h3 className="display" style={{ fontSize: 22, margin: 0 }}>{title}</h3>
    </div>
    {action}
  </div>
);

// Theme-scoped wrapper for any artboard
const Themed = ({ theme = "", className = "", children, style }) => (
  <div className={`codeland ${theme ? "theme-" + theme : ""} ${className}`} style={style}>
    {children}
  </div>
);

// Small avatar — initial inside a circle
const Avatar = ({ name = "AB", color = "var(--coral)", size = 32 }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%",
    background: color, color: "white",
    border: "1.5px solid var(--rule-bold)",
    display: "grid", placeItems: "center",
    fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size * 0.42,
    flexShrink: 0,
  }}>{name}</div>
);

// Mini stat card
const Stat = ({ icon, label, value, sub, accent = "var(--coral)" }) => (
  <div className="card" style={{ padding: 14 }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-soft)", fontSize: 12, fontWeight: 600 }}>
      <span style={{ color: accent }}>{icon}</span>{label}
    </div>
    <div className="display" style={{ fontSize: 28, marginTop: 6 }}>{value}</div>
    {sub && <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 2 }}>{sub}</div>}
  </div>
);

// Tab pills
const Tabs = ({ items, active, onChange }) => (
  <div style={{
    display: "inline-flex", padding: 4, background: "var(--paper-deep)",
    borderRadius: "var(--r-pill)", border: "var(--border)",
    boxShadow: "var(--sh-1)",
  }}>
    {items.map(it => (
      <button key={it} onClick={() => onChange?.(it)}
        style={{
          padding: "6px 14px", borderRadius: "var(--r-pill)",
          border: "none", background: it === active ? "var(--ink)" : "transparent",
          color: it === active ? "var(--paper-card)" : "var(--ink-soft)",
          fontWeight: 700, fontSize: 13, fontFamily: "var(--font-ui)", cursor: "pointer",
        }}>{it}</button>
    ))}
  </div>
);

Object.assign(window, { Mascot, XPBar, SectionHead, Themed, Avatar, Stat, Tabs });