/* ============================================================
   WhizKid · Bear-cub mascot
   Flat-vector "sticker" cub that matches the BrainTrail
   illustration family (MountainArt / TrailClimb).
   One physiognomy, three gear + pose treatments.
   ============================================================ */
const { useState: useStateM } = React;

/* ---- palette ---- */
const M = {
  fur:   '#b3793f',
  furD:  '#996434',
  line:  '#5e3a1c',
  cream: '#f4e3c9',
  pink:  '#e7a98a',
  nose:  '#4a2e17',
  eye:   '#39230f',
  teal:  '#0f8f7e',
  tealD: '#0a4a42',
  tealL: '#7cd6c4',
  orange:'#f08a4b',
  orangeD:'#d96a2c',
  plum:  '#7c5cd3',
  plumD: '#5d40b8',
  snow:  '#ffffff',
  gold:  '#f4c25b',
};

/* outline preset for filled shapes */
const O = { stroke: M.line, strokeWidth: 3.4, strokeLinejoin: 'round', strokeLinecap: 'round' };

/* A limb / pole = an outlined rounded capsule built from two stacked lines.
   Draw the dark outline first (caller), fur fill on top (caller). */
function Capsule({ x1, y1, x2, y2, w, fill, outline = M.line, ow = 5 }) {
  const ww = +w, oo = +ow;
  return (
    <g>
      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={outline} strokeWidth={ww + oo} strokeLinecap="round" />
      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={fill} strokeWidth={ww} strokeLinecap="round" />
    </g>
  );
}

/* A round paw at a point */
function Paw({ cx, cy, r = 12 }) {
  return (
    <g>
      <circle cx={cx} cy={cy} r={r} fill={M.fur} {...O} />
      <ellipse cx={cx} cy={cy + 1} rx={r * 0.5} ry={r * 0.42} fill={M.cream} />
    </g>
  );
}

/* ---------- The head (shared) ---------- */
function BearHead({ expression = 'smile' }) {
  const open = expression === 'cheer';
  return (
    <g>
      {/* ears */}
      <g>
        <circle cx="74" cy="62" r="27" fill={M.fur} {...O} />
        <circle cx="77" cy="66" r="14.5" fill={M.cream} />
        <circle cx="78" cy="68" r="8.5" fill={M.pink} />
        <circle cx="186" cy="62" r="27" fill={M.fur} {...O} />
        <circle cx="183" cy="66" r="14.5" fill={M.cream} />
        <circle cx="182" cy="68" r="8.5" fill={M.pink} />
      </g>

      {/* head */}
      <ellipse cx="130" cy="122" rx="74" ry="72" fill={M.fur} {...O} />

      {/* muzzle */}
      <ellipse cx="130" cy="152" rx="41" ry="30" fill={M.cream} />

      {/* cheeks */}
      <ellipse cx="86" cy="142" rx="10" ry="6" fill={M.orange} opacity="0.3" />
      <ellipse cx="174" cy="142" rx="10" ry="6" fill={M.orange} opacity="0.3" />

      {/* eyes */}
      <g>
        <ellipse cx="104" cy="116" rx="8.5" ry="10.5" fill={M.eye} />
        <ellipse cx="156" cy="116" rx="8.5" ry="10.5" fill={M.eye} />
        <circle cx="101" cy="111" r="3.1" fill="#fff" />
        <circle cx="153" cy="111" r="3.1" fill="#fff" />
        <circle cx="107" cy="120" r="1.5" fill="#fff" opacity="0.6" />
        <circle cx="159" cy="120" r="1.5" fill="#fff" opacity="0.6" />
      </g>

      {/* curious raised brows */}
      <path d="M92 100 Q104 93 115 99" fill="none" stroke={M.line} strokeWidth="3.4" strokeLinecap="round" />
      <path d="M145 99 Q156 93 168 100" fill="none" stroke={M.line} strokeWidth="3.4" strokeLinecap="round" />

      {/* nose */}
      <ellipse cx="130" cy="138" rx="12" ry="8.5" fill={M.nose} />
      <ellipse cx="126" cy="135" rx="4" ry="2" fill="#fff" opacity="0.45" />

      {/* mouth */}
      {open ? (
        <g>
          <path d="M130 146 L130 152" stroke={M.line} strokeWidth="3" strokeLinecap="round" fill="none" />
          <path d="M114 154 Q130 178 146 154 Q130 166 114 154 Z" fill={M.nose} />
          <path d="M120 160 Q130 170 140 160 Q130 166 120 160 Z" fill={M.pink} />
        </g>
      ) : (
        <g>
          <path d="M130 146 L130 153" stroke={M.line} strokeWidth="3" strokeLinecap="round" fill="none" />
          <path d="M130 153 Q120 162 111 155" stroke={M.line} strokeWidth="3" strokeLinecap="round" fill="none" />
          <path d="M130 153 Q140 162 149 155" stroke={M.line} strokeWidth="3" strokeLinecap="round" fill="none" />
        </g>
      )}
    </g>
  );
}

