// rd-icons.jsx — GrinGo custom icon set.
// Quirk: chunky 2.4 stroke, round caps, and every icon trades one square
// corner for a quarter-arc (the "shaka sweep").

const RdI = ({ children, size = 24, color = 'currentColor', vb = 24 }) => (
  <svg width={size} height={size} viewBox={`0 0 ${vb} ${vb}`} fill="none"
       stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
       style={{ display: 'block', flexShrink: 0 }}>{children}</svg>
);

const IcScan = (p) => (
  <RdI {...p}>
    <path d="M3.5 8V8a4.5 4.5 0 0 1 4.5-4.5" />
    <path d="M16 3.5h4.5V8" />
    <path d="M20.5 16v4.5H16" />
    <path d="M8 20.5H3.5V16" />
    <rect x="9.4" y="9.4" width="5.2" height="5.2" rx="1.4" fill="currentColor" stroke="none" />
  </RdI>
);

const IcX = (p) => (
  <RdI {...p}><path d="M6.5 6.5l11 11" /><path d="M17.5 6.5a26 26 0 0 1-11 11" /></RdI>
);

const IcCheck = (p) => (
  <RdI {...p}><path d="M4.5 12.5l5 5C11.5 13 15 8.5 19.5 6" /></RdI>
);

const IcBolt = (p) => (
  <RdI {...p}><path d="M12.5 3L6 13.5h5L10.5 21 18 10.5h-5.5C13 8 13 5.2 12.5 3z" /></RdI>
);

const IcKeypad = (p) => (
  <RdI {...p}>
    {[5, 12, 19].flatMap((x) => [5, 12].map((y) => <circle key={x + '-' + y} cx={x} cy={y} r="1.35" fill="currentColor" stroke="none" />))}
    <circle cx="12" cy="19" r="1.35" fill="currentColor" stroke="none" />
    <path d="M5 17a4.6 4.6 0 0 0 2 3.6" />
  </RdI>
);

const IcWifiOff = (p) => (
  <RdI {...p}>
    <path d="M8.4 8.9A11.5 11.5 0 0 1 20.5 11.4" />
    <path d="M3.5 11.4a11.6 11.6 0 0 1 2.3-1.8" />
    <path d="M7 14.9a7 7 0 0 1 6.7-1.6" />
    <circle cx="12" cy="18.6" r="1.5" fill="currentColor" stroke="none" />
    <path d="M4 4c5.5 4.5 10.7 9.9 16 16" />
  </RdI>
);

const IcRefresh = (p) => (
  <RdI {...p}>
    <path d="M20 12a8 8 0 1 1-2.7-6" />
    <path d="M20.3 3.2L20 8.1l-4.8-.5" />
  </RdI>
);

