/* global React */
function InflationPig() {
  return (
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <radialGradient id="ip-bg" cx="50%" cy="42%" r="65%"><stop offset="0%" stopColor="#ff7a7c"/><stop offset="60%" stopColor="#7a1014"/><stop offset="100%" stopColor="#1a0508"/></radialGradient>
        <linearGradient id="ip-body" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#ffa8aa"/><stop offset="60%" stopColor="#ff5e62"/><stop offset="100%" stopColor="#9a1418"/></linearGradient>
      </defs>
      <rect width="1024" height="1024" fill="url(#ip-bg)"/>
      <text x="512" y="100" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="56" fill="#fff5f5" letterSpacing="12">RUGPIAH</text>
      <g opacity="0.6">
        <circle cx="190" cy="280" r="34" fill="#ffd86e" stroke="#3a060a" strokeWidth="5"/><text x="190" y="296" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="32" fill="#3a060a">$</text>
        <circle cx="830" cy="320" r="28" fill="#ffd86e" stroke="#3a060a" strokeWidth="5"/><text x="830" y="334" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="26" fill="#3a060a">$</text>
        <circle cx="880" cy="200" r="22" fill="#ffd86e" stroke="#3a060a" strokeWidth="4"/><text x="880" y="212" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="20" fill="#3a060a">$</text>
      </g>
      <ellipse cx="512" cy="600" rx="370" ry="240" fill="url(#ip-body)" stroke="#1a0a0a" strokeWidth="9"/>
      <g fill="url(#ip-body)" stroke="#1a0a0a" strokeWidth="9">
        <rect x="280" y="800" width="80" height="80" rx="14"/><rect x="416" y="810" width="80" height="80" rx="14"/><rect x="540" y="810" width="80" height="80" rx="14"/><rect x="666" y="800" width="80" height="80" rx="14"/>
      </g>
      <path d="M 870 540 Q 920 520 920 580 Q 920 620 880 620" fill="none" stroke="#1a0a0a" strokeWidth="9" strokeLinecap="round"/>
      <path d="M 870 540 Q 920 520 920 580 Q 920 620 880 620" fill="none" stroke="#ff7a7c" strokeWidth="5" strokeLinecap="round"/>
      <ellipse cx="380" cy="640" rx="120" ry="92" fill="#ffd0d2" stroke="#1a0a0a" strokeWidth="8"/>
      <ellipse cx="350" cy="630" rx="14" ry="20" fill="#1a0a0a"/><ellipse cx="410" cy="630" rx="14" ry="20" fill="#1a0a0a"/>
      <path d="M 580 410 Q 640 360 700 420 Q 690 480 624 482 Z" fill="url(#ip-body)" stroke="#1a0a0a" strokeWidth="8"/>
      <path d="M 605 430 Q 645 405 680 435" fill="none" stroke="#1a0a0a" strokeWidth="5"/>
      <path d="M 590 466 Q 660 444 720 480" fill="none" stroke="#1a0a0a" strokeWidth="14" strokeLinecap="round"/>
      <circle cx="652" cy="528" r="40" fill="#fff" stroke="#1a0a0a" strokeWidth="7"/><circle cx="658" cy="538" r="16" fill="#1a0a0a"/>
      <path d="M 620 568 Q 612 600 624 620 Q 636 600 624 568 Z" fill="#54a4ff" stroke="#1a0a0a" strokeWidth="4"/>
      <rect x="520" y="612" width="180" height="22" rx="4" fill="#1a0a0a"/><path d="M 522 632 Q 600 668 698 632" fill="none" stroke="#1a0a0a" strokeWidth="5" opacity="0.6"/>
      <g transform="translate(610 720) rotate(20)"><circle r="32" fill="#ffd86e" stroke="#3a060a" strokeWidth="5"/><text y="11" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="30" fill="#3a060a">Rp</text></g>
      <text x="200" y="180" fontFamily="Archivo Black, sans-serif" fontSize="56" fill="#ff3a3d" transform="rotate(-12 200 180)">SAVINGS↘</text>
      <rect x="356" y="930" width="312" height="58" rx="29" fill="#0a0306" stroke="#ff5e62" strokeWidth="3"/>
      <text x="512" y="970" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="30" fill="#fff5f5" fontWeight="700"><tspan fill="#ff5e62">$</tspan>RUGPIAH</text>
    </svg>
  );
}

