// Inline SVG icon set
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const s = size;
  const sw = stroke;
  const common = {
    width: s, height: s, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor',
    strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'arrow-right':
      return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-down':
      return <svg {...common}><path d="M12 5v14M6 13l6 6 6-6"/></svg>;
    case 'play':
      return <svg {...common}><path d="M6 4l14 8-14 8z" fill="currentColor"/></svg>;
    case 'check':
      return <svg {...common}><path d="M5 12l4 4 10-10"/></svg>;
    case 'send':
      return <svg {...common}><path d="M4 12l16-8-6 16-3-7-7-1z"/></svg>;
    case 'spark':
      return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.5 5.5l4 4M14.5 14.5l4 4M18.5 5.5l-4 4M9.5 14.5l-4 4"/></svg>;
    case 'lightning':
      return <svg {...common}><path d="M13 2L4 14h7l-2 8 10-13h-7z"/></svg>;
    case 'layers':
      return <svg {...common}><path d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5M3 18l9 5 9-5"/></svg>;
    case 'mobile':
      return <svg {...common}><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2"/></svg>;
    case 'wallet':
      return <svg {...common}><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M3 10h18M17 15h.01"/></svg>;
    case 'chat':
      return <svg {...common}><path d="M21 12a8 8 0 1 1-3.5-6.6L21 4l-1.4 3.5A8 8 0 0 1 21 12z"/></svg>;
    case 'history':
      return <svg {...common}><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5M12 7v5l3 2"/></svg>;
    case 'user':
      return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>;
    case 'models':
      return <svg {...common}><circle cx="12" cy="12" r="3"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="5" cy="18" r="2"/><circle cx="19" cy="18" r="2"/><path d="M7 7l3 3M17 7l-3 3M7 17l3-3M17 17l-3-3"/></svg>;
    case 'plus':
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'search':
      return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>;
    case 'mic':
      return <svg {...common}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>;
    case 'attach':
      return <svg {...common}><path d="M21 12.5L13 20a5 5 0 0 1-7-7l8.5-8.5a3.5 3.5 0 0 1 5 5L11 18a2 2 0 1 1-3-3l7-7"/></svg>;
    case 'sliders':
      return <svg {...common}><path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h14M20 18h0"/><circle cx="16" cy="6" r="2"/><circle cx="8" cy="12" r="2"/><circle cx="18" cy="18" r="2"/></svg>;
    case 'stop':
      return <svg {...common}><rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor"/></svg>;
    case 'globe':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'copy':
      return <svg {...common}><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>;
    case 'refresh':
      return <svg {...common}><path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;