// Ikon SVG (stroke-based, konsisten 1.6 stroke) + placeholder foto produk.
const I = (paths, vb = 24) => ({ size = 20, stroke = "currentColor", sw = 1.7, fill = "none", style } = {}) =>
  <svg width={size} height={size} viewBox={`0 0 ${vb} ${vb}`} fill={fill} stroke={stroke}
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>{paths}</svg>;

const Icon = {
  barcode: I(<g key="a"><path d="M3 5v14M6 5v14M9 5v10M9 17v2M12 5v14M16 5v14M19 5v10M19 17v2M21 5v14" /></g>),
  scan: I(<g key="a"><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" /><path d="M3 12h18" /></g>),
  check: I(<path key="a" d="M5 13l4 4L19 7" />),
  checkCircle: I(<g key="a"><circle cx="12" cy="12" r="9" /><path d="M8.5 12.5l2.5 2.5 4.5-5" /></g>),
  x: I(<path key="a" d="M6 6l12 12M18 6L6 18" />),
  xCircle: I(<g key="a"><circle cx="12" cy="12" r="9" /><path d="M15 9l-6 6M9 9l6 6" /></g>),
  alert: I(<g key="a"><path d="M12 3l9.5 16.5a1 1 0 0 1-.87 1.5H3.37a1 1 0 0 1-.87-1.5z" /><path d="M12 9v5M12 17.5v.5" /></g>),
  search: I(<g key="a"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></g>),
  download: I(<g key="a"><path d="M12 3v12M7 11l5 5 5-5" /><path d="M4 20h16" /></g>),
  truck: I(<g key="a"><path d="M3 6h11v9H3zM14 9h4l3 3v3h-7z" /><circle cx="7" cy="18" r="1.6" /><circle cx="17" cy="18" r="1.6" /></g>),
  wallet: I(<g key="a"><path d="M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M16 12h3v3h-3a1.5 1.5 0 0 1 0-3z" /></g>),
  user: I(<g key="a"><circle cx="12" cy="8" r="3.5" /><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" /></g>),
  clock: I(<g key="a"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></g>),
  back: I(<g key="a"><path d="M15 5l-7 7 7 7" /></g>),
  box: I(<g key="a"><path d="M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8" /></g>),
  list: I(<g key="a"><path d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01" /></g>),
  grid: I(<g key="a"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></g>),
  target: I(<g key="a"><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="3.5" /></g>),
  plus: I(<path key="a" d="M12 5v14M5 12h14" />),
  minus: I(<path key="a" d="M5 12h14" />),
  chevR: I(<path key="a" d="M9 6l6 6-6 6" />),
  bolt: I(<path key="a" d="M13 2L4.5 13H11l-1 9 8.5-11H12z" />),
  filter: I(<path key="a" d="M3 5h18l-7 8v6l-4 2v-8z" />),
  pkgCheck: I(<g key="a"><path d="M21 8l-9-5-9 5 9 5 4.5-2.5" /><path d="M3 8v8l9 5 4-2.2" /><path d="M14.5 17l2 2 4-4" /></g>),
  refresh: I(<g key="a"><path d="M21 12a9 9 0 1 1-2.6-6.3M21 4v4h-4" /></g>),
  webhook: I(<g key="a"><path d="M18 16.5a3.5 3.5 0 1 1-3.4-4.3L11 6.2" /><path d="M6 8a3.5 3.5 0 1 1 6.1 2.3l3.4 6" /><path d="M13.5 19a3.5 3.5 0 1 0 3-5.3H9" /></g>),
};

// Glyph produk untuk placeholder foto
const ProdGlyph = {
  shirt: <path d="M16 8l8-5 4 2 4-2 8 5-4 6-3-2v15H23V14l-3 2z" />,
  shoe:  <path d="M6 28h28c2 0 4-2 4-4l-12-5-4-7-8 2v10c-4 0-8 1-8 4z" />,
  bag:   <path d="M12 16h20l2 18a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2zM16 16c0-5 2-8 6-8s6 3 6 8" />,
  drop:  <path d="M22 6c5 7 9 11 9 16a9 9 0 0 1-18 0c0-5 4-9 9-16z" />,
  watch: <g><circle cx="22" cy="22" r="9" /><path d="M22 17v5l3 2M18 13l1-5h6l1 5M18 31l1 5h6l1-5" /></g>,
  box:   <path d="M22 6l14 7-14 7-14-7zM8 13v14l14 7 14-7V13M22 20v14" />,
};

function ProductPhoto({ cat, size = 64, radius = 8 }) {
  const c = (window.QC_CATEGORIES[cat]) || window.QC_CATEGORIES.home;
  return (
    <div style={{
      width: size, height: size, borderRadius: radius, flexShrink: 0,
      background: `linear-gradient(135deg, ${c.c1}, ${c.c2})`,
      display: "grid", placeItems: "center", position: "relative", overflow: "hidden",
      boxShadow: "inset 0 0 0 1px rgba(15,23,42,.06)",
    }}>
      <svg width={size * 0.56} height={size * 0.56} viewBox="0 0 44 44" fill="none"
           stroke={c.ink} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
           style={{ opacity: 0.85 }}>
        {ProdGlyph[c.glyph] || ProdGlyph.box}
      </svg>
    </div>
  );
}

Object.assign(window, { Icon, ProductPhoto });