/* ============================================================
   Ingredient line-art icons (24×24, stroke).
   Style copied from the reference sheet: single-weight outline,
   round joins, one natural tint per ingredient.
   ============================================================ */
const ING_ICON_SVG = {
  /* Pepperoni — salami slice with specks */
  pep: '<circle cx="12" cy="12" r="8.4"/><circle cx="9" cy="9.6" r="1.05"/><circle cx="15" cy="9" r="1.05"/><circle cx="13.6" cy="14.4" r="1.05"/><circle cx="8.6" cy="13.8" r="1.05"/><circle cx="12.1" cy="11.8" r="1.05"/>',
  /* Bacon — wavy rasher */
  bacon: '<path d="M3 9c3-2.6 5 2.6 8.5 0S17 6.4 21 9"/><path d="M3 13.2c3-2.6 5 2.6 8.5 0S17 10.6 21 13.2"/><path d="M3 9v4.2M21 9v4.2"/>',
  /* Ternera — T-bone steak */
  ternera: '<path d="M8.2 4.6c-3.3 0-5.9 2.4-5.9 5.5 0 3.4 3 6.1 7.1 7.1 4.4 1 9.6-.5 10.7-4.1 1-3.3-1-6.6-4.7-8.1-3.8-1.5-5.3-.4-7.2-.4z"/><circle cx="8.7" cy="9.4" r="1.7"/><path d="M9.8 10.8l3.2 3.2"/>',
  /* Pollo — drumstick */
  pollo: '<path d="M14 3.6a4.6 4.6 0 0 1 6.6 6.4c-1.3 1.5-3.5 1.7-5.1.9l-5.2 5.2"/><path d="M10 16.2a2.7 2.7 0 1 1-3.6 3.6 2.3 2.3 0 0 1-2.9-2.9 2.7 2.7 0 0 1 3.6-3.6"/>',
  /* Jamón — ham leg */
  jamon: '<path d="M5.7 6.1c2.9-2.1 8-2.2 11.2.9 3.2 3.1 3.1 8.4 1 11.2-1.6 2.1-4.2 1.2-5.2-.9-1-2-1-3.2-3-4.4-2-1.1-4.1-1-5.2-3.2-.8-1.7.3-2.8 1.2-3.6z"/><path d="M16.8 17.8l2.6 2.6"/>',
  /* Champiñón — mushroom */
  champi: '<path d="M4.6 12.2a7.4 5.4 0 0 1 14.8 0z"/><path d="M9.4 12.2v3.4a2.6 2.6 0 0 0 5.2 0v-3.4"/>',
  /* Cebolla — onion bulb + sprout */
  cebolla: '<path d="M12 7.6c-3.6 0-6 2.8-6 6.2a6 6 0 0 0 12 0c0-3.4-2.4-6.2-6-6.2z"/><path d="M12 7.6c-1 1.7-1 4.5 0 6.2 1-1.7 1-4.5 0-6.2z"/><path d="M9.3 9.2c-.9 1.8-.9 4 0 5.6M14.7 9.2c.9 1.8.9 4 0 5.6"/><path d="M10.6 7.2c.4-1.5.9-2.6 1.4-3.6M13.4 7.2c-.4-1.5-.9-2.6-1.4-3.6"/>',
  /* Pimiento — bell pepper */
  pimiento: '<path d="M8.5 8.2c-2.4 1-3.7 3.6-3.7 6.4 0 3 2 5.6 4.6 5.6 1.2 0 1.8-.6 2.6-.6s1.4.6 2.6.6c2.6 0 4.6-2.6 4.6-5.6 0-2.8-1.3-5.4-3.7-6.4"/><path d="M12 8.2c0-2 .9-3.6 2.6-4.1"/><path d="M12 8.2c-.2-1.2-1-2.1-2.1-2.3"/>',
  /* Aceitunas — olive with hole */
  aceituna: '<ellipse cx="12" cy="12" rx="5.4" ry="8"/><ellipse cx="12" cy="8.6" rx="2.1" ry="2.7"/>',
  /* Maíz — corn cob + husk */
  maiz: '<path d="M12 3.6c-2.8 0-4.6 3.6-4.6 8.2s1.8 8.2 4.6 8.2 4.6-3.6 4.6-8.2-1.8-8.2-4.6-8.2z"/><path d="M9 7.6h6M8.6 11.4h6.8M9 15.2h6M12 4v15.8"/><path d="M7.6 12.6c-2-1-3.6-1-4.6 1.1"/>',
  /* Tomate — tomato + star leaf */
  tomate: '<circle cx="12" cy="13.6" r="6.5"/><path d="M12 7.1c.2-1.4.8-2.5 2.1-3.1M12 7.1c-.2-1.4-.8-2.5-2.1-3.1M12 7.1c1.4-.3 2.7-.1 3.6.7M12 7.1c-1.4-.3-2.7-.1-3.6.7"/>',
  /* Jalapeño — chili + stem */
  jalapeno: '<path d="M5 16.8c-1 1-1 2.6 0 3.1 2.6 1.2 6.2-.5 8.8-3.1s4.3-6.2 3.1-8.8"/><path d="M16.9 8c.5-1.2 1.5-2.1 3.1-2.3M16.9 8c-1.3.1-2.3.8-2.8 1.9"/>',
  /* Extra queso — cheese wedge with holes */
  extraq: '<path d="M3.6 15.4l13.5-7.8c2 .2 3.8 3.8 3.4 7.8z"/><path d="M3.6 15.4h16.9"/><circle cx="9.4" cy="13.2" r="1"/><circle cx="14.2" cy="12.6" r="1.2"/>',
  /* Cheddar — cheese slice with holes */
  cheddar: '<path d="M3.8 9.4l9.3-3.6c3.1 0 5.2 1.6 6.8 3.7l-9.3 3.6C7.2 12.6 5.4 11.4 3.8 9.4z"/><circle cx="9.2" cy="9.2" r=".9"/><circle cx="13.8" cy="9.3" r="1.1"/>',
  /* Piña — pineapple + crown */
  piña: '<ellipse cx="12" cy="14.6" rx="5.4" ry="6.4"/><path d="M7.6 11.8l8.8 5.6M16.4 11.8l-8.8 5.6"/><path d="M12 8.2c-1-2-2.6-3-1.1-4.6M12 8.2c1-2 2.6-3 1.1-4.6M12 8.2c-2-.6-3.6 0-4.1 2M12 8.2c2-.6 3.6 0 4.1 2"/>',
  /* Rúcula — arugula sprig */
  rucula: '<path d="M12 20c0-5 .1-9 3.1-12 1.5-1.5 4-2 5.5-1.5-.5 4-2.5 6.1-5.1 7"/><path d="M12 20c0-4-.5-7-3.1-9.6C7.4 8.9 5.4 8.4 3.9 8.9c.5 3.6 2.5 5.6 5.1 6.6"/><path d="M12 20V8.4"/>',
};

const ING_ICON_COLOR = {
  pep: "#C0301E", bacon: "#C66A82", ternera: "#B6473A", pollo: "#C98A3E",
  jamon: "#D58A9A", champi: "#9B8A78", cebolla: "#C28A4A", pimiento: "#5BAE4E",
  aceituna: "#5C6B3A", maiz: "#E0B33E", tomate: "#D6402E", jalapeno: "#4E9A3E",
  extraq: "#E6B645", cheddar: "#E0922E", piña: "#E6B53E", rucula: "#4E9A3E",
};

function IngIcon({ id, size = 28 }) {
  return (
    <svg
      className="ing-ico"
      width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth="1.5"
      strokeLinecap="round" strokeLinejoin="round"
      style={{ color: ING_ICON_COLOR[id] || "var(--ink-2)" }}
      aria-hidden="true"
      dangerouslySetInnerHTML={{ __html: ING_ICON_SVG[id] || "" }}
    />
  );
}

Object.assign(window, { IngIcon, ING_ICON_SVG, ING_ICON_COLOR });