// Hand-built SVG sprites: flapper hero, clockwork enemies, deco ornaments

const FlapperHero = ({ running, jumping, frame }) => {
  // frame: 0..3 for run cycle
  const legSwing = jumping ? 0 : (running ? [0, 1, 0, -1][frame] : 0);
  const armSwing = jumping ? -8 : (running ? [-1, 1, -1, 1][frame] * 4 : 0);

  return (
    <svg viewBox="0 0 36 56" width="36" height="56" style={{ overflow: 'visible' }}>
      {/* Shadow */}
      <ellipse cx="18" cy="55" rx="11" ry="2" fill="#000" opacity="0.5" />

      {/* Legs */}
      <g className="legs" transform={`translate(${legSwing}, 0)`}>
        {/* Left leg / stocking */}
        <path d={`M 14 38 L ${13 - legSwing} 52 L ${15 - legSwing} 52 L 16 38 Z`} fill="#ead8b1" />
        {/* Right leg */}
        <path d={`M 20 38 L ${21 + legSwing} 52 L ${23 + legSwing} 52 L 22 38 Z`} fill="#ead8b1" />
        {/* T-strap shoes */}
        <ellipse cx={14 - legSwing} cy="53" rx="3.2" ry="1.5" fill="#0a0908" />
        <ellipse cx={22 + legSwing} cy="53" rx="3.2" ry="1.5" fill="#0a0908" />
        <line x1={14 - legSwing} y1="48" x2={14 - legSwing} y2="52" stroke="#0a0908" strokeWidth="0.6" />
        <line x1={22 + legSwing} y1="48" x2={22 + legSwing} y2="52" stroke="#0a0908" strokeWidth="0.6" />
      </g>

      {/* Fringed flapper dress — gold drop-waist */}
      <g>
        {/* Dress body */}
        <path d="M 10 22 L 8 38 L 28 38 L 26 22 Z" fill="#0a0908" />
        {/* Drop waist gold band */}
        <rect x="8" y="34" width="20" height="2.5" fill="#d4a84b" />
        <rect x="8" y="36" width="20" height="0.6" fill="#8a6a1f" />
        {/* Beaded fringe */}
        {[...Array(11)].map((_, i) => (
          <g key={i} transform={`translate(${8 + i * 2}, 37)`}>
            <line x1="0" y1="0" x2="0" y2={3 + (i % 2)} stroke="#d4a84b" strokeWidth="0.5" />
            <circle cx="0" cy={3 + (i % 2)} r="0.7" fill="#e8c170" />
          </g>
        ))}
        {/* Dress chevron pattern */}
        <path d="M 12 26 L 18 30 L 24 26" stroke="#d4a84b" strokeWidth="0.6" fill="none" opacity="0.7" />
        <path d="M 12 30 L 18 33 L 24 30" stroke="#d4a84b" strokeWidth="0.6" fill="none" opacity="0.5" />
      </g>

      {/* Torso / shoulders */}
      <path d="M 11 18 L 10 24 L 26 24 L 25 18 Z" fill="#0a0908" />
      {/* Shoulder strap detail */}
      <line x1="13" y1="18" x2="13" y2="24" stroke="#d4a84b" strokeWidth="0.5" opacity="0.8" />
      <line x1="23" y1="18" x2="23" y2="24" stroke="#d4a84b" strokeWidth="0.5" opacity="0.8" />

      {/* Arms */}
      <g transform={`rotate(${armSwing} 11 20)`}>
        <path d="M 10 19 L 7 30 L 9 31 L 12 20 Z" fill="#ead8b1" />
      </g>
      <g transform={`rotate(${-armSwing} 25 20)`}>
        <path d="M 26 19 L 29 30 L 27 31 L 24 20 Z" fill="#ead8b1" />
        {/* cigarette holder in hand */}
        <line x1="29" y1="30" x2="33" y2="32" stroke="#ead8b1" strokeWidth="0.6" />
        <circle cx="33.5" cy="32" r="0.6" fill="#ff6030">
          <animate attributeName="opacity" values="1;0.4;1" dur="0.8s" repeatCount="indefinite" />
        </circle>
      </g>

      {/* Neck */}
      <rect x="16" y="14" width="4" height="5" fill="#ead8b1" />
      {/* Pearl necklace */}
      {[...Array(5)].map((_, i) => (
        <circle key={i} cx={14 + i * 2} cy={17 + Math.abs(i - 2) * 0.6} r="0.7" fill="#f5e8c8" />
      ))}

      {/* Head */}
      <ellipse cx="18" cy="11" rx="6" ry="6.5" fill="#ead8b1" />
      {/* Bob haircut — black */}
      <path d="M 11 11 Q 11 4 18 4 Q 25 4 25 11 L 25 13 Q 22 11 18 11 Q 14 11 11 13 Z" fill="#0a0908" />
      {/* Bob fringe */}
      <path d="M 13 8 Q 18 6 23 8 L 23 10 Q 18 8.5 13 10 Z" fill="#0a0908" />

      {/* Headband with feather */}
      <path d="M 11 7 Q 18 5 25 7 L 25 8.5 Q 18 6.5 11 8.5 Z" fill="#d4a84b" />
      <circle cx="14" cy="7" r="0.8" fill="#e8c170" />
      {/* Feather */}
      <path d="M 13 7 Q 9 2 7 -2 Q 9 -1 11 1 Q 12 4 13 7" fill="#d4a84b" opacity="0.85" />
      <path d="M 13 7 Q 10 2 8 -1" stroke="#8a6a1f" strokeWidth="0.4" fill="none" />

      {/* Face — minimal */}
      {/* Eye */}
      <ellipse cx="20" cy="11.5" rx="1.2" ry="0.6" fill="#0a0908" />
      <ellipse cx="15" cy="11.5" rx="1.2" ry="0.6" fill="#0a0908" />
      {/* Lashes */}
      <line x1="21" y1="11.2" x2="22" y2="10.8" stroke="#0a0908" strokeWidth="0.4" />
      <line x1="14" y1="11.2" x2="13" y2="10.8" stroke="#0a0908" strokeWidth="0.4" />
      {/* Lips — oxblood */}
      <ellipse cx="18" cy="14" rx="1.4" ry="0.7" fill="#6b1a1a" />
    </svg>
  );
};

