// logo-marks.jsx
// Smartmacherei Logo-Varianten. Alle nehmen die gleichen Props,
// damit Tweaks global wirken: stroke, accent, accentSoft, bg, circuit (0-10),
// antenna ('dish'|'waves'|'panel'|'none'), battery ('classic'|'block'|'subtle'|'none'),
// extras { pv, bulb, nodes, door, wifi }, font ('inter'|'outfit')

const PALETTE_DEFAULT = {
  bgDeep:   "#071520",
  bgCard:   "#0D2030",
  accent:   "#3ABDD0",
  soft:     "#8DDBEA",
  text:     "#ffffff",
};

// ── Small primitives ────────────────────────────────────────────────────────
function Pin({ x, y, dir, len = 4, sw = 1.5, color }) {
  // dir: 'l' 'r' 't' 'b'
  const dx = dir === "l" ? -len : dir === "r" ? len : 0;
  const dy = dir === "t" ? -len : dir === "b" ? len : 0;
  return (
    <line x1={x} y1={y} x2={x + dx} y2={y + dy}
      stroke={color} strokeWidth={sw} strokeLinecap="round" />
  );
}
function Node({ x, y, r = 1.6, color, fill = "none" }) {
  return <circle cx={x} cy={y} r={r} stroke={color} strokeWidth={1.2} fill={fill} />;
}

// ── Antenne ─────────────────────────────────────────────────────────────────
function Antenna({ kind, x, y, color, sw }) {
  if (kind === "none") return null;
  if (kind === "waves") {
    return (
      <g stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round">
        <path d={`M ${x - 8} ${y + 4} Q ${x} ${y - 4} ${x + 8} ${y + 4}`} opacity={0.9} />
        <path d={`M ${x - 12} ${y + 6} Q ${x} ${y - 8} ${x + 12} ${y + 6}`} opacity={0.55} />
        <path d={`M ${x - 16} ${y + 8} Q ${x} ${y - 12} ${x + 16} ${y + 8}`} opacity={0.3} />
      </g>
    );
  }
  if (kind === "panel") {
    // Echter Starlink-Look: kleines Rechteck auf Mast
    return (
      <g stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <line x1={x} y1={y} x2={x} y2={y - 8} />
        <rect x={x - 6} y={y - 12} width={12} height={5} rx={1} transform={`rotate(-12 ${x} ${y - 9})`} />
      </g>
    );
  }
  // 'dish' (default)
  return (
    <g stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
      <line x1={x} y1={y} x2={x} y2={y - 10} />
      <path d={`M ${x - 7} ${y - 10} Q ${x} ${y - 16} ${x + 7} ${y - 10}`} />
      <line x1={x - 7} y1={y - 10} x2={x + 7} y2={y - 10} />
      {/* signal arcs */}
      <path d={`M ${x + 8} ${y - 18} Q ${x + 12} ${y - 14} ${x + 10} ${y - 10}`} opacity={0.7} />
      <path d={`M ${x + 12} ${y - 22} Q ${x + 18} ${y - 14} ${x + 14} ${y - 8}`} opacity={0.4} />
    </g>
  );
}

// ── Akku ────────────────────────────────────────────────────────────────────
function Battery({ kind, x, y, color, sw }) {
  if (kind === "none") return null;
  if (kind === "subtle") {
    return (
      <g stroke={color} strokeWidth={sw} fill="none">
        <rect x={x - 3} y={y} width={6} height={14} rx={1} opacity={0.8} />
      </g>
    );
  }
  if (kind === "block") {
    return (
      <g stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round">
        <rect x={x - 4} y={y - 2} width={8} height={18} rx={1} />
        <line x1={x - 2} y1={y} x2={x + 2} y2={y} />
        <line x1={x - 3} y1={y + 5} x2={x + 3} y2={y + 5} opacity={0.5} />
        <line x1={x - 3} y1={y + 9} x2={x + 3} y2={y + 9} opacity={0.5} />
        <line x1={x - 3} y1={y + 13} x2={x + 3} y2={y + 13} opacity={0.5} />
      </g>
    );
  }
  // classic
  return (
    <g stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
      <rect x={x - 4} y={y} width={8} height={16} rx={1} />
      <line x1={x - 2} y1={y - 2} x2={x + 2} y2={y - 2} />
      <line x1={x - 2} y1={y + 4} x2={x + 2} y2={y + 4} opacity={0.6} />
      <line x1={x - 2} y1={y + 8} x2={x + 2} y2={y + 8} opacity={0.6} />
    </g>
  );
}