const IcClockEnd = (p) => (
  <RdI {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M12 7.5V12l3.4 2.4" />
  </RdI>
);

const IcArrowUpR = (p) => (
  <RdI {...p}><path d="M7 17C10.5 15 14.5 11 17 7" /><path d="M9 6.8h8.2V15" /></RdI>
);

const IcPlus = (p) => (
  <RdI {...p}><path d="M12 4.5v15" /><path d="M4.5 12h15" /></RdI>
);

const IcCup = (p) => (
  <RdI {...p}>
    <path d="M6 8h11v6a5.5 5.5 0 0 1-11 0V8z" />
    <path d="M17 9.5h1.4a2.3 2.3 0 0 1 0 4.6H17" />
    <path d="M9.5 4.5C9 5.5 9 6 9.5 7" />
  </RdI>
);

const IcBowl = (p) => (
  <RdI {...p}>
    <path d="M4 11h16a8 8 0 0 1-16 0z" />
    <path d="M8 11c1.5-3 5-5.5 9.5-6" />
  </RdI>
);

const IcMoto = (p) => (
  <RdI {...p}>
    <circle cx="6" cy="16.5" r="3" />
    <circle cx="18" cy="16.5" r="3" />
    <path d="M6 16.5l4-6h4.5" />
    <path d="M13 7.5h3l2 9" />
  </RdI>
);

const IcBank = (p) => (
  <RdI {...p}>
    <path d="M4 9.5L12 4l8 5.5" />
    <path d="M5.5 10.5V18M12 10.5V18M18.5 10.5V18" />
    <path d="M4 20.5h12a4.5 4.5 0 0 0 4.4-2.5" />
  </RdI>
);

const IcReceipt = (p) => (
  <RdI {...p}>
    <path d="M6 3.5h12v15.5l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4-2 1.4V7.5A4 4 0 0 1 6 3.5z" />
    <path d="M9.5 9h5M9.5 12.5h5" strokeWidth="2" />
  </RdI>
);

const IcChevD = (p) => (
  <RdI {...p}><path d="M6 9.5c2 2.5 4 4.3 6 5.5 2.3-1.4 4.3-3.2 6-5.5" /></RdI>
);

// ── rail marks (official logos live in a bounded slot, never recoloured) ──
const PixMark = ({ h = 16 }) => (
  <svg height={h} viewBox="0 0 58 24" style={{ display: 'block' }}>
    <g fill="#32BCAD">
      <path d="M12 2.6L17.2 7.8a2.6 2.6 0 0 1 0 3.7L12 16.6a2.6 2.6 0 0 1-3.7 0L3.1 11.5a2.6 2.6 0 0 1 0-3.7L8.3 2.6a2.6 2.6 0 0 1 3.7 0z" transform="translate(2 2.4)" />
      <text x="26" y="18.2" fontFamily="'Hanken Grotesk', sans-serif" fontWeight="700" fontSize="16.5" fill="#32BCAD">pix</text>
    </g>
  </svg>
);

const UpiMark = ({ h = 16 }) => (
  <svg height={h} viewBox="0 0 62 24" style={{ display: 'block' }}>
    <path d="M12.5 2.5l5.6 9.5-5.6 9.5-1.5-6 2-3.5-2-3.5z" fill="#098041" />
    <path d="M17 2.5l5.6 9.5L17 21.5l-1.5-6 2-3.5-2-3.5z" fill="#ED752E" />
    <text x="27" y="17.8" fontFamily="'Hanken Grotesk', sans-serif" fontWeight="700" fontSize="15" fill="#3D3D3D">UPI</text>
  </svg>
);

// ── flags — used on transaction history + markets list ──
const RdFlag = ({ children, w = 18 }) => (
  <svg width={w} height={w * 0.72} viewBox="0 0 18 13" style={{ display: 'block', borderRadius: 2.5, flexShrink: 0 }}>{children}</svg>
);
const FlagBR = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#009C3B" rx="1.5" />
    <path d="M9 1.8L16 6.5 9 11.2 2 6.5z" fill="#FFDF00" />
    <circle cx="9" cy="6.5" r="2.5" fill="#002776" />
  </RdFlag>
);
const FlagMX = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#fff" rx="1.5" />
    <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0H6v13H1.5A1.5 1.5 0 0 1 0 11.5z" fill="#006847" />
    <path d="M12 0h4.5A1.5 1.5 0 0 1 18 1.5v10a1.5 1.5 0 0 1-1.5 1.5H12z" fill="#CE1126" />
    <circle cx="9" cy="6.5" r="1.6" fill="none" stroke="#8a6d3b" strokeWidth="0.8" />
  </RdFlag>
);
const FlagIN = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#fff" rx="1.5" />
    <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h15A1.5 1.5 0 0 1 18 1.5v2.8H0z" fill="#FF9933" />
    <path d="M0 8.7h18v2.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 11.5z" fill="#138808" />
    <circle cx="9" cy="6.5" r="1.5" fill="none" stroke="#000080" strokeWidth="0.7" />
  </RdFlag>
);
const FlagTH = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#A51931" rx="1.5" />
    <rect y="2.2" width="18" height="8.6" fill="#F4F5F8" />
    <rect y="4.3" width="18" height="4.4" fill="#2D2A4A" />
  </RdFlag>
);