// Clockwork enemy — a wind-up brass automaton
const ClockworkEnemy = ({ variant = 0 }) => {
  if (variant === 0) {
    // "Tin Goon" — boxy clockwork with two big gears
    return (
      <svg viewBox="0 0 40 40" width="40" height="40" style={{ overflow: 'visible' }}>
        <ellipse cx="20" cy="38" rx="12" ry="2" fill="#000" opacity="0.5" />

        {/* Body — brass/gold panel */}
        <rect x="6" y="10" width="28" height="22" fill="#1a1410" stroke="#d4a84b" strokeWidth="1" />
        {/* rivets */}
        {[[8,12],[32,12],[8,30],[32,30]].map(([x,y],i) =>
          <circle key={i} cx={x} cy={y} r="1" fill="#d4a84b" />
        )}
        {/* center brass plate */}
        <rect x="11" y="14" width="18" height="14" fill="#8a6a1f" stroke="#d4a84b" strokeWidth="0.5" />

        {/* big gear teeth */}
        <g className="gear" style={{ transformOrigin: '20px 21px' }}>
          <circle cx="20" cy="21" r="6" fill="#d4a84b" stroke="#8a6a1f" strokeWidth="0.5" />
          {[0,45,90,135,180,225,270,315].map(deg => (
            <rect key={deg} x="19" y="13" width="2" height="3" fill="#d4a84b"
              transform={`rotate(${deg} 20 21)`} />
          ))}
          <circle cx="20" cy="21" r="2" fill="#1a1410" />
          <circle cx="20" cy="21" r="0.8" fill="#d4a84b" />
        </g>

        {/* eyes — glowing red */}
        <circle cx="13" cy="17" r="1.4" fill="#c8503a">
          <animate attributeName="opacity" values="1;0.4;1" dur="1.2s" repeatCount="indefinite" />
        </circle>
        <circle cx="27" cy="17" r="1.4" fill="#c8503a">
          <animate attributeName="opacity" values="1;0.4;1" dur="1.2s" repeatCount="indefinite" />
        </circle>

        {/* wind-up key on top */}
        <g className="gear reverse" style={{ transformOrigin: '20px 8px' }}>
          <rect x="19" y="4" width="2" height="6" fill="#d4a84b" />
          <ellipse cx="17" cy="6" rx="2" ry="1" fill="#d4a84b" />
          <ellipse cx="23" cy="6" rx="2" ry="1" fill="#d4a84b" />
        </g>

        {/* Legs — peg legs */}
        <rect x="10" y="32" width="3" height="6" fill="#1a1410" stroke="#d4a84b" strokeWidth="0.4" />
        <rect x="27" y="32" width="3" height="6" fill="#1a1410" stroke="#d4a84b" strokeWidth="0.4" />
        <ellipse cx="11.5" cy="38.5" rx="2.5" ry="1" fill="#0a0908" />
        <ellipse cx="28.5" cy="38.5" rx="2.5" ry="1" fill="#0a0908" />
      </svg>
    );
  }

  // variant 1 — small "Cog Crawler" — single big gear with eyes
  return (
    <svg viewBox="0 0 40 40" width="40" height="40" style={{ overflow: 'visible' }}>
      <ellipse cx="20" cy="38" rx="11" ry="2" fill="#000" opacity="0.5" />
      <g className="gear" style={{ transformOrigin: '20px 22px' }}>
        <circle cx="20" cy="22" r="13" fill="#d4a84b" stroke="#8a6a1f" strokeWidth="0.8" />
        {[0,30,60,90,120,150,180,210,240,270,300,330].map(deg => (
          <rect key={deg} x="19" y="6" width="2" height="4" fill="#d4a84b"
            transform={`rotate(${deg} 20 22)`} />
        ))}
        <circle cx="20" cy="22" r="6" fill="#1a1410" />
        <circle cx="20" cy="22" r="1.2" fill="#d4a84b" />
      </g>
      <circle cx="16" cy="20" r="1.4" fill="#c8503a">
        <animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite" />
      </circle>
      <circle cx="24" cy="20" r="1.4" fill="#c8503a">
        <animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite" />
      </circle>
      <ellipse cx="20" cy="36" rx="6" ry="1.5" fill="#1a1410" stroke="#d4a84b" strokeWidth="0.4" />
    </svg>
  );
};