// ── Circuit pins um die Wände ───────────────────────────────────────────────
// box: { x, y, w, h }; intensity 0..10
function CircuitPins({ box, intensity, color, sw, accentSoft }) {
  if (intensity <= 0) return null;
  const { x, y, w, h } = box;
  const out = [];
  // links
  const leftCount = Math.min(5, Math.floor(intensity * 0.45));
  for (let i = 0; i < leftCount; i++) {
    const py = y + (h * (i + 1)) / (leftCount + 1);
    out.push(<Pin key={`l${i}`} x={x} y={py} dir="l" len={4 + (intensity > 6 ? 1 : 0)} sw={sw} color={color} />);
    if (intensity >= 7) out.push(<Node key={`ln${i}`} x={x - 5 - (intensity > 6 ? 1 : 0)} y={py} color={accentSoft} />);
  }
  // rechts
  const rightCount = Math.min(5, Math.floor(intensity * 0.45));
  for (let i = 0; i < rightCount; i++) {
    const py = y + (h * (i + 1)) / (rightCount + 1);
    out.push(<Pin key={`r${i}`} x={x + w} y={py} dir="r" len={4} sw={sw} color={color} />);
    if (intensity >= 7) out.push(<Node key={`rn${i}`} x={x + w + 5} y={py} color={accentSoft} />);
  }
  // unten
  if (intensity >= 4) {
    const bottomCount = Math.min(4, Math.floor(intensity * 0.3));
    for (let i = 0; i < bottomCount; i++) {
      const px = x + (w * (i + 1)) / (bottomCount + 1);
      out.push(<Pin key={`b${i}`} x={px} y={y + h} dir="b" len={3} sw={sw} color={color} />);
    }
  }
  // PCB-Bahnen innen (nur bei hoher Intensität)
  if (intensity >= 8) {
    out.push(
      <g key="traces" stroke={accentSoft} strokeWidth={0.7} fill="none" opacity={0.5}>
        <path d={`M ${x + 6} ${y + 10} L ${x + 6} ${y + h - 8} L ${x + w - 6} ${y + h - 8}`} />
        <path d={`M ${x + w - 8} ${y + 8} L ${x + w - 8} ${y + h * 0.5}`} />
        <Node x={x + 6} y={y + 10} color={accentSoft} fill={accentSoft} />
        <Node x={x + w - 6} y={y + h - 8} color={accentSoft} fill={accentSoft} />
      </g>
    );
  }
  return <g>{out}</g>;
}

