// Simple geometric money icons (gold coins, bills, bars, bags)
// Kept deliberately flat & minimal.

const MoneyGoldCoin = ({ className = '', size = 'md' }) => (
  <svg className={`money-icon ${size} gold ${className}`} viewBox="0 0 100 100" fill="none">
    <defs>
      <radialGradient id="coinG" cx="40%" cy="35%" r="65%">
        <stop offset="0%" stopColor="#F4D77A"/>
        <stop offset="60%" stopColor="#D4AF37"/>
        <stop offset="100%" stopColor="#9A7B1F"/>
      </radialGradient>
    </defs>
    <circle cx="50" cy="50" r="46" fill="url(#coinG)" stroke="#9A7B1F" strokeWidth="1.5"/>
    <circle cx="50" cy="50" r="38" fill="none" stroke="#F4D77A" strokeWidth="1" strokeDasharray="2 2" opacity="0.6"/>
    <text x="50" y="63" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="42" fill="#6B4E0F">$</text>
  </svg>
);

const MoneyBill = ({ className = '', size = 'md' }) => (
  <svg className={`money-icon ${size} ${className}`} viewBox="0 0 160 80" fill="none">
    <defs>
      <linearGradient id="billG" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#2E5C3A"/>
        <stop offset="100%" stopColor="#1A3A24"/>
      </linearGradient>
    </defs>
    <rect x="2" y="2" width="156" height="76" rx="3" fill="url(#billG)" stroke="#4A8058" strokeWidth="1"/>
    <rect x="8" y="8" width="144" height="64" rx="2" fill="none" stroke="#4A8058" strokeWidth="0.8" opacity="0.6"/>
    <circle cx="80" cy="40" r="18" fill="none" stroke="#D4AF37" strokeWidth="1.2" opacity="0.8"/>
    <text x="80" y="48" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="22" fill="#D4AF37">$</text>
    <text x="20" y="22" fontFamily="Manrope, sans-serif" fontSize="10" fill="#D4AF37" fontWeight="700" opacity="0.7">100</text>
    <text x="130" y="68" fontFamily="Manrope, sans-serif" fontSize="10" fill="#D4AF37" fontWeight="700" opacity="0.7">100</text>
  </svg>
);

const MoneyGoldBar = ({ className = '', size = 'md' }) => (
  <svg className={`money-icon ${size} gold ${className}`} viewBox="0 0 140 80" fill="none">
    <defs>
      <linearGradient id="barG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#F4D77A"/>
        <stop offset="50%" stopColor="#D4AF37"/>
        <stop offset="100%" stopColor="#9A7B1F"/>
      </linearGradient>
      <linearGradient id="barTopG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#FAE5A0"/>
        <stop offset="100%" stopColor="#E8C76A"/>
      </linearGradient>
    </defs>
    {/* top face */}
    <polygon points="30,14 110,14 130,30 10,30" fill="url(#barTopG)" stroke="#9A7B1F" strokeWidth="1"/>
    {/* front face */}
    <polygon points="10,30 130,30 130,70 10,70" fill="url(#barG)" stroke="#9A7B1F" strokeWidth="1"/>
    <text x="70" y="56" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="16" fill="#6B4E0F" letterSpacing="0.1em">999.9</text>
    <line x1="20" y1="36" x2="120" y2="36" stroke="#6B4E0F" strokeWidth="0.5" opacity="0.5"/>
  </svg>
);

const MoneyBag = ({ className = '', size = 'md' }) => (
  <svg className={`money-icon ${size} ${className}`} viewBox="0 0 100 100" fill="none">
    <defs>
      <linearGradient id="bagG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#8A6D2A"/>
        <stop offset="100%" stopColor="#5A4618"/>
      </linearGradient>
    </defs>
    {/* tie */}
    <path d="M 35 22 Q 50 14 65 22 L 62 30 Q 50 26 38 30 Z" fill="#6B4E0F" stroke="#3A2A08" strokeWidth="0.8"/>
    {/* bag body */}
    <path d="M 38 30 Q 18 45 18 68 Q 18 92 50 92 Q 82 92 82 68 Q 82 45 62 30 Z" fill="url(#bagG)" stroke="#3A2A08" strokeWidth="1"/>
    {/* dollar sign */}
    <text x="50" y="72" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="36" fill="#D4AF37">$</text>
    {/* highlight */}
    <path d="M 30 45 Q 26 60 32 72" fill="none" stroke="#D4AF37" strokeWidth="1.2" opacity="0.4"/>
  </svg>
);

const MoneyCoinStack = ({ className = '', size = 'md' }) => (
  <svg className={`money-icon ${size} gold ${className}`} viewBox="0 0 100 100" fill="none">
    <defs>
      <linearGradient id="stackG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#E8C76A"/>
        <stop offset="100%" stopColor="#9A7B1F"/>
      </linearGradient>
    </defs>
    {/* stack of 3 coins viewed from side */}
    {[0, 1, 2].map(i => {
      const y = 78 - i * 14;
      return (
        <g key={i}>
          <ellipse cx="50" cy={y} rx="34" ry="8" fill="url(#stackG)" stroke="#6B4E0F" strokeWidth="0.8"/>
          <ellipse cx="50" cy={y - 3} rx="34" ry="8" fill="#F4D77A" stroke="#6B4E0F" strokeWidth="0.8"/>
          <text x="50" y={y} textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="800" fontSize="10" fill="#6B4E0F">$</text>
        </g>
      );
    })}
  </svg>
);

// Register globally so other babel files can use
Object.assign(window, { MoneyGoldCoin, MoneyBill, MoneyGoldBar, MoneyBag, MoneyCoinStack });
