// ============================================
// minhahistória — Icon set (lucide-style)
// ============================================
const Icon = ({ name, size = 18, style = {}, color = "currentColor" }) => {
  const base = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
    style,
  };
  const paths = {
    "search": <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    "menu": <><path d="M4 6h16M4 12h16M4 18h16" /></>,
    "user": <><circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 4-7 8-7s8 3 8 7" /></>,
    "bag": <><path d="M6 8h12l-1 12H7L6 8z" /><path d="M9 8a3 3 0 0 1 6 0" /></>,
    "chat": <><path d="M21 12a8 8 0 1 0-3.7 6.7L21 20l-1.3-3.3A8 8 0 0 0 21 12z" /></>,
    "help": <><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" /><circle cx="12" cy="17" r="0.5" fill={color} /></>,
    "file-text": <><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5M9 13h6M9 17h4" /></>,
    "badge-percent": <><path d="m12 2 2.6 2 3.3-.5.5 3.3L21 9.4l-2 2.6 2 2.6-2.6 1.6-.5 3.3-3.3-.5L12 22l-2.6-2-3.3.5-.5-3.3L3 14.6l2-2.6-2-2.6 2.6-1.6.5-3.3 3.3.5L12 2z" /><path d="m9 15 6-6M9.5 9.5h0M14.5 14.5h0" /></>,
    "shield": <><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z" /></>,
    "instagram": <><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="0.7" fill={color} /></>,
    "youtube": <><rect x="2" y="6" width="20" height="12" rx="3" /><path d="m10 9 5 3-5 3V9z" fill={color} /></>,
    "tiktok": <><path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5" /><path d="M14 4c.5 2.5 2.5 4 5 4" /></>,
    "facebook": <><path d="M13 22V13h3l1-4h-4V7c0-1 .5-2 2-2h2V2h-3c-3 0-4 2-4 4v3H7v4h3v9h3z" /></>,
    "chevron-right": <><path d="m9 6 6 6-6 6" /></>,
    "chevron-left": <><path d="m15 6-6 6 6 6" /></>,
    "arrow-right": <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    "sparkle": <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M18 6l-3 3M6 18l3-3" /></>,
    "heart": <><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" /></>,
    "pencil": <><path d="m12 4 5-2 5 5-2 5-13 13H2v-5L12 4z" /></>,
    "truck": <><rect x="2" y="7" width="11" height="9" /><path d="M13 10h5l3 4v2h-8M5 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" /></>,
    "book": <><path d="M4 4h7c2 0 3 1 3 3v13c0-1-1-2-3-2H4V4zM20 4h-7c-2 0-3 1-3 3v13c0-1 1-2 3-2h7V4z" /></>,
    "x": <><path d="M6 6l12 12M18 6 6 18" /></>,
    "play": <><path d="M6 4l14 8-14 8V4z" fill={color} /></>,
    "coin": <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><path d="M12 7v10" /></>,
    "gift": <><rect x="3" y="8" width="18" height="13" /><path d="M3 12h18M12 8v13M8 8c-2 0-3-2-1.5-3.5S12 5 12 8c0-3 2.5-5 5.5-3.5S16 8 14 8" /></>,
  };
  return <svg {...base}>{paths[name]}</svg>;
};

// Icon button (header)
const styleSheet = document.createElement("style");
styleSheet.textContent = `
.hicon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: transparent; border: none;
  color: var(--ink); font-weight: 800; font-size: 12px;
  cursor: pointer; border-radius: 12px;
  transition: background .15s ease;
}
.hicon-btn:hover { background: var(--purple-100); color: var(--purple-700); }
`;
document.head.appendChild(styleSheet);

window.Icon = Icon;