// Deco corner ornament
const DecoCorner = () => (
  <svg viewBox="0 0 70 70" width="70" height="70">
    <g fill="none" stroke="#d4a84b" strokeWidth="1.2">
      <path d="M 0 0 L 70 0 L 70 4 L 4 4 L 4 70 L 0 70 Z" fill="#d4a84b" />
      <path d="M 8 8 L 30 8 M 8 8 L 8 30" />
      <path d="M 12 12 L 22 12 L 22 22 L 12 22 Z" fill="#d4a84b" opacity="0.4" />
      <path d="M 26 8 L 26 14 M 30 8 L 30 18" />
      <path d="M 8 26 L 14 26 M 8 30 L 18 30" />
      {/* sunburst */}
      <g transform="translate(8 8)">
        {[0, 15, 30, 45, 60, 75, 90].map(d => (
          <line key={d} x1="0" y1="0" x2="36" y2="0" transform={`rotate(${d})`}
            stroke="#d4a84b" strokeWidth="0.4" opacity="0.5" />
        ))}
      </g>
    </g>
  </svg>
);

// Deco burst (title card ornament)
const DecoBurst = () => (
  <svg viewBox="0 0 120 60" width="120" height="60" className="deco-burst">
    <g stroke="#d4a84b" strokeWidth="1.5" fill="none">
      <path d="M 60 50 L 60 10" />
      <path d="M 60 50 L 30 18" />
      <path d="M 60 50 L 90 18" />
      <path d="M 60 50 L 10 35" />
      <path d="M 60 50 L 110 35" />
      <path d="M 60 50 L 45 12" />
      <path d="M 60 50 L 75 12" />
    </g>
    <circle cx="60" cy="50" r="4" fill="#d4a84b" />
    <circle cx="60" cy="50" r="7" fill="none" stroke="#d4a84b" strokeWidth="0.8" />
    <path d="M 20 52 L 100 52" stroke="#d4a84b" strokeWidth="1" />
    <path d="M 30 55 L 90 55" stroke="#d4a84b" strokeWidth="0.6" />
  </svg>
);

// Geometric deco platform end-cap
const PlatformCap = ({ side = 'left' }) => (
  <svg viewBox="0 0 24 40" width="24" height="40" style={{
    position: 'absolute', top: 0,
    [side]: '-22px',
    transform: side === 'right' ? 'scaleX(-1)' : 'none'
  }}>
    <path d="M 24 0 L 0 20 L 24 40 Z" fill="#1a1410" stroke="#d4a84b" strokeWidth="1" />
    <path d="M 22 8 L 10 20 L 22 32" stroke="#d4a84b" strokeWidth="0.6" fill="none" />
  </svg>
);

Object.assign(window, { FlapperHero, ClockworkEnemy, DecoCorner, DecoBurst, PlatformCap });