/* ---------- Shared lower body (no arms) ---------- */
function BearBody() {
  return (
    <g>
      {/* body */}
      <path d="M90 188 C78 220 78 262 92 286 C104 305 156 305 168 286 C182 262 182 220 170 188 Z"
            fill={M.fur} {...O} />
      {/* belly */}
      <ellipse cx="130" cy="246" rx="33" ry="38" fill={M.cream} />
      {/* feet */}
      <g>
        <ellipse cx="103" cy="300" rx="23" ry="15" fill={M.fur} {...O} />
        <ellipse cx="157" cy="300" rx="23" ry="15" fill={M.fur} {...O} />
        <ellipse cx="103" cy="301" rx="11" ry="8" fill={M.cream} />
        <ellipse cx="157" cy="301" rx="11" ry="8" fill={M.cream} />
        {[[-7,-5],[0,-7],[7,-5]].map(([dx,dy],i)=>(
          <circle key={i} cx={103+dx} cy={296+dy} r="2.2" fill={M.pink} />
        ))}
        {[[-7,-5],[0,-7],[7,-5]].map(([dx,dy],i)=>(
          <circle key={'r'+i} cx={157+dx} cy={296+dy} r="2.2" fill={M.pink} />
        ))}
      </g>
    </g>
  );
}

/* ============================================================
   BearCub — full mascot, gear + pose per variant
   ============================================================ */
function BearCub({ gear = 'ranger', size = 300 }) {
  const w = size, h = size * (340 / 260);

  return (
    <svg viewBox="0 0 260 340" width={w} height={h} style={{ display: 'block', overflow: 'visible' }}>

      {/* ground shadow */}
      <ellipse cx="130" cy="322" rx="78" ry="13" fill={M.tealD} opacity="0.12" />

      {/* ---------- TREKKER: bedroll behind shoulders (drawn first) ---------- */}
      {gear === 'trekker' && (
        <g>
          <Capsule x1="92" y1="184" x2="168" y2="184" w="16" fill={M.orange} />
          <line x1="92" y1="184" x2="168" y2="184" stroke={M.orangeD} strokeWidth="2" strokeDasharray="1 9" strokeLinecap="round" />
        </g>
      )}

      <BearBody />
      <BearHead expression={gear === 'summit' ? 'cheer' : 'smile'} />

      {/* ============ RANGER ============ */}
      {gear === 'ranger' && (
        <g>
          {/* neckerchief */}
          <path d="M104 196 Q130 214 156 196 L150 182 Q130 196 110 182 Z" fill={M.orange} {...O} />
          <path d="M120 200 L130 224 L140 200 Z" fill={M.orangeD} {...O} />
          {/* left arm resting */}
          <Capsule x1="96" y1="206" x2="80" y2="250" w="20" fill={M.fur} />
          <Paw cx="80" cy="252" />
          {/* right arm raised in a wave */}
          <Capsule x1="166" y1="206" x2="200" y2="158" w="20" fill={M.fur} />
          <Paw cx="201" cy="156" />

          {/* bush/ranger hat */}
          <ellipse cx="130" cy="74" rx="76" ry="17" fill={M.teal} {...O} />
          <ellipse cx="130" cy="71" rx="76" ry="15" fill={M.teal} />
          <path d="M101 72 C101 36 159 36 159 72 Z" fill={M.teal} {...O} />
          <path d="M101 70 Q130 80 159 70" fill="none" stroke={M.tealD} strokeWidth="6" strokeLinecap="round" />
          <path d="M101 70 Q130 80 159 70" fill="none" stroke={M.orange} strokeWidth="3" strokeLinecap="round" />
          {/* little summit pin on hat */}
          <path d="M150 56 l6 -10 l6 10 Z" fill={M.gold} {...O} />
        </g>
      )}

      {/* ============ TREKKER ============ */}
      {gear === 'trekker' && (
        <g>
          {/* backpack straps over chest */}
          <Capsule x1="108" y1="190" x2="118" y2="262" w="11" fill={M.teal} />
          <Capsule x1="152" y1="190" x2="142" y2="262" w="11" fill={M.teal} />
          <rect x="112" y="232" width="36" height="16" rx="5" fill={M.tealD} />
          {/* left arm resting */}
          <Capsule x1="96" y1="206" x2="78" y2="252" w="20" fill={M.fur} />
          <Paw cx="78" cy="254" />
          {/* walking stick + gripping arm */}
          <Capsule x1="196" y1="120" x2="186" y2="312" w="7" fill="#7a4a22" outline={M.line} ow="3" />
          <ellipse cx="196" cy="120" rx="6" ry="6" fill={M.tealL} {...O} />
          <Capsule x1="164" y1="208" x2="192" y2="238" w="20" fill={M.fur} />
          <Paw cx="194" cy="240" />
          {/* leather grip wrap */}
          <line x1="194" y1="232" x2="190" y2="252" stroke={M.orangeD} strokeWidth="4" strokeLinecap="round" />
        </g>
      )}

      {/* ============ SUMMIT ============ */}
      {gear === 'summit' && (
        <g>
          {/* scarf + tail flowing left */}
          <path d="M100 192 Q130 210 160 192 L156 178 Q130 192 104 178 Z" fill={M.teal} {...O} />
          <path d="M106 196 Q90 206 94 234 L107 231 Q106 210 118 201 Z" fill={M.teal} {...O} />
          <line x1="100" y1="206" x2="100" y2="228" stroke={M.tealD} strokeWidth="2.4" strokeLinecap="round" />

          {/* flag planted upright at his side */}
          <Capsule x1="206" y1="306" x2="206" y2="66" w="6" fill="#7a4a22" outline={M.line} ow="3" />
          <path d="M206 66 L250 75 L240 86 L250 97 L206 100 Z" fill={M.orange} {...O} />

          {/* right arm grips the pole */}
          <Capsule x1="164" y1="206" x2="200" y2="214" w="20" fill={M.fur} />
          <Paw cx="204" cy="216" r="11" />
          {/* left arm thrown up in a cheer */}
          <Capsule x1="96" y1="206" x2="72" y2="150" w="20" fill={M.fur} />
          <Paw cx="70" cy="148" r="11" />

          {/* sparkles */}
          <g fill={M.gold}>
            <path d="M52 122 l3 7 l7 3 l-7 3 l-3 7 l-3 -7 l-7 -3 l7 -3 Z" />
            <path d="M232 116 l2.6 6 l6 2.6 l-6 2.6 l-2.6 6 l-2.6 -6 l-6 -2.6 l6 -2.6 Z" />
          </g>
        </g>
      )}
    </svg>
  );
}

