// ==============================================
// ProductPhoto — rich SVG product illustrations
// Each product gets a realistic-looking 3/4 view illustration
// with brand colors, shadows, highlights
// ==============================================

// Map product id → illustration kind
const PRODUCT_KIND = {
  1: "drill", 2: "grinder", 3: "grinder-lg", 4: "circular-saw", 5: "hammer-drill",
  6: "compressor", 7: "screwdriver-elec", 8: "cutoff-saw",
  9: "wrench-set", 10: "claw-hammer", 11: "screwdriver-set", 12: "pliers",
  13: "knife", 14: "torque-wrench",
  15: "tape-measure", 16: "laser-level", 17: "laser-dist", 18: "micrometer",
  19: "screws-box", 20: "anchors-box", 21: "nails-box", 22: "thread-tape",
  23: "helmet", 24: "gloves", 25: "glasses", 26: "shoes",
  27: "toolbox", 28: "cabinet", 29: "backpack", 30: "shelf",
};

// Brand color schemes (closer to real brand identities)
const BRAND_COLORS = {
  Makita: { body: "#00a4b4", accent: "#0c2d3a", grip: "#1a1a1a", highlight: "#7fd4dd" },
  Bosch:  { body: "#003c7e", accent: "#dc2626", grip: "#1a1a1a", highlight: "#4a7cb8" },
  DeWalt: { body: "#fbbf24", accent: "#0f172a", grip: "#1a1a1a", highlight: "#fde68a" },
  Stanley: { body: "#fbbf24", accent: "#0f172a", grip: "#1a1a1a", highlight: "#fde68a" },
  Milwaukee: { body: "#dc2626", accent: "#1a1a1a", grip: "#1a1a1a", highlight: "#f87171" },
  TOTAL: { body: "#1e3a8a", accent: "#dc2626", grip: "#1a1a1a", highlight: "#4a7cb8" },
  INGCO: { body: "#ea580c", accent: "#1a1a1a", grip: "#1a1a1a", highlight: "#fed7aa" },
  Mitutoyo: { body: "#e2e8f0", accent: "#0f172a", grip: "#1a1a1a", highlight: "#f8fafc" },
  "King's": { body: "#fbbf24", accent: "#0f172a", grip: "#1a1a1a", highlight: "#fde68a" },
  Generic: { body: "#64748b", accent: "#1f2937", grip: "#1a1a1a", highlight: "#cbd5e1" },
};

