// Watt Spot - icon set (stroke-based, sharp)
const Icon = ({ name, size = 20, className = '', style = {} }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round', className, style };
  const P = {
    bolt:    <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/>,
    search:  <><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>,
    cart:    <><path d="M3 3h2l2.5 13h11l2-9H6"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></>,
    user:    <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></>,
    heart:   <path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 10-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 000-7.8z"/>,
    menu:    <><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></>,
    close:   <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>,
    chevR:   <path d="M9 6l6 6-6 6"/>,
    chevL:   <path d="M15 6l-6 6 6 6"/>,
    chevD:   <path d="M6 9l6 6 6-6"/>,
    chevU:   <path d="M6 15l6-6 6 6"/>,
    plus:    <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    minus:   <path d="M5 12h14"/>,
    check:   <path d="M5 12l5 5L20 7"/>,
    star:    <path d="M12 2l3 7 7 .6-5.4 4.7 1.7 7.2L12 17.8 5.7 21.5l1.7-7.2L2 9.6 9 9l3-7z"/>,
    trash:   <><path d="M4 6h16"/><path d="M9 6V4h6v2"/><path d="M6 6l1 14h10l1-14"/></>,
    edit:    <><path d="M12 20h8"/><path d="M16 3l5 5L8 21H3v-5L16 3z"/></>,
    eye:     <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    filter:  <path d="M3 5h18l-7 9v6l-4-2v-4L3 5z"/>,
    sort:    <><path d="M7 4v16"/><path d="M3 8l4-4 4 4"/><path d="M17 20V4"/><path d="M13 16l4 4 4-4"/></>,
    truck:   <><rect x="2" y="7" width="12" height="10"/><path d="M14 10h4l3 3v4h-7"/><circle cx="6" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></>,
    shield:  <path d="M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z"/>,
    box:     <><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z"/><path d="M3 8l9 5 9-5"/><path d="M12 13v8"/></>,
    tag:     <><path d="M3 12V3h9l9 9-9 9-9-9z"/><circle cx="7.5" cy="7.5" r="1.5"/></>,
    lock:    <><rect x="4" y="11" width="16" height="10" rx="1"/><path d="M8 11V7a4 4 0 018 0v4"/></>,
    mail:    <><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></>,
    phone:   <path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/>,
    map:     <><path d="M21 10c0 6-9 13-9 13S3 16 3 10a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></>,
    credit:  <><rect x="2" y="5" width="20" height="14" rx="1"/><path d="M2 10h20"/><path d="M6 15h4"/></>,
    home:    <><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></>,
    grid:    <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    list:    <><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></>,
    chart:   <><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></>,
    chartBar:<><path d="M3 3v18h18"/><rect x="7" y="12" width="3" height="6"/><rect x="13" y="8" width="3" height="10"/></>,
    pkg:     <><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z"/><path d="M3 8l9 5 9-5"/></>,
    users:   <><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="9" r="3"/><path d="M15 14.5c3 0 6 2 6 5.5"/></>,
    settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 01-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 012.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 012.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></>,
    logout:  <><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></>,
    bell:    <><path d="M18 16v-5a6 6 0 10-12 0v5l-2 3h16l-2-3z"/><path d="M10 21a2 2 0 004 0"/></>,
    download:<><path d="M12 3v13"/><path d="M7 11l5 5 5-5"/><path d="M4 21h16"/></>,
    calendar:<><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18"/><path d="M8 3v4"/><path d="M16 3v4"/></>,
    cable:   <><path d="M4 4v4a4 4 0 004 4h8a4 4 0 014 4v4"/><circle cx="4" cy="4" r="1.5"/><circle cx="20" cy="20" r="1.5"/></>,
    switch:  <><rect x="5" y="3" width="14" height="18" rx="2"/><rect x="9" y="8" width="6" height="8" rx="1"/></>,
    plug:    <><path d="M9 2v6"/><path d="M15 2v6"/><path d="M6 8h12v4a6 6 0 01-12 0V8z"/><path d="M12 18v4"/></>,
    led:     <><path d="M9 18h6"/><path d="M10 21h4"/><path d="M12 3a6 6 0 00-4 10.5c1 1 1.5 2 1.5 3.5h5c0-1.5.5-2.5 1.5-3.5A6 6 0 0012 3z"/></>,
    lamp:    <><path d="M12 2v3"/><path d="M6 10l6-5 6 5v3H6v-3z"/><path d="M10 13v8"/><path d="M14 13v8"/></>,
    tool:    <><path d="M14 7l3-3 4 4-3 3"/><path d="M7 10l7 7-3 3-7-7 3-3z"/></>,
    wifi:    <><path d="M2 9a16 16 0 0120 0"/><path d="M5 13a11 11 0 0114 0"/><path d="M9 17a5 5 0 016 0"/><circle cx="12" cy="20" r="0.5" fill="currentColor"/></>,
    trend:   <><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></>,
    clock:   <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    dot:     <circle cx="12" cy="12" r="3" fill="currentColor"/>,
    warn:    <><path d="M12 3L2 20h20L12 3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></>,
    dashboard:<><rect x="3" y="3" width="8" height="10"/><rect x="13" y="3" width="8" height="6"/><rect x="13" y="11" width="8" height="10"/><rect x="3" y="15" width="8" height="6"/></>,
    cube:    <><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z"/><path d="M3 8l9 5 9-5"/><path d="M12 13v8"/></>,
    whatsapp:<><path d="M3 21l1.5-4.5A8.5 8.5 0 1 1 8 19.5L3 21z"/><path d="M9 9c0 4 3 7 7 7l1.5-2-2.5-1-1 1c-1.5-.5-2.5-1.5-3-3l1-1-1-2.5L9 9z" fill="currentColor" stroke="none"/></>,
  };
  return <svg {...props}>{P[name]}</svg>;
};