// ── Mark A: V2-Konzept (Haus mit allem) ────────────────────────────────────
// Standard-Logo wie im Briefing
function MarkA({ size = 200, p = PALETTE_DEFAULT, sw = 1.8, circuit = 4,
                 antenna = "dish", battery = "classic", extras = {} }) {
  const w = size, h = size * 0.78;
  // Haus-Box (Wände)
  const box = { x: w * 0.28, y: h * 0.42, w: w * 0.44, h: h * 0.46 };
  // Dach
  const apexX = box.x + box.w / 2;
  const apexY = box.y - h * 0.18;
  const eaveL = { x: box.x - w * 0.04, y: box.y };
  const eaveR = { x: box.x + box.w + w * 0.04, y: box.y };

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      {/* Antenne */}
      <Antenna kind={antenna} x={apexX + 10} y={apexY + 4} color={p.accent} sw={sw} />
      {/* Dach */}
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${eaveL.x} ${eaveL.y} L ${apexX} ${apexY} L ${eaveR.x} ${eaveR.y}`} />
      </g>
      {/* Akku links */}
      <Battery kind={battery} x={box.x - 8} y={box.y + 10} color={p.accent} sw={sw} />
      {/* Wände */}
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round">
        <rect x={box.x} y={box.y} width={box.w} height={box.h} />
      </g>
      {/* Tür */}
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <rect x={box.x + box.w * 0.18} y={box.y + box.h * 0.4} width={box.w * 0.18} height={box.h * 0.6} />
        {extras.door && (
          <circle cx={box.x + box.w * 0.32} cy={box.y + box.h * 0.7} r={1.2} fill={p.soft} stroke="none" />
        )}
      </g>
      {/* Fenster */}
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round">
        <rect x={box.x + box.w * 0.55} y={box.y + box.h * 0.4} width={box.w * 0.25} height={box.h * 0.3} />
        {extras.bulb && (
          <circle cx={box.x + box.w * 0.675} cy={box.y + box.h * 0.55} r={2} fill={p.soft} stroke="none" />
        )}
      </g>
      {/* PV auf Dach */}
      {extras.pv && (
        <g stroke={p.soft} strokeWidth={1} fill="none" opacity={0.85}>
          <path d={`M ${box.x + 6} ${box.y - 8} L ${apexX - 4} ${apexY + 10} L ${apexX - 1} ${apexY + 12} L ${box.x + 9} ${box.y - 6} Z`} />
          <line x1={box.x + 7} y1={box.y - 7} x2={apexX - 3} y2={apexY + 11} />
        </g>
      )}
      {/* Wifi-Wellen */}
      {extras.wifi && (
        <g stroke={p.soft} strokeWidth={0.8} fill="none" opacity={0.35}>
          <path d={`M ${apexX - 30} ${apexY - 6} Q ${apexX} ${apexY - 30} ${apexX + 30} ${apexY - 6}`} />
        </g>
      )}
      {/* Schaltkreis-Pins */}
      <CircuitPins box={box} intensity={circuit} color={p.accent} sw={sw * 0.8} accentSoft={p.soft} />
    </svg>
  );
}

// ── Mark B: Puristisch ─────────────────────────────────────────────────────
function MarkB({ size = 200, p = PALETTE_DEFAULT, sw = 2 }) {
  const w = size, h = size * 0.78;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${w * 0.22} ${h * 0.55}
                  L ${w * 0.5} ${h * 0.18}
                  L ${w * 0.78} ${h * 0.55}
                  L ${w * 0.78} ${h * 0.88}
                  L ${w * 0.22} ${h * 0.88} Z`} />
        {/* Tiny WLAN-dot apex */}
        <circle cx={w * 0.5} cy={h * 0.35} r={1.6} fill={p.accent} stroke="none" />
      </g>
    </svg>
  );
}

// ── Mark B2: Puristisch, dot ALTERNATIVES ─────────────────────────────────
// Vier Sub-Varianten — wir zeigen sie nebeneinander
function MarkB2_Pulse({ size = 200, p = PALETTE_DEFAULT, sw = 2 }) {
  // Größerer Dot mit Pulsring im Zentrum
  const w = size, h = size * 0.78;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${w * 0.22} ${h * 0.55}
                  L ${w * 0.5} ${h * 0.18}
                  L ${w * 0.78} ${h * 0.55}
                  L ${w * 0.78} ${h * 0.88}
                  L ${w * 0.22} ${h * 0.88} Z`} />
        <circle cx={w * 0.5} cy={h * 0.55} r={3.5} fill={p.accent} stroke="none" />
        <circle cx={w * 0.5} cy={h * 0.55} r={6} stroke={p.soft} strokeWidth={0.8} fill="none" opacity={0.6} />
        <circle cx={w * 0.5} cy={h * 0.55} r={9} stroke={p.soft} strokeWidth={0.6} fill="none" opacity={0.3} />
      </g>
    </svg>
  );
}

function MarkB2_Apex({ size = 200, p = PALETTE_DEFAULT, sw = 2 }) {
  // Dot AM Dachfirst (auf dem Apex-Punkt, kein WLAN drüber)
  const w = size, h = size * 0.78;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${w * 0.22} ${h * 0.55}
                  L ${w * 0.5} ${h * 0.18}
                  L ${w * 0.78} ${h * 0.55}
                  L ${w * 0.78} ${h * 0.88}
                  L ${w * 0.22} ${h * 0.88} Z`} />
        {/* Dot AUF dem Dachfirst — als "I-Punkt" */}
        <circle cx={w * 0.5} cy={h * 0.18} r={3} fill={p.accent} stroke={p.bgDeep} strokeWidth={1} />
      </g>
    </svg>
  );
}

