// Floating Smart Home brand/standard chips for Hero background
// Generic icons (no recreation of brand logos) + name tooltips on hover

const BRAND_ITEMS_HOME = [
  // Standards & Protocols (links bias)
  { name: "KNX", kind: "Bus-Standard", glyph: "text", text: "KNX", x: 5, y: 18, anim: "a", delay: 0 },
  { name: "Zigbee", kind: "Funk-Standard", glyph: "mesh", x: 14, y: 62, anim: "b", delay: 1.2 },
  { name: "Z-Wave", kind: "Funk-Standard", glyph: "wave", x: 26, y: 10, anim: "c", delay: 0.4 },
  { name: "Matter", kind: "Standard", glyph: "matter", x: 4, y: 42, anim: "b", delay: 2.0 },
  { name: "Thread", kind: "Mesh-Funk", glyph: "thread", x: 38, y: 70, anim: "a", delay: 1.5 },
  { name: "WLAN", kind: "Konnektivität", glyph: "wifi", x: 22, y: 36, anim: "c", delay: 2.4 },
  { name: "Bluetooth", kind: "Funk", glyph: "bt", x: 10, y: 84, anim: "a", delay: 0.8 },
  { name: "DALI", kind: "Lichtsteuerung", glyph: "text", text: "DALI", x: 32, y: 92, anim: "b", delay: 1.9 },
  { name: "Modbus", kind: "Industrie-Bus", glyph: "text", text: "MOD", x: 30, y: 50, anim: "a", delay: 2.6 },
  { name: "M-Bus", kind: "Zähler-Bus", glyph: "text", text: "M-BUS", x: 18, y: 22, anim: "c", delay: 0.6 },
  { name: "EnOcean", kind: "Energy Harvesting", glyph: "leaf", x: 40, y: 14, anim: "b", delay: 1.4 },
  { name: "LoRaWAN", kind: "Long-Range Funk", glyph: "tower", x: 44, y: 42, anim: "c", delay: 2.1 },

  // Hubs / Software (mitte)
  { name: "Home Assistant", kind: "Smart-Home OS", glyph: "ha", x: 88, y: 14, anim: "b", delay: 0.6 },
  { name: "MQTT", kind: "Protokoll", glyph: "mqtt", x: 76, y: 6, anim: "a", delay: 1.8 },
  { name: "Node-RED", kind: "Automation", glyph: "node", x: 86, y: 60, anim: "c", delay: 0 },
  { name: "ESPHome", kind: "DIY-Firmware", glyph: "chip", x: 56, y: 88, anim: "a", delay: 0.5 },
  { name: "openHAB", kind: "Smart-Home OS", glyph: "ha", x: 50, y: 8, anim: "b", delay: 2.3 },
  { name: "ioBroker", kind: "Smart-Home OS", glyph: "node", x: 62, y: 76, anim: "c", delay: 1.1 },
  { name: "InfluxDB", kind: "Zeitreihen-DB", glyph: "db", x: 50, y: 56, anim: "a", delay: 1.7 },
  { name: "Grafana", kind: "Dashboards", glyph: "chart", x: 60, y: 30, anim: "b", delay: 0.4 },

  // Hardware brands (rechts bias) — alle nur abstrakte Icons, keine Logo-Replikate
  { name: "Shelly", kind: "Aktoren · Schalter", glyph: "shelly", x: 80, y: 46, anim: "a", delay: 2.2 },
  { name: "Loxone", kind: "Miniserver", glyph: "lox", x: 68, y: 86, anim: "b", delay: 0.3 },
  { name: "Philips Hue", kind: "Beleuchtung", glyph: "bulb", x: 94, y: 36, anim: "c", delay: 1.0 },
  { name: "Sonos", kind: "Multiroom Audio", glyph: "audio", x: 90, y: 80, anim: "a", delay: 1.6 },
  { name: "Fronius", kind: "PV · Wechselrichter", glyph: "pv", x: 73, y: 26, anim: "c", delay: 2.6 },
  { name: "Starlink", kind: "Konnektivität", glyph: "starlink", x: 54, y: 4, anim: "b", delay: 0.9 },
  { name: "Sonoff", kind: "Aktoren · Schalter", glyph: "shelly", x: 96, y: 56, anim: "b", delay: 1.3 },
  { name: "Aqara", kind: "Sensoren", glyph: "sensor", x: 66, y: 12, anim: "a", delay: 1.0 },
  { name: "IKEA Tradfri", kind: "Beleuchtung", glyph: "bulb", x: 82, y: 30, anim: "c", delay: 0.2 },
  { name: "Bosch Smart Home", kind: "Sensoren · Heizung", glyph: "sensor", x: 70, y: 56, anim: "b", delay: 2.5 },
  { name: "Tasmota", kind: "Open Firmware", glyph: "chip", x: 78, y: 70, anim: "a", delay: 0.7 },
  { name: "Reolink", kind: "Kameras", glyph: "cam", x: 92, y: 22, anim: "c", delay: 1.5 },
  { name: "Ubiquiti", kind: "Netzwerk", glyph: "net", x: 84, y: 92, anim: "b", delay: 0.8 },
  { name: "Nuki", kind: "Smart Lock", glyph: "lock", x: 72, y: 40, anim: "a", delay: 2.0 },
  { name: "Tuya", kind: "Cloud-Plattform", glyph: "cloud", x: 58, y: 60, anim: "c", delay: 1.6 },
  { name: "Viessmann", kind: "Heizung", glyph: "flame", x: 64, y: 46, anim: "b", delay: 0.1 },
  { name: "KEBA", kind: "Wallbox · E-Auto", glyph: "plug", x: 46, y: 84, anim: "a", delay: 2.8 },
];