/* ---------- Presentation card for a concept ---------- */
function MascotCard({ gear, name, tagline, accent = M.teal, accentSoft = '#d3efe8', palette = [] }) {
  return (
    <div style={{
      width: 360, padding: '0 0 26px',
      background: '#fff',
      borderRadius: 28,
      border: '1.5px solid #eee5d0',
      boxShadow: '0 6px 0 rgba(20,58,51,0.08), 0 22px 40px -22px rgba(20,58,51,0.3)',
      overflow: 'hidden',
      fontFamily: "'Nunito', sans-serif",
    }}>
      {/* stage */}
      <div style={{
        position: 'relative', height: 360,
        background: `radial-gradient(120% 95% at 50% 18%, ${accentSoft} 0%, #fbf5e9 70%)`,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        {/* faint horizon arc */}
        <svg viewBox="0 0 360 360" width="360" height="360" style={{ position: 'absolute', inset: 0 }}>
          <path d="M-20 300 Q120 250 180 268 T 380 290 L380 360 L-20 360 Z" fill={accent} opacity="0.10" />
          <path d="M-20 320 Q140 286 220 300 T 380 312 L380 360 L-20 360 Z" fill={accent} opacity="0.14" />
        </svg>
        <div style={{ position: 'relative', marginBottom: 6, animation: 'mfloat 4s ease-in-out infinite' }}>
          <BearCub gear={gear} size={252} />
        </div>
      </div>

      {/* label */}
      <div style={{ padding: '20px 26px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <h3 style={{
            margin: 0, fontFamily: "'Fredoka', sans-serif", fontWeight: 600,
            fontSize: 26, color: '#143a33', letterSpacing: '-0.01em',
          }}>{name}</h3>
          <span style={{ display: 'flex', gap: 5, marginLeft: 'auto' }}>
            {palette.map((c, i) => (
              <span key={i} style={{ width: 16, height: 16, borderRadius: '50%', background: c, boxShadow: 'inset 0 0 0 1.5px rgba(0,0,0,0.08)' }} />
            ))}
          </span>
        </div>
        <p style={{
          margin: '8px 0 0', fontSize: 15.5, lineHeight: 1.45,
          color: '#3d5b54', fontWeight: 600, textWrap: 'pretty',
        }}>{tagline}</p>
      </div>
    </div>
  );
}

Object.assign(window, { BearCub, MascotCard, MASCOT_PAL: M });