// site-illustrations.jsx
// Geometrische Illustrations-Schemes für die Splash-Pfade.
// Alle nehmen { accent, soft, bg, mood } und sind responsiv.

function AltbauIllustration({ accent = "#3ABDD0", soft = "#8DDBEA", bg = "#071520", animate = false }) {
  // Stilisiertes Bestandshaus mit kabellos nachgerüsteten Komponenten:
  // Schalter (Shelly), Lampen, Sensoren, Funkwellen
  return (
    <svg viewBox="0 0 600 480" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
         style={{ display: "block" }}>
      <defs>
        <pattern id="altbau-grid" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M 32 0 L 0 0 0 32" fill="none" stroke={soft} strokeWidth="0.4" opacity="0.18" />
        </pattern>
      </defs>
      <rect width="600" height="480" fill="url(#altbau-grid)" opacity="0.6" />

      {/* Bestandshaus — schmales Steilhaus mit altem Charakter */}
      <g stroke={accent} strokeWidth="1.6" fill="none" strokeLinejoin="round" strokeLinecap="round">
        {/* Sockel */}
        <line x1="160" y1="380" x2="540" y2="380" />
        <line x1="160" y1="386" x2="540" y2="386" opacity="0.5" />
        {/* Hauskörper */}
        <path d="M 180 380 L 180 230 L 300 130 L 420 230 L 420 380 Z" />
        {/* Schornstein */}
        <path d="M 358 175 L 358 130 L 378 130 L 378 191" />
        {/* Dach-Linien */}
        <line x1="180" y1="230" x2="420" y2="230" opacity="0.6" />
        {/* Stockwerk-Trennung */}
        <line x1="180" y1="305" x2="420" y2="305" opacity="0.4" strokeDasharray="3 3" />
      </g>

      {/* Fenster — alt, kleinteilig (4 Stück) */}
      <g stroke={accent} strokeWidth="1.4" fill="none">
        {[
          { x: 210, y: 250 }, { x: 350, y: 250 },
          { x: 210, y: 325 }, { x: 350, y: 325 },
        ].map((f, i) => (
          <g key={i}>
            <rect x={f.x} y={f.y} width="40" height="40" />
            <line x1={f.x + 20} y1={f.y} x2={f.x + 20} y2={f.y + 40} />
            <line x1={f.x} y1={f.y + 20} x2={f.x + 40} y2={f.y + 20} />
          </g>
        ))}
      </g>
      {/* Tür */}
      <g stroke={accent} strokeWidth="1.4" fill="none">
        <rect x="285" y="320" width="30" height="60" />
        <circle cx="307" cy="352" r="1.6" fill={soft} stroke="none" />
      </g>

      {/* Garage als Anbau rechts — Pultdach */}
      <g stroke={accent} strokeWidth="1.6" fill="none" strokeLinejoin="round" strokeLinecap="round">
        {/* Pultdach (rechts höher zum Haus hin) */}
        <path d="M 440 380 L 440 295 L 530 320 L 530 380 Z" />
        {/* Dachkante */}
        <line x1="440" y1="295" x2="530" y2="320" strokeWidth="2" />
        <line x1="438" y1="298" x2="532" y2="323" opacity="0.4" strokeWidth="1" />
      </g>

      {/* Garagentor mit horizontalen Lamellen (rollt bei Hover hoch) */}
      <g stroke={accent} strokeWidth="1.3" fill="none">
        <rect x="450" y="332" width="70" height="48" />
        {/* Lamellen-Gruppe */}
        <g opacity="0.55">
          {animate && (
            <animateTransform attributeName="transform" type="translate"
                              values="0,0; 0,-42; 0,-42; 0,0; 0,0"
                              keyTimes="0; 0.25; 0.55; 0.85; 1"
                              dur="6s" repeatCount="indefinite" />
          )}
          {[339, 347, 355, 363, 371].map((y, i) => (
            <line key={i} x1="450" y1={y} x2="520" y2={y} strokeWidth="0.8" />
          ))}
          <line x1="450" y1="379" x2="520" y2="379" strokeWidth="1.2" />
        </g>
        {/* Innen-Andeutung wenn offen */}
        {animate && (
          <g opacity="0">
            <rect x="453" y="358" width="64" height="20" fill={bg} stroke="none" />
            {/* Werkbank/Regal */}
            <line x1="455" y1="378" x2="517" y2="378" strokeWidth="0.7" opacity="0.6" />
            <rect x="460" y="365" width="20" height="13" stroke={soft} strokeWidth="0.7" fill="none" opacity="0.7" />
            <rect x="488" y="368" width="14" height="10" stroke={soft} strokeWidth="0.7" fill="none" opacity="0.6" />
            <animate attributeName="opacity" values="0;0;1;1;0;0"
                     keyTimes="0;0.3;0.4;0.7;0.85;1" dur="6s" repeatCount="indefinite" />
          </g>
        )}
      </g>
      {/* Sensor / Bewegungsmelder über Garage (Funk) */}
      <g>
        <circle cx="525" cy="305" r="2.5" fill={soft} stroke={accent} strokeWidth="0.9">
          {animate && <animate attributeName="opacity" values="1;0.4;1" dur="1.8s" repeatCount="indefinite" />}
        </circle>
        <g stroke={accent} strokeWidth="0.8" fill="none" opacity="0.55">
          <path d="M 530 302 Q 535 305 533 312">
            {animate && <animate attributeName="opacity" values="0.5;0.1;0.5" dur="1.8s" repeatCount="indefinite" />}
          </path>
          <path d="M 535 299 Q 542 305 538 315" opacity="0.4">
            {animate && <animate attributeName="opacity" values="0.4;0.05;0.4" dur="1.8s" begin="0.3s" repeatCount="indefinite" />}
          </path>
        </g>
      </g>

      {/* Smart Bulbs in Fenstern (warmer Glow) */}
      <g>
        {[{x:230,y:270},{x:370,y:270},{x:230,y:345},{x:370,y:345}].map((b, i) => (
          <g key={i}>
            <circle cx={b.x} cy={b.y} r="3" fill={soft} opacity="0.9">
              {animate && <animate attributeName="opacity" values="0.9;0.4;0.9"
                          dur={`${2 + i * 0.4}s`} repeatCount="indefinite" />}
            </circle>
            <circle cx={b.x} cy={b.y} r="6" fill="none" stroke={soft} strokeWidth="0.6" opacity="0.4" />
          </g>
        ))}
      </g>

      {/* Schalter / Aktoren hinter der Wand (gestrichelt, "im Verteiler") — herstellerneutral */}
      <g stroke={soft} strokeWidth="1.2" fill="none" strokeDasharray="3 2" opacity="0.55">
        <rect x="190" y="395" width="50" height="32" rx="2" />
        <rect x="250" y="395" width="50" height="32" rx="2" />
        <rect x="310" y="395" width="50" height="32" rx="2" />
        <rect x="370" y="395" width="50" height="32" rx="2" />
      </g>
      <g stroke={soft} strokeWidth="1" fill="none" opacity="0.7">
        {[215, 275, 335, 395].map((cx, i) => (
          <g key={i}>
            <circle cx={cx} cy={411} r="3.4" />
            <circle cx={cx} cy={411} r="1.2" fill={soft} stroke="none" />
          </g>
        ))}
      </g>

      {/* Funkwellen — diagonal von Modulen zu Bulbs */}
      <g stroke={accent} strokeWidth="1" fill="none" opacity="0.5">
        {[
          { fx: 215, fy: 395, tx: 230, ty: 273 },
          { fx: 395, fy: 395, tx: 370, ty: 273 },
          { fx: 275, fy: 395, tx: 230, ty: 348 },
          { fx: 335, fy: 395, tx: 370, ty: 348 },
        ].map((p, i) => (
          <g key={i}>
            <path d={`M ${p.fx} ${p.fy} Q ${(p.fx + p.tx) / 2} ${p.fy - 30} ${p.tx} ${p.ty}`}
                  strokeDasharray="2 3">
              {animate && <animate attributeName="stroke-dashoffset" values="0;-10"
                          dur={`${1.5 + i * 0.3}s`} repeatCount="indefinite" />}
            </path>
          </g>
        ))}
      </g>

      {/* Funkwellen über dem Haus — pulsieren immer, bei Hover stärker */}
      <g stroke={soft} strokeWidth="1" fill="none" opacity="0.4">
        <path d="M 250 95 Q 300 70 350 95">
          <animate attributeName="opacity" values="0.3;0.85;0.3"
                   dur={animate ? "1.4s" : "2.6s"} repeatCount="indefinite" />
          <animate attributeName="stroke-width" values="1;1.6;1"
                   dur={animate ? "1.4s" : "2.6s"} repeatCount="indefinite" />
        </path>
        <path d="M 230 80 Q 300 45 370 80" opacity="0.7">
          <animate attributeName="opacity" values="0.2;0.75;0.2"
                   dur={animate ? "1.4s" : "2.6s"} begin="0.25s" repeatCount="indefinite" />
          <animate attributeName="stroke-width" values="1;1.5;1"
                   dur={animate ? "1.4s" : "2.6s"} begin="0.25s" repeatCount="indefinite" />
        </path>
        <path d="M 210 65 Q 300 20 390 65" opacity="0.5">
          <animate attributeName="opacity" values="0.1;0.55;0.1"
                   dur={animate ? "1.4s" : "2.6s"} begin="0.5s" repeatCount="indefinite" />
          <animate attributeName="stroke-width" values="1;1.4;1"
                   dur={animate ? "1.4s" : "2.6s"} begin="0.5s" repeatCount="indefinite" />
        </path>
      </g>

      {/* Origin-Punkt der Wellen (Antenne / Hub) — pulsiert immer */}
      <g>
        <circle cx="300" cy="105" r="3.5" fill={soft} stroke={accent} strokeWidth="1">
          <animate attributeName="r" values="3;5;3"
                   dur={animate ? "1.4s" : "2.6s"} repeatCount="indefinite" />
        </circle>
        {/* Sendepuls-Ring bei Hover */}
        {animate && (
          <circle cx="300" cy="105" r="6" fill="none" stroke={accent} strokeWidth="1.2" opacity="0.7">
            <animate attributeName="r" values="4;22;22" dur="1.4s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.7;0;0" dur="1.4s" repeatCount="indefinite" />
          </circle>
        )}
      </g>

      {/* Label-Annotation — herstellerneutral */}
      <g fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={soft} opacity="0.7"
         letterSpacing="0.1em">
        <text x="100" y="240" textAnchor="end">FUNK</text>
        <line x1="105" y1="237" x2="195" y2="270" stroke={soft} strokeWidth="0.6" />
        <circle cx="195" cy="270" r="2" fill={soft} stroke="none" />

        <text x="500" y="160" textAnchor="start">+ KABEL</text>
        <line x1="498" y1="157" x2="380" y2="120" stroke={soft} strokeWidth="0.6" />
        <circle cx="380" cy="120" r="2" fill={soft} stroke="none" />
      </g>
    </svg>
  );
}

