// Inline SVG icons. Stroke-based, 20px default.
const Icon = ({ children, size = 20, stroke = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

const IconArrow = (p) => <Icon {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M5 12.5l4.5 4.5L19 7"/></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M6 6l12 12"/><path d="M18 6L6 18"/></Icon>;
const IconX = (p) => <Icon {...p}><path d="M6 6l12 12"/><path d="M18 6L6 18"/></Icon>;
const IconDot = (p) => <Icon {...p}><circle cx="12" cy="12" r="3" fill="currentColor"/></Icon>;
const IconDatabase = (p) => <Icon {...p}>
  <ellipse cx="12" cy="5" rx="8" ry="3"/>
  <path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/>
  <path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/>
</Icon>;
const IconGlobe = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="9"/>
  <path d="M3 12h18"/>
  <path d="M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/>
</Icon>;
const IconSnowflake = (p) => <Icon {...p}>
  <path d="M12 3v18"/>
  <path d="M3 12h18"/>
  <path d="M5 5l14 14M19 5L5 19"/>
  <path d="M12 7l-2-2M12 7l2-2M12 17l-2 2M12 17l2 2"/>
  <path d="M7 12l-2-2M7 12l-2 2M17 12l2-2M17 12l2 2"/>
</Icon>;
const IconBolt = (p) => <Icon {...p}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"/></Icon>;
const IconChart = (p) => <Icon {...p}>
  <path d="M3 3v18h18"/>
  <path d="M7 14l4-4 3 3 5-6"/>
</Icon>;
const IconUser = (p) => <Icon {...p}>
  <circle cx="12" cy="8" r="4"/>
  <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/>
</Icon>;
const IconStack = (p) => <Icon {...p}>
  <path d="M12 3l9 5-9 5-9-5 9-5z"/>
  <path d="M3 13l9 5 9-5"/>
  <path d="M3 18l9 5 9-5"/>
</Icon>;
const IconTarget = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="9"/>
  <circle cx="12" cy="12" r="5"/>
  <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
</Icon>;
const IconCart = (p) => <Icon {...p}>
  <path d="M3 4h2l2.5 12h11l2.5-9H6.5"/>
  <circle cx="9" cy="20" r="1.5"/>
  <circle cx="17" cy="20" r="1.5"/>
</Icon>;
const IconExternal = (p) => <Icon {...p}>
  <path d="M14 4h6v6"/>
  <path d="M20 4l-8 8"/>
  <path d="M19 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V6a1 1 0 011-1h5"/>
</Icon>;
const IconPlay = (p) => <Icon {...p}><path d="M6 4l14 8-14 8z" fill="currentColor"/></Icon>;
const IconCopy = (p) => <Icon {...p}>
  <rect x="9" y="9" width="11" height="11" rx="2"/>
  <path d="M5 15V5a1 1 0 011-1h10"/>
</Icon>;

Object.assign(window, {
  Icon, IconArrow, IconCheck, IconClose, IconX, IconDot,
  IconDatabase, IconGlobe, IconSnowflake, IconBolt, IconChart,
  IconUser, IconStack, IconTarget, IconCart, IconExternal, IconPlay, IconCopy
});