function MarkB2_Door({ size = 200, p = PALETTE_DEFAULT, sw = 2 }) {
  // Dot wird zur Türklinke (unten in der Wand)
  const w = size, h = size * 0.78;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${w * 0.22} ${h * 0.55}
                  L ${w * 0.5} ${h * 0.18}
                  L ${w * 0.78} ${h * 0.55}
                  L ${w * 0.78} ${h * 0.88}
                  L ${w * 0.22} ${h * 0.88} Z`} />
        {/* Tür */}
        <rect x={w * 0.43} y={h * 0.65} width={w * 0.14} height={h * 0.23} rx={1} />
        {/* Dot als Klinke */}
        <circle cx={w * 0.54} cy={h * 0.78} r={1.8} fill={p.accent} stroke="none" />
      </g>
    </svg>
  );
}

function MarkB2_Ring({ size = 200, p = PALETTE_DEFAULT, sw = 2 }) {
  // Dot als hohler Ring statt Vollkreis
  const w = size, h = size * 0.78;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${w * 0.22} ${h * 0.55}
                  L ${w * 0.5} ${h * 0.18}
                  L ${w * 0.78} ${h * 0.55}
                  L ${w * 0.78} ${h * 0.88}
                  L ${w * 0.22} ${h * 0.88} Z`} />
        <circle cx={w * 0.5} cy={h * 0.4} r={4} stroke={p.accent} strokeWidth={sw * 0.8} fill="none" />
        <circle cx={w * 0.5} cy={h * 0.4} r={1.4} fill={p.accent} stroke="none" />
      </g>
    </svg>
  );
}

// ── Mark C: Haus aus PCB-Bahnen (Schaltkreis-Haus) ─────────────────────────
function MarkC({ size = 200, p = PALETTE_DEFAULT, sw = 1.6 }) {
  const w = size, h = size * 0.78;
  const box = { x: w * 0.26, y: h * 0.48, w: w * 0.48, h: h * 0.4 };
  const apexX = box.x + box.w / 2;
  const apexY = box.y - h * 0.22;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      {/* Dach + Wände aus Bahnen mit Knoten */}
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="miter" strokeLinecap="round">
        <path d={`M ${box.x} ${box.y} L ${apexX} ${apexY} L ${box.x + box.w} ${box.y}`} />
        <rect x={box.x} y={box.y} width={box.w} height={box.h} />
      </g>
      {/* PCB-Knoten an den Ecken */}
      <g>
        {[
          [box.x, box.y], [box.x + box.w, box.y],
          [apexX, apexY], [box.x, box.y + box.h], [box.x + box.w, box.y + box.h],
        ].map(([cx, cy], i) => (
          <circle key={i} cx={cx} cy={cy} r={2.4} fill={p.bgDeep} stroke={p.accent} strokeWidth={sw} />
        ))}
      </g>
      {/* Innere Bahnen */}
      <g stroke={p.soft} strokeWidth={1} fill="none" opacity={0.7}>
        <path d={`M ${box.x + 8} ${box.y + 8} L ${box.x + 8} ${box.y + box.h - 8} L ${box.x + box.w - 8} ${box.y + box.h - 8}`} />
        <path d={`M ${box.x + box.w - 8} ${box.y + 8} L ${box.x + box.w * 0.55} ${box.y + 8} L ${box.x + box.w * 0.55} ${box.y + box.h * 0.5}`} />
        <circle cx={box.x + box.w * 0.55} cy={box.y + box.h * 0.5} r={1.5} fill={p.soft} stroke="none" />
        <circle cx={box.x + 8} cy={box.y + 8} r={1.2} fill={p.soft} stroke="none" />
        <circle cx={box.x + box.w - 8} cy={box.y + box.h - 8} r={1.2} fill={p.soft} stroke="none" />
      </g>
    </svg>
  );
}

