/* Adapted for in-browser Babel mock: React globals + window export
   (source: repetir_next/src/components/Stylo.jsx). */
(function () {
const { useId } = React;

// ======================================================================
// MASCOT — Stylo, the main Repetir mascot ("Glow-up" felt-tip marker)
// Coral marker with gradient relief, metal ferrule and an eyebrowed,
// expressive face. Balances on its rounded black tip.
// Rendered through the <Mascot> router (@/components/Mascot) as variant "stylo".
// ======================================================================
// Usage: <Stylo pose="hello" size={200} />  (usually via <Mascot />)
// Poses: hello | write | cheer | sleep | thumbs | sad | levelup | wave
// ======================================================================

const P = {
  bodyLight: "#ffc987",
  body: "#ff9f43",
  bodyMid: "#f08a26",
  bodyDark: "#e87d1a",
  tip: "#2d2d2d",
  tipLight: "#5a5a5a",
  eraser: "#fefbf6",
  eraserShadow: "#e8d9c4",
  metal: "#6366f1",
  metalDark: "#4044c9",
  metalLight: "#9aa0ff",
  white: "#ffffff",
  eye: "#2d2d2d",
  blush: "#ff6b6b",
};

const CONFIGS = {
  hello:   { tilt: -8,  bounceDur: "2.4s", eye: "open",    mouth: "smile",       leftArm: "wave",    rightArm: "down",    extras: null },
  write:   { tilt: 18,  bounceDur: "1.6s", eye: "focused", mouth: "concentrate", leftArm: "down",    rightArm: "holding", extras: "line" },
  cheer:   { tilt: 0,   bounceDur: "0.6s", eye: "happy",   mouth: "openBig",     leftArm: "up",      rightArm: "up",      extras: "confetti" },
  sleep:   { tilt: 12,  bounceDur: "4s",   eye: "closed",  mouth: "zzz",         leftArm: "down",    rightArm: "down",    extras: "zzz" },
  thumbs:  { tilt: -4,  bounceDur: "2s",   eye: "wink",    mouth: "smirk",       leftArm: "down",    rightArm: "thumbs",  extras: null },
  sad:     { tilt: 6,   bounceDur: "3s",   eye: "sad",     mouth: "frown",       leftArm: "down",    rightArm: "down",    extras: "tear" },
  levelup: { tilt: 0,   bounceDur: "0.9s", eye: "star",    mouth: "openBig",     leftArm: "up",      rightArm: "up",      extras: "stars" },
  wave:    { tilt: -12, bounceDur: "1.6s", eye: "open",    mouth: "smile",       leftArm: "waveBig", rightArm: "down",    extras: null },
};

function Brow({ cx, variant }) {
  const inner = cx < 100 ? 1 : -1;
  let y = 126, rot = 0;
  if (variant === "happy" || variant === "star") y = 121;
  if (variant === "focused") { y = 129; rot = inner * 13; }
  if (variant === "sad")     { y = 123; rot = -inner * 15; }
  if (variant === "wink" && cx > 100) y = 124;
  return (
    <g transform={`rotate(${rot} ${cx} ${y})`}>
      <path d={`M ${cx - 7} ${y} q 7 -3.5 14 0`} stroke={P.eye} strokeWidth="2.6" fill="none" strokeLinecap="round" />
    </g>
  );
}

function Eye({ cx, cy, variant }) {
  if (variant === "closed" || variant === "zzz" || (variant === "wink" && cx > 100)) {
    return <path d={`M ${cx - 7} ${cy} Q ${cx} ${cy - 4} ${cx + 7} ${cy}`} stroke={P.eye} strokeWidth="3" strokeLinecap="round" fill="none" />;
  }
  if (variant === "happy") {
    return <path d={`M ${cx - 7} ${cy + 2} Q ${cx} ${cy - 5} ${cx + 7} ${cy + 2}`} stroke={P.eye} strokeWidth="3" strokeLinecap="round" fill="none" />;
  }
  if (variant === "sad") {
    return (
      <g>
        <ellipse cx={cx} cy={cy + 1} rx="4" ry="5" fill={P.eye} />
        <circle cx={cx + 1} cy={cy - 1} r="1.2" fill={P.white} />
      </g>
    );
  }
  if (variant === "star") {
    return <path transform={`translate(${cx - 7} ${cy - 7})`} d="M7 0 L9 5 L14 5 L10 8 L12 13 L7 10 L2 13 L4 8 L0 5 L5 5 Z" fill="#ffa502" stroke="#e87d1a" strokeWidth="0.5" />;
  }
  if (variant === "focused") {
    return <ellipse cx={cx} cy={cy} rx="3.4" ry="4.4" fill={P.eye} />;
  }
  return (
    <g>
      <ellipse cx={cx} cy={cy} rx="4.2" ry="5.4" fill={P.eye} />
      <circle cx={cx + 1.2} cy={cy - 1.6} r="1.6" fill={P.white} />
      <circle cx={cx - 1.4} cy={cy + 2} r="1" fill={P.white} opacity=".7" />
    </g>
  );
}

function Mouth({ variant }) {
  const cx = 100, cy = 154;
  if (variant === "smile")       return <path d={`M ${cx - 9} ${cy} Q ${cx} ${cy + 7} ${cx + 9} ${cy}`} stroke={P.eye} strokeWidth="3" fill="none" strokeLinecap="round" />;
  if (variant === "smirk")       return <path d={`M ${cx - 8} ${cy} Q ${cx - 2} ${cy + 5} ${cx + 9} ${cy - 2}`} stroke={P.eye} strokeWidth="3" fill="none" strokeLinecap="round" />;
  if (variant === "concentrate") return <path d={`M ${cx - 6} ${cy + 1} L ${cx + 6} ${cy + 1}`} stroke={P.eye} strokeWidth="3" fill="none" strokeLinecap="round" />;
  if (variant === "openBig")     return <g><ellipse cx={cx} cy={cy + 2} rx="7" ry="7.5" fill={P.eye} /><path d={`M ${cx - 5} ${cy + 6} Q ${cx} ${cy + 9} ${cx + 5} ${cy + 6}`} fill="#ff8f8f" /></g>;
  if (variant === "frown")       return <path d={`M ${cx - 8} ${cy + 4} Q ${cx} ${cy - 3} ${cx + 8} ${cy + 4}`} stroke={P.eye} strokeWidth="3" fill="none" strokeLinecap="round" />;
  if (variant === "zzz")         return <path d={`M ${cx - 5} ${cy} Q ${cx} ${cy + 3} ${cx + 5} ${cy}`} stroke={P.eye} strokeWidth="2.5" fill="none" strokeLinecap="round" />;
  return null;
}

function Arm({ side, variant }) {
  const x0 = side === "left" ? 74 : 126;
  const sign = side === "left" ? -1 : 1;
  const paths = {
    down:    { d: `M ${x0} 150 Q ${x0 + sign * 8} 166, ${x0 + sign * 12} 184`, hand: [x0 + sign * 12, 184] },
    up:      { d: `M ${x0} 150 Q ${x0 + sign * 18} 128, ${x0 + sign * 26} 110`, hand: [x0 + sign * 26, 110] },
    wave:    { d: `M ${x0} 150 Q ${x0 + sign * 18} 132, ${x0 + sign * 27} 120`, hand: [x0 + sign * 27, 120] },
    waveBig: { d: `M ${x0} 150 Q ${x0 + sign * 24} 120, ${x0 + sign * 34} 104`, hand: [x0 + sign * 34, 104] },
    thumbs:  { d: `M ${x0} 150 Q ${x0 + sign * 14} 142, ${x0 + sign * 21} 132`, hand: [x0 + sign * 21, 132], thumb: true },
    holding: { d: `M ${x0} 150 Q ${x0 + sign * 16} 162, ${x0 + sign * 28} 176`, hand: [x0 + sign * 28, 176] },
  };
  const p = paths[variant] ?? paths.down;
  return (
    <g>
      <path d={p.d} stroke={P.body} strokeWidth="8.5" fill="none" strokeLinecap="round" />
      <circle cx={p.hand[0]} cy={p.hand[1]} r="7.5" fill={P.white} stroke={P.eye} strokeWidth="1.6" />
      {p.thumb && <path d={`M ${p.hand[0] + sign * 4} ${p.hand[1] - 4} l ${sign * 3} -6`} stroke={P.eye} strokeWidth="2" strokeLinecap="round" />}
    </g>
  );
}

function Extras({ kind }) {
  if (kind === "line") {
    return (
      <g>
        <path d="M 150 244 Q 175 240, 198 246" stroke="#2d2d2d" strokeWidth="3" fill="none" strokeLinecap="round" />
        <path d="M 140 239 L 150 244" stroke="#2d2d2d" strokeWidth="3" strokeLinecap="round" />
      </g>
    );
  }
  if (kind === "confetti") {
    return (
      <g>
        <circle cx="30" cy="30" r="4" fill="#58cc02" />
        <circle cx="170" cy="40" r="4" fill="#4b7bec" />
        <rect x="20" y="100" width="7" height="7" fill="#6366f1" transform="rotate(20 23 103)" />
        <rect x="175" y="120" width="7" height="7" fill="#ff6b6b" transform="rotate(-15 178 123)" />
        <path d="M15 60 l5 -4 l2 6 z" fill="#ffa502" />
        <path d="M185 80 l-5 -4 l-2 6 z" fill="#ee5a6f" />
      </g>
    );
  }
  if (kind === "zzz") {
    return (
      <g fontFamily="'Dancing Script', cursive" fontWeight="700" fill={P.metal}>
        <text x="140" y="70" fontSize="22">z</text>
        <text x="155" y="50" fontSize="28">z</text>
        <text x="172" y="28" fontSize="34">Z</text>
      </g>
    );
  }
  if (kind === "tear") return <path d="M 88 148 Q 86 158, 88 164 Q 90 158, 88 148 Z" fill="#4b7bec" opacity=".8" />;
  if (kind === "stars") {
    return (
      <g fill="#ffa502">
        <path d="M22 70 l3 7 l7 1 l-5 5 l1 7 l-6 -3 l-6 3 l1 -7 l-5 -5 l7 -1 z" />
        <path d="M176 50 l2 5 l5 1 l-4 3 l1 5 l-4 -2 l-4 2 l1 -5 l-4 -3 l5 -1 z" />
        <path d="M180 170 l3 7 l7 1 l-5 5 l1 7 l-6 -3 l-6 3 l1 -7 l-5 -5 l7 -1 z" />
      </g>
    );
  }
  return null;
}

/**
 * @param {object} props
 * @param {"hello"|"write"|"cheer"|"sleep"|"thumbs"|"sad"|"levelup"|"wave"} [props.pose]
 * @param {number} [props.size]
 * @param {React.CSSProperties} [props.style]
 * @param {string} [props.speaking]
 */
function Stylo({ pose = "hello", size = 200, style, speaking }) {
  const s = size;
  const c = CONFIGS[pose] ?? CONFIGS.hello;
  // #1161 — unique per-instance ids: two mascots of the same pose can be mounted
  // simultaneously (responsive desktop/mobile). Keying gradient/anim ids only by
  // `pose` produced duplicate ids in the DOM, so a hidden instance "owned" the
  // gradient paint server and the visible one rendered transparent. useId() makes
  // every instance self-contained.
  const uid = useId().replace(/:/g, "");
  const animId = `mascot-bounce-${uid}`;
  const bodyId = `mascot-body-${uid}`;
  const ferId = `mascot-fer-${uid}`;
  const tipId = `mascot-tip-${uid}`;

  return (
    <div style={{ display: "inline-block", ...style }}>
      <style>{`
        @keyframes ${animId} {
          0%, 100% { transform: translateY(0) rotate(${c.tilt}deg); }
          50%      { transform: translateY(-6px) rotate(${c.tilt}deg); }
        }
        .${animId}-root { animation: ${animId} ${c.bounceDur} ease-in-out infinite; transform-origin: 100px 254px; }
        @media (prefers-reduced-motion: reduce) {
          .${animId}-root { animation: none; transform: rotate(${c.tilt}deg); }
        }
      `}</style>
      <svg viewBox="0 0 200 260" width={s} height={s * 260 / 200} overflow="visible">
        <defs>
          <linearGradient id={bodyId} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor={P.bodyLight} />
            <stop offset="0.34" stopColor={P.body} />
            <stop offset="0.8" stopColor={P.bodyMid} />
            <stop offset="1" stopColor={P.bodyDark} />
          </linearGradient>
          <linearGradient id={ferId} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor={P.metalLight} />
            <stop offset="0.5" stopColor={P.metal} />
            <stop offset="1" stopColor={P.metalDark} />
          </linearGradient>
          <radialGradient id={tipId} cx="0.4" cy="0.3" r="0.9">
            <stop offset="0" stopColor={P.tipLight} />
            <stop offset="0.6" stopColor={P.tip} />
            <stop offset="1" stopColor="#161616" />
          </radialGradient>
        </defs>

        <Extras kind={c.extras} />
        <g className={`${animId}-root`}>
          <ellipse cx="100" cy="258" rx="34" ry="4.5" fill={P.eye} opacity=".16" />

          {/* tip (standing base) */}
          <path d="M 74 206 L 82 220 L 118 220 L 126 206 Z" fill={P.bodyDark} opacity=".5" />
          <path d="M 82 220 Q 82 254, 100 254 Q 118 254, 118 220 Z" fill={`url(#${tipId})`} />
          <path d="M 88 224 Q 86 240, 94 250" stroke={P.tipLight} strokeWidth="3.5" fill="none" strokeLinecap="round" opacity=".65" />
          <circle cx="108" cy="230" r="3" fill={P.white} opacity=".15" />

          {/* body */}
          <rect x="74" y="62" width="52" height="148" rx="7" fill={`url(#${bodyId})`} />
          <rect x="80" y="66" width="7" height="140" rx="3.5" fill={P.white} opacity=".5" />
          <rect x="74" y="206" width="52" height="4" fill={P.bodyDark} opacity=".5" />

          {/* ferrule */}
          <rect x="72" y="44" width="56" height="22" rx="4" fill={`url(#${ferId})`} />
          <rect x="72" y="46" width="56" height="3.5" rx="1.6" fill={P.white} opacity=".4" />
          <line x1="84" y1="48" x2="84" y2="64" stroke={P.metalDark} strokeWidth="1.4" opacity=".55" />
          <line x1="100" y1="48" x2="100" y2="64" stroke={P.metalDark} strokeWidth="1.4" opacity=".55" />
          <line x1="116" y1="48" x2="116" y2="64" stroke={P.metalDark} strokeWidth="1.4" opacity=".55" />

          {/* eraser */}
          <rect x="74" y="16" width="52" height="30" rx="12" fill={P.eraser} stroke={P.eraserShadow} strokeWidth="2" />
          <ellipse cx="100" cy="22" rx="20" ry="5" fill={P.white} />
          <rect x="74" y="38" width="52" height="8" rx="3" fill={P.eraserShadow} opacity=".5" />

          {/* face */}
          <g>
            <circle cx="82" cy="152" r="6" fill={P.blush} opacity=".42" />
            <circle cx="118" cy="152" r="6" fill={P.blush} opacity=".42" />
            <Brow cx={91} variant={c.eye} />
            <Brow cx={109} variant={c.eye} />
            <Eye cx={91} cy={140} variant={c.eye} />
            <Eye cx={109} cy={140} variant={c.eye} />
            <Mouth variant={c.mouth} />
          </g>

          <Arm side="left" variant={c.leftArm} />
          <Arm side="right" variant={c.rightArm} />
        </g>

        {speaking && (
          <g transform="translate(130, 10)">
            <rect x="0" y="0" width="130" height="44" rx="16" fill={P.white} stroke={P.eye} strokeWidth="2" />
            <path d="M 20 44 L 16 56 L 32 44 Z" fill={P.white} stroke={P.eye} strokeWidth="2" />
            <text x="12" y="28" fontFamily="Nunito, sans-serif" fontWeight="800" fontSize="16" fill={P.eye}>{speaking}</text>
          </g>
        )}
      </svg>
    </div>
  );
}

window.Stylo = Stylo;
})();