// Generated SVG illustrations per industry — abstract, on-brand, no external deps
const IndustryArt = {
  Manufacturing: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="mfg-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#mfg-bg)"/>
      {/* gear */}
      <g transform="translate(230,60)" stroke={color} fill="none" strokeWidth="2">
        <circle r="26"/>
        <circle r="10"/>
        {[0,45,90,135,180,225,270,315].map(a => (
          <rect key={a} x="-4" y="-34" width="8" height="10" fill={color} transform={`rotate(${a})`}/>
        ))}
      </g>
      {/* conveyor */}
      <g stroke={color} strokeWidth="1.5" fill="none">
        <line x1="20" y1="160" x2="300" y2="160"/>
        <line x1="20" y1="148" x2="300" y2="148"/>
        {[40,90,140,190,240,290].map(x => <circle key={x} cx={x} cy="172" r="6" fill={color} fillOpacity="0.15"/>)}
      </g>
      {/* boxes */}
      <rect x="60" y="120" width="26" height="26" fill={color} fillOpacity="0.25" stroke={color}/>
      <rect x="120" y="115" width="26" height="32" fill={color} fillOpacity="0.4" stroke={color}/>
      <rect x="180" y="125" width="26" height="22" fill={color} fillOpacity="0.2" stroke={color}/>
      {/* chart */}
      <polyline points="20,80 60,60 100,72 140,40 180,52 220,30" stroke={color} strokeWidth="2" fill="none" opacity="0.7"/>
    </svg>
  ),

  Healthcare: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hc-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#hc-bg)"/>
      {/* heartbeat */}
      <polyline points="0,110 60,110 80,110 95,70 110,150 125,90 140,110 320,110" stroke={color} strokeWidth="2.5" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
      {/* cross */}
      <g transform="translate(240,60)">
        <rect x="-22" y="-22" width="44" height="44" rx="8" fill={color} fillOpacity="0.2" stroke={color}/>
        <rect x="-3" y="-14" width="6" height="28" fill={color}/>
        <rect x="-14" y="-3" width="28" height="6" fill={color}/>
      </g>
      {/* dots */}
      <g fill={color}>
        <circle cx="40" cy="50" r="3" opacity="0.6"/>
        <circle cx="70" cy="35" r="2" opacity="0.4"/>
        <circle cx="100" cy="45" r="2.5" opacity="0.5"/>
        <circle cx="180" cy="160" r="3" opacity="0.5"/>
        <circle cx="210" cy="170" r="2" opacity="0.4"/>
      </g>
    </svg>
  ),

  Retail: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="rt-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#rt-bg)"/>
      {/* storefront */}
      <g stroke={color} strokeWidth="1.5" fill="none">
        <path d="M40 80 L60 50 L260 50 L280 80 Z" fill={color} fillOpacity="0.15"/>
        <line x1="40" y1="80" x2="280" y2="80"/>
        <rect x="60" y="80" width="200" height="100" fill={color} fillOpacity="0.05"/>
        <rect x="80" y="100" width="60" height="60" fill={color} fillOpacity="0.2"/>
        <rect x="180" y="100" width="60" height="80" fill={color} fillOpacity="0.25"/>
      </g>
      {/* tags */}
      <g fill={color}>
        <circle cx="100" cy="120" r="3"/>
        <circle cx="200" cy="120" r="3"/>
      </g>
      {/* sparkles for AI */}
      <g stroke={color} fill="none" strokeWidth="1.2">
        <path d="M260 130 v8 M256 134 h8" opacity="0.7"/>
        <path d="M50 150 v6 M47 153 h6" opacity="0.6"/>
        <path d="M295 30 v6 M292 33 h6" opacity="0.5"/>
      </g>
    </svg>
  ),

  Logistics: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="lg-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.20"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#lg-bg)"/>
      {/* dashed route */}
      <path d="M30 160 Q 110 60, 180 110 T 300 60" stroke={color} strokeWidth="2" fill="none" strokeDasharray="6 5"/>
      {/* pins */}
      <g fill={color}>
        <circle cx="30" cy="160" r="6"/>
        <circle cx="180" cy="110" r="5" fillOpacity="0.5"/>
        <circle cx="300" cy="60" r="6"/>
      </g>
      {/* truck */}
      <g transform="translate(140,140)" stroke={color} strokeWidth="1.5" fill="none">
        <rect x="0" y="0" width="36" height="22" fill={color} fillOpacity="0.25"/>
        <path d="M36 6 L52 6 L60 14 L60 22 L36 22 Z" fill={color} fillOpacity="0.15"/>
        <circle cx="12" cy="26" r="4" fill={color}/>
        <circle cx="50" cy="26" r="4" fill={color}/>
      </g>
    </svg>
  ),

  Hospitality: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hs-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#hs-bg)"/>
      {/* hotel */}
      <g stroke={color} strokeWidth="1.5" fill="none">
        <rect x="100" y="60" width="120" height="120" fill={color} fillOpacity="0.12"/>
        {[0,1,2,3].map(r => (
          [0,1,2,3,4].map(c => (
            <rect key={`${r}-${c}`} x={112+c*20} y={75+r*25} width="12" height="14" fill={color} fillOpacity={0.2 + ((r+c)%3)*0.15}/>
          ))
        )).flat()}
        <rect x="146" y="155" width="28" height="25" fill={color} fillOpacity="0.25"/>
      </g>
      {/* stars */}
      <g fill={color}>
        {[40, 60, 80].map((x,i) => (
          <polygon key={i} points={`${x},30 ${x+3},38 ${x+11},38 ${x+5},43 ${x+7},51 ${x},46 ${x-7},51 ${x-5},43 ${x-11},38 ${x-3},38`} opacity={0.4 + i*0.15}/>
        ))}
      </g>
    </svg>
  ),

  eCommerce: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ec-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#ec-bg)"/>
      {/* product grid */}
      <g stroke={color} strokeWidth="1.5" fill="none">
        <rect x="30" y="40" width="60" height="60" rx="6" fill={color} fillOpacity="0.2"/>
        <rect x="100" y="40" width="60" height="60" rx="6" fill={color} fillOpacity="0.35"/>
        <rect x="170" y="40" width="60" height="60" rx="6" fill={color} fillOpacity="0.15"/>
        <rect x="30" y="110" width="60" height="60" rx="6" fill={color} fillOpacity="0.1"/>
        <rect x="100" y="110" width="60" height="60" rx="6" fill={color} fillOpacity="0.25"/>
      </g>
      {/* cart */}
      <g transform="translate(225,130)" stroke={color} strokeWidth="1.5" fill="none">
        <path d="M0 0 L8 0 L18 32 L52 32 L60 10 L14 10" fill={color} fillOpacity="0.2"/>
        <circle cx="22" cy="42" r="4" fill={color}/>
        <circle cx="46" cy="42" r="4" fill={color}/>
      </g>
    </svg>
  ),

  RealEstate: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="re-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#re-bg)"/>
      {/* skyline */}
      <g stroke={color} strokeWidth="1.5" fill="none">
        <rect x="20" y="100" width="50" height="80" fill={color} fillOpacity="0.18"/>
        <path d="M85 60 L130 30 L175 60 L175 180 L85 180 Z" fill={color} fillOpacity="0.25"/>
        <rect x="190" y="80" width="50" height="100" fill={color} fillOpacity="0.15"/>
        <rect x="255" y="120" width="45" height="60" fill={color} fillOpacity="0.22"/>
      </g>
      {/* windows */}
      <g fill={color} opacity="0.6">
        {[0,1,2].map(r => [0,1].map(c => (
          <rect key={`a-${r}-${c}`} x={28+c*14} y={110+r*22} width="8" height="10"/>
        ))).flat()}
        {[0,1,2,3].map(r => [0,1].map(c => (
          <rect key={`b-${r}-${c}`} x={100+c*30} y={80+r*22} width="14" height="10"/>
        ))).flat()}
      </g>
    </svg>
  ),

  Education: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ed-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#ed-bg)"/>
      {/* book */}
      <g stroke={color} strokeWidth="1.5" fill="none">
        <path d="M40 140 Q 100 110, 160 140 Q 220 110, 280 140 L280 175 Q 220 145, 160 175 Q 100 145, 40 175 Z" fill={color} fillOpacity="0.18"/>
        <line x1="160" y1="140" x2="160" y2="175"/>
      </g>
      {/* graduation cap */}
      <g transform="translate(160,70)" stroke={color} strokeWidth="1.5" fill="none">
        <path d="M-40 0 L0 -22 L40 0 L0 22 Z" fill={color} fillOpacity="0.3"/>
        <path d="M-22 8 L-22 25 Q 0 35 22 25 L22 8" fill={color} fillOpacity="0.2"/>
        <line x1="40" y1="0" x2="40" y2="20"/>
        <circle cx="40" cy="22" r="3" fill={color}/>
      </g>
    </svg>
  ),

  Automotive: ({ color }) => (
    <svg viewBox="0 0 320 200" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="au-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.02"/>
        </linearGradient>
      </defs>
      <rect width="320" height="200" fill="url(#au-bg)"/>
      {/* road */}
      <line x1="0" y1="170" x2="320" y2="170" stroke={color} strokeWidth="1.5"/>
      <line x1="0" y1="170" x2="320" y2="170" stroke={color} strokeWidth="2" strokeDasharray="14 10" opacity="0.4"/>
      {/* car */}
      <g transform="translate(80,110)" stroke={color} strokeWidth="1.5" fill="none">
        <path d="M0 40 L15 18 Q 45 8, 90 8 Q 130 8, 150 18 L165 40 Z" fill={color} fillOpacity="0.28"/>
        <path d="M30 18 L50 8 L120 8 L140 18 Z" fill={color} fillOpacity="0.15"/>
        <circle cx="30" cy="48" r="10" fill={color} fillOpacity="0.4"/>
        <circle cx="135" cy="48" r="10" fill={color} fillOpacity="0.4"/>
        <circle cx="30" cy="48" r="4" fill="var(--surface)"/>
        <circle cx="135" cy="48" r="4" fill="var(--surface)"/>
      </g>
      {/* sensor wave */}
      <g stroke={color} strokeWidth="1.2" fill="none" opacity="0.5">
        <path d="M260 100 Q 280 110 260 120"/>
        <path d="M270 90 Q 295 110 270 130"/>
        <path d="M280 80 Q 310 110 280 140"/>
      </g>
    </svg>
  ),
};

window.IndustryArt = IndustryArt;
