/* global React */
function RuggedNote() {
  return (
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <radialGradient id="rn-bg" cx="50%" cy="38%" r="65%">
          <stop offset="0%" stopColor="#ffb1b3"/>
          <stop offset="35%" stopColor="#ff3a3d"/>
          <stop offset="100%" stopColor="#3a060a"/>
        </radialGradient>
        <pattern id="rn-guill" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="14" stroke="rgba(58,10,14,0.08)" strokeWidth="2"/>
        </pattern>
      </defs>
      <rect width="1024" height="1024" fill="#0a0306"/>
      <circle cx="512" cy="512" r="500" fill="url(#rn-bg)"/>
      <circle cx="512" cy="512" r="500" fill="none" stroke="#ff7a7c" strokeWidth="8"/>
      <circle cx="512" cy="512" r="460" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="2"/>
      <text x="512" y="138" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="68" fill="#fff5f5" letterSpacing="14">RUGPIAH</text>
      <g transform="rotate(-8 512 560)">
        <rect x="180" y="380" width="664" height="360" rx="28" fill="rgba(0,0,0,0.4)"/>
        <rect x="175" y="375" width="664" height="360" rx="28" fill="#fdeeee" stroke="#3a0a0e" strokeWidth="7"/>
        <rect x="175" y="375" width="664" height="360" rx="28" fill="url(#rn-guill)"/>
        <rect x="200" y="400" width="614" height="310" rx="18" fill="none" stroke="#3a0a0e" strokeWidth="3" strokeDasharray="6 8" opacity="0.45"/>
        <text x="225" y="470" fontFamily="Archivo Black, sans-serif" fontSize="58" fill="#3a0a0e">Rp</text>
        <text x="810" y="430" textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="22" fill="#3a0a0e" fontWeight="700">SERIAL 0xRUG</text>
        <text x="810" y="470" textAnchor="end" fontFamily="Archivo Black, sans-serif" fontSize="44" fill="#3a0a0e">1.000.000</text>
        <circle cx="385" cy="580" r="34" fill="#fff" stroke="#3a0a0e" strokeWidth="6"/>
        <circle cx="635" cy="580" r="34" fill="#fff" stroke="#3a0a0e" strokeWidth="6"/>
        <circle cx="392" cy="586" r="13" fill="#3a0a0e"/>
        <circle cx="642" cy="586" r="13" fill="#3a0a0e"/>
        <path d="M 320 522 L 450 562" stroke="#3a0a0e" strokeWidth="14" strokeLinecap="round"/>
        <path d="M 570 562 L 700 522" stroke="#3a0a0e" strokeWidth="14" strokeLinecap="round"/>
        <path d="M 410 678 Q 510 638 610 678" fill="none" stroke="#3a0a0e" strokeWidth="14" strokeLinecap="round"/>
        <path d="M 710 568 Q 702 588 712 600 Q 722 588 712 568 Z" fill="#54a4ff" stroke="#3a0a0e" strokeWidth="4"/>
        <g transform="rotate(-15 510 570)">
          <rect x="220" y="525" width="580" height="92" fill="none" stroke="#ff3a3d" strokeWidth="9" opacity="0.85"/>
          <text x="510" y="592" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="68" fill="#ff3a3d" letterSpacing="8" opacity="0.95">RUGGED</text>
        </g>
      </g>
      <text x="512" y="940" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="52" fill="#fff5f5"><tspan fill="#ff5e62">$</tspan>RUGPIAH</text>
    </svg>
  );
}

function CrashCoin() {
  return (
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <radialGradient id="cc-disc" cx="40%" cy="32%" r="72%">
          <stop offset="0%" stopColor="#ffc7c9"/>
          <stop offset="22%" stopColor="#ff5e62"/>
          <stop offset="62%" stopColor="#c11f23"/>
          <stop offset="100%" stopColor="#3a060a"/>
        </radialGradient>
        <linearGradient id="cc-rim" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#ffd0d2"/>
          <stop offset="55%" stopColor="#ff5e62"/>
          <stop offset="100%" stopColor="#5a0d10"/>
        </linearGradient>
      </defs>
      <rect width="1024" height="1024" fill="#0a0306"/>
      <circle cx="512" cy="512" r="490" fill="url(#cc-rim)"/>
      <circle cx="512" cy="512" r="430" fill="url(#cc-disc)"/>
      <circle cx="512" cy="512" r="380" fill="none" stroke="rgba(0,0,0,0.32)" strokeWidth="4" strokeDasharray="8 10"/>
      <path d="M 512 512 m -460 0 a 460 460 0 0 1 920 0" fill="none" id="cc-arch-top"/>
      <text fontFamily="Archivo Black, sans-serif" fontSize="62" fill="#fff5f5" letterSpacing="14">
        <textPath href="#cc-arch-top" startOffset="50%" textAnchor="middle">RUGPIAH</textPath>
      </text>
      <text x="512" y="635" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="320" fill="#3a060a" stroke="#fff5f5" strokeWidth="6" letterSpacing="-18">Rp</text>
      <path d="M 250 390 L 430 440" stroke="#3a060a" strokeWidth="26" strokeLinecap="round"/>
      <path d="M 594 440 L 774 390" stroke="#3a060a" strokeWidth="26" strokeLinecap="round"/>
      <ellipse cx="360" cy="280" rx="92" ry="42" fill="#fff" opacity="0.45" transform="rotate(-32 360 280)"/>
      <ellipse cx="320" cy="320" rx="40" ry="18" fill="#fff" opacity="0.35" transform="rotate(-32 320 320)"/>
      <rect x="356" y="800" width="312" height="68" rx="34" fill="#0a0306" stroke="#ff5e62" strokeWidth="3"/>
      <text x="512" y="846" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="34" fill="#fff5f5" fontWeight="700" letterSpacing="2"><tspan fill="#ff5e62">$</tspan>RUGPIAH</text>
      <text x="940" y="180" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="80" fill="#ff5e62">↘</text>
    </svg>
  );
}

Object.assign(window, { RuggedNote, CrashCoin });