// prinzo.jsx — Prinzo mascot placeholders, 4 styles.
// These are INTENTIONALLY stylized SVG placeholders. Final art = MJ/Kling.
// None of them copy Saint-Exupéry's Petit Prince: no blond boy with scarf,
// no asteroid, no rose/fox/snake. Prinzo is a party-host mascot for a
// school called Le Petit Prince — a name, not a likeness.

function PrinzoKid({ size = 220, p, mood = 'happy' }) {
  // Pixar-kid: round head, yellow hoodie, gold party crown, thumbs up.
  const s = size;
  return (
    <svg viewBox="0 0 220 260" width={s} height={s * 260/220} style={{ display: 'block' }}>
      <defs>
        <radialGradient id="pk-skin" cx="0.4" cy="0.35">
          <stop offset="0" stopColor="#ffdfc2"/>
          <stop offset="1" stopColor="#f0b890"/>
        </radialGradient>
        <linearGradient id="pk-hood" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={p.gold}/>
          <stop offset="1" stopColor={p.goldDeep}/>
        </linearGradient>
        <radialGradient id="pk-cheek" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor={p.accent} stopOpacity="0.5"/>
          <stop offset="1" stopColor={p.accent} stopOpacity="0"/>
        </radialGradient>
      </defs>
      {/* body / hoodie */}
      <path d="M35 250 Q35 160 110 160 Q185 160 185 250 Z" fill="url(#pk-hood)" stroke={p.goldDeep} strokeWidth="2.5"/>
      {/* hood collar shadow */}
      <ellipse cx="110" cy="165" rx="62" ry="10" fill="rgba(0,0,0,0.12)"/>
      {/* right arm + thumbs up */}
      <g transform="translate(150 170) rotate(-15)">
        <rect x="0" y="0" width="22" height="54" rx="11" fill="url(#pk-hood)" stroke={p.goldDeep} strokeWidth="2"/>
        <circle cx="11" cy="-4" r="13" fill="url(#pk-skin)"/>
        <rect x="4" y="-14" width="14" height="12" rx="4" fill="url(#pk-skin)"/>
      </g>
      {/* head */}
      <circle cx="110" cy="100" r="62" fill="url(#pk-skin)" stroke="#c68a60" strokeWidth="1.5"/>
      {/* hair tuft */}
      <path d="M72 62 Q95 30 130 48 Q155 38 162 70 Q150 55 130 62 Q100 50 72 62 Z" fill="#6b3e1f"/>
      {/* cheeks */}
      <circle cx="78" cy="118" r="14" fill="url(#pk-cheek)"/>
      <circle cx="142" cy="118" r="14" fill="url(#pk-cheek)"/>
      {/* eyes */}
      <g fill="#2a1a0a">
        <ellipse cx="88" cy="98" rx="5" ry={mood === 'wink' ? 1 : 7}/>
        <ellipse cx="132" cy="98" rx="5" ry="7"/>
      </g>
      <circle cx="89.5" cy="95" r="1.8" fill="#fff"/>
      <circle cx="133.5" cy="95" r="1.8" fill="#fff"/>
      {/* smile */}
      <path d={mood === 'sad' ? "M92 132 Q110 122 128 132" : "M88 126 Q110 146 132 126"} stroke="#2a1a0a" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {/* P monogram on hood */}
      <circle cx="110" cy="210" r="18" fill={p.bg0} opacity="0.9"/>
      <text x="110" y="218" textAnchor="middle" fontFamily="Fredoka, system-ui" fontSize="22" fontWeight="700" fill={p.gold}>P</text>
      {/* crown */}
      <g transform="translate(72 40)">
        <path d="M0 18 L10 0 L20 14 L38 0 L50 14 L68 0 L76 18 Z" fill={p.gold} stroke={p.goldDeep} strokeWidth="2" strokeLinejoin="round"/>
        <circle cx="10" cy="0" r="3.5" fill={p.accent}/>
        <circle cx="38" cy="0" r="3.5" fill={p.accent2 || p.accent}/>
        <circle cx="68" cy="0" r="3.5" fill={p.accent}/>
        <rect x="-2" y="18" width="80" height="6" rx="2" fill={p.goldDeep}/>
      </g>
    </svg>
  );
}

function PrinzoHost({ size = 220, p }) {
  // Big head, bow tie, cone hat — stylized party host
  const s = size;
  return (
    <svg viewBox="0 0 220 260" width={s} height={s * 260/220}>
      <defs>
        <linearGradient id="ph-cone" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={p.accent}/>
          <stop offset="1" stopColor={p.accent2 || p.gold}/>
        </linearGradient>
      </defs>
      {/* tiny body */}
      <rect x="92" y="200" width="36" height="50" rx="10" fill={p.gold}/>
      <ellipse cx="110" cy="210" rx="22" ry="8" fill={p.goldDeep}/>
      {/* bow tie */}
      <path d="M85 200 L110 188 L135 200 L110 212 Z" fill={p.accent}/>
      <circle cx="110" cy="200" r="5" fill={p.goldDeep}/>
      {/* giant head */}
      <circle cx="110" cy="130" r="78" fill="#ffe5c7" stroke="#c68a60" strokeWidth="2"/>
      {/* freckles */}
      <g fill="#c68a60">
        <circle cx="85" cy="140" r="1.5"/><circle cx="92" cy="145" r="1.5"/>
        <circle cx="128" cy="145" r="1.5"/><circle cx="135" cy="140" r="1.5"/>
      </g>
      {/* eyes — half-moon smile eyes */}
      <path d="M82 122 Q92 112 102 122" stroke="#2a1a0a" strokeWidth="4" fill="none" strokeLinecap="round"/>
      <path d="M118 122 Q128 112 138 122" stroke="#2a1a0a" strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* big grin */}
      <path d="M78 150 Q110 188 142 150" stroke="#2a1a0a" strokeWidth="4" fill="#5a1010" strokeLinejoin="round"/>
      <path d="M80 151 Q110 163 140 151 L140 152 Q110 155 80 152 Z" fill="#fff"/>
      {/* party cone hat */}
      <polygon points="110,14 78,82 142,82" fill="url(#ph-cone)" stroke={p.goldDeep} strokeWidth="2"/>
      <circle cx="110" cy="10" r="8" fill={p.gold}/>
      <g fill={p.gold}>
        <circle cx="95" cy="50" r="3"/><circle cx="125" cy="50" r="3"/>
        <circle cx="105" cy="70" r="2.5"/><circle cx="120" cy="70" r="2.5"/>
      </g>
    </svg>
  );
}

