/* global React */
function BleedingCandle() {
  return (
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <radialGradient id="bc-bg" cx="50%" cy="50%" r="65%"><stop offset="0%" stopColor="#1a0509"/><stop offset="60%" stopColor="#0a0306"/><stop offset="100%" stopColor="#050103"/></radialGradient>
        <linearGradient id="bc-body" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#ff5e62"/><stop offset="100%" stopColor="#9a1418"/></linearGradient>
      </defs>
      <rect width="1024" height="1024" fill="url(#bc-bg)"/>
      <g stroke="rgba(255,82,82,0.10)" strokeWidth="2">
        {[160,320,480,640,800,960].map((y)=><line key={`h${y}`} x1="40" y1={y} x2="984" y2={y}/>)}
        {[160,320,480,640,800,960].map((x)=><line key={`v${x}`} x1={x} y1="40" x2={x} y2="984"/>)}
      </g>
      <g opacity="0.32">
        {[[120,280,60],[200,360,70],[780,520,80],[860,620,60],[920,720,50]].map(([x,y,h],i)=><g key={i}><line x1={x} y1={y-18} x2={x} y2={y+h+18} stroke="#ff3a3d" strokeWidth="3"/><rect x={x-18} y={y} width="36" height={h} fill="#ff3a3d"/></g>)}
      </g>
      <polyline points="100,280 220,360 360,440 500,540 660,680 900,820" fill="none" stroke="#ff3a3d" strokeWidth="4" strokeDasharray="10 12" opacity="0.55"/>
      <line x1="512" y1="80" x2="512" y2="170" stroke="#ff5e62" strokeWidth="14" strokeLinecap="round"/>
      <line x1="512" y1="780" x2="512" y2="870" stroke="#ff5e62" strokeWidth="14" strokeLinecap="round"/>
      <rect x="332" y="170" width="360" height="610" rx="28" fill="url(#bc-body)" stroke="#fff5f5" strokeWidth="6"/>
      <rect x="332" y="170" width="360" height="610" rx="28" fill="none" stroke="#3a060a" strokeWidth="4" opacity="0.5"/>
      <circle cx="425" cy="380" r="42" fill="#fff" stroke="#3a060a" strokeWidth="6"/>
      <circle cx="599" cy="380" r="42" fill="#fff" stroke="#3a060a" strokeWidth="6"/>
      <circle cx="432" cy="388" r="16" fill="#3a060a"/>
      <circle cx="606" cy="388" r="16" fill="#3a060a"/>
      <path d="M 340 290 L 482 340" stroke="#3a060a" strokeWidth="18" strokeLinecap="round"/>
      <path d="M 542 340 L 684 290" stroke="#3a060a" strokeWidth="18" strokeLinecap="round"/>
      <path d="M 388 520 Q 512 460 636 520" fill="none" stroke="#3a060a" strokeWidth="18" strokeLinecap="round"/>
      <path d="M 384 432 Q 376 470 388 488 Q 400 470 388 432 Z" fill="#54a4ff" stroke="#3a060a" strokeWidth="3"/>
      <path d="M 640 432 Q 632 480 644 500 Q 656 480 644 432 Z" fill="#54a4ff" stroke="#3a060a" strokeWidth="3"/>
      <text x="512" y="710" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="60" fill="#fff5f5">-99%</text>
      <rect x="356" y="908" width="312" height="60" rx="30" fill="#0a0306" stroke="#ff5e62" strokeWidth="3"/>
      <text x="512" y="950" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="30" fill="#fff5f5" fontWeight="700"><tspan fill="#ff5e62">$</tspan>RUGPIAH</text>
      <text x="512" y="58" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="44" fill="#fff5f5" letterSpacing="14" opacity="0.7">RUGPIAH</text>
    </svg>
  );
}