function ProductPhoto({ product, simple = false }) {
  const kind = PRODUCT_KIND[product.id] || "wrench-set";
  const c = BRAND_COLORS[product.brand] || BRAND_COLORS.Generic;
  const bgHue = (product.id * 37) % 360;

  return (
    <div className="product-photo">
      {!simple && (
        <div className="product-photo-bg" style={{
          backgroundImage: `radial-gradient(ellipse at 30% 20%, hsl(${bgHue}, 25%, 96%), hsl(${bgHue}, 18%, 92%) 50%, hsl(${bgHue}, 14%, 88%))`,
        }}>
          <div className="product-photo-grid"></div>
        </div>
      )}
      <svg viewBox="0 0 200 200" className="product-photo-svg" preserveAspectRatio="xMidYMid meet">
        <defs>
          <filter id={`pp-shadow-${product.id}`} x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
            <feOffset dx="0" dy="3" result="offsetblur"/>
            <feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer>
            <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
          <linearGradient id={`pp-body-${product.id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={c.highlight}/>
            <stop offset="50%" stopColor={c.body}/>
            <stop offset="100%" stopColor={shadeColor(c.body, -20)}/>
          </linearGradient>
          <linearGradient id={`pp-metal-${product.id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#e2e8f0"/>
            <stop offset="50%" stopColor="#94a3b8"/>
            <stop offset="100%" stopColor="#475569"/>
          </linearGradient>
          <linearGradient id={`pp-grip-${product.id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#374151"/>
            <stop offset="100%" stopColor="#0f172a"/>
          </linearGradient>
        </defs>

        {/* shadow under product */}
        <ellipse cx="100" cy="180" rx="60" ry="6" fill="rgba(0,0,0,0.15)"/>

        <g filter={`url(#pp-shadow-${product.id})`}>
          {renderShape(kind, c, product.id)}
        </g>
      </svg>
    </div>
  );
}

function renderShape(kind, c, id) {
  const bodyGrad = `url(#pp-body-${id})`;
  const metalGrad = `url(#pp-metal-${id})`;
  const gripGrad = `url(#pp-grip-${id})`;

  switch (kind) {
    case "drill":
      return (
        <g>
          {/* main body */}
          <path d="M 30 80 Q 30 70 40 70 L 130 70 Q 145 70 145 85 L 145 105 Q 145 120 130 120 L 80 120 L 80 160 Q 80 170 70 170 L 50 170 Q 40 170 40 160 L 40 120 Q 30 118 30 105 Z" fill={bodyGrad}/>
          {/* highlight stripe */}
          <path d="M 35 78 L 130 78 Q 138 78 138 85 L 138 88 L 35 88 Z" fill={c.highlight} opacity="0.5"/>
          {/* chuck */}
          <rect x="138" y="80" width="14" height="30" fill={metalGrad}/>
          <circle cx="158" cy="95" r="14" fill="#1f2937"/>
          <circle cx="158" cy="95" r="10" fill="#0f172a"/>
          <circle cx="158" cy="95" r="6" fill="#374151"/>
          {/* drill bit */}
          <path d="M 168 92 L 188 94 L 188 96 L 168 98 Z" fill={metalGrad}/>
          {/* trigger */}
          <rect x="52" y="120" width="18" height="22" rx="3" fill="#1f2937"/>
          {/* battery */}
          <rect x="36" y="160" width="48" height="14" rx="3" fill="#1f2937"/>
          <rect x="40" y="164" width="6" height="3" fill="#10b981"/>
          <rect x="48" y="164" width="6" height="3" fill="#10b981"/>
          <rect x="56" y="164" width="6" height="3" fill="#10b981"/>
          <rect x="64" y="164" width="6" height="3" fill="#475569"/>
          {/* speed dial */}
          <circle cx="65" cy="95" r="6" fill="#1f2937"/>
          <rect x="63" y="89" width="4" height="2" fill="#fff"/>
          {/* logo plate */}
          <rect x="55" y="100" width="30" height="6" rx="1" fill="rgba(0,0,0,0.3)"/>
        </g>
      );

    case "grinder":
    case "grinder-lg":
      const size = kind === "grinder-lg" ? 56 : 42;
      return (
        <g>
          <rect x="40" y="70" width="80" height="40" rx="8" fill={bodyGrad}/>
          <rect x="40" y="70" width="80" height="8" fill={c.highlight} opacity="0.5"/>
          <rect x="40" y="76" width="80" height="2" fill={c.accent} opacity="0.4"/>
          {/* aux handle */}
          <rect x="68" y="56" width="24" height="14" rx="6" fill={gripGrad}/>
          <rect x="78" y="46" width="4" height="14" fill="#475569"/>
          {/* gear head */}
          <ellipse cx="130" cy="90" rx="20" ry="22" fill={metalGrad}/>
          <ellipse cx="130" cy="90" rx="16" ry="18" fill="#64748b"/>
          {/* disc */}
          <ellipse cx={130 + size/2.5} cy="90" rx="4" ry={size/2} fill="#1f2937"/>
          <ellipse cx={130 + size/2.5 + 1} cy="90" rx="2" ry={size/2 - 4} fill="#374151"/>
          {/* spark protection */}
          <path d={`M 130 ${90-size/2} L ${130+size/2.5} ${90-size/2-2} L ${130+size/2.5} ${90+size/2+2} L 130 ${90+size/2}`} fill="none" stroke="#1f2937" strokeWidth="2"/>
          {/* trigger area */}
          <rect x="50" y="106" width="60" height="22" rx="3" fill={gripGrad}/>
          {/* switch */}
          <rect x="75" y="112" width="14" height="6" rx="1" fill="#fbbf24"/>
        </g>
      );

    case "circular-saw":
      return (
        <g>
          {/* base plate */}
          <rect x="20" y="130" width="160" height="6" fill={metalGrad}/>
          {/* motor housing */}
          <rect x="50" y="90" width="60" height="40" rx="6" fill={bodyGrad}/>
          <rect x="50" y="90" width="60" height="6" fill={c.highlight} opacity="0.5"/>
          {/* handle */}
          <path d="M 60 90 Q 70 60 100 60 Q 115 60 115 75 L 115 90" fill="none" stroke={c.body} strokeWidth="10" strokeLinecap="round"/>
          <path d="M 70 75 L 95 75" stroke={c.grip} strokeWidth="6" strokeLinecap="round"/>
          {/* blade guard */}
          <path d="M 105 130 A 40 40 0 0 1 165 130 L 165 134 L 105 134 Z" fill={c.accent}/>
          <path d="M 110 130 A 35 35 0 0 1 160 130" fill={c.body} opacity="0.6"/>
          {/* blade */}
          <circle cx="135" cy="130" r="32" fill={metalGrad}/>
          <circle cx="135" cy="130" r="28" fill="#94a3b8"/>
          <circle cx="135" cy="130" r="6" fill="#1f2937"/>
          {/* teeth */}
          {Array.from({length: 16}).map((_, i) => {
            const a = (i / 16) * Math.PI * 2;
            const x = 135 + Math.cos(a) * 30;
            const y = 130 + Math.sin(a) * 30;
            return <circle key={i} cx={x} cy={y} r="1.6" fill="#1f2937"/>;
          })}
          {/* trigger */}
          <rect x="68" y="68" width="14" height="14" rx="2" fill={c.accent}/>
        </g>
      );

    case "hammer-drill":
      return (
        <g>
          {/* body */}
          <path d="M 30 85 L 30 130 Q 30 140 40 140 L 150 140 L 165 130 L 165 85 Q 165 75 155 75 L 40 75 Q 30 75 30 85 Z" fill={bodyGrad}/>
          <rect x="30" y="80" width="135" height="8" fill={c.highlight} opacity="0.4"/>
          {/* chuck */}
          <rect x="165" y="95" width="20" height="20" fill={metalGrad}/>
          <ellipse cx="190" cy="105" rx="6" ry="8" fill="#1f2937"/>
          {/* chisel bit */}
          <path d="M 195 100 L 198 110 L 196 110 L 195 108 Z" fill={metalGrad}/>
          {/* aux handle */}
          <rect x="68" y="55" width="20" height="20" rx="5" fill={gripGrad}/>
          <rect x="76" y="40" width="4" height="18" fill="#475569"/>
          {/* main grip */}
          <path d="M 70 140 L 60 175 L 110 175 L 100 140 Z" fill={c.body}/>
          <rect x="74" y="148" width="32" height="18" rx="2" fill={gripGrad}/>
          {/* trigger */}
          <rect x="82" y="146" width="14" height="14" rx="2" fill={c.accent}/>
          {/* mode selector */}
          <circle cx="100" cy="105" r="10" fill="#1f2937"/>
          <path d="M 100 100 L 105 108 L 95 108 Z" fill="#fbbf24"/>
        </g>
      );

    case "compressor":
      return (
        <g>
          {/* tank */}
          <ellipse cx="100" cy="130" rx="70" ry="22" fill={bodyGrad}/>
          <rect x="30" y="100" width="140" height="32" fill={bodyGrad}/>
          <ellipse cx="100" cy="100" rx="70" ry="20" fill={bodyGrad}/>
          <ellipse cx="100" cy="100" rx="65" ry="16" fill={c.highlight} opacity="0.4"/>
          {/* motor on top */}
          <rect x="70" y="60" width="60" height="40" rx="6" fill={c.accent}/>
          <circle cx="100" cy="80" r="14" fill="#1f2937"/>
          <circle cx="100" cy="80" r="10" fill="#374151"/>
          {/* gauges */}
          <circle cx="155" cy="78" r="10" fill="white" stroke={c.accent} strokeWidth="2"/>
          <circle cx="40" cy="78" r="10" fill="white" stroke={c.accent} strokeWidth="2"/>
          <path d="M 155 78 L 158 72" stroke="#dc2626" strokeWidth="1.5"/>
          <path d="M 40 78 L 36 73" stroke="#dc2626" strokeWidth="1.5"/>
          {/* wheels */}
          <circle cx="40" cy="160" r="12" fill="#1f2937"/>
          <circle cx="40" cy="160" r="6" fill="#475569"/>
          <circle cx="160" cy="160" r="12" fill="#1f2937"/>
          <circle cx="160" cy="160" r="6" fill="#475569"/>
          {/* handle */}
          <rect x="110" y="58" width="50" height="4" fill="#1f2937"/>
          <rect x="156" y="58" width="4" height="14" fill="#1f2937"/>
        </g>
      );

    case "screwdriver-elec":
      return (
        <g>
          <rect x="45" y="80" width="90" height="28" rx="14" fill={bodyGrad}/>
          <rect x="45" y="83" width="90" height="6" rx="3" fill={c.highlight} opacity="0.5"/>
          {/* head */}
          <rect x="130" y="88" width="20" height="12" fill={metalGrad}/>
          <rect x="148" y="91" width="20" height="6" fill={metalGrad}/>
          <path d="M 168 91 L 176 94 L 176 95 L 168 96 Z" fill="#94a3b8"/>
          {/* grip */}
          <path d="M 65 108 L 55 145 L 105 145 L 95 108 Z" fill={c.body}/>
          <rect x="62" y="115" width="36" height="22" rx="3" fill={gripGrad}/>
          <rect x="68" y="113" width="24" height="10" rx="2" fill={c.accent}/>
          {/* battery */}
          <rect x="55" y="142" width="50" height="14" rx="3" fill="#1f2937"/>
          {/* LED */}
          <circle cx="68" cy="94" r="3" fill="#fde68a"/>
        </g>
      );

    case "cutoff-saw":
      return (
        <g>
          {/* base */}
          <rect x="30" y="155" width="140" height="14" rx="3" fill="#1f2937"/>
          <rect x="35" y="152" width="130" height="6" fill={metalGrad}/>
          {/* motor */}
          <rect x="35" y="80" width="65" height="50" rx="6" fill={bodyGrad}/>
          <rect x="35" y="80" width="65" height="8" fill={c.highlight} opacity="0.4"/>
          {/* arm */}
          <rect x="80" y="100" width="50" height="14" fill={c.accent}/>
          {/* blade housing */}
          <path d="M 130 110 A 40 40 0 0 1 175 130 L 175 134 L 130 134 Z" fill={c.body}/>
          {/* fiber disc */}
          <circle cx="155" cy="130" r="40" fill="#8b4513"/>
          <circle cx="155" cy="130" r="36" fill="#a0522d"/>
          <circle cx="155" cy="130" r="32" fill="#8b4513"/>
          <circle cx="155" cy="130" r="6" fill="#1f2937"/>
          {/* handle */}
          <rect x="38" y="56" width="40" height="14" rx="6" fill={gripGrad}/>
          <rect x="55" y="60" width="6" height="22" fill="#475569"/>
          {/* vise */}
          <rect x="50" y="148" width="30" height="8" fill="#475569"/>
        </g>
      );

    case "wrench-set":
      return (
        <g>
          {/* case */}
          <rect x="20" y="60" width="160" height="100" rx="6" fill="#0f172a"/>
          <rect x="22" y="62" width="156" height="96" rx="5" fill="#1f2937"/>
          {/* foam slots */}
          {[0, 1, 2, 3].map(row => 
            [0, 1].map(col => {
              const w = 60 + row * 8;
              const x = 30 + col * 76;
              const y = 70 + row * 22;
              return (
                <g key={`${row}-${col}`}>
                  <rect x={x} y={y} width={w} height="16" rx="3" fill="#0a0f1c"/>
                  {/* wrench inside */}
                  <rect x={x + 4} y={y + 5} width={w - 18} height="6" fill={metalGrad}/>
                  <circle cx={x + w - 8} cy={y + 8} r="6" fill="none" stroke="#cbd5e1" strokeWidth="1.5"/>
                  <path d={`M ${x + 4} ${y + 8} L ${x - 2} ${y + 4} L ${x - 2} ${y + 12} Z`} fill={metalGrad}/>
                </g>
              );
            })
          )}
          {/* label */}
          <rect x="60" y="155" width="80" height="6" fill={c.body}/>
        </g>
      );

    case "claw-hammer":
      return (
        <g transform="rotate(-15 100 100)">
          {/* head */}
          <path d="M 60 60 Q 60 50 70 50 L 120 50 Q 130 50 130 60 L 130 78 Q 130 88 120 88 L 70 88 Q 60 88 60 78 Z" fill={metalGrad}/>
          <rect x="62" y="58" width="68" height="6" fill="#cbd5e1" opacity="0.6"/>
          {/* claw */}
          <path d="M 60 70 L 40 78 L 36 88 L 42 92 L 60 84 Z" fill={metalGrad}/>
          <path d="M 40 78 L 48 85" stroke="#1f2937" strokeWidth="1.5"/>
          {/* handle */}
          <rect x="90" y="86" width="14" height="90" fill={c.body}/>
          <rect x="90" y="88" width="3" height="86" fill={c.highlight} opacity="0.6"/>
          {/* grip */}
          <rect x="86" y="120" width="22" height="56" rx="4" fill={gripGrad}/>
          {/* grip lines */}
          {[0,1,2,3,4].map(i => (
            <rect key={i} x="86" y={128 + i * 10} width="22" height="2" fill={c.accent} opacity="0.6"/>
          ))}
        </g>
      );

    case "screwdriver-set":
      return (
        <g>
          {/* stand base */}
          <rect x="40" y="145" width="120" height="22" rx="4" fill="#0f172a"/>
          <ellipse cx="100" cy="145" rx="60" ry="6" fill={c.accent}/>
          {/* screwdrivers (6) */}
          {[0,1,2,3,4,5].map(i => {
            const x = 52 + i * 16;
            const shaftColor = i % 2 ? "#94a3b8" : "#cbd5e1";
            const gripColor = i < 3 ? c.body : c.accent;
            return (
              <g key={i}>
                {/* shaft */}
                <rect x={x - 1} y="80" width="3" height="50" fill={shaftColor}/>
                {/* tip */}
                {i % 2 === 0 ? 
                  <path d={`M ${x-2} 128 L ${x+2} 128 L ${x} 132 Z`} fill="#94a3b8"/> :
                  <path d={`M ${x-2.5} 130 L ${x+2.5} 130 L ${x+1.5} 132 L ${x-1.5} 132 Z`} fill="#94a3b8"/>
                }
                {/* grip */}
                <rect x={x - 6} y="55" width="13" height="28" rx="4" fill={gripColor}/>
                <rect x={x - 6} y="58" width="13" height="3" fill="#fff" opacity="0.3"/>
                {/* grip ridges */}
                {[0,1,2,3].map(j => <rect key={j} x={x-5} y={62 + j*5} width="11" height="1.5" fill="rgba(0,0,0,0.3)"/>)}
              </g>
            );
          })}
        </g>
      );

    case "pliers":
      return (
        <g>
          {/* upper jaw */}
          <path d="M 30 90 L 60 90 L 90 100 L 90 108 L 60 108 L 30 100 Z" fill={metalGrad}/>
          {/* lower jaw */}
          <path d="M 30 108 L 60 108 L 90 100 L 90 92 L 60 92 L 30 100 Z" fill="#94a3b8"/>
          {/* teeth */}
          <path d="M 90 100 L 95 96 L 100 100 L 95 104 Z" fill="#1f2937"/>
          {/* pivot */}
          <circle cx="92" cy="100" r="4" fill="#1f2937"/>
          <circle cx="92" cy="100" r="2" fill="#475569"/>
          {/* upper handle */}
          <path d="M 92 95 L 175 65 L 178 75 L 95 105 Z" fill={c.body}/>
          {/* upper grip */}
          <rect x="125" y="62" width="55" height="14" rx="4" transform="rotate(-18 152 70)" fill={gripGrad}/>
          {/* lower handle */}
          <path d="M 92 105 L 175 135 L 178 125 L 95 95 Z" fill={c.body}/>
          {/* lower grip */}
          <rect x="125" y="124" width="55" height="14" rx="4" transform="rotate(18 152 130)" fill={gripGrad}/>
          {/* adjustment screw */}
          <circle cx="105" cy="100" r="4" fill="#fbbf24"/>
        </g>
      );

    case "knife":
      return (
        <g>
          {/* body */}
          <rect x="35" y="95" width="130" height="22" rx="3" fill={bodyGrad}/>
          <rect x="35" y="98" width="130" height="4" fill={c.highlight} opacity="0.5"/>
          {/* blade */}
          <path d="M 165 100 L 195 100 L 195 110 L 165 110 Z" fill={metalGrad}/>
          <path d="M 195 100 L 200 102 L 200 108 L 195 110" fill="#475569"/>
          {/* segments */}
          <path d="M 178 100 L 178 110 M 188 100 L 188 110" stroke="#1f2937" strokeWidth="0.5"/>
          {/* slider */}
          <rect x="65" y="93" width="24" height="26" rx="2" fill={c.accent}/>
          <rect x="73" y="93" width="8" height="26" fill={c.highlight} opacity="0.6"/>
          {/* belt clip */}
          <rect x="40" y="117" width="20" height="14" fill="#1f2937"/>
        </g>
      );

    case "torque-wrench":
      return (
        <g>
          {/* head */}
          <rect x="20" y="90" width="32" height="24" rx="3" fill={metalGrad}/>
          <circle cx="36" cy="102" r="8" fill="#1f2937"/>
          <rect x="32" y="86" width="8" height="4" fill={metalGrad}/>
          {/* shaft */}
          <rect x="50" y="96" width="100" height="14" fill={metalGrad}/>
          <rect x="50" y="98" width="100" height="3" fill="#cbd5e1"/>
          {/* scale window */}
          <rect x="80" y="92" width="40" height="20" rx="2" fill="#0f172a"/>
          <rect x="82" y="94" width="36" height="16" fill="#1f2937"/>
          {[0,1,2,3,4,5,6,7].map(i => <rect key={i} x={84 + i*4.4} y="95" width="0.6" height="14" fill="#fbbf24"/>)}
          <rect x="98" y="93" width="2" height="18" fill="#dc2626"/>
          {/* handle */}
          <rect x="148" y="92" width="40" height="22" rx="4" fill={c.body}/>
          {/* grip ridges */}
          {[0,1,2,3,4].map(i => <rect key={i} x={152 + i*7} y="94" width="2" height="18" fill={c.accent} opacity="0.7"/>)}
          {/* end cap */}
          <circle cx="190" cy="103" r="6" fill={c.accent}/>
        </g>
      );

    case "tape-measure":
      return (
        <g>
          {/* body */}
          <rect x="50" y="60" width="100" height="100" rx="14" fill={bodyGrad}/>
          <rect x="50" y="60" width="100" height="12" rx="14" fill={c.highlight} opacity="0.5"/>
          {/* window */}
          <rect x="60" y="120" width="80" height="22" rx="3" fill="#0f172a"/>
          <rect x="62" y="122" width="76" height="18" fill="#1f2937"/>
          {/* belt clip */}
          <rect x="55" y="65" width="6" height="40" fill="#1f2937"/>
          {/* lock */}
          <rect x="92" y="100" width="16" height="10" rx="2" fill={c.accent}/>
          {/* tape */}
          <rect x="140" y="98" width="50" height="6" fill="#fbbf24"/>
          <rect x="140" y="98" width="50" height="6" fill="none" stroke="#1f2937" strokeWidth="0.4"/>
          {[0,1,2,3,4,5,6,7,8,9].map(i => <rect key={i} x={141 + i*5} y="98" width="0.4" height="3" fill="#1f2937"/>)}
          {/* hook */}
          <path d="M 188 98 L 196 96 L 196 106 L 188 104 Z" fill={metalGrad}/>
          {/* logo */}
          <rect x="80" y="80" width="40" height="14" fill="rgba(0,0,0,0.25)" rx="2"/>
          <text x="100" y="91" textAnchor="middle" fontSize="10" fill="white" fontFamily="Inter" fontWeight="700">5M</text>
        </g>
      );

    case "laser-level":
      return (
        <g>
          {/* base */}
          <rect x="40" y="120" width="120" height="40" rx="6" fill={bodyGrad}/>
          <rect x="40" y="120" width="120" height="8" fill={c.highlight} opacity="0.4"/>
          {/* lens housing */}
          <rect x="80" y="90" width="40" height="40" rx="20" fill={c.accent}/>
          <circle cx="100" cy="110" r="14" fill="#dc2626"/>
          <circle cx="100" cy="110" r="8" fill="#fca5a5"/>
          <circle cx="100" cy="110" r="3" fill="white"/>
          {/* laser beams */}
          <path d="M 100 110 L 30 110" stroke="#dc2626" strokeWidth="1.5" opacity="0.7"/>
          <path d="M 100 110 L 170 110" stroke="#dc2626" strokeWidth="1.5" opacity="0.7"/>
          <path d="M 100 110 L 100 50" stroke="#dc2626" strokeWidth="1.5" opacity="0.7"/>
          {/* buttons */}
          <circle cx="60" cy="140" r="4" fill="#1f2937"/>
          <circle cx="75" cy="140" r="4" fill="#1f2937"/>
          {/* level bubble */}
          <rect x="118" y="138" width="34" height="8" rx="4" fill="#1f2937"/>
          <circle cx="135" cy="142" r="2" fill="#fbbf24"/>
        </g>
      );

    case "laser-dist":
      return (
        <g>
          {/* body */}
          <rect x="60" y="50" width="80" height="120" rx="10" fill={bodyGrad}/>
          <rect x="60" y="50" width="80" height="14" rx="10" fill={c.highlight} opacity="0.5"/>
          {/* screen */}
          <rect x="68" y="62" width="64" height="40" rx="3" fill="#0a3a3a"/>
          <text x="100" y="86" textAnchor="middle" fontSize="14" fill="#4ade80" fontFamily="JetBrains Mono" fontWeight="700">12.45m</text>
          {/* laser hole */}
          <circle cx="100" cy="60" r="4" fill="#dc2626"/>
          <circle cx="100" cy="60" r="2" fill="#fca5a5"/>
          {/* buttons */}
          {[0,1,2].map(i => (
            <g key={i}>
              <rect x={72 + (i%3)*20} y="110" width="14" height="14" rx="2" fill="#1f2937"/>
              <rect x={72 + (i%3)*20} y="130" width="14" height="14" rx="2" fill="#1f2937"/>
              <rect x={72 + (i%3)*20} y="150" width="14" height="14" rx="2" fill={i === 1 ? "#dc2626" : "#1f2937"}/>
            </g>
          ))}
        </g>
      );

    case "micrometer":
      return (
        <g>
          {/* frame */}
          <path d="M 30 110 Q 30 80 60 80 L 100 80 L 100 90 L 70 90 Q 50 90 50 110 Q 50 130 70 130 L 100 130 L 100 140 L 60 140 Q 30 140 30 110 Z" fill={metalGrad}/>
          {/* anvil */}
          <rect x="100" y="90" width="14" height="40" fill="#cbd5e1"/>
          <rect x="114" y="100" width="4" height="20" fill="#374151"/>
          {/* spindle */}
          <rect x="118" y="106" width="30" height="8" fill="#cbd5e1"/>
          {/* thimble */}
          <rect x="148" y="98" width="40" height="24" rx="3" fill="#1f2937"/>
          {[0,1,2,3,4,5,6,7,8,9,10].map(i => <rect key={i} x={150 + i*3.5} y="100" width="0.5" height="20" fill="#fbbf24"/>)}
          {/* digital window */}
          <rect x="60" y="100" width="34" height="20" rx="2" fill="#0a3a3a"/>
          <text x="77" y="115" textAnchor="middle" fontSize="9" fill="#4ade80" fontFamily="JetBrains Mono" fontWeight="700">12.345</text>
        </g>
      );

    case "screws-box":
    case "anchors-box":
    case "nails-box":
      const fastenerColor = kind === "screws-box" ? "#94a3b8" : kind === "anchors-box" ? "#fbbf24" : "#475569";
      return (
        <g>
          {/* box */}
          <path d="M 30 80 L 170 80 L 175 95 L 25 95 Z" fill="#92400e"/>
          <rect x="30" y="80" width="140" height="80" fill="#a16207"/>
          <path d="M 170 80 L 175 95 L 175 165 L 170 160 Z" fill="#78350f"/>
          {/* label */}
          <rect x="50" y="100" width="100" height="40" fill="white"/>
          <rect x="50" y="100" width="100" height="10" fill={c.body}/>
          <rect x="55" y="115" width="40" height="3" fill="#1f2937"/>
          <rect x="55" y="122" width="60" height="3" fill="#94a3b8"/>
          <rect x="55" y="129" width="30" height="3" fill="#94a3b8"/>
          {/* fasteners falling out */}
          {[20, 40, 65, 145, 165, 180].map((x, i) => (
            <g key={i} transform={`translate(${x} ${162 + (i%2)*4}) rotate(${i*30})`}>
              {kind === "nails-box" ? (
                <>
                  <rect x="-1" y="-12" width="2" height="14" fill={fastenerColor}/>
                  <ellipse cx="0" cy="-12" rx="3" ry="1" fill={fastenerColor}/>
                </>
              ) : (
                <>
                  <ellipse cx="0" cy="-10" rx="3" ry="1.5" fill={fastenerColor}/>
                  <rect x="-1" y="-10" width="2" height="10" fill={fastenerColor}/>
                  <path d="M -1 -8 L 1 -8 M -1 -4 L 1 -4 M -1 0 L 1 0" stroke="#1f2937" strokeWidth="0.3"/>
                </>
              )}
            </g>
          ))}
        </g>
      );

    case "thread-tape":
      return (
        <g>
          {/* stack of rolls */}
          {[0, 1, 2, 3].map(i => {
            const y = 130 - i * 18;
            return (
              <g key={i}>
                <ellipse cx="100" cy={y + 10} rx="42" ry="10" fill={i === 3 ? "#cbd5e1" : "#94a3b8"}/>
                <rect x="58" y={y} width="84" height="14" fill="#f8fafc"/>
                <ellipse cx="100" cy={y} rx="42" ry="10" fill="#f8fafc"/>
                <ellipse cx="100" cy={y} rx="36" ry="8" fill="#cbd5e1"/>
                <ellipse cx="100" cy={y} rx="8" ry="2" fill="#1f2937"/>
              </g>
            );
          })}
        </g>
      );

    case "helmet":
      return (
        <g>
          {/* helmet body */}
          <path d="M 50 130 Q 50 70 100 70 Q 150 70 150 130 L 160 140 L 40 140 Z" fill={bodyGrad}/>
          <path d="M 55 120 Q 55 80 100 80 Q 145 80 145 120" fill={c.highlight} opacity="0.4"/>
          {/* brim */}
          <rect x="35" y="135" width="130" height="8" rx="2" fill={c.accent}/>
          {/* ridges */}
          <path d="M 100 70 L 100 140" stroke={c.accent} strokeWidth="3" opacity="0.5"/>
          <path d="M 70 78 L 70 138" stroke={c.accent} strokeWidth="2" opacity="0.4"/>
          <path d="M 130 78 L 130 138" stroke={c.accent} strokeWidth="2" opacity="0.4"/>
          {/* label */}
          <rect x="80" y="100" width="40" height="20" fill="rgba(0,0,0,0.2)" rx="2"/>
          <text x="100" y="113" textAnchor="middle" fontSize="9" fill="white" fontFamily="Inter" fontWeight="700">มอก.</text>
          {/* strap */}
          <path d="M 70 140 L 70 160 L 130 160 L 130 140" fill="none" stroke="#1f2937" strokeWidth="2"/>
        </g>
      );

    case "gloves":
      return (
        <g>
          {/* glove body */}
          <path d="M 60 80 Q 60 60 80 60 L 90 60 L 90 50 Q 90 40 100 40 Q 110 40 110 50 L 110 60 L 120 60 L 120 50 Q 120 40 130 40 Q 140 40 140 50 L 140 70 L 150 70 L 150 60 Q 150 50 160 50 Q 170 50 170 60 L 170 100 Q 170 130 140 140 L 80 140 Q 60 130 60 110 Z"
            fill="#1d4ed8" opacity="0.85"/>
          <path d="M 60 80 Q 60 70 70 65 L 75 65 L 75 110 Q 75 125 85 130 L 80 132 Q 65 125 65 110 Z" fill="#1e40af" opacity="0.6"/>
          {/* wrist cuff */}
          <rect x="55" y="135" width="120" height="22" rx="6" fill="#1e40af"/>
          {/* texture */}
          {Array.from({length: 30}).map((_, i) => {
            const x = 70 + (i % 6) * 16;
            const y = 80 + Math.floor(i / 6) * 12;
            return <circle key={i} cx={x} cy={y} r="1.5" fill="#0f172a" opacity="0.3"/>;
          })}
          {/* label */}
          <rect x="90" y="142" width="50" height="10" fill="white" rx="1"/>
          <text x="115" y="150" textAnchor="middle" fontSize="7" fontWeight="700">NITRILE</text>
        </g>
      );

    case "glasses":
      return (
        <g>
          {/* frame */}
          <path d="M 30 100 Q 30 85 50 85 L 90 85 Q 100 85 100 95 L 100 100 Q 100 110 90 110 L 50 110 Q 30 115 30 100 Z" 
            fill="#1f2937"/>
          <path d="M 100 100 Q 100 85 120 85 L 160 85 Q 175 85 175 100 Q 175 115 160 110 L 120 110 Q 100 110 100 100 Z" 
            fill="#1f2937"/>
          {/* lenses */}
          <ellipse cx="60" cy="98" rx="28" ry="14" fill="#e0e7ff" opacity="0.6"/>
          <ellipse cx="140" cy="98" rx="28" ry="14" fill="#e0e7ff" opacity="0.6"/>
          <ellipse cx="50" cy="92" rx="10" ry="4" fill="white" opacity="0.6"/>
          <ellipse cx="130" cy="92" rx="10" ry="4" fill="white" opacity="0.6"/>
          {/* bridge */}
          <path d="M 88 95 L 112 95 L 112 102 L 88 102 Z" fill="#1f2937"/>
          {/* arms */}
          <path d="M 30 100 L 15 105 L 15 110 L 30 108" fill="#1f2937"/>
          <path d="M 175 100 L 188 105 L 188 110 L 175 108" fill="#1f2937"/>
        </g>
      );

    case "shoes":
      return (
        <g>
          {/* sole */}
          <path d="M 25 140 L 175 140 L 180 165 L 25 170 Z" fill="#0f172a"/>
          <path d="M 25 140 L 175 140 L 175 148 L 25 148 Z" fill="#fbbf24"/>
          {/* sole tread */}
          {[0,1,2,3,4,5,6].map(i => <rect key={i} x={30 + i*20} y="158" width="14" height="8" fill="#374151"/>)}
          {/* upper - leather */}
          <path d="M 30 142 L 30 110 Q 30 85 60 80 L 150 75 Q 170 75 175 100 L 175 142 Z" fill={bodyGrad}/>
          {/* toe cap (steel toe) */}
          <path d="M 130 130 Q 130 110 155 105 L 175 105 L 175 142 L 130 142 Z" fill={c.accent}/>
          <path d="M 138 122 Q 138 113 155 110 L 175 110 L 175 116 L 145 118 Q 142 122 142 130 Z" fill="white" opacity="0.2"/>
          {/* laces */}
          {[0,1,2,3].map(i => <rect key={i} x="60" y={90 + i*10} width="60" height="3" fill="#1f2937"/>)}
          <circle cx="60" cy="92" r="2" fill="#cbd5e1"/>
          <circle cx="60" cy="102" r="2" fill="#cbd5e1"/>
          <circle cx="60" cy="112" r="2" fill="#cbd5e1"/>
          <circle cx="60" cy="122" r="2" fill="#cbd5e1"/>
          {/* logo */}
          <rect x="80" y="125" width="30" height="10" fill="rgba(0,0,0,0.4)" rx="2"/>
        </g>
      );

    case "toolbox":
      return (
        <g>
          {/* main body */}
          <rect x="30" y="100" width="140" height="60" rx="4" fill="#dc2626"/>
          <rect x="30" y="100" width="140" height="8" fill="#fca5a5"/>
          {/* latches */}
          <rect x="60" y="98" width="14" height="14" fill="#fbbf24" stroke="#1f2937" strokeWidth="1"/>
          <rect x="126" y="98" width="14" height="14" fill="#fbbf24" stroke="#1f2937" strokeWidth="1"/>
          {/* upper tier (cantilever) */}
          <rect x="50" y="85" width="100" height="20" rx="3" fill="#b91c1c"/>
          <rect x="55" y="70" width="90" height="20" rx="3" fill="#dc2626"/>
          {/* handle */}
          <rect x="75" y="55" width="50" height="6" rx="3" fill="#1f2937"/>
          <rect x="73" y="55" width="6" height="20" fill="#1f2937"/>
          <rect x="121" y="55" width="6" height="20" fill="#1f2937"/>
          {/* contents peek */}
          <rect x="60" y="78" width="6" height="10" fill="#fbbf24"/>
          <rect x="70" y="78" width="6" height="10" fill="#cbd5e1"/>
          <rect x="80" y="78" width="6" height="10" fill="#94a3b8"/>
          {/* label */}
          <rect x="80" y="125" width="40" height="14" fill="white" rx="1"/>
          <text x="100" y="135" textAnchor="middle" fontSize="9" fontWeight="700">STANLEY</text>
        </g>
      );

    case "cabinet":
      return (
        <g>
          {/* body */}
          <rect x="30" y="40" width="140" height="130" fill={bodyGrad}/>
          <rect x="30" y="40" width="140" height="8" fill={c.highlight} opacity="0.5"/>
          {/* drawers */}
          {[0, 1, 2, 3, 4].map(i => (
            <g key={i}>
              <rect x="35" y={50 + i*22} width="130" height="20" fill="#0f172a"/>
              <rect x="35" y={50 + i*22} width="130" height="2" fill={c.highlight} opacity="0.3"/>
              {/* handle */}
              <rect x="90" y={58 + i*22} width="20" height="4" rx="2" fill="#cbd5e1"/>
              {/* label slot */}
              <rect x="40" y={56 + i*22} width="30" height="8" fill="white" rx="1"/>
            </g>
          ))}
          {/* wheels */}
          <circle cx="45" cy="172" r="6" fill="#1f2937"/>
          <circle cx="155" cy="172" r="6" fill="#1f2937"/>
        </g>
      );

    case "backpack":
      return (
        <g>
          {/* main body */}
          <path d="M 50 60 Q 50 50 65 50 L 135 50 Q 150 50 150 60 L 150 160 Q 150 170 135 170 L 65 170 Q 50 170 50 160 Z" fill={bodyGrad}/>
          {/* front panel */}
          <rect x="65" y="80" width="70" height="60" rx="4" fill={c.accent}/>
          <rect x="70" y="85" width="60" height="6" rx="2" fill="#fbbf24"/>
          {/* pockets */}
          <rect x="65" y="146" width="32" height="16" rx="2" fill={c.accent}/>
          <rect x="103" y="146" width="32" height="16" rx="2" fill={c.accent}/>
          {/* zipper */}
          <path d="M 100 80 L 100 140" stroke="#1f2937" strokeWidth="2"/>
          <circle cx="100" cy="105" r="3" fill="#fbbf24"/>
          {/* straps */}
          <rect x="48" y="50" width="6" height="50" fill="#1f2937"/>
          <rect x="146" y="50" width="6" height="50" fill="#1f2937"/>
          {/* top handle */}
          <path d="M 80 50 Q 100 35 120 50" fill="none" stroke="#1f2937" strokeWidth="6" strokeLinecap="round"/>
        </g>
      );

    case "shelf":
      return (
        <g>
          {/* posts */}
          <rect x="30" y="40" width="6" height="140" fill="#475569"/>
          <rect x="164" y="40" width="6" height="140" fill="#475569"/>
          <rect x="30" y="40" width="140" height="6" fill="#374151"/>
          <rect x="30" y="174" width="140" height="6" fill="#374151"/>
          {/* shelves */}
          {[0, 1, 2, 3].map(i => {
            const y = 60 + i * 28;
            return (
              <g key={i}>
                <rect x="32" y={y} width="136" height="4" fill="#94a3b8"/>
                <rect x="32" y={y} width="136" height="1" fill="#cbd5e1"/>
                <rect x="32" y={y+4} width="136" height="3" fill="#475569"/>
                {/* boxes on shelf */}
                <rect x={45 + (i*15)%50} y={y - 18} width="22" height="18" fill={["#fbbf24", "#dc2626", "#0a6e3d", "#1e40af"][i]}/>
                <rect x={80 + (i*20)%40} y={y - 14} width="18" height="14" fill={["#0a6e3d", "#fbbf24", "#1e40af", "#dc2626"][i]}/>
                <rect x={115 + (i*10)%30} y={y - 20} width="26" height="20" fill={["#1e40af", "#0a6e3d", "#dc2626", "#fbbf24"][i]}/>
              </g>
            );
          })}
        </g>
      );

    default:
      return (
        <g>
          <rect x="50" y="70" width="100" height="60" rx="8" fill={bodyGrad}/>
          <circle cx="100" cy="100" r="20" fill={metalGrad}/>
        </g>
      );
  }
}

// shadeColor helper
function shadeColor(hex, percent) {
  const num = parseInt(hex.replace("#",""), 16);
  let r = (num >> 16) + Math.round((percent/100) * 255);
  let g = ((num >> 8) & 0x00FF) + Math.round((percent/100) * 255);
  let b = (num & 0x0000FF) + Math.round((percent/100) * 255);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
}

Object.assign(window, { ProductPhoto, renderShape, BRAND_COLORS, PRODUCT_KIND });