// Iconos SVG — todos en stroke style
const Icon = ({ d, size = 24, fill = "none" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    {d}
  </svg>
);

const Icons = {
  Web: () => <Icon d={<><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18"/><circle cx="6.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="6.5" r=".5" fill="currentColor"/></>} />,
  Cart: () => <Icon d={<><path d="M3 4h2l2.4 11.4a2 2 0 0 0 2 1.6h7.2a2 2 0 0 0 2-1.6L20 8H6"/><circle cx="9" cy="21" r="1.2"/><circle cx="18" cy="21" r="1.2"/></>} />,
  Rocket: () => <Icon d={<><path d="M14 4s4 0 6 2c2 2 2 6 2 6s-3 0-5-1"/><path d="M5.5 13.5 4 19l5.5-1.5"/><path d="M14.5 4.5 9 10l-3 3 5 5 3-3 5.5-5.5"/><circle cx="15" cy="9" r="1.4"/></>} />,
  Mobile: () => <Icon d={<><rect x="6" y="2.5" width="12" height="19" rx="2.5"/><path d="M11 18.5h2"/><path d="M6 6h12"/></>} />,
  Megaphone: () => <Icon d={<><path d="M3 11v2a1 1 0 0 0 1 1h2l8 5V5L6 10H4a1 1 0 0 0-1 1z"/><path d="M18 8c1.5 1.2 1.5 6.8 0 8"/></>} />,
  Cpu: () => <Icon d={<><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></>} />,
  ArrowUp: () => <Icon d={<><path d="M7 17 17 7"/><path d="M9 7h8v8"/></>} />,
  Check: () => <Icon size={14} d={<><path d="M5 12l4 4 10-10"/></>} />,
  Spark: () => <Icon size={18} d={<><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>} />,
  Zap: () => <Icon d={<><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></>} />,
  Shield: () => <Icon d={<><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z"/></>} />,
  Eye: () => <Icon d={<><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>} />,
  Heart: () => <Icon d={<><path d="M12 21s-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"/></>} />,
  Wa: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.5 1 2.7.1.2 1.8 2.7 4.3 3.8.6.3 1.1.4 1.4.5.6.2 1.1.2 1.6.1.5-.1 1.6-.6 1.8-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.2.8.8-3.1-.2-.3C4 14.9 3.7 13.5 3.7 12 3.7 7.4 7.4 3.7 12 3.7s8.3 3.7 8.3 8.3-3.7 8.3-8.3 8.3z"/></svg>
  ),
  IG: () => <Icon d={<><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=".5" fill="currentColor"/></>} />,
  LN: () => <Icon d={<><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 13v4"/></>} />,
  X: () => <Icon d={<><path d="M4 4l16 16M20 4 4 20"/></>} />,
  TT: () => <Icon d={<><path d="M9 4v11a3 3 0 1 1-3-3"/><path d="M9 4c.5 2.5 2.5 4 5 4"/></>} />,
  Pin: () => <Icon size={16} d={<><path d="M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></>} />,
  Phone: () => <Icon size={16} d={<><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></>} />,
  Globe: () => <Icon size={16} d={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18"/></>} />,
  Menu: () => <Icon d={<><path d="M4 7h16M4 12h16M4 17h16"/></>} />,
  Close: () => <Icon d={<><path d="M5 5l14 14M19 5 5 19"/></>} />,
};

window.Icons = Icons;