function NeubauIllustration({ accent = "#3ABDD0", soft = "#8DDBEA", bg = "#071520", animate = false }) {
  // Modernes Flachdach-Haus, klar als Architektur lesbar:
  // - Großer Hauptkubus + niedrigerer Anbau
  // - Klare Bodenlinie (Terrain), Vorgarten-Pflasterung
  // - Eingangstür mit Vordach, Garagentor, große Fensterfront
  // - PV-Felder auf dem Dach
  // - KNX-BUS als sichtbare Linie INNEN, nicht dominant — Detail, nicht Hauptmotiv
  return (
    <svg viewBox="0 0 600 480" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
         style={{ display: "block" }}>
      <defs>
        <pattern id="neubau-grid" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M 32 0 L 0 0 0 32" fill="none" stroke={soft} strokeWidth="0.4" opacity="0.18" />
        </pattern>
      </defs>
      <rect width="600" height="480" fill="url(#neubau-grid)" opacity="0.5" />

      {/* Terrain — Bodenlinie + leichte Pflasterung */}
      <g stroke={accent} strokeWidth="1.2" fill="none" opacity="0.6">
        <line x1="40" y1="400" x2="560" y2="400" strokeWidth="1.6" />
        <line x1="40" y1="406" x2="560" y2="406" opacity="0.4" />
      </g>
      {/* Vorgarten-Pflastersteine (Andeutung) */}
      <g stroke={soft} strokeWidth="0.7" fill="none" opacity="0.35">
        {[0,1,2,3,4,5,6,7,8].map(i => (
          <line key={i} x1={120 + i*34} y1="406" x2={108 + i*34} y2="430" />
        ))}
        <line x1="100" y1="430" x2="400" y2="430" />
      </g>

      {/* HAUPTKUBUS (rechts) — Hauptwohnbereich, zwei Geschosse */}
      <g stroke={accent} strokeWidth="2" fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d="M 280 400 L 280 170 L 510 170 L 510 400" />
        {/* Flachdach mit Attika-Linie */}
        <line x1="272" y1="170" x2="518" y2="170" strokeWidth="2.4" />
        <line x1="272" y1="164" x2="518" y2="164" opacity="0.5" />
      </g>

      {/* Geschoss-Trennung (Decke OG) */}
      <line x1="280" y1="285" x2="510" y2="285" stroke={accent} strokeWidth="1" opacity="0.4"
            strokeDasharray="3 3" />

      {/* Große Fensterfront EG (raumhoch) */}
      <g fill="none" stroke={accent} strokeWidth="1.4">
        <rect x="296" y="305" width="160" height="85" />
        <line x1="350" y1="305" x2="350" y2="390" />
        <line x1="402" y1="305" x2="402" y2="390" />
        {/* Fensterfront-Glanz (innen sanft) */}
        <rect x="298" y="307" width="156" height="81" fill={soft} opacity="0.06" stroke="none" />
      </g>

      {/* Fenster OG — drei schmale, modern */}
      <g fill="none" stroke={accent} strokeWidth="1.3">
        <rect x="296" y="195" width="42" height="70" />
        <rect x="354" y="195" width="42" height="70" />
        <rect x="412" y="195" width="42" height="70" />
        <g fill={soft} opacity="0.08" stroke="none">
          <rect x="298" y="197" width="38" height="66" />
          <rect x="356" y="197" width="38" height="66" />
          <rect x="414" y="197" width="38" height="66" />
        </g>
      </g>

      {/* Eingangsbereich — Tür + Vordach (rechts vom Fensterband) */}
      <g fill="none" stroke={accent} strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
        <rect x="468" y="320" width="34" height="70" />
        <line x1="485" y1="320" x2="485" y2="390" opacity="0.5" />
        {/* Vordach */}
        <line x1="460" y1="305" x2="510" y2="305" strokeWidth="2" />
      </g>
      {/* Klingel/Smartlock-Punkt */}
      <circle cx="497" cy="355" r="1.6" fill={soft} stroke="none" />

      {/* ANBAU links — niedriger, einstöckig (Garage / Carport) */}
      <g stroke={accent} strokeWidth="2" fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d="M 100 400 L 100 270 L 280 270" />
        {/* Flachdach des Anbaus */}
        <line x1="92" y1="270" x2="288" y2="270" strokeWidth="2.4" />
        <line x1="92" y1="264" x2="288" y2="264" opacity="0.5" />
      </g>

      {/* Garagentor — mit horizontalen Lamellen (öffnet sich auf Hover) */}
      <g stroke={accent} strokeWidth="1.3" fill="none">
        <rect x="120" y="305" width="140" height="85" />
        {/* Lamellen-Gruppe rollt nach oben wenn animate=true */}
        <g opacity="0.55">
          {animate && (
            <animateTransform attributeName="transform" type="translate"
                              values="0,0; 0,-72; 0,-72; 0,0; 0,0"
                              keyTimes="0; 0.25; 0.55; 0.85; 1"
                              dur="6s" repeatCount="indefinite" />
          )}
          {[317, 329, 341, 353, 365, 377].map((y, i) => (
            <line key={i} x1="120" y1={y} x2="260" y2={y} strokeWidth="0.9" />
          ))}
          <line x1="120" y1="389" x2="260" y2="389" strokeWidth="1.4" />
        </g>
        {/* Garagenboden / Innen-Andeutung — sichtbar wenn Tor offen */}
        {animate && (
          <g opacity="0">
            <rect x="125" y="345" width="130" height="42" fill={bg} stroke="none" />
            <line x1="125" y1="385" x2="255" y2="385" strokeWidth="0.8" opacity="0.5" />
            {/* E-Auto Andeutung */}
            <rect x="155" y="358" width="70" height="22" rx="3"
                  stroke={soft} strokeWidth="0.9" fill="none" />
            <circle cx="170" cy="383" r="3" stroke={soft} strokeWidth="0.8" fill="none" />
            <circle cx="210" cy="383" r="3" stroke={soft} strokeWidth="0.8" fill="none" />
            {/* Ladekabel-Symbol */}
            <line x1="225" y1="370" x2="245" y2="370" stroke={soft} strokeWidth="1.2" />
            <rect x="245" y="367" width="6" height="6" stroke={soft} strokeWidth="0.9" fill="none" />
            <animate attributeName="opacity" values="0;0;1;1;0;0"
                     keyTimes="0;0.3;0.4;0.7;0.85;1" dur="6s" repeatCount="indefinite" />
          </g>
        )}
      </g>

      {/* Fingerprint-Sensor neben Eingangstür (auf Hover sichtbar/aktiv) */}
      {animate && (
        <g opacity="0">
          <animate attributeName="opacity" values="0;0;1;1;0"
                   keyTimes="0;0.15;0.3;0.85;1" dur="6s" repeatCount="indefinite" />
          {/* Ring um Sensor */}
          <circle cx="455" cy="355" r="9" fill="none" stroke={accent} strokeWidth="1.2" />
          <circle cx="455" cy="355" r="13" fill="none" stroke={soft} strokeWidth="0.8" opacity="0.5">
            <animate attributeName="r" values="13;18;13" dur="1.6s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.5;0;0.5" dur="1.6s" repeatCount="indefinite" />
          </circle>
          {/* Fingerprint-Linien */}
          <g stroke={soft} strokeWidth="1" fill="none" strokeLinecap="round">
            <path d="M 451 351 Q 455 348 459 351" />
            <path d="M 449 354 Q 455 350 461 354" opacity="0.8" />
            <path d="M 449 358 Q 455 354 461 358" opacity="0.8" />
            <path d="M 451 361 Q 455 358 459 361" />
          </g>
          {/* Status-Tag */}
          <rect x="430" y="330" width="50" height="14" rx="2"
                fill={bg} stroke={accent} strokeWidth="0.8" opacity="0.9" />
          <text x="455" y="340" fontFamily="'JetBrains Mono', monospace" fontSize="8"
                fill={soft} textAnchor="middle" letterSpacing="0.12em">SCAN OK</text>
        </g>
      )}

      {/* PV-Module auf Hauptdach */}
      <g>
        <rect x="282" y="148" width="226" height="14" fill={soft} opacity="0.75" />
        <g stroke={bg} strokeWidth="0.8">
          {Array.from({length:11}, (_, i) => (
            <line key={i} x1={282 + (i+1)*20} y1={148} x2={282 + (i+1)*20} y2={162} />
          ))}
        </g>
      </g>
      {/* PV-Module auf Anbau-Dach (weniger) */}
      <g>
        <rect x="115" y="248" width="160" height="11" fill={soft} opacity="0.7" />
        <g stroke={bg} strokeWidth="0.7">
          {Array.from({length:7}, (_, i) => (
            <line key={i} x1={115 + (i+1)*22} y1={248} x2={115 + (i+1)*22} y2={259} />
          ))}
        </g>
      </g>

      {/* Schornstein/Lüftung — kleines Detail */}
      <g stroke={accent} strokeWidth="1.4" fill="none">
        <rect x="442" y="135" width="14" height="14" />
      </g>

      {/* Himmel-Andeutung: Wolke / Sonne weit oben links */}
      <g stroke={soft} strokeWidth="1" fill="none" opacity="0.35">
        <circle cx="80" cy="100" r="22" />
        <circle cx="80" cy="100" r="30" opacity="0.5" />
      </g>

      {/* Bäumchen / Vegetation neben dem Anbau */}
      <g stroke={soft} strokeWidth="1.2" fill="none" opacity="0.55">
        <line x1="68" y1="400" x2="68" y2="370" />
        <circle cx="68" cy="362" r="12" />
      </g>

      {/* KNX-BUS DETAIL — INNEN, dezent: Schaltschrank an der Außenwand des Anbaus */}
      <g>
        {/* Schaltschrank an der Wand zwischen Anbau und Hauptkubus */}
        <rect x="266" y="335" width="14" height="55" rx="1.5"
              fill="none" stroke={accent} strokeWidth="1.2" opacity="0.85" />
        <g fill={soft} opacity="0.7">
          <rect x="269" y="340" width="8" height="2.4" />
          <rect x="269" y="345" width="8" height="2.4" opacity="0.6" />
          <rect x="269" y="350" width="8" height="2.4" opacity="0.6" />
          <rect x="269" y="355" width="8" height="2.4" opacity="0.6" />
          <rect x="269" y="360" width="8" height="2.4" opacity="0.6" />
        </g>
      </g>

      {/* BUS-Linie als horizontaler Strich entlang der EG-Decke (Sockelleiste-Höhe) */}
      <g stroke={accent} strokeWidth="1.2" fill="none" opacity="0.7" strokeLinecap="round">
        <line x1="280" y1="395" x2="468" y2="395" />
      </g>
      {/* BUS-Knoten an Komponenten (nur im Hauptkubus, Garage bleibt clean) */}
      <g>
        {[
          {x: 320, y: 395}, {x: 380, y: 395}, {x: 440, y: 395},
        ].map((n, i) => (
          <g key={i}>
            <circle cx={n.x} cy={n.y} r="2.6" fill={bg} stroke={accent} strokeWidth="1.2" />
            {animate && (
              <circle cx={n.x} cy={n.y} r="1.4" fill={soft} stroke="none">
                <animate attributeName="opacity" values="1;0.3;1"
                         dur={`${2 + i * 0.2}s`} repeatCount="indefinite" />
              </circle>
            )}
            {!animate && <circle cx={n.x} cy={n.y} r="1.2" fill={soft} stroke="none" />}
          </g>
        ))}
      </g>

      {/* Daten-Puls entlang BUS */}
      {animate && (
        <g fill={soft}>
          <circle r="2.5">
            <animateMotion dur="3s" repeatCount="indefinite"
              path="M 280 395 L 468 395" />
          </circle>
        </g>
      )}

      {/* Annotation rechts oben — KNX-Tag */}
      <g fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={soft} opacity="0.7"
         letterSpacing="0.15em">
        <rect x="520" y="172" width="38" height="20" rx="3" fill="none" stroke={accent}
              strokeWidth="1" opacity="0.7" />
        <text x="539" y="186" textAnchor="middle">KNX</text>
      </g>
      <g fontFamily="'JetBrains Mono', monospace" fontSize="9" fill={soft} opacity="0.55"
         letterSpacing="0.12em">
        <text x="395" y="142">PV · 8 kWp</text>
      </g>
    </svg>
  );
}

