// Simple stroked icons shared across screens.
const Icon = ({ name, size = 22, stroke = 1.8, style = {}, ...rest }) => {
  const s = { width: size, height: size, ...style };
  const common = {
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    ...rest,
    style: s,
  };
  switch (name) {
    case "bell":
      return <svg {...common}><path d="M6 8a6 6 0 1 1 12 0c0 4 2 5 2 7H4c0-2 2-3 2-7"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case "gift":
      return <svg {...common}><path d="M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8"/><rect x="2" y="7" width="20" height="5" rx="1"/><path d="M12 7v14"/><path d="M12 7S9.5 7 8 5.5a2.1 2.1 0 0 1 3-3C12.2 3.7 12 7 12 7zM12 7s2.5 0 4-1.5a2.1 2.1 0 0 0-3-3C11.8 3.7 12 7 12 7z"/></svg>;
    case "menu":
      return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "x":
      return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "back":
      return <svg {...common}><path d="M15 18l-6-6 6-6"/></svg>;
    case "chev-r":
      return <svg {...common}><path d="M9 6l6 6-6 6"/></svg>;
    case "chev-d":
      return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    case "chev-u":
      return <svg {...common}><path d="M6 15l6-6 6 6"/></svg>;
    case "plus":
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "refresh":
      return <svg {...common}><path d="M3 12a9 9 0 0 1 15.5-6.3L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15.5 6.3L3 16"/><path d="M3 21v-5h5"/></svg>;
    case "qr":
      return <svg {...common}><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M14 14h3v3M21 14v3M14 18v3h3M17 21h4"/></svg>;
    case "sun":
      return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>;
    case "map":
      return <svg {...common}><path d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z"/><path d="M9 3v16M15 5v16"/></svg>;
    case "list":
      return <svg {...common}><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>;
    case "heart":
      return <svg {...common}><path d="M12 20s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9z"/></svg>;
    case "heart-fill":
      return <svg viewBox="0 0 24 24" style={s} fill="#E63946"><path d="M12 20s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9z"/></svg>;
    case "search":
      return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>;
    case "location":
      return <svg {...common}><path d="M12 22s-7-8-7-13a7 7 0 0 1 14 0c0 5-7 13-7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case "calendar":
      return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "ticket":
      return <svg {...common}><path d="M4 8a2 2 0 0 0 2-2V5h12v1a2 2 0 0 0 4 0v4a2 2 0 0 0-2 2 2 2 0 0 0 2 2v4a2 2 0 0 0-4 0v1H6v-1a2 2 0 0 0-2-2 2 2 0 0 0 0-4"/><path d="M10 9v6" strokeDasharray="2 2"/></svg>;
    case "video":
      return <svg {...common}><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m22 8-6 4 6 4z"/></svg>;
    case "play":
      return <svg viewBox="0 0 24 24" style={s} fill="currentColor"><path d="M8 5v14l11-7z"/></svg>;
    case "home":
      return <svg {...common}><path d="m4 11 8-7 8 7v9a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1z"/></svg>;
    case "record":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M8 13l3 3 5-6"/></svg>;
    case "stats":
      return <svg {...common}><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>;
    case "store":
      return <svg {...common}><path d="M3 9l2-5h14l2 5M3 9v11h18V9M3 9h18M9 14h6"/></svg>;
    case "check":
      return <svg {...common}><path d="m5 12 5 5L20 7"/></svg>;
    case "phone":
      return <svg {...common}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 20 20 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A20 20 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1l-1.3 1.3a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2.1z"/></svg>;
    case "nav":
      return <svg {...common}><path d="m3 11 18-8-8 18-2-8-8-2z"/></svg>;
    case "share":
      return <svg {...common}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg>;
    case "target":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>;
    case "flag":
      return <svg {...common}><path d="M5 21V4M5 16h11l-2-3 2-3H5"/></svg>;
    case "golf-ball":
      return <svg {...common}><circle cx="12" cy="9" r="6"/><circle cx="9.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="12.5" cy="8.5" r=".5" fill="currentColor"/><circle cx="10.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="13.5" cy="11" r=".5" fill="currentColor"/><path d="M10 15v5M14 15v5M8 21h8"/></svg>;
    case "info":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 8v.5"/></svg>;
    case "people":
      return <svg {...common}><circle cx="9" cy="8" r="3.5"/><path d="M2 20a7 7 0 0 1 14 0"/><circle cx="17" cy="8" r="2.5"/><path d="M22 18a5 5 0 0 0-5-5"/></svg>;
    case "receipt":
      return <svg {...common}><path d="M5 3v18l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V3"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>;
    case "card":
      return <svg {...common}><rect x="2" y="6" width="20" height="13" rx="2"/><path d="M2 10h20M6 15h3"/></svg>;
    case "star":
      return <svg {...common}><path d="m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.8 6.2 20.9l1.1-6.5L2.6 9.8l6.5-.9z"/></svg>;
    case "signal":
      return <svg {...common}><path d="M2 20h2v-6H2zM8 20h2V10H8zM14 20h2V6h-2zM20 20h2V2h-2z"/></svg>;
    case "wifi":
      return <svg {...common}><path d="M2 8a18 18 0 0 1 20 0M5 12a13 13 0 0 1 14 0M8.5 15.5a8 8 0 0 1 7 0"/><circle cx="12" cy="19" r="1" fill="currentColor"/></svg>;
    case "battery":
      return <svg {...common}><rect x="2" y="7" width="18" height="10" rx="2"/><path d="M22 11v2"/><rect x="4" y="9" width="13" height="6" rx="1" fill="currentColor" stroke="none"/></svg>;
    case "fire":
      return <svg viewBox="0 0 24 24" style={s} fill="#FF7A1A"><path d="M12 2s1 3-1 6-4 4-4 8a5 5 0 0 0 10 0c0-3-2-3-2-6 0 0 1 1 3 1-1-4-6-6-6-9zM9 16a3 3 0 0 0 6 0c0-1.5-1-2-1.5-3.5 0 0-.5 1.5-1.5 2s-3 .5-3 1.5z"/></svg>;
    case "trophy":
      return <svg {...common}><path d="M6 4h12v4a6 6 0 0 1-12 0zM4 5H2v2a3 3 0 0 0 3 3M20 5h2v2a3 3 0 0 1-3 3"/><path d="M9 18h6M10 22h4M12 14v4"/></svg>;
    case "camera":
      return <svg {...common}><path d="M4 8h3l1.5-2h7L17 8h3a1 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 "album":
      return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m6 15 4-5 3 4 2-2 3 3"/><circle cx="9" cy="9" r="1.5"/></svg>;
    case "char":
      return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="10" fill="#E7FBEF"/><circle cx="9" cy="11" r="1.5" fill="#16A34A"/><circle cx="15" cy="11" r="1.5" fill="#16A34A"/><path d="M9 15c1 1 5 1 6 0" stroke="#16A34A" fill="none" strokeWidth="1.8" strokeLinecap="round"/></svg>;
    case "flag-pin":
      return <svg viewBox="0 0 24 24" style={s} fill="none"><circle cx="12" cy="12" r="10" fill="#E7FBEF"/><path d="M9 7v10M9 8h5l-1.5 2 1.5 2H9" stroke="#16A34A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
    case "cam-round":
      return <svg viewBox="0 0 24 24" style={s} fill="none"><circle cx="12" cy="12" r="10" fill="#E7FBEF"/><path d="M7 10h2l1-1.5h4L15 10h2v6H7z" stroke="#16A34A" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="13" r="2" stroke="#16A34A" strokeWidth="1.8"/></svg>;
    case "album-round":
      return <svg viewBox="0 0 24 24" style={s} fill="none"><circle cx="12" cy="12" r="10" fill="#E7FBEF"/><path d="m7 15 3-3 2 2 5-4" stroke="#16A34A" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/></svg>;
    case "pen":
      return <svg {...common}><path d="m3 21 3-1 12-12-2-2L4 18zM14 6l4 4"/></svg>;
    case "save":
      return <svg {...common}><path d="M5 21h14a1 1 0 0 0 1-1V8l-4-4H6a1 1 0 0 0-1 1zM8 3v5h8"/></svg>;
    case "download":
      return <svg {...common}><path d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16"/></svg>;
    case "settings":
      return <svg {...common}><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-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 1.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.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.8V9c.2.6.8 1 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case "user":
      return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case "lock":
      return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case "logout":
      return <svg {...common}><path d="M16 17l5-5-5-5M21 12H9M13 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h8"/></svg>;
    case "bookmark":
      return <svg {...common}><path d="M6 3h12v18l-6-4-6 4z"/></svg>;
    default:
      return <svg {...common}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

window.Icon = Icon;