// ── Mark D: Monogramm SM mit Schaltkreis-Touch ─────────────────────────────
function MarkD({ size = 200, p = PALETTE_DEFAULT, sw = 2 }) {
  const w = size, h = size * 0.78;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        {/* Rounded square */}
        <rect x={w * 0.22} y={h * 0.18} width={w * 0.56} height={h * 0.7} rx={h * 0.14} />
        {/* Stylized S as house-roof + flow */}
        <path d={`M ${w * 0.34} ${h * 0.36}
                  L ${w * 0.5} ${h * 0.24}
                  L ${w * 0.66} ${h * 0.36}`} />
        <path d={`M ${w * 0.34} ${h * 0.5}
                  Q ${w * 0.34} ${h * 0.62} ${w * 0.5} ${h * 0.62}
                  Q ${w * 0.66} ${h * 0.62} ${w * 0.66} ${h * 0.74}
                  Q ${w * 0.66} ${h * 0.84} ${w * 0.5} ${h * 0.84}
                  L ${w * 0.36} ${h * 0.84}`} />
        {/* Pins */}
        <line x1={w * 0.22} y1={h * 0.42} x2={w * 0.18} y2={h * 0.42} />
        <line x1={w * 0.22} y1={h * 0.62} x2={w * 0.18} y2={h * 0.62} />
        <line x1={w * 0.78} y1={h * 0.42} x2={w * 0.82} y2={h * 0.42} />
        <line x1={w * 0.78} y1={h * 0.62} x2={w * 0.82} y2={h * 0.62} />
      </g>
    </svg>
  );
}

// ── Mark E: Modulares Haus + Modul-Stack (Akku, Antenne als Tags) ──────────
function MarkE({ size = 200, p = PALETTE_DEFAULT, sw = 1.7,
                  antenna = "waves", battery = "classic", extras = {} }) {
  const w = size, h = size * 0.78;
  const box = { x: w * 0.32, y: h * 0.45, w: w * 0.4, h: h * 0.4 };
  const apexX = box.x + box.w / 2;
  const apexY = box.y - h * 0.2;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      {/* Faintes Raster im Hintergrund */}
      <g stroke={p.soft} strokeWidth={0.4} opacity={0.18}>
        {Array.from({ length: 6 }, (_, i) => (
          <line key={`gv${i}`} x1={(w / 6) * (i + 0.5)} y1={h * 0.1} x2={(w / 6) * (i + 0.5)} y2={h * 0.95} />
        ))}
        {Array.from({ length: 4 }, (_, i) => (
          <line key={`gh${i}`} x1={w * 0.1} y1={(h / 4) * (i + 0.5)} x2={w * 0.9} y2={(h / 4) * (i + 0.5)} />
        ))}
      </g>
      {/* Haus */}
      <Antenna kind={antenna} x={apexX} y={apexY} color={p.accent} sw={sw} />
      <g stroke={p.accent} strokeWidth={sw} fill="none" strokeLinejoin="round" strokeLinecap="round">
        <path d={`M ${box.x - 4} ${box.y} L ${apexX} ${apexY} L ${box.x + box.w + 4} ${box.y}`} />
        <rect x={box.x} y={box.y} width={box.w} height={box.h} />
        <rect x={box.x + box.w * 0.4} y={box.y + box.h * 0.4} width={box.w * 0.25} height={box.h * 0.6} />
      </g>
      {/* Modul-Tags */}
      <Battery kind={battery} x={box.x - 14} y={box.y + 8} color={p.accent} sw={sw} />
      {/* Connection-Linien zu Modulen */}
      <g stroke={p.soft} strokeWidth={0.8} fill="none" strokeDasharray="2 2" opacity={0.6}>
        <line x1={box.x - 8} y1={box.y + 14} x2={box.x} y2={box.y + 14} />
      </g>
    </svg>
  );
}