function GewerbeIllustration({ accent = "#3ABDD0", soft = "#8DDBEA", bg = "#071520", animate = false }) {
  // Gewerbe-Fokus: Energiemanagement (PV + Speicher außen) und Zutritt (RFID außen)
  // Gebäude bleibt sauber architektonisch, technische Details sitzen DAVOR/DANEBEN
  return (
    <svg viewBox="0 0 600 480" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
         style={{ display: "block" }}>
      <defs>
        <pattern id="gewerbe-grid" width="32" height="32" patternUnits="userSpaceOnUse">
          <path d="M 32 0 L 0 0 0 32" fill="none" stroke={soft} strokeWidth="0.4" opacity="0.18" />
        </pattern>
      </defs>
      <rect width="600" height="480" fill="url(#gewerbe-grid)" opacity="0.5" />

      {/* Bodenlinie */}
      <line x1="20" y1="395" x2="580" y2="395" stroke={accent} strokeWidth="1.6" opacity="0.7" />
      <line x1="20" y1="401" x2="580" y2="401" stroke={accent} strokeWidth="0.8" opacity="0.4" />

      {/* Gewerbegebäude — etwas schmaler, mehr Platz aussen */}
      <g stroke={accent} strokeWidth="2" fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d="M 170 395 L 170 175 L 470 175 L 470 395" />
        {/* Flachdach mit Attika */}
        <line x1="162" y1="175" x2="478" y2="175" strokeWidth="2.4" />
        <line x1="162" y1="169" x2="478" y2="169" opacity="0.5" />
      </g>

      {/* Fassadensegmente — vertikale Trennlinien */}
      <g stroke={accent} strokeWidth="0.9" fill="none" opacity="0.3" strokeDasharray="2 3">
        {[230, 290, 350, 410].map((x, i) => (
          <line key={i} x1={x} y1="175" x2={x} y2="395" />
        ))}
      </g>

      {/* Fensterband oben (durchgängig, Bürocharakter) */}
      <g stroke={accent} strokeWidth="1.3" fill="none" opacity="0.85">
        <rect x="190" y="200" width="260" height="42" />
        {[230, 280, 330, 380].map((x, i) => (
          <line key={i} x1={x} y1="200" x2={x} y2="242" />
        ))}
        <rect x="192" y="202" width="256" height="38" fill={soft} opacity="0.05" stroke="none" />
      </g>

      {/* Fensterband Mitte */}
      <g stroke={accent} strokeWidth="1.3" fill="none" opacity="0.85">
        <rect x="190" y="265" width="260" height="42" />
        {[230, 280, 330, 380].map((x, i) => (
          <line key={i} x1={x} y1="265" x2={x} y2="307" />
        ))}
        <rect x="192" y="267" width="256" height="38" fill={soft} opacity="0.05" stroke="none" />
      </g>

      {/* Eingang unten Mitte */}
      <g stroke={accent} strokeWidth="1.6" fill="none">
        <rect x="280" y="330" width="80" height="65" />
        <line x1="320" y1="330" x2="320" y2="395" />
        <rect x="282" y="332" width="76" height="61" fill={soft} opacity="0.07" stroke="none" />
        <line x1="316" y1="362" x2="316" y2="375" strokeWidth="2" />
        <line x1="324" y1="362" x2="324" y2="375" strokeWidth="2" />
      </g>

      {/* PV-FELD auf Dach — durchgehend, kräftiger Akzent */}
      <g>
        <rect x="172" y="153" width="296" height="20" fill={soft} opacity="0.85" />
        <g stroke={bg} strokeWidth="0.8">
          {Array.from({length: 14}, (_, i) => (
            <line key={i} x1={172 + (i + 1) * 20} y1={153} x2={172 + (i + 1) * 20} y2={173} />
          ))}
        </g>
      </g>

      {/* ─── DASHBOARD LINKS NEBEN GEBÄUDE: Energiemanagement ──────── */}
      <g>
        {/* Panel-Hintergrund */}
        <rect x="40" y="200" width="115" height="180" rx="6"
              fill={bg} stroke={accent} strokeWidth="1.4" opacity="0.95" />
        {/* Header */}
        <rect x="40" y="200" width="115" height="22" rx="6" fill={accent} opacity="0.15" />
        <text x="98" y="215" fontFamily="'JetBrains Mono', monospace" fontSize="9"
              fill={soft} textAnchor="middle" letterSpacing="0.18em" fontWeight="600">
          ENERGIE
        </text>

        {/* Speicher-Icon kompakt */}
        <g transform="translate(54, 232)">
          <rect x="0" y="2" width="18" height="36" rx="1.5"
                fill="none" stroke={accent} strokeWidth="1.2" />
          <line x1="6" y1="0" x2="12" y2="0" stroke={accent} strokeWidth="1.4" />
          <rect x="2" y="22" width="14" height="14" fill={soft} opacity="0.8" />
          <rect x="2" y="14" width="14" height="6" fill={soft} opacity="0.5" />
        </g>
        <text x="84" y="248" fontFamily="'JetBrains Mono', monospace" fontSize="9"
              fill="#fff" letterSpacing="0.05em">SPEICHER</text>
        <text x="84" y="262" fontFamily="'JetBrains Mono', monospace" fontSize="14"
              fill={soft} fontWeight="600">68%</text>

        {/* PV-Live-Wert */}
        <line x1="48" y1="278" x2="148" y2="278" stroke={soft} strokeWidth="0.6" opacity="0.3" />
        <text x="48" y="295" fontFamily="'JetBrains Mono', monospace" fontSize="9"
              fill="#fff" letterSpacing="0.05em">PV LIVE</text>
        <text x="48" y="312" fontFamily="'JetBrains Mono', monospace" fontSize="14"
              fill={soft} fontWeight="600">12.4
          <tspan fontSize="9" fill={soft} opacity="0.7"> kW</tspan>
        </text>

        {/* Mini-Bargraph (Tagesverlauf) */}
        <g fill={soft}>
          {[
            {x: 48, h: 6}, {x: 56, h: 11}, {x: 64, h: 17}, {x: 72, h: 24},
            {x: 80, h: 28}, {x: 88, h: 25}, {x: 96, h: 19}, {x: 104, h: 14},
            {x: 112, h: 10}, {x: 120, h: 6}, {x: 128, h: 4}, {x: 136, h: 3},
          ].map((b, i) => (
            <rect key={i} x={b.x + 1} y={365 - b.h} width="5" height={b.h}
                  opacity={animate ? 0.4 + (i / 30) : 0.6}>
              {animate && (
                <animate attributeName="height"
                         values={`${b.h};${b.h + 4};${b.h}`}
                         dur={`${1.5 + (i % 3) * 0.3}s`} repeatCount="indefinite" />
              )}
            </rect>
          ))}
        </g>
        <text x="48" y="378" fontFamily="'JetBrains Mono', monospace" fontSize="7"
              fill={soft} opacity="0.5" letterSpacing="0.1em">HEUTE</text>
      </g>

      {/* Energiefluss-Linie: PV-Dach → Energie-Panel */}
      <g stroke={accent} strokeWidth="1.2" fill="none" opacity="0.6" strokeLinecap="round"
         strokeDasharray="3 4">
        <path d="M 172 163 Q 100 165 100 200" />
      </g>
      {animate && (
        <g fill={soft}>
          <circle r="2.5">
            <animateMotion dur="3s" repeatCount="indefinite"
              path="M 172 163 Q 100 165 100 200" />
          </circle>
        </g>
      )}

      {/* ─── DASHBOARD RECHTS NEBEN GEBÄUDE: Zutritt ──────────────── */}
      <g>
        {/* Panel-Hintergrund */}
        <rect x="485" y="200" width="115" height="180" rx="6"
              fill={bg} stroke={accent} strokeWidth="1.4" opacity="0.95" />
        <rect x="485" y="200" width="115" height="22" rx="6" fill={accent} opacity="0.15" />
        <text x="543" y="215" fontFamily="'JetBrains Mono', monospace" fontSize="9"
              fill={soft} textAnchor="middle" letterSpacing="0.18em" fontWeight="600">
          ZUTRITT
        </text>

        {/* Fingerprint-Sensor */}
        <g transform="translate(525, 232)">
          <circle cx="18" cy="22" r="20" fill="none" stroke={accent} strokeWidth="1.2" />
          {animate && (
            <circle cx="18" cy="22" r="24" fill="none" stroke={soft} strokeWidth="0.8" opacity="0.5">
              <animate attributeName="r" values="22;30;22" dur="2s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.5;0;0.5" dur="2s" repeatCount="indefinite" />
            </circle>
          )}
          {/* Fingerprint-Linien */}
          <g stroke={soft} strokeWidth="1.1" fill="none" strokeLinecap="round">
            <path d="M 12 18 Q 18 14 24 18" />
            <path d="M 9 22 Q 18 15 27 22" opacity="0.85" />
            <path d="M 9 26 Q 18 19 27 26" opacity="0.85" />
            <path d="M 11 30 Q 18 25 25 30" opacity="0.7" />
          </g>
        </g>

        {/* Status */}
        <line x1="493" y1="285" x2="593" y2="285" stroke={soft} strokeWidth="0.6" opacity="0.3" />
        <g>
          <circle cx="500" cy="302" r="3" fill={soft}>
            {animate && <animate attributeName="opacity" values="1;0.4;1"
                         dur="1.6s" repeatCount="indefinite" />}
          </circle>
          <text x="510" y="306" fontFamily="'JetBrains Mono', monospace" fontSize="10"
                fill="#fff" letterSpacing="0.05em">FREIGABE</text>
        </g>
        <text x="493" y="324" fontFamily="'JetBrains Mono', monospace" fontSize="9"
              fill={soft} opacity="0.7" letterSpacing="0.05em">12 user · aktiv</text>

        {/* Letzter Zugriff Log */}
        <text x="493" y="348" fontFamily="'JetBrains Mono', monospace" fontSize="8"
              fill={soft} opacity="0.55" letterSpacing="0.08em">07:42 · M.HUBER</text>
        <text x="493" y="362" fontFamily="'JetBrains Mono', monospace" fontSize="8"
              fill={soft} opacity="0.45" letterSpacing="0.08em">07:38 · A.MAIER</text>
        <text x="493" y="376" fontFamily="'JetBrains Mono', monospace" fontSize="8"
              fill={soft} opacity="0.35" letterSpacing="0.08em">07:31 · L.GRUBER</text>
      </g>

      {/* Verbindungslinie: Eingang → Zutritts-Panel */}
      <g stroke={accent} strokeWidth="1.2" fill="none" opacity="0.6" strokeLinecap="round"
         strokeDasharray="3 4">
        <path d="M 470 360 Q 482 360 485 320" />
      </g>
      {animate && (
        <g fill={soft}>
          <circle r="2.5">
            <animateMotion dur="3s" begin="1s" repeatCount="indefinite"
              path="M 470 360 Q 482 360 485 320" />
          </circle>
        </g>
      )}

      {/* Schaltschrank-Andeutung an der Außenwand (sehr klein) */}
      <g>
        <rect x="178" y="350" width="10" height="40" rx="1" fill={bg}
              stroke={accent} strokeWidth="1" opacity="0.85" />
        <g fill={soft} opacity="0.6">
          <rect x="180" y="355" width="6" height="2" />
          <rect x="180" y="360" width="6" height="2" />
          <rect x="180" y="365" width="6" height="2" />
          <rect x="180" y="370" width="6" height="2" />
        </g>
      </g>

      {/* Bäumchen / Vegetation für Kontext */}
      <g stroke={soft} strokeWidth="1.2" fill="none" opacity="0.5">
        <line x1="158" y1="395" x2="158" y2="372" />
        <circle cx="158" cy="365" r="9" />
      </g>
      <g stroke={soft} strokeWidth="1.2" fill="none" opacity="0.5">
        <line x1="478" y1="395" x2="478" y2="372" />
        <circle cx="478" cy="365" r="9" />
      </g>

      {/* Annotation oben — PV-FELD */}
      <g fontFamily="'JetBrains Mono', monospace" fontSize="9" fill={soft} opacity="0.65"
         letterSpacing="0.12em">
        <text x="320" y="146" textAnchor="middle">PV-FELD · 24 KWP</text>
      </g>
    </svg>
  );
}

Object.assign(window, { AltbauIllustration, NeubauIllustration, GewerbeIllustration });