const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

// --- Icons (stroke-based, hairline style) ---
const Ic = ({ d, size = 16, stroke = 1.75, fill = "none", children, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {children || <path d={d} />}
  </svg>
);

const Icon = {
  Cart: (p) => <Ic {...p}><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/><path d="M3 4h2.2l2.3 12.3a2 2 0 0 0 2 1.7h7.8a2 2 0 0 0 2-1.6L21 8H6"/></Ic>,
  User: (p) => <Ic {...p}><circle cx="12" cy="8" r="3.5"/><path d="M4.5 20c1.2-3.5 4.2-5.5 7.5-5.5s6.3 2 7.5 5.5"/></Ic>,
  Search: (p) => <Ic {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></Ic>,
  X: (p) => <Ic {...p}><path d="M6 6l12 12M18 6 6 18"/></Ic>,
  Check: (p) => <Ic {...p}><path d="m4 12 5 5L20 6"/></Ic>,
  Plus: (p) => <Ic {...p}><path d="M12 5v14M5 12h14"/></Ic>,
  Minus: (p) => <Ic {...p}><path d="M5 12h14"/></Ic>,
  Arrow: (p) => <Ic {...p}><path d="M5 12h14m-6-6 6 6-6 6"/></Ic>,
  Back: (p) => <Ic {...p}><path d="M19 12H5m6-6-6 6 6 6"/></Ic>,
  Lock: (p) => <Ic {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></Ic>,
  Shield: (p) => <Ic {...p}><path d="M12 3 4 6v6c0 4.6 3.4 8.4 8 9 4.6-.6 8-4.4 8-9V6l-8-3Z"/></Ic>,
  Bolt: (p) => <Ic {...p}><path d="M13 3 4 14h7l-1 7 9-11h-7l1-7Z"/></Ic>,
  Car: (p) => <Ic {...p}><path d="M3 13h18l-2-6a2 2 0 0 0-1.9-1.3H6.9A2 2 0 0 0 5 7l-2 6Z"/><circle cx="7" cy="17" r="1.7"/><circle cx="17" cy="17" r="1.7"/><path d="M5 13v4m14-4v4"/></Ic>,
  Users: (p) => <Ic {...p}><circle cx="9" cy="9" r="3"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17" cy="7" r="2.5"/><path d="M21 18c0-2.5-2-4-4.5-4"/></Ic>,
  Sliders: (p) => <Ic {...p}><path d="M4 6h10m4 0h2M4 12h4m4 0h10M4 18h14m4 0h0"/><circle cx="15" cy="6" r="1.5"/><circle cx="10" cy="12" r="1.5"/><circle cx="19" cy="18" r="1.5"/></Ic>,
  Gavel: (p) => <Ic {...p}><path d="m14 10-4 4m-4 4 4-4m-2 2 3 3M12 12l3 3m-8-8 5-5 4 4-5 5-4-4Zm2 14h12"/></Ic>,
  Sync: (p) => <Ic {...p}><path d="M4 12a8 8 0 0 1 14-5l2-2v6h-6l2-2A6 6 0 0 0 6 12M20 12a8 8 0 0 1-14 5l-2 2v-6h6l-2 2a6 6 0 0 0 10-3"/></Ic>,
  Discord: (p) => <Ic {...p} stroke={0} fill="currentColor"><path d="M19.3 5.3A17 17 0 0 0 15 4l-.2.4a16 16 0 0 1 3.9 1.3 14 14 0 0 0-13.4 0A16 16 0 0 1 9.2 4.4L9 4a17 17 0 0 0-4.3 1.3C1.9 9.5 1 13.6 1.4 17.7A17 17 0 0 0 6.6 20l1-1.4a11 11 0 0 1-1.8-.9l.4-.3a12 12 0 0 0 11.5 0l.4.3c-.6.3-1.2.6-1.8.9l1 1.4a17 17 0 0 0 5.2-2.3c.5-4.7-.6-8.8-3-12.4ZM8.5 15.2c-1 0-1.9-1-1.9-2.2s.8-2.2 1.9-2.2 1.9 1 1.9 2.2-.8 2.2-1.9 2.2Zm7 0c-1 0-1.9-1-1.9-2.2s.8-2.2 1.9-2.2 1.9 1 1.9 2.2-.8 2.2-1.9 2.2Z"/></Ic>,
  CfxMark: (p) => (
    <svg width={p.size || 18} height={p.size || 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12a8 8 0 0 1 14-5"/>
      <path d="M20 12a8 8 0 0 1-14 5"/>
      <path d="M12 8v8"/>
    </svg>
  ),
  Copy: (p) => <Ic {...p}><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16V6a2 2 0 0 1 2-2h10"/></Ic>,
  Github: (p) => <Ic {...p}><path d="M12 2a10 10 0 0 0-3.2 19.5c.5 0 .7-.2.7-.5v-2c-2.7.6-3.3-1.3-3.3-1.3-.4-1.1-1.1-1.4-1.1-1.4-1-.6 0-.6 0-.6 1 .1 1.6 1 1.6 1 1 1.6 2.5 1.1 3.1.9.1-.7.4-1.1.7-1.4-2.2-.3-4.5-1.1-4.5-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.5 5 .4.3.7.9.7 1.8v2.7c0 .3.2.6.7.5A10 10 0 0 0 12 2Z"/></Ic>,
  Twitter: (p) => <Ic {...p}><path d="M18 5.5 13 11l6 7.5h-4l-4.5-5.5L5 18.5H3l5.5-6L3 5.5h4l4 5 5-5h2Z"/></Ic>,
  Tebex: (p) => <Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 4v5"/></Ic>,
};

Object.assign(window, { Icon });