// ── Mark F: Solid mit gezielten Details ────────────────────────────────────
// Gefüllte Haus-Silhouette mit ausgewählten Details: PV-Streifen,
// Wand-Akku, Starlink V3 Rectangular Dish. Reduziert auf das Wesentliche.
function MarkF({ size = 200, p = PALETTE_DEFAULT, sw = 0,
                  circuit = 4, antenna = "panel", battery = "block", extras = {} }) {
  const w = size, h = size * 0.78;
  const eaveY = h * 0.5;
  const apexY = h * 0.22;
  const apexX = w * 0.5;
  const wallL = w * 0.3;
  const wallR = w * 0.7;
  const baseY = h * 0.88;
  const bg = p.bgDeep;
  const accent = p.accent;
  const soft = p.soft;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      {/* Wand-Akku — schmales Modul links */}
      {battery !== "none" && (
        <g>
          <rect x={wallL - w * 0.05} y={eaveY + h * 0.1} width={w * 0.05} height={h * 0.3}
                fill={accent} />
          {/* Pluspol */}
          <rect x={wallL - w * 0.038} y={eaveY + h * 0.078} width={w * 0.026} height={h * 0.022} fill={accent} />
          {/* Indikator-Bar */}
          <g fill={bg}>
            <rect x={wallL - w * 0.04} y={eaveY + h * 0.18} width={w * 0.03} height={h * 0.012} />
            <rect x={wallL - w * 0.04} y={eaveY + h * 0.24} width={w * 0.03} height={h * 0.012} />
            <rect x={wallL - w * 0.04} y={eaveY + h * 0.3} width={w * 0.03} height={h * 0.012} opacity={0.5} />
          </g>
        </g>
      )}

      {/* Haupt-Silhouette gefüllt */}
      <g fill={accent}>
        <path d={`M ${wallL} ${eaveY}
                  L ${apexX} ${apexY}
                  L ${wallR} ${eaveY}
                  L ${wallR} ${baseY}
                  L ${wallL} ${baseY} Z`} />
      </g>

      {/* PV-Streifen auf linker Dachhälfte (ein klarer Block) */}
      {(extras.pv ?? true) && (
        <g fill={bg}>
          <polygon points={`
            ${apexX - w * 0.16},${apexY + h * 0.1}
            ${apexX - w * 0.035},${apexY + h * 0.1}
            ${apexX - w * 0.05},${apexY + h * 0.2}
            ${apexX - w * 0.18},${apexY + h * 0.2}
          `} />
          {/* PV Trennlinie */}
          <line x1={apexX - w * 0.1} y1={apexY + h * 0.1} x2={apexX - w * 0.115}
                y2={apexY + h * 0.2} stroke={accent} strokeWidth={1} />
        </g>
      )}

      {/* Starlink V3 Dish — rechteckiges Panel rechts vom Giebel */}
      {antenna !== "none" && (
        <g>
          {(() => {
            const mx = apexX + w * 0.07;
            const my = apexY + h * 0.04;
            const mTop = my - h * 0.08;
            return (
              <g>
                {/* Mast */}
                <rect x={mx - 0.7} y={mTop} width={1.4} height={my - mTop} fill={accent} />
                {/* Rechteckiges Panel, gekippt */}
                <g transform={`rotate(-12 ${mx} ${mTop})`}>
                  <rect x={mx - w * 0.07} y={mTop - h * 0.02}
                        width={w * 0.14} height={h * 0.045} rx={0.5}
                        fill={accent} />
                  {/* Apertur-Detail */}
                  <g fill={bg} opacity={0.6}>
                    <rect x={mx - w * 0.06} y={mTop - h * 0.012} width={w * 0.12} height={h * 0.005} />
                    <rect x={mx - w * 0.06} y={mTop + h * 0.005} width={w * 0.12} height={h * 0.005} />
                  </g>
                </g>
              </g>
            );
          })()}
        </g>
      )}

      {/* Tür (Cutout) */}
      <g fill={bg}>
        <rect x={w * 0.36} y={eaveY + h * 0.16} width={w * 0.08} height={h * 0.22} />
      </g>
      <circle cx={w * 0.42} cy={eaveY + h * 0.28} r={1.2} fill={soft} />

      {/* Fenster (Cutout) */}
      <g fill={bg}>
        <rect x={w * 0.5} y={eaveY + h * 0.16} width={w * 0.14} height={h * 0.13} />
      </g>
      {/* Fenster-Kreuz */}
      <g stroke={accent} strokeWidth={1.2}>
        <line x1={w * 0.57} y1={eaveY + h * 0.16} x2={w * 0.57} y2={eaveY + h * 0.29} />
        <line x1={w * 0.5} y1={eaveY + h * 0.225} x2={w * 0.64} y2={eaveY + h * 0.225} />
      </g>
      {extras.bulb && (
        <circle cx={w * 0.535} cy={eaveY + h * 0.193} r={1.4} fill={soft} />
      )}

      {/* Schaltkreis-Pins (nur bei höherer Intensität) */}
      {circuit > 2 && (
        <g fill={accent}>
          {Array.from({ length: Math.min(3, Math.ceil(circuit * 0.3)) }, (_, i) => {
            const count = Math.min(3, Math.ceil(circuit * 0.3));
            const py = eaveY + h * 0.1 + (h * 0.3 * (i + 1)) / (count + 1);
            return <React.Fragment key={`p${i}`}>
              <rect x={wallR} y={py - 0.8} width={w * 0.025} height={1.6} />
            </React.Fragment>;
          })}
        </g>
      )}
    </svg>
  );
}

