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

// ======================================================================
// STYLA — the feminine Repetir mascot ("Brush" pen)
// A soft peach brush-pen with a tied bristle ponytail, a little flower
// and a lashed, rosy face. Balances on her soft brush tip.
// ======================================================================
// Usage: <Styla pose="hello" size={200} />
// Poses: hello | write | cheer | sleep | thumbs | sad | levelup | wave
// ======================================================================

const SP = {
  bodyLight: "#ffd2c2",
  body: "#ffb38f",
  bodyDark: "#ef8e63",
  brush: "#2d2d2d",
  brushLight: "#5a5a5a",
  band: "#6366f1",
  bandLight: "#9aa0ff",
  pink: "#ee5a6f",
  gold: "#ffd56b",
  white: "#ffffff",
  eye: "#2d2d2d",
  blush: "#ff6b6b",
  lip: "#d23b54",
};

const SCONFIGS = {
  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: "heart" },
  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 StylaEye({ cx, cy, variant }) {
  const lash = cx < 100
    ? <g><path d={`M ${cx - 6} ${cy - 5} l -4 -3`} stroke={SP.eye} strokeWidth="2" strokeLinecap="round" /><path d={`M ${cx - 4} ${cy - 6.5} l -3 -3.5`} stroke={SP.eye} strokeWidth="2" strokeLinecap="round" /></g>
    : <g><path d={`M ${cx + 6} ${cy - 5} l 4 -3`} stroke={SP.eye} strokeWidth="2" strokeLinecap="round" /><path d={`M ${cx + 4} ${cy - 6.5} l 3 -3.5`} stroke={SP.eye} strokeWidth="2" strokeLinecap="round" /></g>;
  if (variant === "closed" || variant === "zzz" || (variant === "wink" && cx > 100))
    return <g><path d={`M ${cx - 7} ${cy} Q ${cx} ${cy + 4} ${cx + 7} ${cy}`} stroke={SP.eye} strokeWidth="3" strokeLinecap="round" fill="none" />{lash}</g>;
  if (variant === "happy")
    return <g><path d={`M ${cx - 7} ${cy + 2} Q ${cx} ${cy - 5} ${cx + 7} ${cy + 2}`} stroke={SP.eye} strokeWidth="3" strokeLinecap="round" fill="none" />{lash}</g>;
  if (variant === "sad")
    return <g><ellipse cx={cx} cy={cy + 1} rx="4" ry="5" fill={SP.eye} /><circle cx={cx + 1} cy={cy - 1} r="1.2" fill={SP.white} />{lash}</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="#ff7aa0" stroke="#d23b54" strokeWidth="0.5" />;
  if (variant === "focused")
    return <g><ellipse cx={cx} cy={cy} rx="3.6" ry="4.6" fill={SP.eye} />{lash}</g>;
  return <g><ellipse cx={cx} cy={cy} rx="4.4" ry="5.6" fill={SP.eye} /><circle cx={cx + 1.3} cy={cy - 1.7} r="1.7" fill={SP.white} />{lash}</g>;
}

