/* =========================================================================
   icons.jsx — small, single-color line icons. No hand-drawn illustrations.
   ========================================================================= */
const Icon = ({ name, size = 24, stroke = 1.6 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": true
  };
  switch (name) {
    case "cash": return (
      <svg {...common}>
        <rect x="2" y="6" width="20" height="12" rx="2"/>
        <circle cx="12" cy="12" r="2.5"/>
        <path d="M6 9v.01M18 15v.01"/>
      </svg>
    );
    case "unlock": return (
      <svg {...common}>
        <rect x="4" y="11" width="16" height="10" rx="2"/>
        <path d="M8 11V7a4 4 0 0 1 7.5-2"/>
      </svg>
    );
    case "wallet": return (
      <svg {...common}>
        <path d="M3 7a2 2 0 0 1 2-2h13a1 1 0 0 1 1 1v2"/>
        <path d="M3 7v11a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-3"/>
        <path d="M16 12h6v4h-6a2 2 0 0 1 0-4z"/>
        <circle cx="17.5" cy="14" r=".7" fill="currentColor" stroke="none"/>
      </svg>
    );
    case "trending": return (
      <svg {...common}>
        <path d="M3 17l6-6 4 4 8-8"/>
        <path d="M14 7h7v7"/>
      </svg>
    );
    case "badge": return (
      <svg {...common}>
        <path d="M9 3h6l2 4h4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7h4z"/>
        <circle cx="12" cy="13" r="2.5"/>
        <path d="M8 18c1-1.5 2.5-2 4-2s3 .5 4 2"/>
      </svg>
    );
    case "upload": return (
      <svg {...common}>
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <path d="M17 8l-5-5-5 5"/>
        <path d="M12 3v13"/>
      </svg>
    );
    case "check": return (
      <svg {...common}>
        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
        <path d="M22 4L12 14.01l-3-3"/>
      </svg>
    );
    case "phone": return (
      <svg {...common}>
        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
      </svg>
    );
    case "money": return (
      <svg {...common}>
        <path d="M12 1v22M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6"/>
      </svg>
    );
    case "bolt": return (
      <svg {...common}>
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
      </svg>
    );
    case "shield": return (
      <svg {...common}>
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        <path d="M9 12l2 2 4-4"/>
      </svg>
    );
    case "tune": return (
      <svg {...common}>
        <path d="M4 21V14M4 10V3M12 21V12M12 8V3M20 21V16M20 12V3"/>
        <path d="M1 14h6M9 8h6M17 16h6"/>
      </svg>
    );
    case "whatsapp": return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
        <path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.413c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.715 5.541l-1 3.648 3.774-.888zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/>
      </svg>
    );
    case "instagram": return (
      <svg {...common}>
        <rect x="2" y="2" width="20" height="20" rx="5"/>
        <circle cx="12" cy="12" r="4"/>
        <circle cx="17.5" cy="6.5" r=".5" fill="currentColor"/>
      </svg>
    );
    case "snapchat": return (
      <svg {...common}>
        <path d="M12 2c3 0 5 2 5 5v4c0 .5.5 1 1 1l2 1c-1 1-2.5 1.5-3.5 1.7-.3 1-1 2.5-2.5 2.5-.7 0-1.5-.5-2-.5s-1.3.5-2 .5c-1.5 0-2.2-1.5-2.5-2.5-1-.2-2.5-.7-3.5-1.7l2-1c.5 0 1-.5 1-1V7c0-3 2-5 5-5z"/>
      </svg>
    );
    case "tiktok": return (
      <svg {...common}>
        <path d="M16 3v4a5 5 0 0 0 5 5V9a4 4 0 0 1-4-4V3h-1z"/>
        <path d="M16 3v11a5 5 0 1 1-5-5"/>
      </svg>
    );
    case "arrow": return (
      <svg {...common}>
        <path d="M5 12h14M13 5l7 7-7 7"/>
      </svg>
    );
    case "house": return (
      <svg {...common}>
        <path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z"/>
        <path d="M9 22V12h6v10"/>
      </svg>
    );
    case "image": return (
      <svg {...common}>
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <circle cx="8.5" cy="8.5" r="1.5"/>
        <path d="M21 15l-5-5L5 21"/>
      </svg>
    );
    default: return <svg {...common}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

window.Icon = Icon;