// Inline SVG icons. Stroke-based, minimal.
const Icon = ({ name, className = 'w-5 h-5', stroke = 'currentColor', strokeWidth = 1.5, fill = 'none' }) => {
  const props = { className, stroke, fill, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' };
  switch (name) {
    case 'search':
      return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'user':
      return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6"/></svg>;
    case 'cart':
      return <svg {...props}><path d="M3 4h2l2.5 13a2 2 0 0 0 2 1.6h8.5a2 2 0 0 0 2-1.6L22 8H6"/><circle cx="10" cy="21" r="1.2"/><circle cx="18" cy="21" r="1.2"/></svg>;
    case 'menu':
      return <svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'close':
      return <svg {...props}><path d="M5 5l14 14M19 5L5 19"/></svg>;
    case 'leaf':
      return <svg {...props}><path d="M20 4c-9 0-16 5-16 13 0 1.5.4 2.7 1 3.5C7 14 13 9 20 8z"/><path d="M5 20c2-6 7-11 14-13"/></svg>;
    case 'snow':
      return <svg {...props}><path d="M12 2v20M2 12h20M5 5l14 14M19 5L5 19"/><path d="M9 4l3 2 3-2M9 20l3-2 3 2M4 9l2 3-2 3M20 9l-2 3 2 3"/></svg>;
    case 'clock':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'bowl':
      return <svg {...props}><path d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M7 11c0-3 2-5 5-5s5 2 5 5"/><path d="M9 8c0-1 1-2 2-2"/></svg>;
    case 'check':
      return <svg {...props}><path d="M5 12l5 5L20 7"/></svg>;
    case 'truck':
      return <svg {...props}><path d="M2 7h12v10H2zM14 10h5l3 3v4h-8z"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>;
    case 'lock':
      return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></svg>;
    case 'chat':
      return <svg {...props}><path d="M4 5h16v11H8l-4 4z"/></svg>;
    case 'arrow-right':
      return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-left':
      return <svg {...props}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'minus':
      return <svg {...props}><path d="M5 12h14"/></svg>;
    case 'plus':
      return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'heart':
      return <svg {...props}><path d="M12 21s-7-4.5-9-9.5C1.7 8 4 4.5 7.5 4.5c2 0 3.5 1 4.5 2.5 1-1.5 2.5-2.5 4.5-2.5C20 4.5 22.3 8 21 11.5 19 16.5 12 21 12 21z"/></svg>;
    case 'bell':
      return <svg {...props}><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case 'flame':
      return <svg {...props}><path d="M12 3c2 4 5 5 5 9a5 5 0 1 1-10 0c0-2 1-3 2-4 0 1 1 2 2 2 0-3 0-5 1-7z"/></svg>;
    case 'star':
      return <svg {...props} fill="currentColor" stroke="none"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg>;
    case 'star-empty':
      return <svg {...props}><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg>;
    case 'instagram':
      return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>;
    case 'tiktok':
      return <svg {...props}><path d="M14 4v9a4 4 0 1 1-4-4"/><path d="M14 4c0 3 2 5 5 5"/></svg>;
    case 'facebook':
      return <svg {...props}><path d="M14 8h2V4h-2a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h2.5l.5-4H14V8z"/></svg>;
    case 'globe':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg>;
    case 'box':
      return <svg {...props}><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>;
    case 'spice':
      return <svg {...props}><path d="M5 20c2-3 5-3 7-3s5 0 7 3"/><path d="M12 14c0-3-2-5-2-8 0-2 1-3 2-4 1 1 2 2 2 4 0 3-2 5-2 8z"/></svg>;
    default:
      return null;
  }
};

window.Icon = Icon;