// Inline SVG icons — minimal stroke set
const Icon = ({ name, size = 22, color = 'currentColor', stroke = 1.8 }) => {
  const s = { width: size, height: size, stroke: color, fill: 'none', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'home': return <svg viewBox="0 0 24 24" style={s}><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z"/></svg>;
    case 'camera': return <svg viewBox="0 0 24 24" style={s}><path d="M4 8h3l2-2h6l2 2h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="4"/></svg>;
    case 'list': return <svg viewBox="0 0 24 24" style={s}><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1.2" fill={color} stroke="none"/><circle cx="4" cy="12" r="1.2" fill={color} stroke="none"/><circle cx="4" cy="18" r="1.2" fill={color} stroke="none"/></svg>;
    case 'cart': return <svg viewBox="0 0 24 24" style={s}><path d="M3 4h2l2.4 11.2A2 2 0 0 0 9.4 17H18a2 2 0 0 0 2-1.6L21.5 8H7"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>;
    case 'user': return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>;
    case 'pin': return <svg viewBox="0 0 24 24" style={s}><path d="M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'search': return <svg viewBox="0 0 24 24" style={s}><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>;
    case 'mail': return <svg viewBox="0 0 24 24" style={s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'lock': return <svg viewBox="0 0 24 24" style={s}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'eye': return <svg viewBox="0 0 24 24" style={s}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'arrow-right': return <svg viewBox="0 0 24 24" style={s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-left': return <svg viewBox="0 0 24 24" style={s}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'chevron-right': return <svg viewBox="0 0 24 24" style={s}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-down': return <svg viewBox="0 0 24 24" style={s}><path d="M6 9l6 6 6-6"/></svg>;
    case 'check': return <svg viewBox="0 0 24 24" style={s}><path d="M5 12l5 5L20 7"/></svg>;
    case 'close': return <svg viewBox="0 0 24 24" style={s}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'plus': return <svg viewBox="0 0 24 24" style={s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus': return <svg viewBox="0 0 24 24" style={s}><path d="M5 12h14"/></svg>;
    case 'flash': return <svg viewBox="0 0 24 24" style={s}><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>;
    case 'flip': return <svg viewBox="0 0 24 24" style={s}><path d="M21 8V5a1 1 0 0 0-1-1h-3M3 16v3a1 1 0 0 0 1 1h3M3 8V5a1 1 0 0 1 1-1h3M21 16v3a1 1 0 0 1-1 1h-3"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'star': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z"/></svg>;
    case 'gift': return <svg viewBox="0 0 24 24" style={s}><path d="M3 11h18v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path d="M2 7h20v4H2zM12 7v14M7.5 7c-2 0-3-1-3-2.5S5.5 2 7 3c1 .7 2 2.5 2 4 0 0-1 0-1.5 0zM16.5 7c2 0 3-1 3-2.5S18.5 2 17 3c-1 .7-2 2.5-2 4 0 0 1 0 1.5 0z"/></svg>;
    case 'bell': return <svg viewBox="0 0 24 24" style={s}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8zM10 21a2 2 0 0 0 4 0"/></svg>;
    case 'settings': return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8L4.2 7a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case 'trending': return <svg viewBox="0 0 24 24" style={s}><path d="M3 17l6-6 4 4 8-8M14 7h7v7"/></svg>;
    case 'tag': return <svg viewBox="0 0 24 24" style={s}><path d="M20 12V4h-8L3 13l8 8z"/><circle cx="15.5" cy="8.5" r="1.5"/></svg>;
    case 'wallet': return <svg viewBox="0 0 24 24" style={s}><path d="M3 7a2 2 0 0 1 2-2h13v4H5a2 2 0 0 1-2-2z"/><path d="M3 7v11a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-3"/><circle cx="17" cy="14" r="1.5"/><path d="M21 11h-5a2 2 0 0 0 0 4h5z"/></svg>;
    case 'logout': return <svg viewBox="0 0 24 24" style={s}><path d="M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h12"/></svg>;
    case 'help': return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5"/><circle cx="12" cy="17" r="0.8" fill={color} stroke="none"/></svg>;
    case 'shield': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/></svg>;
    case 'crown': return <svg viewBox="0 0 24 24" style={s}><path d="M3 18h18M3 8l4 5 5-8 5 8 4-5v10H3z"/></svg>;
    case 'sparkle': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg>;
    case 'leaf': return <svg viewBox="0 0 24 24" style={s}><path d="M5 19c0-7 5-13 16-14-1 9-6 14-13 14-1 0-2 0-3 0zM5 19c2-4 4-6 8-8"/></svg>;
    case 'store': return <svg viewBox="0 0 24 24" style={s}><path d="M3 9l1.5-5h15L21 9M3 9v11h18V9M3 9h18M9 14h6"/></svg>;
    case 'package': return <svg viewBox="0 0 24 24" style={s}><path d="M21 8 12 3 3 8l9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8"/></svg>;
    case 'price': return <svg viewBox="0 0 24 24" style={s}><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>;
    case 'truck': return <svg viewBox="0 0 24 24" style={s}><path d="M1 7h14v10H1zM15 11h5l3 3v3h-8M5 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM18 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>;
    case 'fire': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3s5 4 5 9a5 5 0 0 1-10 0c0-2 1-3 2-4 0 1 1 2 2 1 0-3 1-5 1-6zM9 17a3 3 0 0 0 6 0c0-1.5-1.5-2-3-3-1 1.5-3 1.5-3 3z"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;