function StylaMouth({ variant }) {
  const cx = 100, cy = 156;
  if (variant === "smile")       return <path d={`M ${cx - 8} ${cy} Q ${cx} ${cy + 7} ${cx + 8} ${cy}`} stroke={SP.lip} strokeWidth="3.2" fill="none" strokeLinecap="round" />;
  if (variant === "smirk")       return <path d={`M ${cx - 7} ${cy} Q ${cx - 1} ${cy + 5} ${cx + 8} ${cy - 2}`} stroke={SP.lip} strokeWidth="3.2" fill="none" strokeLinecap="round" />;
  if (variant === "concentrate") return <path d={`M ${cx - 5} ${cy} Q ${cx} ${cy + 2} ${cx + 5} ${cy}`} stroke={SP.lip} strokeWidth="3" fill="none" strokeLinecap="round" />;
  if (variant === "openBig")     return <g><path d={`M ${cx - 8} ${cy - 2} Q ${cx} ${cy + 9} ${cx + 8} ${cy - 2} Z`} fill={SP.eye} /><path d={`M ${cx - 5} ${cy + 4} Q ${cx} ${cy + 7} ${cx + 5} ${cy + 4}`} fill="#ff9aad" /></g>;
  if (variant === "frown")       return <path d={`M ${cx - 7} ${cy + 4} Q ${cx} ${cy - 3} ${cx + 7} ${cy + 4}`} stroke={SP.lip} strokeWidth="3.2" fill="none" strokeLinecap="round" />;
  if (variant === "zzz")         return <path d={`M ${cx - 5} ${cy} Q ${cx} ${cy + 3} ${cx + 5} ${cy}`} stroke={SP.lip} strokeWidth="2.6" fill="none" strokeLinecap="round" />;
  return null;
}

function StylaArm({ side, variant }) {
  const x0 = side === "left" ? 76 : 124;
  const sign = side === "left" ? -1 : 1;
  const paths = {
    down:    { d: `M ${x0} 152 Q ${x0 + sign * 8} 166, ${x0 + sign * 12} 182`, hand: [x0 + sign * 12, 182] },
    up:      { d: `M ${x0} 152 Q ${x0 + sign * 16} 130, ${x0 + sign * 24} 112`, hand: [x0 + sign * 24, 112] },
    wave:    { d: `M ${x0} 152 Q ${x0 + sign * 16} 134, ${x0 + sign * 25} 122`, hand: [x0 + sign * 25, 122] },
    waveBig: { d: `M ${x0} 152 Q ${x0 + sign * 22} 122, ${x0 + sign * 31} 106`, hand: [x0 + sign * 31, 106] },
    thumbs:  { d: `M ${x0} 152 Q ${x0 + sign * 13} 144, ${x0 + sign * 19} 134`, hand: [x0 + sign * 19, 134], thumb: true },
    holding: { d: `M ${x0} 152 Q ${x0 + sign * 15} 164, ${x0 + sign * 26} 178`, hand: [x0 + sign * 26, 178] },
  };
  const p = paths[variant] ?? paths.down;
  return (
    <g>
      <path d={p.d} stroke={SP.body} strokeWidth="7.5" fill="none" strokeLinecap="round" />
      <circle cx={p.hand[0]} cy={p.hand[1]} r="7" fill={SP.white} stroke={SP.eye} strokeWidth="1.5" />
      {p.thumb && <path d={`M ${p.hand[0] + sign * 4} ${p.hand[1] - 4} l ${sign * 3} -6`} stroke={SP.eye} strokeWidth="2" strokeLinecap="round" />}
    </g>
  );
}