const BRAND_ITEMS_GEWERBE = [
  // Industrieroboter & Automatisierung
  { name: "KUKA", kind: "Industrieroboter", glyph: "robot", x: 6, y: 18, anim: "a", delay: 0 },
  { name: "FANUC", kind: "Industrieroboter", glyph: "robot", x: 16, y: 64, anim: "b", delay: 1.2 },
  { name: "ABB", kind: "Robotik · Automation", glyph: "text", text: "ABB", x: 28, y: 12, anim: "c", delay: 0.4 },
  { name: "Stäubli", kind: "Roboter · Greifer", glyph: "robot", x: 4, y: 42, anim: "b", delay: 2.0 },
  { name: "Yaskawa Motoman", kind: "Industrieroboter", glyph: "robot", x: 38, y: 72, anim: "a", delay: 1.5 },
  { name: "Universal Robots", kind: "Cobots", glyph: "cobot", x: 22, y: 36, anim: "c", delay: 2.4 },
  { name: "Mitsubishi Electric", kind: "Automation", glyph: "text", text: "MEAU", x: 10, y: 84, anim: "a", delay: 0.8 },
  { name: "Kawasaki Robotics", kind: "Industrieroboter", glyph: "robot", x: 32, y: 92, anim: "b", delay: 1.9 },

  // SPS / Steuerung
  { name: "Siemens SIMATIC", kind: "SPS · S7-1500", glyph: "plc", x: 18, y: 22, anim: "c", delay: 0.6 },
  { name: "Beckhoff", kind: "TwinCAT · IPC", glyph: "plc", x: 30, y: 50, anim: "a", delay: 2.6 },
  { name: "B&R Automation", kind: "SPS · Antriebe", glyph: "plc", x: 40, y: 14, anim: "b", delay: 1.4 },
  { name: "Rockwell · Allen-Bradley", kind: "SPS · ControlLogix", glyph: "plc", x: 44, y: 42, anim: "c", delay: 2.1 },
  { name: "Schneider Electric", kind: "Modicon · SPS", glyph: "plc", x: 50, y: 84, anim: "a", delay: 0.3 },
  { name: "Omron", kind: "Sensorik · SPS", glyph: "sensor", x: 26, y: 8, anim: "b", delay: 1.7 },

  // Werkzeugmaschinen / Fräsen / Drehen
  { name: "DMG MORI", kind: "CNC-Fräsen · Drehen", glyph: "mill", x: 88, y: 14, anim: "b", delay: 0.6 },
  { name: "Mazak", kind: "Werkzeugmaschinen", glyph: "mill", x: 76, y: 6, anim: "a", delay: 1.8 },
  { name: "Trumpf", kind: "Laserschneiden · Stanzen", glyph: "laser", x: 86, y: 62, anim: "c", delay: 0 },
  { name: "Heller", kind: "Bearbeitungszentren", glyph: "mill", x: 56, y: 88, anim: "a", delay: 0.5 },
  { name: "Hermle", kind: "5-Achs-Fräsen", glyph: "mill", x: 68, y: 22, anim: "b", delay: 2.3 },
  { name: "GROB", kind: "Werkzeugmaschinen", glyph: "mill", x: 80, y: 86, anim: "c", delay: 1.1 },
  { name: "Doosan", kind: "CNC · Robotik", glyph: "mill", x: 50, y: 56, anim: "a", delay: 1.7 },
  { name: "Okuma", kind: "CNC-Drehmaschinen", glyph: "lathe", x: 60, y: 30, anim: "b", delay: 0.4 },
  { name: "EMCO", kind: "CNC-Drehen · Fräsen", glyph: "lathe", x: 96, y: 50, anim: "a", delay: 2.2 },

  // Antriebstechnik / Sensoren / Sicherheit
  { name: "SEW Eurodrive", kind: "Antriebstechnik", glyph: "motor", x: 70, y: 76, anim: "b", delay: 0.3 },
  { name: "SICK", kind: "Sicherheit · Sensorik", glyph: "scanner", x: 92, y: 36, anim: "c", delay: 1.0 },
  { name: "Pilz", kind: "Maschinensicherheit", glyph: "shield", x: 90, y: 80, anim: "a", delay: 1.6 },
  { name: "Festo", kind: "Pneumatik · Automation", glyph: "valve", x: 74, y: 42, anim: "c", delay: 2.6 },
  { name: "Bosch Rexroth", kind: "Hydraulik · Antriebe", glyph: "motor", x: 54, y: 4, anim: "b", delay: 0.9 },
  { name: "Schunk", kind: "Greifer · Spanntechnik", glyph: "gripper", x: 96, y: 22, anim: "b", delay: 1.3 },
  { name: "ifm electronic", kind: "Industriesensoren", glyph: "sensor", x: 64, y: 12, anim: "a", delay: 1.0 },
  { name: "Pepperl+Fuchs", kind: "Industriesensoren", glyph: "sensor", x: 82, y: 30, anim: "c", delay: 0.2 },

  // Industrie-Standards / IT
  { name: "OPC UA", kind: "M2M · Standard", glyph: "text", text: "OPC", x: 46, y: 64, anim: "b", delay: 2.5 },
  { name: "PROFINET", kind: "Industrial Ethernet", glyph: "text", text: "PNet", x: 78, y: 70, anim: "a", delay: 0.7 },
  { name: "EtherCAT", kind: "Echtzeit-Bus", glyph: "text", text: "ECAT", x: 84, y: 92, anim: "b", delay: 0.8 },
  { name: "MQTT Sparkplug", kind: "IIoT-Protokoll", glyph: "mqtt", x: 72, y: 50, anim: "a", delay: 2.0 },
  { name: "Ignition SCADA", kind: "Visualisierung", glyph: "scada", x: 58, y: 60, anim: "c", delay: 1.6 },
];