// Placeholder product image - decorative gradient with category glyph.
// Uses category as seed to vary color. Never meant to look like real product photos.
const ProductImg = ({ cat, id, size = 240 }) => {
  const palette = {
    cables:  ['#1E3A5F', '#4A6B8A'],
    inter:   ['#E8652A', '#F4A261'],
    prises:  ['#2C4A6E', '#5B7B9E'],
    leds:    ['#E8652A', '#F5C56B'],
    lumi:    ['#3D5A7A', '#6B8AAF'],
    protect: ['#1E3A5F', '#E8652A'],
    outil:   ['#2A2A2A', '#5A5A5A'],
    domo:    ['#4A5B7A', '#8AA0B8'],
  };
  const [c1, c2] = palette[cat] || ['#1E3A5F', '#4A6B8A'];
  const seed = (id?.charCodeAt(1) || 0) + (id?.charCodeAt(2) || 0);
  const rot = (seed * 37) % 360;
  return (
    <svg viewBox="0 0 240 240" width={size} height={size} style={{ display: 'block', width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id={`g-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c1}/>
          <stop offset="100%" stopColor={c2}/>
        </linearGradient>
        <pattern id={`p-${id}`} x="0" y="0" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform={`rotate(${rot})`}>
          <line x1="0" y1="0" x2="0" y2="12" stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="240" height="240" fill={`url(#g-${id})`}/>
      <rect width="240" height="240" fill={`url(#p-${id})`}/>
      {/* abstract product silhouette */}
      <g transform="translate(120,120)" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="2">
        {cat === 'leds' && <><circle r="42" /><circle r="28"/><path d="M-20 38 h40 M-16 46 h32 M-12 54 h24" strokeLinecap="round"/></>}
        {cat === 'cables' && <><path d="M-50 -30 C -50 0, 50 0, 50 30" strokeWidth="10" strokeLinecap="round"/><circle cx="-50" cy="-30" r="5" fill="rgba(255,255,255,0.4)"/><circle cx="50" cy="30" r="5" fill="rgba(255,255,255,0.4)"/></>}
        {cat === 'inter' && <><rect x="-30" y="-44" width="60" height="88" rx="6"/><rect x="-16" y="-22" width="32" height="44" rx="3"/></>}
        {cat === 'prises' && <><rect x="-38" y="-38" width="76" height="76" rx="12"/><circle cx="-12" cy="0" r="5" fill="rgba(255,255,255,0.4)"/><circle cx="12" cy="0" r="5" fill="rgba(255,255,255,0.4)"/></>}
        {cat === 'lumi' && <><path d="M0 -50 v15 M-40 -20 L40 -20 L25 10 L-25 10 Z" strokeLinejoin="round"/><path d="M-10 10 v30 M10 10 v30"/></>}
        {cat === 'protect' && <><path d="M0 -44 L34 -30 V14 C34 32, 0 44, 0 44 C0 44, -34 32, -34 14 V-30 Z"/></>}
        {cat === 'outil' && <><path d="M-30 -30 L10 10 L20 0 L30 10 L0 40 L-10 30 L-40 0 Z"/></>}
        {cat === 'domo' && <><path d="M-38 -10 Q 0 -40, 38 -10" /><path d="M-26 4 Q 0 -18, 26 4"/><path d="M-14 18 Q 0 8, 14 18"/><circle cx="0" cy="30" r="3" fill="rgba(255,255,255,0.6)"/></>}
      </g>
      <text x="220" y="226" fontSize="9" fill="rgba(255,255,255,0.5)" textAnchor="end" fontFamily="ui-monospace,monospace">{id?.toUpperCase()}</text>
    </svg>
  );
};

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