function CopeWojak() {
  return (
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <radialGradient id="cw-bg" cx="50%" cy="40%" r="70%"><stop offset="0%" stopColor="#ff5e62"/><stop offset="55%" stopColor="#7a1014"/><stop offset="100%" stopColor="#1a0508"/></radialGradient>
        <linearGradient id="cw-skin" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#fbe9e9"/><stop offset="100%" stopColor="#e3b6b6"/></linearGradient>
      </defs>
      <rect width="1024" height="1024" fill="url(#cw-bg)"/>
      <g opacity="0.18">{[100,200,300,400,700,800,900].map((x,i)=>{const y=140+i*16; const h=50+(i%3)*18; return <rect key={x} x={x-12} y={y} width="24" height={h} fill="#ff5e62"/>;})}</g>
      <path d="M 512 180 C 720 180, 820 360, 800 540 C 780 720, 660 820, 512 830 C 364 820, 244 720, 224 540 C 204 360, 304 180, 512 180 Z" fill="url(#cw-skin)" stroke="#1a0a0a" strokeWidth="9"/>
      <path d="M 228 540 Q 210 560 226 590" fill="none" stroke="#1a0a0a" strokeWidth="6"/>
      <path d="M 796 540 Q 814 560 798 590" fill="none" stroke="#1a0a0a" strokeWidth="6"/>
      <path d="M 360 320 Q 420 300 470 330" fill="none" stroke="#1a0a0a" strokeWidth="5" strokeLinecap="round"/>
      <path d="M 550 330 Q 600 300 660 320" fill="none" stroke="#1a0a0a" strokeWidth="5" strokeLinecap="round"/>
      <path d="M 380 380 Q 460 360 520 380" fill="none" stroke="#1a0a0a" strokeWidth="4" strokeLinecap="round" opacity="0.7"/>
      <path d="M 310 470 Q 400 444 470 488" fill="none" stroke="#1a0a0a" strokeWidth="14" strokeLinecap="round"/>
      <path d="M 554 488 Q 624 444 714 470" fill="none" stroke="#1a0a0a" strokeWidth="14" strokeLinecap="round"/>
      <circle cx="400" cy="540" r="14" fill="#1a0a0a"/>
      <circle cx="624" cy="540" r="14" fill="#1a0a0a"/>
      <path d="M 360 560 Q 400 580 442 560" fill="none" stroke="#1a0a0a" strokeWidth="4"/>
      <path d="M 582 560 Q 624 580 666 560" fill="none" stroke="#1a0a0a" strokeWidth="4"/>
      <path d="M 504 580 Q 488 660 500 700 Q 524 712 540 700 Q 552 660 540 590" fill="none" stroke="#1a0a0a" strokeWidth="6" strokeLinecap="round"/>
      <path d="M 390 770 Q 430 750 475 765 Q 512 778 550 765 Q 596 750 640 770" fill="none" stroke="#1a0a0a" strokeWidth="8" strokeLinecap="round"/>
      <path d="M 380 762 L 642 762" stroke="#1a0a0a" strokeWidth="2" opacity="0.4"/>
      <g><path d="M 388 588 Q 372 660 396 720 Q 420 660 396 588 Z" fill="#54a4ff" stroke="#1a0a0a" strokeWidth="4"/><text x="396" y="700" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="32" fill="#fff5f5">$</text></g>
      <g><path d="M 628 588 Q 612 680 636 760 Q 660 680 636 588 Z" fill="#54a4ff" stroke="#1a0a0a" strokeWidth="4"/><text x="636" y="730" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="32" fill="#fff5f5">$</text></g>
      <g fill="url(#cw-skin)" stroke="#1a0a0a" strokeWidth="6"><path d="M 360 826 Q 320 820 296 850 Q 290 880 320 900 Q 360 900 400 870 Z"/><path d="M 664 826 Q 704 820 728 850 Q 734 880 704 900 Q 664 900 624 870 Z"/></g>
      <g transform="rotate(-6 512 940)"><rect x="220" y="908" width="584" height="78" fill="#ff3a3d" stroke="#fff5f5" strokeWidth="4"/><text x="512" y="965" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="58" fill="#fff5f5" letterSpacing="10">RUGGED</text></g>
    </svg>
  );
}

Object.assign(window, { BleedingCandle, CopeWojak });