function PrinzoFox({ size = 220, p }) {
  // Fox cub with party hat — IP-safe mascot alternative.
  const s = size;
  return (
    <svg viewBox="0 0 220 260" width={s} height={s * 260/220}>
      <defs>
        <linearGradient id="pf-body" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#ff9a3c"/>
          <stop offset="1" stopColor="#e06616"/>
        </linearGradient>
      </defs>
      {/* body */}
      <ellipse cx="110" cy="210" rx="56" ry="40" fill="url(#pf-body)" stroke="#a04410" strokeWidth="2"/>
      <ellipse cx="110" cy="215" rx="36" ry="22" fill="#fff3e0"/>
      {/* head */}
      <circle cx="110" cy="130" r="62" fill="url(#pf-body)" stroke="#a04410" strokeWidth="2"/>
      {/* ears */}
      <polygon points="62,98 52,50 92,82" fill="url(#pf-body)" stroke="#a04410" strokeWidth="2"/>
      <polygon points="158,98 168,50 128,82" fill="url(#pf-body)" stroke="#a04410" strokeWidth="2"/>
      <polygon points="68,90 62,66 86,82" fill="#2a1a0a"/>
      <polygon points="152,90 158,66 134,82" fill="#2a1a0a"/>
      {/* face mask */}
      <path d="M70 130 Q110 175 150 130 Q135 145 110 145 Q85 145 70 130 Z" fill="#fff3e0"/>
      {/* eyes */}
      <circle cx="92" cy="122" r="6" fill="#2a1a0a"/>
      <circle cx="128" cy="122" r="6" fill="#2a1a0a"/>
      <circle cx="94" cy="119" r="2" fill="#fff"/>
      <circle cx="130" cy="119" r="2" fill="#fff"/>
      {/* snout */}
      <ellipse cx="110" cy="148" rx="7" ry="5" fill="#2a1a0a"/>
      <path d="M110 153 Q102 165 95 162 M110 153 Q118 165 125 162" stroke="#2a1a0a" strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* tail peeking */}
      <path d="M160 220 Q200 210 195 180 Q188 200 170 205 Z" fill="url(#pf-body)" stroke="#a04410" strokeWidth="2"/>
      <path d="M188 188 Q195 182 198 180" stroke="#fff3e0" strokeWidth="6" strokeLinecap="round" fill="none"/>
      {/* party hat */}
      <polygon points="110,20 88,82 132,82" fill={p.gold} stroke={p.goldDeep} strokeWidth="2"/>
      <circle cx="110" cy="16" r="6" fill={p.accent}/>
      <rect x="88" y="80" width="44" height="6" rx="2" fill={p.accent}/>
    </svg>
  );
}

function PrinzoGeo({ size = 220, p }) {
  // Geometric character — shapes + face. Modern, distinctive.
  const s = size;
  return (
    <svg viewBox="0 0 220 260" width={s} height={s * 260/220}>
      {/* body triangle */}
      <polygon points="110,130 40,240 180,240" fill={p.accent}/>
      {/* square arms */}
      <rect x="20" y="185" width="30" height="30" rx="6" fill={p.gold} transform="rotate(-20 35 200)"/>
      <rect x="170" y="185" width="30" height="30" rx="6" fill={p.gold} transform="rotate(20 185 200)"/>
      {/* head circle */}
      <circle cx="110" cy="90" r="58" fill={p.gold} stroke={p.goldDeep} strokeWidth="3"/>
      {/* eyes — dots */}
      <circle cx="90" cy="85" r="7" fill={p.bg0}/>
      <circle cx="130" cy="85" r="7" fill={p.bg0}/>
      {/* smile — arc */}
      <path d="M84 108 Q110 128 136 108" stroke={p.bg0} strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* crown — 3 triangles */}
      <g transform="translate(70 30)">
        <polygon points="0,22 10,0 20,22" fill={p.accent}/>
        <polygon points="22,22 32,0 42,22" fill={p.accent2 || p.accent}/>
        <polygon points="44,22 54,0 64,22" fill={p.accent}/>
        <rect x="-2" y="22" width="84" height="6" rx="2" fill={p.goldDeep}/>
      </g>
      {/* P badge */}
      <circle cx="110" cy="190" r="18" fill={p.bg0}/>
      <text x="110" y="198" textAnchor="middle" fontFamily="Fredoka, system-ui" fontSize="22" fontWeight="700" fill={p.gold}>P</text>
    </svg>
  );
}

function Prinzo({ size = 220, loop = true }) {
  return (
    <video
      src="video/prinzo_intro.mp4"
      autoPlay muted loop={loop} playsInline
      style={{ width: size, height: size, objectFit: 'cover', borderRadius: '50%', display: 'block' }}
    />
  );
}

Object.assign(window, { Prinzo, PrinzoKid, PrinzoHost, PrinzoFox, PrinzoGeo });