const FlagCO = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#FCD116" rx="1.5" />
    <path d="M0 6.5h18v3.25H0z" fill="#003893" />
    <path d="M0 9.75h18v1.75a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 11.5z" fill="#CE1126" />
  </RdFlag>
);
const FlagAR = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#74ACDF" rx="1.5" />
    <rect y="4.3" width="18" height="4.4" fill="#fff" />
    <circle cx="9" cy="6.5" r="1.4" fill="#F6B40E" />
  </RdFlag>
);
const FlagBO = (p) => (
  <RdFlag {...p}>
    <rect width="18" height="13" fill="#FCD116" rx="1.5" />
    <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h15A1.5 1.5 0 0 1 18 1.5v2.8H0z" fill="#D52B1E" />
    <path d="M0 8.7h18v2.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 11.5z" fill="#007934" />
  </RdFlag>
);

const IcBack = (p) => (
  <RdI {...p}><path d="M14.5 5.5c-2.5 2-4.4 4.2-5.8 6.5 1.6 2.4 3.5 4.5 5.8 6.5" /></RdI>
);
const IcCopy = (p) => (
  <RdI {...p}>
    <rect x="8.5" y="8.5" width="12" height="12" rx="3" />
    <path d="M4 15.5V7.5A4 4 0 0 1 8 3.5h7.5" />
  </RdI>
);
const IcCamera = (p) => (
  <RdI {...p}>
    <path d="M3.5 10a3 3 0 0 1 3-3h1l1.6-2.5h5.8L16.5 7h1a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3H9a5.5 5.5 0 0 1-5.5-5.5z" />
    <circle cx="12" cy="13" r="3.4" />
  </RdI>
);
const IcUser = (p) => (
  <RdI {...p}>
    <circle cx="12" cy="8" r="3.8" />
    <path d="M4.5 20.5a7.5 7.5 0 0 1 15 0" />
  </RdI>
);
const IcShield = (p) => (
  <RdI {...p}>
    <path d="M12 3l7.5 3v5.5c0 4.6-3 7.9-7.5 9.5-4.5-1.6-7.5-4.9-7.5-9.5V6z" />
    <path d="M9 12l2.2 2.2c1.3-2 2.7-3.5 4.3-4.7" />
  </RdI>
);
const IcOut = (p) => (
  <RdI {...p}>
    <path d="M14.5 3.5H8A4.5 4.5 0 0 0 3.5 8v8A4.5 4.5 0 0 0 8 20.5h6.5" />
    <path d="M11 12h9.5M17 8.5c1.5 1 2.7 2.2 3.5 3.5-.8 1.3-2 2.5-3.5 3.5" />
  </RdI>
);
const IcDel = (p) => (
  <RdI {...p}>
    <path d="M9 4.5h8a3.5 3.5 0 0 1 3.5 3.5v8a3.5 3.5 0 0 1-3.5 3.5H9l-5.5-7.5L9 4.5z" />
    <path d="M11.5 9.5l5 5M16.5 9.5l-5 5" strokeWidth="2" />
  </RdI>
);

Object.assign(window, {
  IcScan, IcX, IcCheck, IcBolt, IcKeypad, IcWifiOff, IcRefresh, IcClockEnd,
  IcArrowUpR, IcPlus, IcCup, IcBowl, IcMoto, IcBank, IcReceipt, IcChevD,
  PixMark, UpiMark, RdFlag, FlagBR, FlagMX, FlagIN, FlagTH,
  FlagCO, FlagAR, FlagBO, IcBack, IcCopy, IcCamera, IcUser, IcShield, IcOut, IcDel,
});