function StylaExtras({ kind }) {
  if (kind === "line") {
    return (
      <g>
        <path d="M 150 246 Q 175 242, 198 248" stroke="#d23b54" strokeWidth="3" fill="none" strokeLinecap="round" />
        <path d="M 140 241 L 150 246" stroke="#d23b54" strokeWidth="3" strokeLinecap="round" />
      </g>
    );
  }
  if (kind === "confetti") {
    return (
      <g>
        <circle cx="30" cy="30" r="4" fill="#ee5a6f" />
        <circle cx="170" cy="40" r="4" fill="#ffd56b" />
        <rect x="20" y="100" width="7" height="7" fill="#ff7aa0" transform="rotate(20 23 103)" />
        <rect x="175" y="120" width="7" height="7" fill="#6366f1" transform="rotate(-15 178 123)" />
        <path d="M15 60 l5 -4 l2 6 z" fill="#ffd56b" />
        <path d="M185 80 l-5 -4 l-2 6 z" fill="#ee5a6f" />
      </g>
    );
  }
  if (kind === "heart") return <path d="M 150 36 q -6 -8 -12 -2 q -6 6 12 16 q 18 -10 12 -16 q -6 -6 -12 2 z" fill="#ee5a6f" />;
  if (kind === "zzz") {
    return (
      <g fontFamily="'Dancing Script', cursive" fontWeight="700" fill={SP.pink}>
        <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 150 Q 86 160, 88 166 Q 90 160, 88 150 Z" fill="#4b7bec" opacity=".8" />;
  if (kind === "stars") {
    return (
      <g fill="#ffd56b">
        <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 Styla({ pose = "hello", size = 200, style, speaking }) {
  const s = size;
  const c = SCONFIGS[pose] ?? SCONFIGS.hello;
  // #1161 — unique per-instance ids: two mascots of the same pose can be mounted
  // simultaneously (responsive desktop/mobile), which duplicated the gradient id
  // and made the visible instance render transparent. useId() isolates each one.
  const uid = useId().replace(/:/g, "");
  const animId = `styla-bounce-${uid}`;
  const bodyId = `styla-body-${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 252px; }
        @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={SP.bodyLight} />
            <stop offset="0.45" stopColor={SP.body} />
            <stop offset="1" stopColor={SP.bodyDark} />
          </linearGradient>
        </defs>

        <StylaExtras kind={c.extras} />
        <g className={`${animId}-root`}>
          <ellipse cx="100" cy="256" rx="28" ry="4.5" fill={SP.eye} opacity=".16" />

          {/* ponytail of bristles */}
          <path d="M 100 44 Q 118 12 150 20 Q 128 30 124 56 Q 112 46 100 50 Z" fill={SP.pink} />
          <path d="M 116 30 Q 130 28 142 27" stroke="#ff8294" strokeWidth="2" fill="none" opacity=".7" />
          <path d="M 114 40 Q 128 38 138 38" stroke="#ff8294" strokeWidth="2" fill="none" opacity=".6" />

          {/* hair band */}
          <rect x="78" y="44" width="44" height="14" rx="6" fill={SP.band} />
          <rect x="78" y="45" width="44" height="4" rx="2" fill={SP.bandLight} opacity=".7" />

          {/* brush tip (standing base) */}
          <path d="M 80 200 Q 82 230 92 248 Q 100 258 108 248 Q 118 230 120 200 Z" fill={SP.brush} />
          <path d="M 92 206 Q 94 232 100 248" stroke={SP.brushLight} strokeWidth="2.2" fill="none" strokeLinecap="round" opacity=".55" />
          <path d="M 108 206 Q 106 232 100 248" stroke="#1a1a1a" strokeWidth="2.2" fill="none" strokeLinecap="round" opacity=".55" />

          {/* soft barrel */}
          <rect x="76" y="58" width="48" height="146" rx="20" fill={`url(#${bodyId})`} />
          <rect x="83" y="64" width="7" height="134" rx="3.5" fill={SP.white} opacity=".5" />
          <rect x="76" y="196" width="48" height="11" rx="5" fill={SP.bodyDark} />

          {/* flower accent */}
          <g transform="translate(116 80)">
            <circle cx="0" cy="-7" r="4.4" fill={SP.gold} />
            <circle cx="6.5" cy="-2" r="4.4" fill={SP.gold} />
            <circle cx="4" cy="6" r="4.4" fill={SP.gold} />
            <circle cx="-4" cy="6" r="4.4" fill={SP.gold} />
            <circle cx="-6.5" cy="-2" r="4.4" fill={SP.gold} />
            <circle cx="0" cy="0" r="3.3" fill={SP.pink} />
          </g>

          {/* face */}
          <g>
            <circle cx="82" cy="154" r="6" fill={SP.blush} opacity=".5" />
            <circle cx="118" cy="154" r="6" fill={SP.blush} opacity=".5" />
            <StylaEye cx={91} cy={140} variant={c.eye} />
            <StylaEye cx={109} cy={140} variant={c.eye} />
            <StylaMouth variant={c.mouth} />
          </g>

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

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

window.Styla = Styla;
})();