function PrinterDemon() {
  return (
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <radialGradient id="pd-bg" cx="50%" cy="50%" r="70%"><stop offset="0%" stopColor="#ff5e62"/><stop offset="50%" stopColor="#5a0d10"/><stop offset="100%" stopColor="#0a0306"/></radialGradient>
        <linearGradient id="pd-body" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#d8d2c8"/><stop offset="60%" stopColor="#9a958c"/><stop offset="100%" stopColor="#3a3530"/></linearGradient>
        <linearGradient id="pd-eye" cx="50%" cy="50%"><stop offset="0%" stopColor="#fff5f5"/><stop offset="40%" stopColor="#ff3a3d"/><stop offset="100%" stopColor="#5a0d10"/></linearGradient>
      </defs>
      <rect width="1024" height="1024" fill="url(#pd-bg)"/>
      <text x="512" y="100" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="56" fill="#fff5f5" letterSpacing="12">RUGPIAH</text>
      <text x="160" y="240" fontFamily="Archivo Black, sans-serif" fontSize="56" fill="#ff3a3d" transform="rotate(-14 160 240)">BRRR</text>
      <text x="800" y="240" textAnchor="end" fontFamily="Archivo Black, sans-serif" fontSize="56" fill="#ff3a3d" transform="rotate(12 800 240)">BRRR</text>
      <text x="160" y="780" fontFamily="Archivo Black, sans-serif" fontSize="44" fill="#ff3a3d" transform="rotate(-10 160 780)">BRRR</text>
      <circle cx="512" cy="540" r="380" fill="rgba(255, 58, 61, 0.22)"/>
      <rect x="290" y="280" width="444" height="32" rx="6" fill="#2a2520"/>
      <rect x="320" y="248" width="384" height="80" rx="4" fill="#fdeeee" stroke="#3a060a" strokeWidth="3"/>
      <line x1="360" y1="276" x2="664" y2="276" stroke="#3a060a" strokeWidth="2"/><line x1="360" y1="300" x2="664" y2="300" stroke="#3a060a" strokeWidth="2"/>
      <rect x="240" y="312" width="544" height="372" rx="22" fill="url(#pd-body)" stroke="#1a0a0a" strokeWidth="8"/>
      <rect x="262" y="332" width="500" height="332" rx="14" fill="none" stroke="#3a3530" strokeWidth="2"/>
      <rect x="312" y="368" width="400" height="160" rx="14" fill="#1a0a0a" stroke="#3a3530" strokeWidth="4"/>
      <circle cx="420" cy="448" r="58" fill="url(#pd-eye)"/><circle cx="420" cy="448" r="58" fill="none" stroke="#fff5f5" strokeWidth="3"/><circle cx="436" cy="436" r="14" fill="#fff5f5"/>
      <circle cx="604" cy="448" r="58" fill="url(#pd-eye)"/><circle cx="604" cy="448" r="58" fill="none" stroke="#fff5f5" strokeWidth="3"/><circle cx="620" cy="436" r="14" fill="#fff5f5"/>
      <path d="M 340 392 L 488 410" stroke="#ff3a3d" strokeWidth="12" strokeLinecap="round"/><path d="M 536 410 L 684 392" stroke="#ff3a3d" strokeWidth="12" strokeLinecap="round"/>
      <g><rect x="332" y="560" width="360" height="62" rx="10" fill="#1a0a0a" stroke="#3a3530" strokeWidth="3"/>{[0,1,2,3,4,5,6,7,8,9].map((i)=><line key={i} x1={352+i*32} y1="570" x2={352+i*32} y2="612" stroke="#3a3530" strokeWidth="3"/>)}</g>
      <rect x="200" y="684" width="624" height="40" rx="8" fill="#2a2520" stroke="#1a0a0a" strokeWidth="6"/>
      <g transform="rotate(-4 512 800)"><rect x="232" y="746" width="560" height="156" rx="10" fill="#fdeeee" stroke="#3a0a0e" strokeWidth="6"/><text x="266" y="816" fontFamily="Archivo Black, sans-serif" fontSize="46" fill="#3a0a0e">Rp</text><text x="760" y="816" textAnchor="end" fontFamily="Archivo Black, sans-serif" fontSize="42" fill="#3a0a0e">∞</text><text x="512" y="876" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="22" fill="#3a0a0e" letterSpacing="3">DEVALUATION CERTIFICATE</text></g>
      <rect x="356" y="940" width="312" height="58" rx="29" fill="#0a0306" stroke="#ff5e62" strokeWidth="3"/>
      <text x="512" y="980" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="30" fill="#fff5f5" fontWeight="700"><tspan fill="#ff5e62">$</tspan>RUGPIAH</text>
    </svg>
  );
}

Object.assign(window, { InflationPig, PrinterDemon });