// ===== Icons =====
const Icon = ({ name, ...rest }) => {
  const paths = {
    search: <path d="M11 19a8 8 0 1 1 5.3-2L21 21l-1.4 1.4-4.7-4.7A8 8 0 0 1 11 19zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="currentColor"/>,
    cart: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 4h2l2.5 12.5a2 2 0 0 0 2 1.5h8a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="21" r="1.5"/><circle cx="18" cy="21" r="1.5"/></g>,
    user: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></g>,
    heart: <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>,
    chev: <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>,
    chevR: <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill="currentColor"/>,
    grid: <g fill="currentColor"><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>,
    plus: <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>,
    minus: <path d="M5 12h14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>,
    close: <path d="M6 6l12 12M18 6l-12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>,
    star: <path d="M12 2l3 7 7 .5-5.5 5 1.7 7L12 18l-6.2 3.5L7.5 14.5 2 9.5l7-.5 3-7z" fill="currentColor"/>,
    eye: <g fill="none" stroke="currentColor" strokeWidth="1.8"><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"/></g>,
    compare: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 6h12M3 12h8M3 18h12"/><path d="M18 4l3 3-3 3M18 14l3 3-3 3"/></g>,
    truck: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h11v10H3zM14 10h4l3 4v3h-7z"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></g>,
    shield: <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>,
    refresh: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 4v4h-4"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 20v-4h4"/></g>,
    chat: <path d="M21 12a8 8 0 0 1-12 7l-5 1 1-5a8 8 0 1 1 16-3z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>,
    phone: <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>,
    mail: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></g>,
    pin: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></g>,
    arrow: <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>,
    gpu: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="2" y="7" width="20" height="10" rx="1.5"/><circle cx="8" cy="12" r="2.5"/><circle cx="15" cy="12" r="2.5"/><path d="M19 12h2"/></g>,
    cpu: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="5" y="5" width="14" height="14" rx="1.5"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></g>,
    mb: <g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="1.5"/><rect x="6" y="7" width="5" height="5"/><path d="M14 7h4M14 10h4M14 14h7M14 17h7M6 14h5v3H6z"/></g>,
    ram: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="2" y="8" width="20" height="8"/><path d="M5 8v-1M9 8v-1M13 8v-1M17 8v-1M21 8v-1"/><path d="M5 16v1M9 16v1M13 16v1M17 16v1M21 16v1"/></g>,
    ssd: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="1.5"/><circle cx="7" cy="12" r="1.4"/><path d="M11 12h7"/></g>,
    psu: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="3" y="6" width="18" height="12" rx="1.5"/><circle cx="9" cy="12" r="3"/><rect x="14" y="9" width="5" height="2"/><rect x="14" y="13" width="3" height="2"/></g>,
    case: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M9 6h6M9 9h6"/><circle cx="12" cy="16" r="2.5"/></g>,
    cool: <g fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="3"/><path d="M12 9c0-3 2-5 2-5M12 15c0 3-2 5-2 5M9 12c-3 0-5-2-5-2M15 12c3 0 5 2 5 2"/></g>,
    mon: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="2" y="4" width="20" height="13" rx="1.5"/><path d="M9 21h6M12 17v4"/></g>,
    kb: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="2" y="6" width="20" height="12" rx="1.5"/><path d="M6 10h.5M9 10h.5M12 10h.5M15 10h.5M18 10h.5M6 14h12"/></g>,
    ms: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><rect x="7" y="3" width="10" height="18" rx="5"/><path d="M12 7v4"/></g>,
    head: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><path d="M4 14v-2a8 8 0 0 1 16 0v2"/><rect x="3" y="13" width="4" height="7" rx="1"/><rect x="17" y="13" width="4" height="7" rx="1"/></g>,
    sparkle: <path d="M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5L12 2z" fill="currentColor"/>,
    check: <path d="M5 13l4 4 10-10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>,
    discount: <g fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 12l9-9h9v9l-9 9z" strokeLinejoin="round"/><circle cx="15" cy="9" r="1.5"/></g>,
    headset: <g fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"><path d="M4 14v-2a8 8 0 0 1 16 0v2"/><rect x="3" y="13" width="4" height="7" rx="1"/><rect x="17" y="13" width="4" height="7" rx="1"/></g>,
    fire: <path d="M12 2c0 4-5 5-5 10a5 5 0 0 0 10 0c0-2-1-3-2-4 0 2-1 3-2 3 1-3 0-7-1-9z" fill="currentColor"/>,
    crown: <path d="M3 17l2-9 4 4 3-8 3 8 4-4 2 9z" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/>,
  };
  return (
    <svg viewBox="0 0 24 24" {...rest}>{paths[name] || null}</svg>
  );
};

// ===== Stars =====
const Stars = ({ value = 5 }) => {
  const full = Math.floor(value);
  return (
    <span className="stars">
      {[0,1,2,3,4].map(i => (
        <Icon key={i} name="star" style={{ opacity: i < full ? 1 : 0.25 }} />
      ))}
    </span>
  );
};

// ===== Money =====
const money = (n) => n.toLocaleString("en-US");

// ===== Placeholder media =====
const PHLabel = ({ children }) => (
  <span className="ph-label">// {children}</span>
);

window.Icon = Icon;
window.Stars = Stars;
window.money = money;
window.PHLabel = PHLabel;
