/* Simple line icons — 24px viewBox, stroke-based */
const Icon = ({ children, size = 22, stroke = 'currentColor', fill = 'none', sw = 1.8 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke}
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {children}
  </svg>
);

const IconWallet = (p) => <Icon {...p}>
  <path d="M3 7.5C3 6.12 4.12 5 5.5 5h11a2 2 0 0 1 2 2v1H5.5C4.12 8 3 6.88 3 5.5z"/>
  <rect x="3" y="7.5" width="18" height="12" rx="2.5"/>
  <circle cx="16" cy="13.5" r="1.5" fill="currentColor" stroke="none"/>
</Icon>;

const IconChart = (p) => <Icon {...p}>
  <path d="M4 19V5"/><path d="M4 19h16"/>
  <path d="M8 15l3-4 3 2 4-6"/>
  <circle cx="8" cy="15" r="1" fill="currentColor" stroke="none"/>
  <circle cx="11" cy="11" r="1" fill="currentColor" stroke="none"/>
  <circle cx="14" cy="13" r="1" fill="currentColor" stroke="none"/>
  <circle cx="18" cy="7" r="1" fill="currentColor" stroke="none"/>
</Icon>;

const IconLink = (p) => <Icon {...p}>
  <path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1"/>
  <path d="M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/>
</Icon>;

const IconCoin = (p) => <Icon {...p}>
  <ellipse cx="12" cy="6.5" rx="7" ry="2.5"/>
  <path d="M5 6.5v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-6"/>
  <path d="M5 12.5v5c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-5"/>
</Icon>;

const IconLock = (p) => <Icon {...p}>
  <rect x="4.5" y="10.5" width="15" height="10" rx="2"/>
  <path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/>
  <circle cx="12" cy="15.5" r="1.2" fill="currentColor" stroke="none"/>
</Icon>;

const IconGlobe = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="9"/>
  <path d="M3 12h18"/>
  <path d="M12 3c2.5 3 3.8 6 3.8 9s-1.3 6-3.8 9c-2.5-3-3.8-6-3.8-9S9.5 6 12 3z"/>
</Icon>;

const IconBolt = (p) => <Icon {...p}>
  <path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z"/>
</Icon>;

const IconExport = (p) => <Icon {...p}>
  <path d="M12 3v12"/>
  <path d="M7 8l5-5 5 5"/>
  <path d="M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4"/>
</Icon>;

const IconClock = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 7v5l3.2 2"/>
</Icon>;

const IconShield = (p) => <Icon {...p}>
  <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/>
  <path d="M8.5 12l2.5 2.5L16 9.5"/>
</Icon>;

const IconReceipt = (p) => <Icon {...p}>
  <path d="M6 3h12v18l-2-1.2-2 1.2-2-1.2-2 1.2-2-1.2L6 21V3z"/>
  <path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h4"/>
</Icon>;

const IconArrow = (p) => <Icon {...p}>
  <path d="M5 12h14"/><path d="M13 6l6 6-6 6"/>
</Icon>;

const IconMail = (p) => <Icon {...p}>
  <rect x="3" y="5.5" width="18" height="13" rx="2"/>
  <path d="M3.5 7l8.5 6 8.5-6"/>
</Icon>;

const IconCheck = (p) => <Icon {...p}>
  <path d="M5 12.5l5 5L19 7"/>
</Icon>;

const IconAlert = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 8v5"/><path d="M12 16.5v.5"/>
</Icon>;

const IconPlus = (p) => <Icon {...p}>
  <path d="M5 12h14"/><path d="M12 5v14"/>
</Icon>;

const IconSearch = (p) => <Icon {...p}>
  <circle cx="11" cy="11" r="7"/>
  <path d="M20 20l-3.5-3.5"/>
</Icon>;

/* Orbi logo icon — stylized atomic ring (CSS-friendly placeholder; we also have raster) */
const OrbiIcon = ({ size = 32 }) => (
  <img
    className="brand-icon brand-logo"
    src="/uploads/ORBI%20LOGO.png?v=4"
    alt=""
    width={Math.round(size * 3.8)}
    height={size}
    draggable="false"
  />
);

Object.assign(window, {
  Icon, IconWallet, IconChart, IconLink, IconCoin, IconLock, IconGlobe,
  IconBolt, IconExport, IconClock, IconShield, IconReceipt, IconArrow,
  IconMail, IconCheck, IconAlert, IconPlus, IconSearch, OrbiIcon
});