// Inline SVG icons (Lucide-style, single weight, rounded). Each icon takes color via currentColor.
const Icon = ({ name, size = 20, stroke = 1.8, style }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", style
  };
  switch (name) {
    case "arrow-up-right":
      return <svg {...props}><path d="M7 17 17 7" /><path d="M8 7h9v9" /></svg>;
    case "arrow-right":
      return <svg {...props}><path d="M5 12h14" /><path d="m13 5 7 7-7 7" /></svg>;
    case "check":
      return <svg {...props}><path d="m5 12 5 5L20 7" /></svg>;
    case "check-circle":
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5L16 9.5"/></svg>;
    case "trophy":
      return <svg {...props}><path d="M6 4h12v4a6 6 0 1 1-12 0V4Z"/><path d="M6 6H3v2a3 3 0 0 0 3 3"/><path d="M18 6h3v2a3 3 0 0 1-3 3"/><path d="M9 19h6"/><path d="M12 14v5"/></svg>;
    case "flame":
      return <svg {...props}><path d="M12 22c4 0 7-2.7 7-7 0-3-2-5-3-6-1 2-2 3-4 3 0-3 1-5 2-7-4 1-9 5-9 11 0 4 3 6 7 6Z"/></svg>;
    case "star":
      return <svg {...props}><path d="m12 3 2.7 5.6 6.3.9-4.6 4.4 1.1 6.2L12 17l-5.5 3 1.1-6.2L3 9.5l6.3-.9L12 3Z"/></svg>;
    case "spark":
      return <svg {...props}><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="m5.6 5.6 2.8 2.8"/><path d="m15.6 15.6 2.8 2.8"/><path d="m18.4 5.6-2.8 2.8"/><path d="m8.4 15.6-2.8 2.8"/></svg>;
    case "rocket":
      return <svg {...props}><path d="M5 13c-2 2-2 6-2 6s4 0 6-2"/><path d="M14 5c5 0 5 5 5 5s-1 4-4 7c-2 2-5 3-6 3l-3-3c0-1 1-4 3-6 3-3 5-6 5-6Z"/><circle cx="15" cy="9" r="1.5"/></svg>;
    case "door":
      return <svg {...props}><path d="M6 3h9a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6V3Z"/><path d="M13 12h.01"/><path d="M10 21V3"/></svg>;
    case "search":
      return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "send":
      return <svg {...props}><path d="m21 3-9 9"/><path d="M21 3 14 21l-3-9-9-3 19-6Z"/></svg>;
    case "money-bag":
      return <svg {...props}><path d="M8 7c0-2 1-4 4-4s4 2 4 4"/><path d="M9 5h6"/><path d="M5 13c0-4 3-6 7-6s7 2 7 6c0 5-3 8-7 8s-7-3-7-8Z"/><path d="M12 11v6"/><path d="M10 13c0-1 1-1.5 2-1.5s2 .5 2 1.5-1 1.5-2 1.5-2 .5-2 1.5 1 1.5 2 1.5 2-.5 2-1.5"/></svg>;
    case "gift":
      return <svg {...props}><path d="M3 9h18v4H3z"/><path d="M5 13v8h14v-8"/><path d="M12 9V4"/><path d="M12 4c-1.5-2-5-2-5 0s2 2.5 5 2.5"/><path d="M12 4c1.5-2 5-2 5 0s-2 2.5-5 2.5"/></svg>;
    case "users":
      return <svg {...props}><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M21 18c0-2-1.5-3-3-3.5"/></svg>;
    case "video":
      return <svg {...props}><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/></svg>;
    case "trend-up":
      return <svg {...props}><path d="m3 17 6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>;
    case "play":
      return <svg {...props}><path d="m7 4 13 8-13 8V4Z"/></svg>;
    case "tiktok":
      return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M19.5 8.4a6.7 6.7 0 0 1-3.9-1.2v6.6a5.4 5.4 0 1 1-4.6-5.4v2.4a3 3 0 1 0 2.2 2.9V3h2.4a4.3 4.3 0 0 0 3.9 3.9v1.5Z"/></svg>;
    case "percent":
      return <svg {...props}><circle cx="7" cy="7" r="2.5"/><circle cx="17" cy="17" r="2.5"/><path d="m6 18 12-12"/></svg>;
    case "shopping-bag":
      return <svg {...props}><path d="M4 7h16l-1.5 13a2 2 0 0 1-2 1.8h-9A2 2 0 0 1 5.5 20L4 7Z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>;
    case "crown":
      return <svg {...props}><path d="M3 18h18"/><path d="m3 9 4 4 5-7 5 7 4-4-1 9H4L3 9Z"/></svg>;
    case "book":
      return <svg {...props}><path d="M6 3h12a1 1 0 0 1 1 1v16l-3-2-3 2-3-2-3 2L4 18V5a2 2 0 0 1 2-2Z"/></svg>;
    case "graduation":
      return <svg {...props}><path d="M2 9 12 4l10 5-10 5L2 9Z"/><path d="M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5"/></svg>;
    case "bell":
      return <svg {...props}><path d="M6 8a6 6 0 1 1 12 0c0 5 2 7 2 7H4s2-2 2-7Z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>;
    case "lock":
      return <svg {...props}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 1 1 8 0v3"/></svg>;
    case "menu":
      return <svg {...props}><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>;
    case "x":
      return <svg {...props}><path d="m6 6 12 12"/><path d="M18 6 6 18"/></svg>;
    case "chevron-right":
      return <svg {...props}><path d="m9 6 6 6-6 6"/></svg>;
    case "quote":
      return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M7 7c-2 1-3 3-3 6v4h5v-5H7c0-2 1-3 2-4L7 7Zm10 0c-2 1-3 3-3 6v4h5v-5h-2c0-2 1-3 2-4l-2-1Z"/></svg>;
    case "pix":
      return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M12 2 22 12l-10 10L2 12 12 2Zm0 3.5L5.5 12 12 18.5 18.5 12 12 5.5Z"/></svg>;
    case "porsche":
      // simplified silhouette of a sports car
      return <svg viewBox="0 0 48 24" width={size*2} height={size}><path d="M3 16c0-2 2-4 6-5l4-4c2-2 5-3 10-3 5 0 9 2 13 5l8 2c2 1 3 2 3 4v2h-6a4 4 0 1 0-8 0H17a4 4 0 1 0-8 0H3v-1Z" fill="currentColor"/><circle cx="13" cy="18" r="3" fill="#0a0a0a" stroke="currentColor" strokeWidth="1.5"/><circle cx="35" cy="18" r="3" fill="#0a0a0a" stroke="currentColor" strokeWidth="1.5"/></svg>;
    default:
      return null;
  }
};

window.Icon = Icon;