// Additional pig variants: pixel, line-art, retro travel-poster

const PigPixel = ({ size = 220, pose = "wave", wave = 0 }) => {
  // Pixel art — 16×16 grid rendered as rects. Shade alternates with wave.
  const P = 10; // pixel size (within 0..220 viewbox)
  const skin = "#FFB3A0";
  const shade = "#E88873";
  const dark = "#2E2A2A";
  const lei = ["#FF6B4A", "#FFD36B", "#FF9EC0", "#6FD2D7"];
  // Hand-coded pixel grid: 22×22
  // 0=transparent 1=skin 2=shade 3=dark 4=shades(dark) 5=eye 6=lei1 7=lei2 8=lei3 9=lei4
  const grid = [
    "......11111111......",
    ".....1111111111.....",
    "....111111111111....",
    "...11333333333311...", // shades band
    "...13444443444431...",
    "..1134444443444411..",
    "..1134455534455311..",
    ".113344544454453311.",
    ".111111111111111111.",
    "1111111222222111111.",
    "1111112222222211111.",
    "1111112222222211111.",
    "1111132255223311111.",
    ".11113322222331111..",
    ".11111333333311111..",
    "66778899667788996677",
    "11111111111111111111",
    "11111111111111111111",
    ".1111111111111111111",
    "..111111111111111...",
    "...11111111111......",
    ".....11111.........."
  ];
  const map = { "1": skin, "2": shade, "3": dark, "4": "#1A1A1A", "5": "#6FD2D7", "6": lei[0], "7": lei[1], "8": lei[2], "9": lei[3] };
  return (
    <svg viewBox="0 0 220 220" width={size} height={size} style={{ display: "block", imageRendering: "pixelated" }}>
      {grid.map((row, y) =>
        [...row].map((c, x) => {
          if (c === "." || c === "0") return null;
          return <rect key={`${x}-${y}`} x={x * P} y={y * P} width={P} height={P} fill={map[c] || skin} />;
        })
      )}
      {/* waving arm block */}
      {pose === "wave" && (
        <g style={{ transformOrigin: "180px 120px", transform: `rotate(${-10 + Math.sin(wave) * 14}deg)` }}>
          <rect x="170" y="100" width={P*2} height={P*4} fill={skin} />
          <rect x="180" y="90" width={P*2} height={P*2} fill={skin} />
        </g>
      )}
    </svg>
  );
};

const PigLine = ({ size = 220, pose = "wave", wave = 0 }) => {
  // Line-art minimal — single color strokes, no fill beyond a tiny blush
  const ink = "#2B1A14";
  const blush = "#FFB3A0";
  const coral = "#FF6B4A";
  const waveAngle = Math.sin(wave) * 14;
  return (
    <svg viewBox="0 0 260 260" width={size} height={size} style={{ display: "block", overflow: "visible" }}>
      <g fill="none" stroke={ink} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
        {pose === "surf" && (
          <g transform="translate(40 170) rotate(-10)">
            <rect x="0" y="0" width="180" height="28" rx="14" fill="#FFF" />
            <path d="M20 14 L 160 14" />
          </g>
        )}
        <ellipse cx="130" cy="160" rx="78" ry="62" fill="#FFF" />
        <line x1="88" y1="220" x2="88" y2="232" />
        <line x1="172" y1="220" x2="172" y2="232" />
        <path d="M205 150 q 20 -4 16 14 q -4 16 -18 6" />
        <g style={{ transformOrigin: "130px 100px", transform: `rotate(${Math.sin(wave * 1.3) * 2}deg)` }}>
          <ellipse cx="130" cy="100" rx="64" ry="56" fill="#FFF" />
          <path d="M78 66 q 4 -30 34 -18 q 6 18 -6 30 z" fill="#FFF" />
          <path d="M182 66 q -4 -30 -34 -18 q -6 18 6 30 z" fill="#FFF" />
          <ellipse cx="130" cy="118" rx="30" ry="22" fill="#FFF" />
          <circle cx="122" cy="120" r="2.5" fill={ink} stroke="none" />
          <circle cx="138" cy="120" r="2.5" fill={ink} stroke="none" />
          {/* shades */}
          <rect x="88" y="84" width="36" height="18" rx="5" fill={ink} />
          <rect x="136" y="84" width="36" height="18" rx="5" fill={ink} />
          <line x1="124" y1="92" x2="136" y2="92" strokeWidth="5" />
          {/* smile */}
          <path d="M118 132 q 12 10 24 0" />
          {/* blush */}
          <circle cx="92" cy="118" r="6" fill={blush} stroke="none" opacity="0.8" />
          <circle cx="168" cy="118" r="6" fill={blush} stroke="none" opacity="0.8" />
          {/* lei as simple ring */}
          <path d="M78 150 q 52 -20 104 0" strokeWidth="2" strokeDasharray="2 6" stroke={coral} />
        </g>
        {pose === "wave" && (
          <g style={{ transformOrigin: "185px 140px", transform: `rotate(${-10 + waveAngle}deg)`, fill: "#FFF" }}>
            <rect x="176" y="112" width="26" height="52" rx="12" />
            <circle cx="200" cy="112" r="14" />
          </g>
        )}
      </g>
    </svg>
  );
};