// ── Wortmarke ───────────────────────────────────────────────────────────────
function Wordmark({ font = "inter", color = "#fff", soft = "#8DDBEA",
                    showClaim = true, showOwner = false, size = 32, align = "center" }) {
  const ff = font === "outfit"
    ? "'Outfit', system-ui, sans-serif"
    : "'Inter', system-ui, sans-serif";
  const claimSize = Math.max(9, size * 0.32);
  const ownerSize = Math.max(10, size * 0.36);
  return (
    <div style={{ fontFamily: ff, color, lineHeight: 1.1, textAlign: align,
                  display: "flex", flexDirection: "column",
                  alignItems: align === "center" ? "center" : "flex-start", gap: size * 0.18 }}>
      <div style={{ fontSize: size, fontWeight: 600, letterSpacing: "-0.02em" }}>
        Smartmacherei
      </div>
      {showClaim && (
        <div style={{ fontSize: claimSize, letterSpacing: "0.22em",
                      textTransform: "uppercase", color: soft, fontWeight: 500 }}>
          Smart für alle
        </div>
      )}
      {showOwner && (
        <div style={{ fontSize: ownerSize, color: "rgba(255,255,255,0.7)",
                      fontWeight: 400, marginTop: size * 0.18 }}>
          Ing. Thomas Basting
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  MarkA, MarkB, MarkC, MarkD, MarkE, MarkF,
  MarkB2_Pulse, MarkB2_Apex, MarkB2_Door, MarkB2_Ring,
  Antenna, Battery, CircuitPins, Wordmark, PALETTE_DEFAULT,
});