// path-spezifische Auswahl
function getBrandItems(pathKey) {
  if (pathKey === "gewerbe") return BRAND_ITEMS_GEWERBE;
  return BRAND_ITEMS_HOME;
}

// Compact icon set — geometric, never logo-replicas
function ChipGlyph({ kind, text }) {
  const stroke = "#8DDBEA";
  const accent = "#3ABDD0";
  switch (kind) {
    case "text":
      return <span className="brand-text">{text}</span>;
    case "mesh":
      // Zigbee-style mesh dots
      return (
        <svg viewBox="0 0 26 26" fill="none">
          <circle cx="13" cy="6" r="2" fill={accent} />
          <circle cx="6" cy="18" r="2" fill={accent} />
          <circle cx="20" cy="18" r="2" fill={accent} />
          <line x1="13" y1="6" x2="6" y2="18" stroke={stroke} strokeWidth="1" />
          <line x1="13" y1="6" x2="20" y2="18" stroke={stroke} strokeWidth="1" />
          <line x1="6" y1="18" x2="20" y2="18" stroke={stroke} strokeWidth="1" />
        </svg>
      );
    case "wave":
      // Z-Wave: zigzag
      return (
        <svg viewBox="0 0 26 26" fill="none">
          <path d="M 4 8 L 11 8 L 4 18 L 11 18 M 15 8 L 22 8 L 15 18 L 22 18"
                stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case "matter":
      // Matter: 4 rays from center
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round">
          <path d="M 13 4 L 13 11" />
          <path d="M 13 22 L 13 15" />
          <path d="M 4 13 L 11 13" />
          <path d="M 22 13 L 15 13" />
          <circle cx="13" cy="13" r="2.5" fill={accent} stroke="none" />
        </svg>
      );
    case "thread":
      return (
        <svg viewBox="0 0 26 26" fill="none">
          <path d="M 6 13 Q 13 4 20 13 Q 13 22 6 13 Z" stroke={stroke} strokeWidth="1.4" />
          <circle cx="13" cy="13" r="2" fill={accent} />
        </svg>
      );
    case "wifi":
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round">
          <path d="M 4 12 Q 13 4 22 12" />
          <path d="M 7 16 Q 13 11 19 16" opacity="0.8" />
          <path d="M 10 20 Q 13 17 16 20" opacity="0.7" />
          <circle cx="13" cy="22" r="1.2" fill={stroke} stroke="none" />
        </svg>
      );
    case "bt":
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M 9 6 L 17 12 L 9 20 L 9 6 L 17 14 L 9 20" />
        </svg>
      );
    case "ha":
      // Home Assistant — generic house with circle (not a logo replica)
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4">
          <path d="M 5 13 L 13 6 L 21 13 L 21 21 L 5 21 Z" />
          <circle cx="13" cy="15" r="2" fill={accent} stroke="none" />
        </svg>
      );
    case "mqtt":
      // Pub/sub arrows
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round">
          <circle cx="13" cy="13" r="2" fill={accent} stroke="none" />
          <path d="M 13 11 L 13 5 M 13 15 L 13 21 M 11 13 L 5 13 M 15 13 L 21 13" />
          <path d="M 11 7 L 13 5 L 15 7 M 11 19 L 13 21 L 15 19" />
        </svg>
      );
    case "node":
      // Node-RED — connected nodes
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <rect x="3" y="9" width="7" height="8" rx="1" />
          <rect x="16" y="9" width="7" height="8" rx="1" />
          <line x1="10" y1="13" x2="16" y2="13" />
          <circle cx="10" cy="13" r="1.4" fill={accent} stroke="none" />
          <circle cx="16" cy="13" r="1.4" fill={accent} stroke="none" />
        </svg>
      );
    case "shelly":
      // Switch / relay
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4">
          <rect x="5" y="5" width="16" height="16" rx="2" />
          <circle cx="13" cy="13" r="3" fill={accent} stroke="none" />
          <line x1="13" y1="5" x2="13" y2="9" />
        </svg>
      );
    case "lox":
      // Mini-server / rack
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4">
          <rect x="4" y="6" width="18" height="14" rx="1.5" />
          <line x1="4" y1="12" x2="22" y2="12" />
          <circle cx="8" cy="16" r="1" fill={accent} stroke="none" />
          <circle cx="12" cy="16" r="1" fill={accent} stroke="none" />
          <line x1="16" y1="16" x2="20" y2="16" />
        </svg>
      );
    case "bulb":
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M 9 16 Q 7 13 7 11 Q 7 6 13 6 Q 19 6 19 11 Q 19 13 17 16 L 17 18 L 9 18 Z" />
          <line x1="10" y1="20" x2="16" y2="20" />
          <line x1="11" y1="22" x2="15" y2="22" />
          <circle cx="13" cy="11" r="1.5" fill={accent} stroke="none" />
        </svg>
      );
    case "audio":
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4">
          <rect x="6" y="3" width="14" height="20" rx="2" />
          <circle cx="13" cy="9" r="2" />
          <circle cx="13" cy="16" r="3" />
          <circle cx="13" cy="16" r="1" fill={accent} stroke="none" />
        </svg>
      );
    case "pv":
      // Solar panel
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <rect x="4" y="6" width="18" height="14" />
          <line x1="10" y1="6" x2="10" y2="20" />
          <line x1="16" y1="6" x2="16" y2="20" />
          <line x1="4" y1="13" x2="22" y2="13" />
        </svg>
      );
    case "starlink":
      // Satellite dish
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round">
          <path d="M 4 18 Q 13 6 22 18" />
          <line x1="13" y1="12" x2="13" y2="22" />
          <line x1="9" y1="22" x2="17" y2="22" />
          <circle cx="20" cy="6" r="1.2" fill={accent} stroke="none" />
          <path d="M 17 9 Q 19 7 21 9" opacity="0.7" />
        </svg>
      );
    case "leaf":
      // EnOcean — energy harvesting / blatt
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M 6 20 Q 6 8 18 6 Q 20 16 8 20 Z" />
          <line x1="6" y1="20" x2="14" y2="12" opacity="0.7" />
          <circle cx="18" cy="6" r="1.2" fill={accent} stroke="none" />
        </svg>
      );
    case "tower":
      // LoRa — Funkturm mit Wellen
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round">
          <path d="M 11 22 L 13 8 L 15 22 Z" />
          <line x1="11" y1="14" x2="15" y2="14" />
          <path d="M 7 9 Q 5 13 7 17" opacity="0.7" />
          <path d="M 19 9 Q 21 13 19 17" opacity="0.7" />
          <path d="M 4 7 Q 1 13 4 19" opacity="0.5" />
          <path d="M 22 7 Q 25 13 22 19" opacity="0.5" />
        </svg>
      );
    case "chip":
      // ESPHome / Tasmota — IC chip
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <rect x="7" y="7" width="12" height="12" rx="1" />
          <rect x="10" y="10" width="6" height="6" fill={accent} stroke="none" />
          {[
            [4, 10], [4, 13], [4, 16],
            [22, 10], [22, 13], [22, 16],
            [10, 4], [13, 4], [16, 4],
            [10, 22], [13, 22], [16, 22],
          ].map(([x, y], i) => {
            const isVert = y === 4 || y === 22;
            return isVert
              ? <line key={i} x1={x} y1={y} x2={x} y2={y < 13 ? 7 : 19} />
              : <line key={i} x1={x} y1={y} x2={x < 13 ? 7 : 19} y2={y} />;
          })}
        </svg>
      );
    case "db":
      // InfluxDB — cylindrical database
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4">
          <ellipse cx="13" cy="6" rx="7" ry="2.5" />
          <path d="M 6 6 L 6 20 Q 6 22.5 13 22.5 Q 20 22.5 20 20 L 20 6" />
          <ellipse cx="13" cy="13" rx="7" ry="2.5" opacity="0.6" />
          <circle cx="13" cy="6" r="1" fill={accent} stroke="none" />
        </svg>
      );
    case "chart":
      // Grafana — bar/line dashboard
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round">
          <line x1="4" y1="22" x2="22" y2="22" />
          <line x1="4" y1="22" x2="4" y2="4" opacity="0.6" />
          <rect x="6" y="14" width="3" height="8" fill={accent} stroke="none" opacity="0.7" />
          <rect x="11" y="10" width="3" height="12" fill={accent} stroke="none" />
          <rect x="16" y="6" width="3" height="16" fill={accent} stroke="none" opacity="0.5" />
          <path d="M 7.5 12 L 12.5 8 L 17.5 4" opacity="0.7" />
        </svg>
      );
    case "sensor":
      // Aqara/Bosch — multi-sensor puck
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <circle cx="13" cy="13" r="9" />
          <circle cx="13" cy="13" r="5" opacity="0.5" />
          <circle cx="13" cy="13" r="2" fill={accent} stroke="none" />
          <line x1="13" y1="2" x2="13" y2="5" opacity="0.6" />
          <line x1="13" y1="21" x2="13" y2="24" opacity="0.6" />
        </svg>
      );
    case "cam":
      // Reolink — security camera
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4">
          <rect x="3" y="9" width="14" height="10" rx="1.5" />
          <path d="M 17 12 L 22 9 L 22 19 L 17 16 Z" />
          <circle cx="10" cy="14" r="2.5" />
          <circle cx="10" cy="14" r="1" fill={accent} stroke="none" />
          <circle cx="14" cy="11" r="0.8" fill={accent} stroke="none" />
        </svg>
      );
    case "net":
      // Ubiquiti — network nodes
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <circle cx="13" cy="6" r="2.4" fill={accent} stroke="none" />
          <circle cx="6" cy="18" r="2" />
          <circle cx="13" cy="18" r="2" />
          <circle cx="20" cy="18" r="2" />
          <line x1="13" y1="9" x2="6" y2="16" />
          <line x1="13" y1="9" x2="13" y2="16" />
          <line x1="13" y1="9" x2="20" y2="16" />
        </svg>
      );
    case "lock":
      // Nuki — smart lock
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <rect x="6" y="12" width="14" height="11" rx="1.5" />
          <path d="M 9 12 L 9 8 Q 9 4 13 4 Q 17 4 17 8 L 17 12" />
          <circle cx="13" cy="17" r="1.6" fill={accent} stroke="none" />
          <line x1="13" y1="18" x2="13" y2="20" />
        </svg>
      );
    case "cloud":
      // Tuya — cloud platform
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M 7 18 Q 3 18 3 14 Q 3 10 8 10 Q 9 6 14 6 Q 19 6 20 11 Q 23 11 23 15 Q 23 18 19 18 Z" />
          <circle cx="13" cy="13" r="1.2" fill={accent} stroke="none" />
        </svg>
      );
    case "flame":
      // Viessmann — heating/flame
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M 13 3 Q 7 9 8 14 Q 8 20 13 22 Q 18 20 18 14 Q 18 11 15 9 Q 15 6 13 3 Z" />
          <path d="M 13 13 Q 11 15 11 17 Q 11 19 13 20 Q 15 19 15 17 Q 15 15 13 13 Z"
                fill={accent} stroke="none" opacity="0.8" />
        </svg>
      );
    case "plug":
      // KEBA Wallbox / EV charging plug
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <rect x="7" y="4" width="12" height="14" rx="2" />
          <line x1="11" y1="8" x2="11" y2="11" />
          <line x1="15" y1="8" x2="15" y2="11" />
          <path d="M 13 18 L 13 22" />
          <path d="M 9 22 L 17 22" />
          <path d="M 11 14 L 13 17 L 16 12" stroke={accent} strokeWidth="1.6" fill="none" />
        </svg>
      );

    /* ── Industrial glyphs (Gewerbe) ─────────────────────────── */
    case "robot":
      // 6-axis articulated arm — generic
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <rect x="7" y="20" width="12" height="3" rx="0.5" />
          <line x1="13" y1="20" x2="13" y2="17" />
          <circle cx="13" cy="16.5" r="1.6" fill={accent} stroke="none" />
          <line x1="13" y1="15" x2="9" y2="9" />
          <circle cx="9" cy="8.5" r="1.4" fill={accent} stroke="none" />
          <line x1="9" y1="7.5" x2="15" y2="5" />
          <rect x="14.5" y="3.5" width="4" height="3" rx="0.5" />
        </svg>
      );
    case "cobot":
      // Slim collaborative arm — vertical posture
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="13" cy="22" r="3" />
          <line x1="13" y1="19" x2="13" y2="14" />
          <circle cx="13" cy="13" r="1.4" fill={accent} stroke="none" />
          <line x1="13" y1="12" x2="9" y2="6" />
          <circle cx="9" cy="5.5" r="1.2" fill={accent} stroke="none" />
          <line x1="9" y1="5" x2="13" y2="3" />
        </svg>
      );
    case "plc":
      // PLC module on DIN rail
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <rect x="4" y="6" width="18" height="14" rx="1" />
          <line x1="4" y1="9" x2="22" y2="9" />
          <line x1="4" y1="17" x2="22" y2="17" opacity="0.5" />
          <circle cx="8" cy="13" r="0.8" fill={accent} stroke="none" />
          <circle cx="11" cy="13" r="0.8" fill={accent} stroke="none" />
          <circle cx="14" cy="13" r="0.8" fill={accent} stroke="none" />
          <rect x="17" y="11" width="3" height="4" stroke={stroke} strokeWidth="0.9" />
        </svg>
      );
    case "mill":
      // CNC mill / machining center — gantry with spindle
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="4" width="18" height="3" />
          <line x1="6" y1="7" x2="6" y2="20" />
          <line x1="20" y1="7" x2="20" y2="20" />
          <rect x="11" y="6" width="4" height="6" />
          <line x1="13" y1="12" x2="13" y2="16" stroke={accent} strokeWidth="1.6" />
          <rect x="4" y="20" width="18" height="2.5" />
        </svg>
      );
    case "lathe":
      // CNC lathe — chuck + workpiece + tailstock
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round">
          <rect x="3" y="9" width="6" height="8" />
          <line x1="6" y1="9" x2="6" y2="17" opacity="0.5" />
          <line x1="9" y1="13" x2="20" y2="13" stroke={accent} strokeWidth="2" />
          <line x1="9" y1="11" x2="20" y2="11" />
          <line x1="9" y1="15" x2="20" y2="15" />
          <path d="M 20 10 L 23 13 L 20 16 Z" />
          <line x1="3" y1="20" x2="23" y2="20" />
        </svg>
      );
    case "laser":
      // Laser cutter — beam + sheet
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round">
          <rect x="9" y="3" width="8" height="5" />
          <line x1="13" y1="8" x2="13" y2="16" stroke={accent} strokeWidth="2" />
          <path d="M 11 16 L 13 20 L 15 16 Z" fill={accent} stroke="none" />
          <line x1="3" y1="22" x2="23" y2="22" />
          <line x1="6" y1="20" x2="20" y2="20" opacity="0.5" />
        </svg>
      );
    case "motor":
      // Servo drive / motor
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <circle cx="13" cy="13" r="7" />
          <circle cx="13" cy="13" r="3" fill={accent} stroke="none" />
          <line x1="13" y1="6" x2="13" y2="3" />
          <line x1="13" y1="20" x2="13" y2="23" />
          <line x1="6" y1="13" x2="3" y2="13" />
          <line x1="20" y1="13" x2="23" y2="13" />
          <line x1="8" y1="8" x2="6" y2="6" opacity="0.6" />
          <line x1="18" y1="18" x2="20" y2="20" opacity="0.6" />
        </svg>
      );
    case "scanner":
      // Safety light scanner / lidar sensor
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round">
          <rect x="9" y="4" width="8" height="6" rx="1" />
          <circle cx="13" cy="7" r="1.5" fill={accent} stroke="none" />
          <path d="M 4 18 Q 13 11 22 18" />
          <path d="M 7 21 Q 13 17 19 21" opacity="0.6" />
          <line x1="13" y1="10" x2="13" y2="13" opacity="0.7" />
        </svg>
      );
    case "shield":
      // Safety / Pilz — shield + checkmark
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
          <path d="M 13 3 L 21 6 L 21 13 Q 21 19 13 23 Q 5 19 5 13 L 5 6 Z" />
          <path d="M 9 13 L 12 16 L 17 10" stroke={accent} strokeWidth="1.8" fill="none" strokeLinecap="round" />
        </svg>
      );
    case "valve":
      // Pneumatic valve / Festo
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <rect x="4" y="9" width="18" height="8" />
          <line x1="9" y1="9" x2="9" y2="17" opacity="0.5" />
          <line x1="13" y1="9" x2="13" y2="17" opacity="0.5" />
          <line x1="17" y1="9" x2="17" y2="17" opacity="0.5" />
          <path d="M 6 13 L 8 11 L 8 15 Z" fill={accent} stroke="none" />
          <path d="M 11 13 L 13 11 M 11 13 L 13 15" />
          <circle cx="20" cy="13" r="1.4" fill={accent} stroke="none" />
        </svg>
      );
    case "gripper":
      // Robot gripper / Schunk
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinejoin="round">
          <rect x="9" y="3" width="8" height="6" rx="1" />
          <line x1="11" y1="9" x2="9" y2="20" />
          <line x1="15" y1="9" x2="17" y2="20" />
          <line x1="9" y1="20" x2="9" y2="23" strokeWidth="2" />
          <line x1="17" y1="20" x2="17" y2="23" strokeWidth="2" />
          <rect x="11.5" y="20" width="3" height="3" fill={accent} stroke="none" />
        </svg>
      );
    case "scada":
      // SCADA / Ignition — multi-pane dashboard
      return (
        <svg viewBox="0 0 26 26" fill="none" stroke={stroke} strokeWidth="1.3">
          <rect x="3" y="4" width="20" height="18" rx="1" />
          <line x1="3" y1="9" x2="23" y2="9" />
          <line x1="13" y1="9" x2="13" y2="22" opacity="0.5" />
          <path d="M 5 18 L 7 14 L 9 16 L 11 12" stroke={accent} strokeWidth="1.4" fill="none" strokeLinecap="round" />
          <circle cx="17" cy="14" r="2.5" />
          <line x1="15" y1="18" x2="21" y2="18" opacity="0.6" />
          <line x1="15" y1="20" x2="19" y2="20" opacity="0.5" />
        </svg>
      );

    default:
      return null;
  }
}

function BrandCloud({ pathKey = "altbau" }) {
  const items = getBrandItems(pathKey);
  return (
    <div className="brand-cloud" aria-hidden="true">
      {items.map((b, i) => (
        <div key={`${pathKey}-${i}`}
             className={`brand-chip float-${b.anim}`}
             style={{
               left: `${b.x}%`,
               top: `${b.y}%`,
               animationDelay: `${b.delay}s`,
             }}>
          <ChipGlyph kind={b.glyph} text={b.text} />
          <div className="brand-tip">
            <span className="tip-kind">{b.kind}</span>
            {b.name}
          </div>
        </div>
      ))}
    </div>
  );
}

window.BrandCloud = BrandCloud;