const PigRetro = ({ size = 220, pose = "wave", wave = 0 }) => {
  // Vintage travel-poster: flat block color, no outline, duotone + grain-ish dots
  const body = "#F2A07E";
  const bodyShade = "#D77A5A";
  const dark = "#3A2418";
  const cream = "#F9E8C9";
  const waveAngle = Math.sin(wave) * 12;
  return (
    <svg viewBox="0 0 260 260" width={size} height={size} style={{ display: "block", overflow: "visible" }}>
      <defs>
        <pattern id="retroDots" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.7" fill="#D77A5A" opacity="0.5" />
        </pattern>
      </defs>
      {pose === "surf" && (
        <g transform="translate(40 172) rotate(-8)">
          <rect x="0" y="0" width="180" height="26" rx="13" fill="#6FA8B8" />
          <rect x="0" y="0" width="180" height="8" rx="4" fill="#9DCBD6" />
        </g>
      )}
      <ellipse cx="130" cy="162" rx="80" ry="62" fill={body} />
      <ellipse cx="130" cy="182" rx="70" ry="36" fill="url(#retroDots)" />
      <rect x="82" y="204" width="22" height="30" rx="8" fill={bodyShade} />
      <rect x="156" y="204" width="22" height="30" rx="8" fill={bodyShade} />
      <path d="M206 150 q 22 0 18 16 q -6 14 -18 4" fill="none" stroke={bodyShade} strokeWidth="8" strokeLinecap="round" />
      <g style={{ transformOrigin: "130px 100px", transform: `rotate(${Math.sin(wave * 1.3) * 2}deg)` }}>
        <ellipse cx="130" cy="100" rx="66" ry="56" fill={body} />
        <ellipse cx="88" cy="60" rx="14" ry="22" fill={bodyShade} transform="rotate(-20 88 60)" />
        <ellipse cx="172" cy="60" rx="14" ry="22" fill={bodyShade} transform="rotate(20 172 60)" />
        <ellipse cx="130" cy="122" rx="32" ry="22" fill={bodyShade} />
        <circle cx="121" cy="122" r="3" fill={dark} />
        <circle cx="139" cy="122" r="3" fill={dark} />
        {/* aviator shades */}
        <ellipse cx="104" cy="94" rx="18" ry="12" fill={dark} />
        <ellipse cx="156" cy="94" rx="18" ry="12" fill={dark} />
        <rect x="120" y="92" width="20" height="3" fill={dark} />
        <ellipse cx="100" cy="90" rx="6" ry="3" fill={cream} opacity="0.4" />
        <ellipse cx="152" cy="90" rx="6" ry="3" fill={cream} opacity="0.4" />
        {/* smile */}
        <path d="M118 136 q 12 8 24 0" fill="none" stroke={dark} strokeWidth="3" strokeLinecap="round" />
        {/* travel badge style lei */}
        <g>
          {[...Array(7)].map((_, i) => {
            const t = i / 6;
            const x = 84 + t * 92;
            const y = 148 + Math.sin(t * Math.PI) * -14 + 8;
            const colors = ["#E84B3C", "#F2C14E", cream];
            return <rect key={i} x={x - 5} y={y - 5} width="10" height="10" fill={colors[i % colors.length]} transform={`rotate(45 ${x} ${y})`} />;
          })}
        </g>
      </g>
      {pose === "wave" && (
        <g style={{ transformOrigin: "190px 140px", transform: `rotate(${-8 + waveAngle}deg)` }}>
          <rect x="178" y="112" width="22" height="50" rx="10" fill={body} />
          <circle cx="199" cy="112" r="13" fill={body} />
        </g>
      )}
    </svg>
  );
};

Object.assign(window, { PigPixel, PigLine, PigRetro });