// Repairo — screen components
// All screens fit inside the iOS device frame (402×874).

const INK = '#0F0F0E';
const INK_MUTED = '#6B6960';
const INK_SUBTLE = '#A6A39A';
const HAIRLINE = '#E2DFD4';
const SURFACE = '#FFFFFF';
const SURFACE_ALT = '#EBE8DF';
const BG = '#F1EFE8';

// ────────────────────────────────────────────────────────────
// Tiny icon set — 1.6 stroke, rounded
// ────────────────────────────────────────────────────────────
const Icon = {
  camera: (c = INK, s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M3 8.5C3 7.4 3.9 6.5 5 6.5h2.2l1.3-1.7c.4-.5 1-.8 1.6-.8h3.8c.6 0 1.2.3 1.6.8l1.3 1.7H19c1.1 0 2 .9 2 2v9.5c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8.5z" stroke={c} strokeWidth="1.6"/>
      <circle cx="12" cy="13" r="3.8" stroke={c} strokeWidth="1.6"/>
    </svg>
  ),
  sparkle: (c = INK, s = 16) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z" fill={c}/>
      <path d="M19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7.7-2z" fill={c}/>
    </svg>
  ),
  chevron: (c = INK_SUBTLE, s = 14) => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M5 2l5 5-5 5" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  back: (c = INK, s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M15 5l-7 7 7 7" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  x: (c = INK, s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 5l14 14M19 5L5 19" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  ),
  check: (c = '#fff', s = 14) => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M2 7.5l3.5 3.5L12 3.5" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  warning: (c = INK, s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 3L2 20h20L12 3z" stroke={c} strokeWidth="1.6" strokeLinejoin="round"/>
      <path d="M12 10v4M12 17v.5" stroke={c} strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  pin: (c = INK, s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z" stroke={c} strokeWidth="1.6"/>
      <circle cx="12" cy="9" r="2.5" stroke={c} strokeWidth="1.6"/>
    </svg>
  ),
  star: (c = INK, s = 12) => (
    <svg width={s} height={s} viewBox="0 0 12 12" fill="none">
      <path d="M6 1l1.5 3.2 3.5.5-2.5 2.4.6 3.4L6 8.9 2.9 10.5l.6-3.4L1 4.7l3.5-.5L6 1z" fill={c}/>
    </svg>
  ),
  flash: (c = '#fff', s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" stroke={c} strokeWidth="1.6" strokeLinejoin="round"/>
    </svg>
  ),
  flip: (c = '#fff', s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M4 12a8 8 0 0114-5.3M20 12a8 8 0 01-14 5.3" stroke={c} strokeWidth="1.6" strokeLinecap="round"/>
      <path d="M18 3v4h-4M6 21v-4h4" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  send: (c = '#fff', s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M3 12l18-9-7 18-3-7-8-2z" stroke={c} strokeWidth="1.6" strokeLinejoin="round"/>
    </svg>
  ),
  time: (c = INK_MUTED, s = 14) => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="7" r="5.5" stroke={c} strokeWidth="1.4"/>
      <path d="M7 4v3.3l2 1.2" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  tools: (c = INK_MUTED, s = 14) => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M4 2.5a2.5 2.5 0 113.5 3.5L11 9.5l1.5 1.5L11 12.5 9.5 11 6 7.5A2.5 2.5 0 014 2.5z" stroke={c} strokeWidth="1.3"/>
    </svg>
  ),
  diff: (c = INK_MUTED, s = 14) => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M2 11l5-8 5 8" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/>
    </svg>
  ),
};

// ────────────────────────────────────────────────────────────
// Editorial photo — real <img> with striped-placeholder fallback
// ────────────────────────────────────────────────────────────
function Photo({ label = 'photo', tint = '#D9D5C7', height = '100%', src, fit = 'cover', children, style = {} }) {
  const [failed, setFailed] = React.useState(false);
  const showImg = src && !failed;
  return (
    <div style={{
      position: 'relative', width: '100%', height, overflow: 'hidden',
      background: tint,
      backgroundImage: showImg ? 'none' : `repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 14px)`,
      ...style,
    }}>
      {showImg && (
        <img
          src={src} alt={label}
          onError={() => setFailed(true)}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: fit, display: 'block',
          }}
        />
      )}
      {children}
      {label && (
        <div style={{
          position: 'absolute', top: 12, left: 12, zIndex: 2,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
          letterSpacing: 1, textTransform: 'uppercase',
          color: showImg ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.5)',
          background: showImg ? 'rgba(0,0,0,0.45)' : 'rgba(255,255,255,0.6)',
          padding: '4px 7px', borderRadius: 4,
          backdropFilter: showImg ? 'blur(4px)' : 'none',
        }}>{label}</div>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Reusable: top bar (back + title pill or actions)
// ────────────────────────────────────────────────────────────
function TopBar({ onBack, right, title, transparent, light }) {
  const ink = light ? '#fff' : INK;
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
      padding: '54px 16px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      pointerEvents: 'none',
      background: transparent ? 'transparent' : `linear-gradient(${BG} 70%, transparent)`,
    }}>
      <div style={{ pointerEvents: 'auto' }}>
        {onBack && (
          <button onClick={onBack} style={{
            width: 40, height: 40, borderRadius: 999, border: 'none',
            background: light ? 'rgba(0,0,0,0.45)' : SURFACE,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: light ? 'none' : '0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px ' + HAIRLINE,
            cursor: 'pointer', padding: 0,
          }}>{Icon.back(ink)}</button>
        )}
      </div>
      {title && (
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1.5, textTransform: 'uppercase',
          color: light ? 'rgba(255,255,255,0.85)' : INK_MUTED,
        }}>{title}</div>
      )}
      <div style={{ pointerEvents: 'auto' }}>{right}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// HOME
// ────────────────────────────────────────────────────────────
function HomeScreen({ go, accent, problem }) {
  const cats = [
    { id: 'sanitaer', label: 'Sanitär' },
    { id: 'elektrik', label: 'Elektrik' },
    { id: 'heizung', label: 'Heizung' },
    { id: 'geraete', label: 'Geräte' },
    { id: 'moebel', label: 'Möbel' },
    { id: 'fenster', label: 'Fenster' },
    { id: 'garten', label: 'Garten' },
  ];
  return (
    <div style={{ height: '100%', background: BG, overflow: 'auto', paddingBottom: 40 }}>
      {/* Top — wordmark + profile */}
      <div style={{
        paddingTop: 60, padding: '60px 20px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 12,
          letterSpacing: 3.5, fontWeight: 500,
        }}>REPAIRO</div>
        <div style={{
          width: 36, height: 36, borderRadius: 999, background: SURFACE_ALT,
          fontFamily: '"Instrument Serif", serif', fontSize: 18, fontStyle: 'italic',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: INK,
        }}>m</div>
      </div>

      {/* Editorial headline */}
      <div style={{ padding: '36px 20px 0' }}>
        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 52,
          lineHeight: 0.95, letterSpacing: -1.2, color: INK,
        }}>
          Was ist <span style={{ fontStyle: 'italic' }}>kaputt?</span>
        </div>
        <div style={{
          marginTop: 14, fontSize: 15, lineHeight: 1.45, color: INK_MUTED,
          maxWidth: 320,
        }}>
          Foto machen. KI hilft. Repariere selbst — oder finde einen Profi in deiner Nähe.
        </div>
      </div>

      {/* Big CTA */}
      <div style={{ padding: '32px 20px 0' }}>
        <button onClick={() => go('camera')} style={{
          width: '100%', height: 76, borderRadius: 22, border: 'none',
          background: INK, color: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 22px 0 26px',
          boxShadow: '0 12px 28px rgba(15,15,14,0.18)',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
            <span style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
              letterSpacing: 1.5, opacity: 0.55,
            }}>SCHRITT 1</span>
            <span style={{ fontSize: 19, fontWeight: 500, letterSpacing: -0.3 }}>Problem scannen</span>
          </div>
          <div style={{
            width: 44, height: 44, borderRadius: 999, background: accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{Icon.camera('#fff', 20)}</div>
        </button>
      </div>

      {/* Last diagnosis */}
      <div style={{ padding: '28px 20px 0' }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1.5, color: INK_SUBTLE, marginBottom: 10, paddingLeft: 4,
        }}>LETZTE DIAGNOSE</div>
        <button onClick={() => go('diagnosis')} style={{
          width: '100%', background: SURFACE, borderRadius: 18, border: 'none',
          boxShadow: '0 0 0 1px ' + HAIRLINE,
          display: 'flex', gap: 14, padding: 12, alignItems: 'center',
          cursor: 'pointer', textAlign: 'left',
        }}>
          <div style={{ width: 64, height: 64, borderRadius: 12, overflow: 'hidden', flexShrink: 0 }}>
            <Photo label="prev" tint="#C9C2AC" />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: INK_MUTED, fontFamily: '"JetBrains Mono", monospace', letterSpacing: 0.5 }}>vor 2 Tagen · Sanitär</div>
            <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 22, lineHeight: 1.05, marginTop: 2, color: INK }}>
              {problem.title}
            </div>
            <div style={{ fontSize: 12.5, color: INK_MUTED, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              5 Schritte · selbst gelöst
            </div>
          </div>
          {Icon.chevron(INK_SUBTLE, 14)}
        </button>
      </div>

      {/* Categories */}
      <div style={{ padding: '28px 0 0' }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1.5, color: INK_SUBTLE, marginBottom: 10, padding: '0 24px',
        }}>ODER WÄHLE EINE KATEGORIE</div>
        <div style={{
          display: 'flex', gap: 8, overflowX: 'auto', padding: '0 20px 4px',
          scrollbarWidth: 'none',
        }}>
          {cats.map(c => (
            <button key={c.id} style={{
              padding: '11px 16px', borderRadius: 999, border: '1px solid ' + HAIRLINE,
              background: 'transparent', fontSize: 14, color: INK, cursor: 'pointer',
              whiteSpace: 'nowrap', fontFamily: 'inherit', flexShrink: 0,
            }}>{c.label}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// CAMERA — full-bleed dark viewfinder
// ────────────────────────────────────────────────────────────
function CameraScreen({ go, accent, problem }) {
  return (
    <div style={{ height: '100%', background: '#0A0A09', position: 'relative', overflow: 'hidden' }}>
      {/* Viewfinder = darkened photo placeholder */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <Photo label="camera feed" tint="#3A3631" height="100%" src={problem.cameraImg || problem.heroImg} fit="cover">
          <div style={{
            position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
            background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 100%)',
          }} />
        </Photo>
        {/* dark vignette */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 95%)',
        }} />
      </div>

      <TopBar
        onBack={() => go('home')}
        light
        title="Scan"
        right={
          <button style={{
            width: 40, height: 40, borderRadius: 999, border: 'none',
            background: 'rgba(0,0,0,0.45)', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{Icon.flash('#fff', 18)}</button>
        }
      />

      {/* AI detection hint */}
      <div style={{
        position: 'absolute', top: 120, left: '50%', transform: 'translateX(-50%)',
        zIndex: 10,
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px 8px 12px', borderRadius: 999,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          color: '#fff', letterSpacing: 0.5,
        }}>
          {Icon.sparkle(accent, 14)}
          Objekt erkannt: Wasserhahn
        </div>
      </div>

      {/* Corner brackets */}
      <Brackets />

      {/* Hint text */}
      <div style={{
        position: 'absolute', bottom: 180, left: 0, right: 0, textAlign: 'center', zIndex: 5,
      }}>
        <div style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14, fontWeight: 500 }}>
          Halte das Objekt im Rahmen
        </div>
        <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 12, marginTop: 4 }}>
          Tippe den Auslöser für die Diagnose
        </div>
      </div>

      {/* Camera controls */}
      <div style={{
        position: 'absolute', bottom: 50, left: 0, right: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'space-around',
        padding: '0 32px',
      }}>
        <button style={{
          width: 48, height: 48, borderRadius: 999, border: 'none',
          background: 'rgba(255,255,255,0.12)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11, color: '#fff', fontFamily: '"JetBrains Mono", monospace',
          letterSpacing: 1,
        }}>1×</button>

        <button onClick={() => go('describe')} style={{
          width: 78, height: 78, borderRadius: 999, border: 'none',
          background: 'transparent', cursor: 'pointer', padding: 0,
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 999,
            border: '3px solid #fff',
          }} />
          <div style={{
            position: 'absolute', inset: 6, borderRadius: 999, background: '#fff',
          }} />
        </button>

        <button style={{
          width: 48, height: 48, borderRadius: 999, border: 'none',
          background: 'rgba(255,255,255,0.12)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{Icon.flip('#fff', 20)}</button>
      </div>
    </div>
  );
}

function Brackets() {
  const corner = (style) => (
    <div style={{
      position: 'absolute', width: 28, height: 28, pointerEvents: 'none',
      borderColor: 'rgba(255,255,255,0.8)', ...style,
    }} />
  );
  const T = 2.5, OFF = 64, BOX = 240;
  return (
    <>
      {corner({ top: 200, left: 36, borderTop: `${T}px solid`, borderLeft: `${T}px solid`, borderTopLeftRadius: 8 })}
      {corner({ top: 200, right: 36, borderTop: `${T}px solid`, borderRight: `${T}px solid`, borderTopRightRadius: 8 })}
      {corner({ top: 460, left: 36, borderBottom: `${T}px solid`, borderLeft: `${T}px solid`, borderBottomLeftRadius: 8 })}
      {corner({ top: 460, right: 36, borderBottom: `${T}px solid`, borderRight: `${T}px solid`, borderBottomRightRadius: 8 })}
    </>
  );
}

// ────────────────────────────────────────────────────────────
// DESCRIBE — user adds optional text/voice description after scan
// ────────────────────────────────────────────────────────────
function DescribeScreen({ go, accent, problem }) {
  const [text, setText] = React.useState('');
  const suggestions = [
    'Strahl wird immer schwächer',
    'Tropft trotz geschlossenem Hahn',
    'Macht ein pfeifendes Geräusch',
    'Warmwasser kommt nicht richtig',
  ];

  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      <TopBar
        onBack={() => go('camera')}
        title="Schritt 2 von 2"
        right={
          <button onClick={() => go('analyzing')} style={{
            padding: '8px 14px', borderRadius: 999, border: 'none',
            background: 'transparent', color: INK_MUTED, fontSize: 13,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Überspringen</button>
        }
      />

      <div style={{
        position: 'absolute', top: 100, left: 0, right: 0, bottom: 100,
        overflow: 'auto', padding: '8px 20px 20px',
      }}>
        {/* Mini photo + identified */}
        <div style={{
          display: 'flex', gap: 12, alignItems: 'center',
          padding: 10, background: SURFACE, borderRadius: 14,
          boxShadow: '0 0 0 1px ' + HAIRLINE,
        }}>
          <div style={{ width: 50, height: 50, borderRadius: 10, overflow: 'hidden', flexShrink: 0 }}>
            <Photo label="" tint={problem.tint} height="100%" src={problem.heroImg} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
              letterSpacing: 0.8, color: INK_SUBTLE,
            }}>SCAN ABGESCHLOSSEN</div>
            <div style={{ fontSize: 13.5, color: INK, marginTop: 2, fontWeight: 500 }}>
              {problem.device ? `${problem.device.brand} ${problem.device.model}` : problem.category}
            </div>
          </div>
          <div style={{
            width: 22, height: 22, borderRadius: 999, background: accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>{Icon.check('#fff', 12)}</div>
        </div>

        {/* Headline */}
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          letterSpacing: 1.5, color: INK_SUBTLE, marginTop: 22,
        }}>BESCHREIBE DAS PROBLEM</div>

        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 36,
          lineHeight: 1, letterSpacing: -0.7, color: INK, marginTop: 8,
        }}>
          Was ist <span style={{ fontStyle: 'italic' }}>auffällig?</span>
        </div>

        <div style={{ fontSize: 13.5, lineHeight: 1.45, color: INK_MUTED, marginTop: 10 }}>
          Je genauer du beschreibst, desto präziser die Diagnose. Optional — du kannst auch überspringen.
        </div>

        {/* Textarea */}
        <div style={{
          marginTop: 16, background: SURFACE, borderRadius: 16,
          boxShadow: '0 0 0 1px ' + HAIRLINE,
          padding: 14, position: 'relative',
        }}>
          <textarea
            value={text} onChange={e => setText(e.target.value)}
            placeholder="z. B. Der Strahl ist seit ein paar Wochen viel schwächer, besonders beim Warmwasser …"
            style={{
              width: '100%', border: 'none', outline: 'none', resize: 'none',
              fontFamily: 'inherit', fontSize: 14.5, lineHeight: 1.5, color: INK,
              background: 'transparent', minHeight: 96,
            }}
          />
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            paddingTop: 8, borderTop: '1px solid ' + HAIRLINE, marginTop: 4,
          }}>
            <button style={{
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '5px 10px', borderRadius: 999, border: 'none',
              background: SURFACE_ALT, fontSize: 12, color: INK, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>
              <svg width="12" height="14" viewBox="0 0 12 14" fill="none">
                <rect x="4" y="1" width="4" height="8" rx="2" fill={INK}/>
                <path d="M2 7v1a4 4 0 008 0V7M6 12v1" stroke={INK} strokeWidth="1.4" strokeLinecap="round"/>
              </svg>
              Sprachnotiz
            </button>
            <span style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              color: INK_SUBTLE, letterSpacing: 0.5,
            }}>{text.length} / 500</span>
          </div>
        </div>

        {/* Suggestion chips */}
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1, color: INK_SUBTLE, marginTop: 18, marginBottom: 8,
        }}>HÄUFIG GENANNT</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {suggestions.map(s => (
            <button key={s} onClick={() => setText(t => t ? t + ' · ' + s : s)} style={{
              padding: '8px 12px', borderRadius: 999, border: '1px solid ' + HAIRLINE,
              background: 'transparent', fontSize: 12.5, color: INK, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>+ {s}</button>
          ))}
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{
        position: 'absolute', bottom: 34, left: 20, right: 20,
      }}>
        <button onClick={() => go('analyzing')} style={{
          width: '100%', height: 56, borderRadius: 16, border: 'none',
          background: INK, color: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
        }}>
          {Icon.sparkle('#fff', 14)}
          KI-Analyse starten
        </button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// ANALYZING — auto progresses to diagnosis
// ────────────────────────────────────────────────────────────
function AnalyzingScreen({ go, accent, problem }) {
  const phases = [
    'Erkenne Objekt …',
    'Vergleiche mit Datenbank …',
    'Bewerte Schadensbild …',
    'Erstelle Diagnose …',
  ];
  const [phase, setPhase] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const t1 = setInterval(() => setPhase(p => Math.min(phases.length - 1, p + 1)), 700);
    const t2 = setInterval(() => setProgress(p => Math.min(100, p + 2.5)), 80);
    const done = setTimeout(() => go('diagnosis'), 3200);
    return () => { clearInterval(t1); clearInterval(t2); clearTimeout(done); };
  }, []);

  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      {/* Blurred photo at top */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '50%', filter: 'blur(8px) brightness(0.85)' }}>
        <Photo label="" tint={problem.tint} height="100%" src={problem.heroImg}>
          <div style={{ position: 'absolute', inset: 0, background: problem.tint, opacity: 0.4 }} />
        </Photo>
      </div>

      {/* Scan line animation */}
      <div style={{
        position: 'absolute', top: '50%', left: 0, right: 0, height: 2,
        background: accent, opacity: 0.7, transform: 'translateY(-50%)',
        animation: 'rep-scan 1.8s ease-in-out infinite',
      }} />

      <TopBar onBack={() => go('home')} title="Analyse" />

      {/* Center sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: SURFACE, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '20px 22px 36px',
        boxShadow: '0 -8px 30px rgba(0,0,0,0.06)',
      }}>
        <div style={{ width: 36, height: 4, borderRadius: 4, background: HAIRLINE, margin: '0 auto 18px' }} />

        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1.5, color: INK_SUBTLE, display: 'flex',
          alignItems: 'center', gap: 6,
        }}>
          {Icon.sparkle(accent, 12)} KI-ANALYSE
        </div>

        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 38,
          lineHeight: 1, letterSpacing: -0.8, color: INK, marginTop: 8,
        }}>
          Einen Moment …
        </div>

        {/* Phase text */}
        <div style={{
          marginTop: 18, fontSize: 14, color: INK_MUTED, minHeight: 22,
          transition: 'opacity 0.3s', display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{
            display: 'inline-block', width: 6, height: 6, borderRadius: 999,
            background: accent, animation: 'rep-pulse 1s ease-in-out infinite',
          }} />
          {phases[phase]}
        </div>

        {/* Progress bar */}
        <div style={{
          marginTop: 18, height: 4, borderRadius: 4,
          background: SURFACE_ALT, overflow: 'hidden',
        }}>
          <div style={{
            height: '100%', width: progress + '%', background: INK,
            transition: 'width 0.1s linear',
          }} />
        </div>

        {/* Checks list */}
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {phases.map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 13, color: i <= phase ? INK : INK_SUBTLE,
              opacity: i <= phase ? 1 : 0.5,
            }}>
              <div style={{
                width: 18, height: 18, borderRadius: 999,
                background: i < phase ? INK : 'transparent',
                border: '1.5px solid ' + (i < phase ? INK : HAIRLINE),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {i < phase && Icon.check('#fff', 10)}
              </div>
              {p.replace(' …', '')}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// DIAGNOSIS — photo top + bottom sheet w/ result
// ────────────────────────────────────────────────────────────
function DiagnosisScreen({ go, accent, problem }) {
  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      {/* Photo top */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 320 }}>
        <Photo label="diagnosis input" tint={problem.tint} height="100%" src={problem.heroImg} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 70%, ' + BG + ' 100%)',
        }} />
      </div>

      <TopBar
        onBack={() => go('home')}
        light
        right={
          <button style={{
            padding: '8px 14px', borderRadius: 999, border: 'none',
            background: 'rgba(0,0,0,0.4)', color: '#fff', fontSize: 12,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Speichern</button>
        }
      />

      {/* Identification on photo */}
      <div style={{
        position: 'absolute', top: 210, left: 20, right: 20, zIndex: 10,
        display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 7,
          padding: '7px 11px 7px 9px', borderRadius: 999,
          background: 'rgba(15,15,14,0.85)', backdropFilter: 'blur(8px)',
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10.5,
          color: '#fff', letterSpacing: 0.8,
        }}>
          {Icon.sparkle(accent, 12)}
          KI · {problem.confidence}% SICHER
        </div>
        {problem.device && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
            padding: '6px 11px', borderRadius: 8,
            background: 'rgba(255,255,255,0.95)', fontSize: 11.5, color: INK,
          }}>
            <span style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
              letterSpacing: 0.8, color: INK_MUTED,
            }}>MODELL</span>
            <span style={{ fontWeight: 500 }}>{problem.device.brand} {problem.device.model}</span>
            <span style={{ color: INK_SUBTLE, fontFamily: '"JetBrains Mono", monospace', fontSize: 10 }}>
              {problem.device.article}
            </span>
          </div>
        )}
      </div>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', top: 300, left: 0, right: 0, bottom: 0,
        background: BG, overflow: 'auto', padding: '0 20px 40px',
      }}>
        {/* Category & severity */}
        <div style={{
          display: 'flex', gap: 8, marginTop: 22,
        }}>
          <span style={{
            padding: '5px 10px', borderRadius: 999,
            background: SURFACE_ALT, fontSize: 11.5,
            color: INK, fontWeight: 500,
          }}>{problem.category}</span>
          <span style={{
            padding: '5px 10px', borderRadius: 999,
            background: problem.selfFixable ? '#DCE5D8' : '#F3D9C9',
            color: problem.selfFixable ? '#3F5D3A' : '#8B3A1A',
            fontSize: 11.5, fontWeight: 500,
          }}>
            {problem.selfFixable ? 'Selbst lösbar' : 'Profi empfohlen'}
          </span>
        </div>

        {/* Title */}
        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 40,
          lineHeight: 1, letterSpacing: -0.8, color: INK, marginTop: 14,
        }}>
          {problem.title.split(' ').map((w, i, arr) => (
            <span key={i} style={i === arr.length - 1 ? { fontStyle: 'italic' } : {}}>
              {w}{i < arr.length - 1 ? ' ' : ''}
            </span>
          ))}
        </div>

        {/* Description */}
        <div style={{ fontSize: 14.5, lineHeight: 1.5, color: INK_MUTED, marginTop: 12 }}>
          {problem.summary}
        </div>

        {/* Meta row */}
        <div style={{
          marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          {[
            { icon: Icon.diff(), label: 'Schwierigkeit', value: problem.difficulty },
            { icon: Icon.time(), label: 'Aufwand', value: problem.time },
            { icon: Icon.tools(), label: 'Werkzeug', value: problem.tools },
          ].map((m, i) => (
            <div key={i} style={{
              background: SURFACE, borderRadius: 14, padding: '12px 12px',
              boxShadow: '0 0 0 1px ' + HAIRLINE,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                {m.icon}
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 9,
                  letterSpacing: 0.8, color: INK_SUBTLE, textTransform: 'uppercase',
                }}>{m.label}</span>
              </div>
              <div style={{ fontSize: 13, color: INK, marginTop: 4, fontWeight: 500 }}>{m.value}</div>
            </div>
          ))}
        </div>

        {/* Safety note */}
        {problem.safety && (
          <div style={{
            marginTop: 16, padding: '14px 14px 14px 12px',
            background: '#FBF1E0', borderRadius: 14,
            display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            <div style={{ paddingTop: 1 }}>{Icon.warning('#8B5E15', 18)}</div>
            <div>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
                letterSpacing: 1, color: '#8B5E15', marginBottom: 3,
              }}>SICHERHEIT</div>
              <div style={{ fontSize: 13, color: '#5A3D0E', lineHeight: 1.4 }}>{problem.safety}</div>
            </div>
          </div>
        )}

        {/* Manual found banner */}
        {problem.manual && (
          <div style={{
            marginTop: 18, padding: '14px 14px', background: SURFACE,
            borderRadius: 14, boxShadow: '0 0 0 1px ' + HAIRLINE,
            display: 'flex', gap: 12, alignItems: 'center',
          }}>
            <div style={{
              width: 38, height: 48, borderRadius: 4,
              background: 'linear-gradient(180deg, #EFEAD8, #DCD5BD)',
              boxShadow: 'inset 1px 0 0 rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.08)',
              position: 'relative', flexShrink: 0,
            }}>
              <div style={{
                position: 'absolute', inset: '6px 5px',
                borderTop: '1px solid rgba(15,15,14,0.25)',
                borderBottom: '1px solid rgba(15,15,14,0.15)',
              }} />
              <div style={{
                position: 'absolute', left: 5, right: 5, top: 14, height: 1,
                background: 'rgba(15,15,14,0.1)',
              }} />
              <div style={{
                position: 'absolute', left: 5, right: 8, top: 18, height: 1,
                background: 'rgba(15,15,14,0.1)',
              }} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
                letterSpacing: 1, color: INK_SUBTLE,
              }}>BEDIENUNGSANLEITUNG GEFUNDEN</div>
              <div style={{ fontSize: 13.5, color: INK, marginTop: 2, fontWeight: 500 }}>
                {problem.manual.chapter} · {problem.manual.title}
              </div>
              <div style={{ fontSize: 11, color: INK_MUTED, marginTop: 1 }}>
                S. {problem.manual.pages} · {problem.steps.length} Schritte · {problem.manual.lang}
              </div>
            </div>
          </div>
        )}

        {/* Video tutorial suggestion */}
        {problem.video && (
          <a
            href={`https://www.youtube.com/watch?v=${problem.video.id}`}
            target="_blank" rel="noopener noreferrer"
            style={{
              marginTop: 12, padding: 12, background: SURFACE,
              borderRadius: 14, boxShadow: '0 0 0 1px ' + HAIRLINE,
              display: 'flex', gap: 12, alignItems: 'center',
              textDecoration: 'none', color: 'inherit', cursor: 'pointer',
            }}
          >
            <div style={{
              width: 96, height: 54, borderRadius: 8, flexShrink: 0,
              backgroundImage: `url(https://img.youtube.com/vi/${problem.video.id}/hqdefault.jpg)`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              position: 'relative', overflow: 'hidden',
              boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%)',
              }} />
              <div style={{
                position: 'absolute', left: '50%', top: '50%',
                transform: 'translate(-50%, -50%)',
                width: 26, height: 26, borderRadius: 999,
                background: 'rgba(15,15,14,0.85)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{
                  width: 0, height: 0, marginLeft: 3,
                  borderLeft: '7px solid #fff',
                  borderTop: '5px solid transparent',
                  borderBottom: '5px solid transparent',
                }} />
              </div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
                letterSpacing: 1, color: INK_SUBTLE,
              }}>VIDEO-TUTORIAL · VORGESCHLAGEN</div>
              <div style={{
                fontSize: 13.5, color: INK, marginTop: 2, fontWeight: 500,
                overflow: 'hidden', textOverflow: 'ellipsis',
                display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
              }}>
                {problem.video.title}
              </div>
              <div style={{ fontSize: 11, color: INK_MUTED, marginTop: 1 }}>
                {problem.video.channel}{problem.video.duration ? ' · ' + problem.video.duration : ''}
              </div>
            </div>
          </a>
        )}

        {/* CTAs */}
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button onClick={() => go(problem.manual ? 'manual' : 'steps')} style={{
            height: 56, borderRadius: 16, border: 'none', background: INK, color: '#fff',
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 8, fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
          }}>
            {problem.manual ? 'Anleitung öffnen' : 'Anleitung starten'}
            {Icon.chevron('#fff', 12)}
          </button>
          <button onClick={() => go('pros')} style={{
            height: 56, borderRadius: 16, border: '1px solid ' + HAIRLINE,
            background: 'transparent', color: INK, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 8, fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
          }}>
            Profi in der Nähe finden
          </button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// STEPS — step-by-step instructions
// ────────────────────────────────────────────────────────────
function StepsScreen({ go, accent, problem }) {
  const [i, setI] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const total = problem.steps.length;
  const step = problem.steps[i];

  if (done) {
    return <DoneScreen go={go} accent={accent} />;
  }

  const isManual = !!problem.manual;

  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      <TopBar
        onBack={() => i === 0 ? go(isManual ? 'manual' : 'diagnosis') : setI(i - 1)}
        title={isManual ? `${problem.manual.chapter} · S. ${step.page || ''}` : `Schritt ${i + 1} von ${total}`}
        right={
          <button onClick={() => go('home')} style={{
            width: 40, height: 40, borderRadius: 999, border: 'none',
            background: SURFACE, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 0 1px ' + HAIRLINE,
          }}>{Icon.x(INK, 18)}</button>
        }
      />

      {/* Progress dots */}
      <div style={{
        position: 'absolute', top: 100, left: 20, right: 20,
        display: 'flex', gap: 4, zIndex: 5,
      }}>
        {Array.from({ length: total }).map((_, k) => (
          <div key={k} style={{
            flex: 1, height: 3, borderRadius: 2,
            background: k <= i ? INK : HAIRLINE,
            transition: 'background 0.25s',
          }} />
        ))}
      </div>

      {/* Scrollable content */}
      <div style={{
        position: 'absolute', top: 120, left: 0, right: 0, bottom: 100,
        overflow: 'auto', padding: '14px 20px 30px',
      }}>
        {/* Source line */}
        {isManual && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
            letterSpacing: 1, color: INK_SUBTLE, marginBottom: 8,
          }}>
            <span style={{
              width: 5, height: 5, background: accent, borderRadius: 999, display: 'inline-block',
            }} />
            ORIGINAL · {problem.device.brand} {problem.device.model}
          </div>
        )}

        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          letterSpacing: 1, color: INK_SUBTLE,
        }}>SCHRITT {String(i + 1).padStart(2, '0')} / {String(total).padStart(2,'0')}</div>

        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 32,
          lineHeight: 1.05, letterSpacing: -0.6, color: INK, marginTop: 6,
        }}>
          {step.title}
        </div>

        {/* Manual figure */}
        <ManualFigure step={step} i={i} accent={accent} />

        {/* Body */}
        <div style={{
          fontSize: 15, lineHeight: 1.55, color: INK, marginTop: 16,
        }}>{step.body}</div>

        {/* Specs grid — exact values */}
        {step.specs && step.specs.length > 0 && (
          <div style={{
            marginTop: 16, background: SURFACE, borderRadius: 14,
            boxShadow: '0 0 0 1px ' + HAIRLINE, overflow: 'hidden',
          }}>
            <div style={{
              padding: '10px 14px 8px',
              borderBottom: '1px solid ' + HAIRLINE,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                letterSpacing: 1, color: INK_SUBTLE,
              }}>EXAKTE WERTE</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                letterSpacing: 0.5, color: INK_SUBTLE,
              }}>laut Handbuch</span>
            </div>
            {step.specs.map(([k, v], n) => (
              <div key={n} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '10px 14px',
                borderBottom: n < step.specs.length - 1 ? '1px solid ' + HAIRLINE : 'none',
              }}>
                <span style={{ fontSize: 13, color: INK_MUTED }}>{k}</span>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 13,
                  color: INK, fontWeight: 500,
                }}>{v}</span>
              </div>
            ))}
          </div>
        )}

        {/* Callouts legend */}
        {step.callouts && step.callouts.length > 0 && (
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {step.callouts.map(([k, v], n) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999, background: INK,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontFamily: '"Instrument Serif", serif',
                  fontStyle: 'italic', fontSize: 13, flexShrink: 0,
                }}>{k}</span>
                <span style={{ fontSize: 13, color: INK }}>{v}</span>
              </div>
            ))}
          </div>
        )}

        {step.tip && (
          <div style={{
            marginTop: 16, padding: '12px 14px', background: SURFACE,
            borderRadius: 14, boxShadow: '0 0 0 1px ' + HAIRLINE,
            display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            {Icon.sparkle(accent, 16)}
            <div style={{ fontSize: 13, color: INK_MUTED, lineHeight: 1.5, flex: 1 }}>
              <span style={{ color: INK, fontWeight: 500 }}>KI-Tipp · </span>{step.tip}
            </div>
          </div>
        )}

        {step.warn && (
          <div style={{
            marginTop: 14, padding: '12px 14px', background: '#FBF1E0',
            borderRadius: 14, display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            {Icon.warning('#8B5E15', 16)}
            <div style={{ fontSize: 13, color: '#5A3D0E', lineHeight: 1.5, flex: 1 }}>
              <span style={{ fontWeight: 500 }}>Achtung · </span>{step.warn}
            </div>
          </div>
        )}
      </div>

      {/* Bottom action */}
      <div style={{
        position: 'absolute', bottom: 34, left: 20, right: 20,
        display: 'flex', gap: 10,
      }}>
        {i > 0 && (
          <button onClick={() => setI(i - 1)} style={{
            width: 56, height: 56, borderRadius: 16, border: '1px solid ' + HAIRLINE,
            background: SURFACE, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{Icon.back(INK, 20)}</button>
        )}
        <button
          onClick={() => i + 1 === total ? setDone(true) : setI(i + 1)}
          style={{
            flex: 1, height: 56, borderRadius: 16, border: 'none',
            background: INK, color: '#fff', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 8, fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
          }}>
          {i + 1 === total ? 'Fertig' : 'Weiter · Schritt ' + (i + 2)}
          {Icon.chevron('#fff', 12)}
        </button>
      </div>
    </div>
  );
}

// Technical line-art diagrams per step — drawn like a real Bedienungsanleitung
function ManualDiagram({ stepId }) {
  const INK_LINE = '#1A1A18';
  const T = 1.6;
  const FILL = '#FBF8EE';
  const SHADE = '#E7DFC2';
  const ACC = '#C5573A';

  // Helper: dimension line with arrows + label
  const dim = (x1, y, x2, label, above = true) => (
    <g>
      <line x1={x1} y1={y} x2={x2} y2={y} stroke={INK_LINE} strokeWidth="0.7" />
      <polygon points={`${x1},${y} ${x1+5},${y-3} ${x1+5},${y+3}`} fill={INK_LINE} />
      <polygon points={`${x2},${y} ${x2-5},${y-3} ${x2-5},${y+3}`} fill={INK_LINE} />
      <text x={(x1+x2)/2} y={above ? y-5 : y+11} fontSize="9" fontFamily="JetBrains Mono, monospace"
            textAnchor="middle" fill={INK_LINE}>{label}</text>
    </g>
  );

  const callout = (x, y, letter, tx, ty) => (
    <g>
      <line x1={x} y1={y} x2={tx} y2={ty} stroke={INK_LINE} strokeWidth="0.8" />
      <circle cx={tx} cy={ty} r="11" fill="#fff" stroke={INK_LINE} strokeWidth="1.4" />
      <text x={tx} y={ty+4} fontSize="13" fontFamily="Instrument Serif, serif" fontStyle="italic"
            textAnchor="middle" fill={INK_LINE}>{letter}</text>
      <circle cx={x} cy={y} r="1.8" fill={INK_LINE} />
    </g>
  );

  // Step 0 — Wasser absperren: shut-off valve under sink
  if (stepId === 0 || stepId === 'shutoff') {
    return (
      <svg viewBox="0 0 360 210" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* wall */}
        <line x1="0" y1="160" x2="360" y2="160" stroke={INK_LINE} strokeWidth={T}/>
        <pattern id="hatch1" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke={INK_LINE} strokeWidth="0.4"/>
        </pattern>
        <rect x="0" y="160" width="360" height="50" fill="url(#hatch1)" />
        {/* pipe from wall */}
        <rect x="140" y="140" width="20" height="22" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        <rect x="200" y="140" width="20" height="22" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        {/* Eckventil body — cold (left) */}
        <path d="M120 110 L120 140 L180 140 L180 110 Z" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        <rect x="135" y="92" width="30" height="20" fill={SHADE} stroke={INK_LINE} strokeWidth={T}/>
        {/* handle — turned (with arrow indicating rotation) */}
        <circle cx="150" cy="85" r="12" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        <line x1="150" y1="73" x2="150" y2="97" stroke={INK_LINE} strokeWidth={T}/>
        <line x1="138" y1="85" x2="162" y2="85" stroke={INK_LINE} strokeWidth={T}/>
        {/* rotation arrow */}
        <path d="M170 78 A18 18 0 0 0 168 100" fill="none" stroke={ACC} strokeWidth="1.6"/>
        <polygon points="168,100 165,93 172,95" fill={ACC}/>
        <text x="178" y="78" fontSize="10" fontFamily="JetBrains Mono, monospace" fill={ACC}>↺</text>
        {/* Eckventil body — warm (right) */}
        <path d="M195 110 L195 140 L255 140 L255 110 Z" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        <rect x="210" y="92" width="30" height="20" fill={SHADE} stroke={INK_LINE} strokeWidth={T}/>
        <circle cx="225" cy="85" r="12" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        <line x1="225" y1="73" x2="225" y2="97" stroke={INK_LINE} strokeWidth={T}/>
        <line x1="213" y1="85" x2="237" y2="85" stroke={INK_LINE} strokeWidth={T}/>
        {/* flex hoses going up */}
        <path d="M150 92 Q150 50 200 40 Q250 50 225 92" fill="none" stroke={INK_LINE} strokeWidth={T} strokeDasharray="3,3"/>
        {/* labels */}
        <text x="150" y="172" fontSize="9" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>KALT</text>
        <text x="225" y="172" fontSize="9" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>WARM</text>
        {/* callouts */}
        {callout(150, 70, 'A', 60, 50)}
        {callout(200, 40, 'B', 310, 35)}
        {/* dim */}
        {dim(120, 195, 255, '135 mm', false)}
      </svg>
    );
  }

  // Step 1 — Mousseur ausbauen
  if (stepId === 1 || stepId === 'remove') {
    return (
      <svg viewBox="0 0 360 210" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* faucet spout pointing down */}
        <path d="M40 30 L40 70 Q40 95 60 100 L150 100 Q170 100 170 80 L170 70 L150 70 L150 80 Q150 90 140 90 L70 90 Q60 90 60 80 L60 30 Z"
              fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        {/* exploded view — mousseur parts moving down-right */}
        {/* outer housing */}
        <g transform="translate(180,75)">
          <ellipse cx="0" cy="0" rx="18" ry="6" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <path d="M-18 0 L-18 18 L18 18 L18 0" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <ellipse cx="0" cy="18" rx="18" ry="6" fill="none" stroke={INK_LINE} strokeWidth={T}/>
          {/* thread lines */}
          <line x1="-14" y1="4" x2="14" y2="4" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="-14" y1="9" x2="14" y2="9" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="-14" y1="14" x2="14" y2="14" stroke={INK_LINE} strokeWidth="0.6"/>
        </g>
        {/* O-Ring */}
        <ellipse cx="240" cy="105" rx="14" ry="4" fill="none" stroke={INK_LINE} strokeWidth={T} strokeDasharray="2,2"/>
        {/* mesh insert */}
        <g transform="translate(290,115)">
          <ellipse cx="0" cy="0" rx="16" ry="5" fill={SHADE} stroke={INK_LINE} strokeWidth={T}/>
          <path d="M-16 0 L-16 10 L16 10 L16 0" fill={SHADE} stroke={INK_LINE} strokeWidth={T}/>
          <ellipse cx="0" cy="10" rx="16" ry="5" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <line x1="-12" y1="2" x2="12" y2="2" stroke={INK_LINE} strokeWidth="0.5"/>
        </g>
        {/* dashed exploded lines */}
        <line x1="170" y1="80" x2="180" y2="80" stroke={INK_LINE} strokeWidth="0.6" strokeDasharray="2,2"/>
        <line x1="198" y1="93" x2="226" y2="103" stroke={INK_LINE} strokeWidth="0.6" strokeDasharray="2,2"/>
        <line x1="254" y1="107" x2="274" y2="115" stroke={INK_LINE} strokeWidth="0.6" strokeDasharray="2,2"/>
        {/* wrench */}
        <g transform="translate(120,150) rotate(-15)">
          <rect x="-50" y="-6" width="60" height="12" fill={FILL} stroke={INK_LINE} strokeWidth={T} rx="2"/>
          <path d="M10 -10 L30 -10 L30 -2 L20 -2 L20 2 L30 2 L30 10 L10 10 Z" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <text x="-25" y="3" fontSize="7" fontFamily="JetBrains Mono, monospace" fill={INK_LINE}>28 100</text>
        </g>
        {/* rotation arrow */}
        <path d="M195 50 A22 22 0 0 0 165 50" fill="none" stroke={ACC} strokeWidth="1.6"/>
        <polygon points="165,50 168,43 172,52" fill={ACC}/>
        <text x="180" y="42" fontSize="8" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={ACC}>↺ AUF</text>
        {/* callouts */}
        {callout(190, 90, 'C', 190, 18)}
        {callout(115, 142, 'D', 60, 178)}
        {callout(240, 105, 'E', 250, 168)}
      </svg>
    );
  }

  // Step 2 — Mischung ansetzen (measuring + jar)
  if (stepId === 2 || stepId === 'mix') {
    return (
      <svg viewBox="0 0 360 210" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* measuring jug on left */}
        <g transform="translate(70,60)">
          <path d="M-32 0 L-30 110 L30 110 L32 0 Z" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <path d="M32 5 L42 12 L42 22 L32 18" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          {/* water level */}
          <path d="M-31 35 L31 35" stroke="#3A5A8C" strokeWidth="1.4"/>
          <path d="M-30 36 Q0 38 30 36 L30 110 L-30 110 Z" fill="#D6E0EE" opacity="0.8"/>
          {/* ticks */}
          <line x1="-32" y1="25" x2="-26" y2="25" stroke={INK_LINE} strokeWidth="0.8"/>
          <text x="-36" y="28" fontSize="7" fontFamily="JetBrains Mono, monospace" textAnchor="end" fill={INK_LINE}>500</text>
          <line x1="-32" y1="40" x2="-26" y2="40" stroke={INK_LINE} strokeWidth="0.8"/>
          <text x="-36" y="43" fontSize="7" fontFamily="JetBrains Mono, monospace" textAnchor="end" fill={INK_LINE}>400</text>
          <line x1="-32" y1="55" x2="-26" y2="55" stroke={INK_LINE} strokeWidth="0.8"/>
          <text x="-36" y="58" fontSize="7" fontFamily="JetBrains Mono, monospace" textAnchor="end" fill={INK_LINE}>300</text>
          <line x1="-32" y1="70" x2="-26" y2="70" stroke={INK_LINE} strokeWidth="0.8"/>
          <text x="-36" y="73" fontSize="7" fontFamily="JetBrains Mono, monospace" textAnchor="end" fill={INK_LINE}>200</text>
          <line x1="-32" y1="85" x2="-26" y2="85" stroke={INK_LINE} strokeWidth="0.8"/>
          <text x="-36" y="88" fontSize="7" fontFamily="JetBrains Mono, monospace" textAnchor="end" fill={INK_LINE}>100</text>
          {/* fill arrow */}
          <line x1="36" y1="35" x2="50" y2="35" stroke={ACC} strokeWidth="1.4"/>
          <polygon points="36,35 42,32 42,38" fill={ACC}/>
          <text x="54" y="38" fontSize="8" fontFamily="JetBrains Mono, monospace" fill={ACC}>400 ml H₂O</text>
        </g>
        {/* plus sign */}
        <text x="180" y="135" fontSize="32" fontFamily="Instrument Serif, serif" textAnchor="middle" fill={INK_LINE}>+</text>
        {/* powder scoop on right */}
        <g transform="translate(260,90)">
          {/* spoon */}
          <ellipse cx="0" cy="0" rx="32" ry="14" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <line x1="32" y1="0" x2="80" y2="-10" stroke={INK_LINE} strokeWidth={T} strokeLinecap="round"/>
          {/* powder mound */}
          <path d="M-28 -2 Q-15 -16 0 -18 Q15 -16 28 -2 Z" fill={SHADE} stroke={INK_LINE} strokeWidth="1"/>
          {/* dots = granules */}
          <circle cx="-10" cy="-8" r="1" fill={INK_LINE}/>
          <circle cx="5" cy="-12" r="1" fill={INK_LINE}/>
          <circle cx="15" cy="-7" r="1" fill={INK_LINE}/>
          <circle cx="-5" cy="-14" r="1" fill={INK_LINE}/>
        </g>
        {/* labels */}
        <text x="260" y="148" fontSize="9" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>100 g E330</text>
        <text x="70" y="190" fontSize="9" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>40 °C · 400 ml</text>
        {/* callouts */}
        {callout(70, 100, 'F', 30, 30)}
        {callout(260, 75, 'G', 320, 30)}
        {/* ratio */}
        <g transform="translate(180,180)">
          <rect x="-30" y="-12" width="60" height="22" rx="3" fill="#fff" stroke={INK_LINE} strokeWidth="1"/>
          <text x="0" y="3" fontSize="11" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>1 : 4</text>
        </g>
      </svg>
    );
  }

  // Step 3 — Mousseur einlegen
  if (stepId === 3 || stepId === 'soak') {
    return (
      <svg viewBox="0 0 360 210" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* jar */}
        <g transform="translate(180,30)">
          {/* lid */}
          <rect x="-50" y="0" width="100" height="14" rx="2" fill={SHADE} stroke={INK_LINE} strokeWidth={T}/>
          <line x1="-50" y1="7" x2="50" y2="7" stroke={INK_LINE} strokeWidth="0.6"/>
          {/* body */}
          <path d="M-55 14 L-55 30 L-50 35 L-50 150 Q-50 160 -40 160 L40 160 Q50 160 50 150 L50 35 L55 30 L55 14 Z"
                fill="rgba(214,224,238,0.6)" stroke={INK_LINE} strokeWidth={T}/>
          {/* liquid surface */}
          <path d="M-50 50 Q0 53 50 50" fill="none" stroke="#3A5A8C" strokeWidth="1.4"/>
          <path d="M-50 50 Q0 53 50 50 L50 150 Q50 160 40 160 L-40 160 Q-50 160 -50 150 Z"
                fill="#D6E0EE" opacity="0.7"/>
          {/* bubbles */}
          <circle cx="-25" cy="100" r="3" fill="none" stroke="#3A5A8C" strokeWidth="0.8"/>
          <circle cx="-18" cy="80" r="2" fill="none" stroke="#3A5A8C" strokeWidth="0.8"/>
          <circle cx="20" cy="120" r="4" fill="none" stroke="#3A5A8C" strokeWidth="0.8"/>
          <circle cx="28" cy="95" r="2.5" fill="none" stroke="#3A5A8C" strokeWidth="0.8"/>
          <circle cx="5" cy="135" r="3" fill="none" stroke="#3A5A8C" strokeWidth="0.8"/>
          {/* mousseur submerged */}
          <g transform="translate(0,110)">
            <ellipse cx="0" cy="0" rx="14" ry="4" fill={FILL} stroke={INK_LINE} strokeWidth="1.4"/>
            <path d="M-14 0 L-14 16 L14 16 L14 0" fill={FILL} stroke={INK_LINE} strokeWidth="1.4"/>
            <ellipse cx="0" cy="16" rx="14" ry="4" fill={SHADE} stroke={INK_LINE} strokeWidth="1.4"/>
            <line x1="-11" y1="4" x2="11" y2="4" stroke={INK_LINE} strokeWidth="0.5"/>
            <line x1="-11" y1="9" x2="11" y2="9" stroke={INK_LINE} strokeWidth="0.5"/>
            <line x1="-11" y1="13" x2="11" y2="13" stroke={INK_LINE} strokeWidth="0.5"/>
          </g>
        </g>
        {/* timer */}
        <g transform="translate(50,90)">
          <circle cx="0" cy="0" r="24" fill="#fff" stroke={INK_LINE} strokeWidth={T}/>
          <line x1="0" y1="-24" x2="0" y2="-20" stroke={INK_LINE} strokeWidth="1"/>
          <line x1="0" y1="20" x2="0" y2="24" stroke={INK_LINE} strokeWidth="1"/>
          <line x1="-24" y1="0" x2="-20" y2="0" stroke={INK_LINE} strokeWidth="1"/>
          <line x1="24" y1="0" x2="20" y2="0" stroke={INK_LINE} strokeWidth="1"/>
          <line x1="0" y1="0" x2="0" y2="-16" stroke={ACC} strokeWidth="1.8"/>
          <line x1="0" y1="0" x2="12" y2="6" stroke={INK_LINE} strokeWidth="1.4"/>
          <circle cx="0" cy="0" r="1.8" fill={INK_LINE}/>
        </g>
        <text x="50" y="138" fontSize="10" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>30 min</text>
        {/* thermometer */}
        <g transform="translate(310,90)">
          <rect x="-5" y="-30" width="10" height="50" rx="5" fill="#fff" stroke={INK_LINE} strokeWidth={T}/>
          <circle cx="0" cy="22" r="9" fill={ACC} stroke={INK_LINE} strokeWidth={T}/>
          <rect x="-3" y="0" width="6" height="22" fill={ACC}/>
          <line x1="6" y1="-20" x2="10" y2="-20" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="6" y1="-10" x2="10" y2="-10" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="6" y1="0" x2="10" y2="0" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="6" y1="10" x2="10" y2="10" stroke={INK_LINE} strokeWidth="0.6"/>
        </g>
        <text x="310" y="138" fontSize="10" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>40 °C</text>
        {/* callouts */}
        {callout(180, 110, 'H', 235, 175)}
        {callout(180, 25, 'I', 105, 175)}
      </svg>
    );
  }

  // Step 4 — Spülen, prüfen, einbauen
  if (stepId === 4 || stepId === 'reinstall') {
    return (
      <svg viewBox="0 0 360 210" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* faucet spout */}
        <path d="M40 30 L40 70 Q40 95 60 100 L150 100 Q170 100 170 80 L170 70 L150 70 L150 80 Q150 90 140 90 L70 90 Q60 90 60 80 L60 30 Z"
              fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
        {/* water stream */}
        <g>
          <line x1="158" y1="100" x2="158" y2="200" stroke="#3A5A8C" strokeWidth="1.2"/>
          <line x1="160" y1="100" x2="160" y2="200" stroke="#3A5A8C" strokeWidth="1.2"/>
          <line x1="162" y1="100" x2="162" y2="200" stroke="#3A5A8C" strokeWidth="1.2"/>
          <line x1="156" y1="105" x2="156" y2="200" stroke="#3A5A8C" strokeWidth="1"/>
          <line x1="164" y1="105" x2="164" y2="200" stroke="#3A5A8C" strokeWidth="1"/>
          {/* droplets */}
          <ellipse cx="158" cy="180" rx="2" ry="4" fill="#3A5A8C"/>
          <ellipse cx="162" cy="190" rx="2" ry="4" fill="#3A5A8C"/>
        </g>
        {/* assembly diagram on right */}
        <g transform="translate(260,60)">
          {/* mousseur with O-ring highlighted */}
          <ellipse cx="0" cy="0" rx="22" ry="7" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <path d="M-22 0 L-22 24 L22 24 L22 0" fill={FILL} stroke={INK_LINE} strokeWidth={T}/>
          <ellipse cx="0" cy="24" rx="22" ry="7" fill={SHADE} stroke={INK_LINE} strokeWidth={T}/>
          <line x1="-18" y1="5" x2="18" y2="5" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="-18" y1="11" x2="18" y2="11" stroke={INK_LINE} strokeWidth="0.6"/>
          <line x1="-18" y1="17" x2="18" y2="17" stroke={INK_LINE} strokeWidth="0.6"/>
          {/* O-ring highlighted in accent */}
          <ellipse cx="0" cy="-4" rx="20" ry="3" fill="none" stroke={ACC} strokeWidth="2"/>
        </g>
        {/* torque indicator */}
        <g transform="translate(260,140)">
          <rect x="-40" y="-12" width="80" height="22" rx="3" fill="#fff" stroke={INK_LINE} strokeWidth="1"/>
          <text x="0" y="3" fontSize="10" fontFamily="JetBrains Mono, monospace" textAnchor="middle" fill={INK_LINE}>3 Nm · ¼ Drehung</text>
        </g>
        {/* rotation arrow on mousseur */}
        <path d="M295 50 A24 24 0 0 1 295 90" fill="none" stroke={ACC} strokeWidth="1.6"/>
        <polygon points="295,90 290,82 300,82" fill={ACC}/>
        {/* callouts */}
        {callout(155, 85, 'C', 165, 30)}
        {callout(260, 56, 'E', 340, 25)}
        {callout(160, 160, 'J', 90, 175)}
      </svg>
    );
  }

  // fallback
  return null;
}

// Manual figure — looks like a scanned manual diagram with FIG label + callout pins
function ManualFigure({ step, i, accent }) {
  const callouts = step.callouts || [];
  // Spread callout pins over the figure area
  const pinPositions = [
    { x: '24%', y: '34%' }, { x: '64%', y: '28%' },
    { x: '38%', y: '68%' }, { x: '76%', y: '60%' },
    { x: '18%', y: '78%' },
  ];
  return (
    <div style={{
      marginTop: 16, borderRadius: 14, overflow: 'hidden', position: 'relative',
      background: '#FBF8EE',
      boxShadow: '0 0 0 1px ' + HAIRLINE,
    }}>
      {/* Manual page frame header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '8px 12px', borderBottom: '1px dashed ' + HAIRLINE,
        fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
        letterSpacing: 1, color: INK_MUTED,
      }}>
        <span>{step.figure || `FIG. ${i + 1}`}</span>
        <span>S. {step.page || '—'}</span>
      </div>

      {/* Figure area — real manual image when available, synthetic diagram otherwise */}
      <div style={{ height: 240, position: 'relative', background: '#FBF8EE' }}>
        {/* graph paper backdrop */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage:
            'linear-gradient(rgba(15,15,14,0.05) 1px, transparent 1px),' +
            'linear-gradient(90deg, rgba(15,15,14,0.05) 1px, transparent 1px)',
          backgroundSize: '14px 14px',
          pointerEvents: 'none',
        }} />

        {step.img ? (
          <img
            src={step.img}
            alt={step.figure || `Schritt ${i + 1}`}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'contain', padding: 12,
              filter: 'drop-shadow(0 1px 0 rgba(0,0,0,0.04))',
            }}
          />
        ) : (
          <ManualDiagram stepId={step.id || i} />
        )}

        {/* Step number badge */}
        <div style={{
          position: 'absolute', bottom: 10, right: 10,
          padding: '4px 9px', borderRadius: 4, background: INK, color: '#fff',
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: 1,
        }}>SCHRITT {String(i + 1).padStart(2,'0')}</div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// MANUAL — "Bedienungsanleitung gefunden" intro
// ────────────────────────────────────────────────────────────
function ManualScreen({ go, accent, problem }) {
  if (!problem.manual || !problem.device) {
    React.useEffect(() => { go('steps'); }, []);
    return null;
  }
  const m = problem.manual;
  const d = problem.device;
  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'auto' }}>
      <TopBar onBack={() => go('diagnosis')} title="Handbuch" />

      <div style={{ padding: '100px 20px 30px' }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1.5, color: INK_SUBTLE,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {Icon.sparkle(accent, 12)} BEDIENUNGSANLEITUNG GEFUNDEN
        </div>

        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 42,
          lineHeight: 0.98, letterSpacing: -0.9, color: INK, marginTop: 10,
        }}>
          {d.brand} <span style={{ fontStyle: 'italic' }}>{d.model}</span>
        </div>

        {/* Manual cover preview */}
        <div style={{
          marginTop: 20, display: 'flex', gap: 14, alignItems: 'stretch',
        }}>
          {/* Book cover mock */}
          <div style={{
            width: 110, height: 150, position: 'relative', flexShrink: 0,
            background: 'linear-gradient(180deg, #2A2722 0%, #1A1814 100%)',
            borderRadius: '3px 7px 7px 3px',
            boxShadow: '0 8px 20px rgba(0,0,0,0.18), inset 4px 0 0 rgba(0,0,0,0.3)',
            padding: '14px 12px 10px 18px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: '#E8E2CC',
          }}>
            <div>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 8,
                letterSpacing: 1.5, opacity: 0.6,
              }}>BEDIENUNGSANLEITUNG</div>
              <div style={{
                fontFamily: '"Instrument Serif", serif', fontSize: 14,
                lineHeight: 1, marginTop: 6, letterSpacing: -0.2,
              }}>{d.brand}</div>
              <div style={{
                fontFamily: '"Instrument Serif", serif', fontSize: 11,
                fontStyle: 'italic', marginTop: 3, opacity: 0.8, lineHeight: 1.1,
              }}>{d.model}</div>
            </div>
            <div>
              <div style={{
                width: '60%', height: 1, background: 'rgba(232,226,204,0.4)', marginBottom: 6,
              }} />
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 7.5,
                letterSpacing: 1, opacity: 0.55,
              }}>{m.revised}</div>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 7.5,
                letterSpacing: 1, opacity: 0.55, marginTop: 2,
              }}>{m.total} S. · {m.lang.split('·').length} SPRACHEN</div>
            </div>
          </div>

          {/* Device meta */}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              background: SURFACE, borderRadius: 14, padding: '12px 14px',
              boxShadow: '0 0 0 1px ' + HAIRLINE,
            }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
                letterSpacing: 1, color: INK_SUBTLE, marginBottom: 8,
              }}>IDENTIFIZIERT</div>
              {[
                ['Marke', d.brand],
                ['Art-Nr', d.article],
                ['Baujahr', d.year],
                ['Serie', d.serial],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: 'flex', justifyContent: 'space-between',
                  fontSize: 11.5, padding: '3px 0',
                }}>
                  <span style={{ color: INK_MUTED }}>{k}</span>
                  <span style={{
                    fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: INK,
                  }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Exploded view from manual */}
        {problem.overviewImg && (
          <div style={{ marginTop: 20 }}>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              letterSpacing: 1, color: INK_SUBTLE, marginBottom: 8, paddingLeft: 4,
            }}>EXPLOSIONSZEICHNUNG · S. {m.pages.split('–')[0]}</div>
            <div style={{
              borderRadius: 14, overflow: 'hidden', background: '#F1ECDB',
              boxShadow: '0 0 0 1px ' + HAIRLINE, height: 200,
            }}>
              <Photo
                label={`FIG. ${m.chapter}.0 · gesamtansicht`}
                src={problem.overviewImg}
                tint="#F1ECDB" height="100%" fit="contain"
              />
            </div>
          </div>
        )}

        {/* YouTube service video — exactly this model */}
        {m.video && (
          <div style={{ marginTop: 22 }}>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              letterSpacing: 1, color: INK_SUBTLE, marginBottom: 8, paddingLeft: 4,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{
                padding: '2px 6px', borderRadius: 3, background: '#FF0033', color: '#fff',
                fontSize: 8.5, letterSpacing: 1, fontWeight: 600,
              }}>YOUTUBE</span>
              SERVICE-VIDEO · GENAU DIESES MODELL
            </div>
            <a href={m.video.url} target="_blank" rel="noopener" style={{
              display: 'block', textDecoration: 'none', color: 'inherit',
              borderRadius: 14, overflow: 'hidden', background: '#0F0F0E',
              boxShadow: '0 0 0 1px ' + HAIRLINE,
            }}>
              <div style={{ position: 'relative', height: 170, background: '#1a1a1a' }}>
                <Photo label="" src={m.video.thumb} tint="#1a1a1a" height="100%" fit="cover" />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%)',
                }} />
                {/* Play button */}
                <div style={{
                  position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 62, height: 44, borderRadius: 10,
                  background: '#FF0033',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 4px 14px rgba(0,0,0,0.4)',
                }}>
                  <svg width="22" height="22" viewBox="0 0 22 22"><path d="M6 4l13 7-13 7V4z" fill="#fff"/></svg>
                </div>
                {/* Duration chip */}
                <div style={{
                  position: 'absolute', bottom: 8, right: 8,
                  padding: '3px 7px', borderRadius: 4,
                  background: 'rgba(0,0,0,0.85)', color: '#fff',
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                }}>{m.video.duration}</div>
                {/* Match badge */}
                <div style={{
                  position: 'absolute', top: 10, left: 10,
                  padding: '4px 8px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.95)', color: INK,
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
                  letterSpacing: 0.8, display: 'flex', alignItems: 'center', gap: 4,
                }}>
                  {Icon.sparkle(accent, 10)} 100 % MATCH
                </div>
              </div>
              <div style={{ padding: '12px 14px', background: '#fff' }}>
                <div style={{
                  fontSize: 14, fontWeight: 500, color: INK, lineHeight: 1.3,
                }}>{m.video.title}</div>
                <div style={{
                  fontSize: 11.5, color: INK_MUTED, marginTop: 4,
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  <span style={{
                    width: 16, height: 16, borderRadius: 999, background: '#FF0033',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 8, color: '#fff', fontWeight: 700,
                  }}>G</span>
                  {m.video.channel}
                  <span style={{ color: HAIRLINE }}>·</span>
                  <span>{m.video.views}</span>
                </div>
              </div>
            </a>
          </div>
        )}

        {/* Current chapter */}
        <div style={{
          marginTop: 20, padding: '14px 16px', borderRadius: 14,
          background: INK, color: '#fff',
        }}>
          <div style={{
            fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
            letterSpacing: 1, opacity: 0.55,
          }}>RELEVANTES KAPITEL</div>
          <div style={{
            fontFamily: '"Instrument Serif", serif', fontSize: 24, lineHeight: 1.1,
            marginTop: 4, letterSpacing: -0.3,
          }}>{m.chapter} · {m.title}</div>
          <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>
            S. {m.pages} · {problem.steps.length} Schritte mit Original-Diagrammen
          </div>
        </div>

        {/* TOC */}
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          letterSpacing: 1, color: INK_SUBTLE, marginTop: 22, marginBottom: 8, paddingLeft: 4,
        }}>INHALT</div>
        <div style={{
          background: SURFACE, borderRadius: 14, overflow: 'hidden',
          boxShadow: '0 0 0 1px ' + HAIRLINE,
        }}>
          {m.toc.map((t, n) => (
            <div key={n} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '11px 14px',
              borderBottom: n < m.toc.length - 1 ? '1px solid ' + HAIRLINE : 'none',
              background: t.active ? '#F6F1DE' : 'transparent',
            }}>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                color: t.active ? INK : INK_SUBTLE, width: 28,
              }}>S.{String(t.p).padStart(2, '0')}</span>
              <span style={{
                fontSize: 14, color: INK, flex: 1,
                fontWeight: t.active ? 500 : 400,
              }}>{t.label}</span>
              {t.active && (
                <span style={{
                  padding: '2px 8px', borderRadius: 999, background: accent,
                  color: '#fff', fontSize: 10,
                  fontFamily: '"JetBrains Mono", monospace', letterSpacing: 0.5,
                }}>JETZT</span>
              )}
            </div>
          ))}
        </div>

        <button onClick={() => go('steps')} style={{
          width: '100%', height: 56, borderRadius: 16, border: 'none', background: INK,
          color: '#fff', cursor: 'pointer', marginTop: 22,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 8, fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
        }}>
          Schritt-für-Schritt starten
          {Icon.chevron('#fff', 12)}
        </button>
        <button onClick={() => go('pros')} style={{
          width: '100%', height: 48, borderRadius: 14, border: '1px solid ' + HAIRLINE,
          background: 'transparent', color: INK, cursor: 'pointer', marginTop: 8,
          fontSize: 14, fontFamily: 'inherit',
        }}>
          Lieber einen Profi rufen
        </button>
      </div>
    </div>
  );
}

function DoneScreen({ go, accent }) {
  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      <TopBar
        right={
          <button onClick={() => go('home')} style={{
            width: 40, height: 40, borderRadius: 999, border: 'none',
            background: SURFACE, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 0 1px ' + HAIRLINE,
          }}>{Icon.x(INK, 18)}</button>
        }
      />
      <div style={{
        position: 'absolute', top: 130, left: 20, right: 20,
      }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          letterSpacing: 1.5, color: INK_SUBTLE,
        }}>ANLEITUNG ABGESCHLOSSEN</div>
        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 52, lineHeight: 0.95,
          letterSpacing: -1.2, color: INK, marginTop: 14,
        }}>
          Hat es <span style={{ fontStyle: 'italic' }}>funktioniert?</span>
        </div>
        <div style={{ fontSize: 15, color: INK_MUTED, marginTop: 14, lineHeight: 1.5 }}>
          Deine Rückmeldung verbessert die KI für alle.
        </div>

        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button onClick={() => go('home')} style={{
            height: 56, borderRadius: 16, border: 'none',
            background: INK, color: '#fff', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: accent,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>{Icon.check('#fff', 12)}</span>
            Ja, repariert
          </button>
          <button onClick={() => go('pros')} style={{
            height: 56, borderRadius: 16, border: '1px solid ' + HAIRLINE,
            background: 'transparent', color: INK, cursor: 'pointer',
            fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
          }}>
            Nein — Profi finden
          </button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// PROS — map + bottom sheet with handymen
// ────────────────────────────────────────────────────────────
function ProsScreen({ go, accent, problem, openPro }) {
  const [filter, setFilter] = React.useState('all');

  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      {/* Map */}
      <MapView accent={accent} />

      <TopBar
        onBack={() => go('diagnosis')}
        light
        title="Handwerker"
        right={
          <button style={{
            width: 40, height: 40, borderRadius: 999, border: 'none',
            background: 'rgba(0,0,0,0.5)', cursor: 'pointer',
            color: '#fff', fontSize: 11, fontFamily: '"JetBrains Mono", monospace',
            letterSpacing: 0.5,
          }}>2km</button>
        }
      />

      {/* Top context chip */}
      <div style={{
        position: 'absolute', top: 100, left: 20, right: 20, zIndex: 5,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <div style={{
          padding: '8px 12px', borderRadius: 12,
          background: 'rgba(15,15,14,0.85)', backdropFilter: 'blur(8px)',
          color: '#fff', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {Icon.sparkle(accent, 13)}
          Anfrage zu „{problem.title}"
        </div>
      </div>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: BG, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '14px 0 30px',
        boxShadow: '0 -12px 30px rgba(0,0,0,0.08)',
        height: 470,
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 4, background: HAIRLINE, margin: '0 auto 14px' }} />

        <div style={{ padding: '0 20px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{
            fontFamily: '"Instrument Serif", serif', fontSize: 26,
            letterSpacing: -0.5, color: INK,
          }}>4 Profis in der Nähe</div>
          <div style={{
            fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            color: INK_SUBTLE, letterSpacing: 1,
          }}>SORTIERT · NÄHE</div>
        </div>

        {/* Filter chips */}
        <div style={{
          display: 'flex', gap: 6, padding: '12px 20px 4px', overflowX: 'auto',
          flexShrink: 0,
        }}>
          {[
            { id: 'all', label: 'Alle' },
            { id: 'sanitaer', label: 'Sanitär' },
            { id: 'elektrik', label: 'Elektrik' },
            { id: 'heute', label: 'Heute frei' },
            { id: 'top', label: 'Top bewertet' },
          ].map(f => (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{
              padding: '7px 13px', borderRadius: 999, fontSize: 12.5,
              border: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
              background: filter === f.id ? INK : 'transparent',
              color: filter === f.id ? '#fff' : INK,
              boxShadow: filter === f.id ? 'none' : '0 0 0 1px ' + HAIRLINE,
              fontFamily: 'inherit',
            }}>{f.label}</button>
          ))}
        </div>

        {/* Cards */}
        <div style={{ overflowY: 'auto', padding: '8px 16px 0', flex: 1 }}>
          {HANDYMEN.map(h => (
            <button key={h.id} onClick={() => openPro(h)} style={{
              width: '100%', display: 'flex', gap: 12, alignItems: 'center',
              padding: '12px', background: SURFACE, borderRadius: 16, marginBottom: 8,
              border: 'none', cursor: 'pointer', textAlign: 'left',
              boxShadow: '0 0 0 1px ' + HAIRLINE,
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 14, overflow: 'hidden', flexShrink: 0,
                background: h.tint,
              }}>
                <Photo label="" tint={h.tint} height="100%" />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 15, fontWeight: 500, color: INK }}>{h.name}</span>
                  {h.verified && (
                    <span style={{
                      width: 14, height: 14, borderRadius: 999, background: accent,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}>{Icon.check('#fff', 8)}</span>
                  )}
                </div>
                <div style={{ fontSize: 12, color: INK_MUTED, marginTop: 2 }}>{h.specialty}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 5 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 11.5, color: INK }}>
                    {Icon.star(INK, 11)}{h.rating}
                    <span style={{ color: INK_SUBTLE }}>({h.reviews})</span>
                  </span>
                  <span style={{ color: HAIRLINE }}>·</span>
                  <span style={{ fontSize: 11.5, color: INK_MUTED }}>{h.distance}</span>
                  <span style={{ color: HAIRLINE }}>·</span>
                  <span style={{
                    fontSize: 11, color: h.available ? '#3F5D3A' : INK_MUTED,
                    fontWeight: 500,
                  }}>{h.available ? '● heute' : 'morgen'}</span>
                </div>
              </div>
              {Icon.chevron(INK_SUBTLE, 12)}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function MapView({ accent }) {
  return (
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 410, background: '#E5E0D2', overflow: 'hidden' }}>
      {/* Grid */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
        <defs>
          <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
            <path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(15,15,14,0.06)" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)"/>
        {/* Streets */}
        <path d="M-10 180 L420 130" stroke="rgba(255,255,255,0.7)" strokeWidth="12"/>
        <path d="M-10 180 L420 130" stroke="rgba(15,15,14,0.04)" strokeWidth="13" fill="none"/>
        <path d="M120 -10 L180 450" stroke="rgba(255,255,255,0.7)" strokeWidth="9"/>
        <path d="M-10 280 L420 320" stroke="rgba(255,255,255,0.55)" strokeWidth="7"/>
        <path d="M280 -10 L320 450" stroke="rgba(255,255,255,0.55)" strokeWidth="6"/>
        {/* Park */}
        <rect x="220" y="200" width="120" height="80" rx="8" fill="rgba(120,140,80,0.25)"/>
        <rect x="40" y="60" width="60" height="80" rx="4" fill="rgba(15,15,14,0.05)"/>
        <rect x="320" y="60" width="60" height="50" rx="4" fill="rgba(15,15,14,0.05)"/>
      </svg>

      {/* Pins */}
      {[
        { x: 80, y: 240, big: true },
        { x: 200, y: 180 },
        { x: 290, y: 280 },
        { x: 150, y: 320 },
        { x: 340, y: 200 },
      ].map((p, i) => (
        <div key={i} style={{
          position: 'absolute', left: p.x, top: p.y, transform: 'translate(-50%, -100%)',
        }}>
          {p.big ? (
            <div style={{
              position: 'relative', filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.18))',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999, background: '#fff',
                border: '3px solid ' + INK,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{Icon.pin(INK, 22)}</div>
              <div style={{
                position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%) rotate(45deg)',
                width: 10, height: 10, background: '#fff', border: '3px solid ' + INK,
                borderTop: 'none', borderLeft: 'none',
              }} />
            </div>
          ) : (
            <div style={{
              width: 26, height: 26, borderRadius: 999, background: INK,
              border: '2px solid #fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
            }}>{Icon.pin('#fff', 14)}</div>
          )}
        </div>
      ))}

      {/* "You are here" */}
      <div style={{
        position: 'absolute', left: 175, top: 145, transform: 'translate(-50%, -50%)',
      }}>
        <div style={{
          width: 16, height: 16, borderRadius: 999, background: accent,
          border: '3px solid #fff', boxShadow: '0 0 0 8px ' + accent + '33',
        }} />
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// PRO DETAIL / REQUEST
// ────────────────────────────────────────────────────────────
function ProDetailScreen({ go, accent, problem, pro, onSend }) {
  const [msg, setMsg] = React.useState(
    `Hallo ${pro.name.split(' ')[0]}, meine Repairo-Diagnose zeigt: ${problem.title}. Können Sie nächste Woche vorbeikommen?`
  );

  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'auto' }}>
      <TopBar onBack={() => go('pros')} title="Profil" />

      <div style={{ padding: '110px 20px 30px' }}>
        {/* Header */}
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <div style={{ width: 70, height: 70, borderRadius: 18, overflow: 'hidden' }}>
            <Photo label="" tint={pro.tint} height="100%" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: INK_MUTED, fontFamily: '"JetBrains Mono", monospace', letterSpacing: 0.8 }}>
              {pro.specialty.toUpperCase()}
            </div>
            <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 28, lineHeight: 1, color: INK, marginTop: 4 }}>
              {pro.name}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12.5, color: INK }}>
                {Icon.star(INK, 11)}<strong style={{ fontWeight: 500 }}>{pro.rating}</strong>
                <span style={{ color: INK_SUBTLE }}>({pro.reviews})</span>
              </span>
              <span style={{ color: HAIRLINE }}>·</span>
              <span style={{ fontSize: 12.5, color: INK_MUTED }}>{pro.distance}</span>
            </div>
          </div>
        </div>

        {/* Stats */}
        <div style={{
          marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          background: SURFACE, borderRadius: 16, padding: '14px 0',
          boxShadow: '0 0 0 1px ' + HAIRLINE,
        }}>
          {[
            { v: pro.years + 'J', l: 'Erfahrung' },
            { v: pro.jobs + '+', l: 'Aufträge' },
            { v: '~' + pro.response, l: 'Antwort' },
          ].map((s, i) => (
            <div key={i} style={{
              textAlign: 'center',
              borderLeft: i > 0 ? '1px solid ' + HAIRLINE : 'none',
            }}>
              <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 22, color: INK }}>{s.v}</div>
              <div style={{ fontSize: 11, color: INK_MUTED, marginTop: 2 }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Bio */}
        <div style={{ fontSize: 14, lineHeight: 1.55, color: INK_MUTED, marginTop: 18 }}>
          {pro.bio}
        </div>

        {/* Specialties */}
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          color: INK_SUBTLE, letterSpacing: 1, marginTop: 22, marginBottom: 8,
        }}>SPEZIALISIERT AUF</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {pro.specialties.map(s => (
            <span key={s} style={{
              padding: '6px 11px', borderRadius: 999, fontSize: 12,
              background: SURFACE, color: INK,
              boxShadow: '0 0 0 1px ' + HAIRLINE,
            }}>{s}</span>
          ))}
        </div>

        {/* Message */}
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          color: INK_SUBTLE, letterSpacing: 1, marginTop: 22, marginBottom: 8,
        }}>DEINE NACHRICHT</div>
        <div style={{
          background: SURFACE, borderRadius: 16,
          boxShadow: '0 0 0 1px ' + HAIRLINE, padding: 14,
        }}>
          <div style={{
            fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5,
            color: INK_SUBTLE, letterSpacing: 0.8, marginBottom: 8,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            {Icon.sparkle(accent, 11)} ANGEHÄNGT · DIAGNOSE & FOTO
          </div>
          <textarea
            value={msg} onChange={e => setMsg(e.target.value)}
            style={{
              width: '100%', border: 'none', outline: 'none', resize: 'none',
              fontFamily: 'inherit', fontSize: 14, lineHeight: 1.5, color: INK,
              background: 'transparent', minHeight: 80,
            }}
          />
        </div>

        <button onClick={onSend} style={{
          width: '100%', height: 56, borderRadius: 16, border: 'none', background: INK,
          color: '#fff', cursor: 'pointer', marginTop: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
        }}>
          {Icon.send('#fff', 18)} Anfrage senden
        </button>
        <div style={{
          textAlign: 'center', fontSize: 11.5, color: INK_SUBTLE, marginTop: 10,
        }}>Kostenlose Anfrage · keine Verpflichtung</div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// SENT
// ────────────────────────────────────────────────────────────
function SentScreen({ go, accent, pro }) {
  return (
    <div style={{ height: '100%', background: BG, position: 'relative', overflow: 'hidden' }}>
      <TopBar
        right={
          <button onClick={() => go('home')} style={{
            width: 40, height: 40, borderRadius: 999, border: 'none',
            background: SURFACE, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 0 1px ' + HAIRLINE,
          }}>{Icon.x(INK, 18)}</button>
        }
      />
      <div style={{ padding: '130px 20px 30px' }}>
        <div style={{
          width: 64, height: 64, borderRadius: 999, background: accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 22,
        }}>{Icon.check('#fff', 28)}</div>

        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          letterSpacing: 1.5, color: INK_SUBTLE,
        }}>ANFRAGE GESENDET</div>

        <div style={{
          fontFamily: '"Instrument Serif", serif', fontSize: 44, lineHeight: 1,
          letterSpacing: -1, color: INK, marginTop: 12,
        }}>
          {pro.name.split(' ')[0]} meldet sich <span style={{ fontStyle: 'italic' }}>bald.</span>
        </div>

        <div style={{ fontSize: 15, color: INK_MUTED, marginTop: 14, lineHeight: 1.5 }}>
          Antwortzeit normalerweise unter {pro.response}. Du bekommst eine Push-Nachricht, sobald geantwortet wurde.
        </div>

        <div style={{
          marginTop: 28, padding: '16px', background: SURFACE, borderRadius: 16,
          boxShadow: '0 0 0 1px ' + HAIRLINE,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, overflow: 'hidden' }}>
            <Photo label="" tint={pro.tint} height="100%" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: INK }}>{pro.name}</div>
            <div style={{ fontSize: 12, color: INK_MUTED, marginTop: 1 }}>{pro.specialty}</div>
          </div>
          <button style={{
            padding: '8px 14px', borderRadius: 999, border: '1px solid ' + HAIRLINE,
            background: 'transparent', fontSize: 12.5, color: INK, fontFamily: 'inherit',
            cursor: 'pointer',
          }}>Chat</button>
        </div>

        <button onClick={() => go('home')} style={{
          width: '100%', height: 56, borderRadius: 16, border: 'none', background: INK,
          color: '#fff', cursor: 'pointer', marginTop: 24,
          fontSize: 16, fontWeight: 500, fontFamily: 'inherit',
        }}>
          Zurück zur Übersicht
        </button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Static data
// ────────────────────────────────────────────────────────────
const HANDYMEN = [
  {
    id: 'thomas', name: 'Thomas Brandt', specialty: 'Sanitär · Bad & Küche',
    rating: 4.9, reviews: 142, distance: '0.8 km', available: true, verified: true,
    tint: '#C5B9A0', years: 18, jobs: 600, response: '2 h',
    bio: 'Selbstständiger Sanitärmeister im Bezirk seit 18 Jahren. Schwerpunkt: Armaturen, Abflüsse, Boiler.',
    specialties: ['Armaturen', 'Abflüsse', 'Heizung', 'Notdienst'],
  },
  {
    id: 'mira', name: 'Mira Köhler', specialty: 'Sanitär & Heizung',
    rating: 4.8, reviews: 89, distance: '1.4 km', available: true, verified: true,
    tint: '#B8B19C', years: 9, jobs: 320, response: '1 h',
    bio: 'Frauen-geführter Familienbetrieb. Schnell, sauber, faire Preise.',
    specialties: ['Armaturen', 'Toiletten', 'Heizung'],
  },
  {
    id: 'jonas', name: 'Jonas Weber', specialty: 'Allround Handwerk',
    rating: 4.7, reviews: 56, distance: '1.9 km', available: false, verified: false,
    tint: '#A8A28C', years: 6, jobs: 180, response: '4 h',
    bio: 'Kleinere Reparaturen und Renovierungen. Wochenenden möglich.',
    specialties: ['Kleinreparaturen', 'Möbel', 'Sanitär'],
  },
  {
    id: 'aydin', name: 'Aydın Şahin', specialty: 'Sanitär · 24/7 Notdienst',
    rating: 4.9, reviews: 211, distance: '2.4 km', available: true, verified: true,
    tint: '#BFB39A', years: 22, jobs: 980, response: '30 min',
    bio: 'Notdienst rund um die Uhr. Wasserschaden, Rohrbruch, verstopfte Abflüsse.',
    specialties: ['Notdienst', 'Rohrbruch', 'Wasserschaden', 'Armaturen'],
  },
];

// Real reference images — Unsplash (reliable CDN, hot-linkable)
const IMG = {
  faucet:   'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=900&q=80',
  limescale:'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=900&q=80',
  kitchen:  'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80',
  exploded: 'https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?w=900&q=80',
  bathroom: 'https://images.unsplash.com/photo-1620626011761-996317b8d101?w=900&q=80',
  aerator:  'https://images.unsplash.com/photo-1610465299996-30f240ac2b1c?w=900&q=80',
};

const PROBLEMS = {
  faucet: {
    id: 'faucet',
    title: 'Verkalkter Wasserhahn',
    category: 'Sanitär',
    confidence: 94,
    selfFixable: true,
    tint: '#C9C2AC',
    summary: 'Kalkablagerungen in der Mischkartusche bremsen den Wasserdurchlauf und verursachen einen stockenden Strahl. Originalanleitung des Herstellers wurde gefunden.',
    heroImg: './uploads/manual/hero-faucet.png',
    overviewImg: './uploads/manual/overview-anatomy.png',
    cameraImg: 'https://images.unsplash.com/photo-1595428774862-a79ab68dbabb?w=900&q=80',
    video: {
      id: '67I_RPsvVKc',
      title: 'Kartusche richtig fetten und entkalken',
      channel: 'Schritt-für-Schritt auf YouTube',
      duration: '6 min',
    },
    difficulty: 'Leicht',
    time: '~45 min',
    tools: 'Im Haushalt',
    safety: null,
    device: {
      brand: 'GROHE',
      model: 'Eurosmart Cosmopolitan',
      article: '20 187 000',
      year: '2017 – heute',
      serial: 'EUC-23-1148-DE',
    },
    manual: {
      title: 'Kartusche entkalken',
      chapter: 'Wartung',
      pages: '4 – 5',
      lang: 'DE · EN · FR · ES · NL · IT',
      total: 12,
      revised: 'Rev. 03 / 2017',
      toc: [
        { p: 1,  label: 'Sicherheitshinweise' },
        { p: 2,  label: 'Technische Daten' },
        { p: 3,  label: 'Montage' },
        { p: 4,  label: 'Wartung', active: true },
        { p: 9,  label: 'Störungen' },
        { p: 12, label: 'Ersatzteile' },
      ],
    },
    steps: [
      {
        title: 'Wasser absperren',
        body: 'Beide Eckventile unter dem Waschbecken gegen den Uhrzeigersinn vollständig schließen. Anschließend den Flexschlauch (A) mit einem 19 mm Schlüssel von der Versorgung lösen.',
        figure: 'FIG. 1', page: 4,
        img: './uploads/manual/fig-4-1-wasser-absperren.png',
        callouts: [
          ['A', 'Flexschlauch G⅜″ (Versorgung kalt + warm)'],
          ['B', 'Eckventil — gegen Uhrzeigersinn schließen'],
        ],
        specs: [
          ['Restdruck nach Ablauf', '< 0,2 bar'],
          ['Wartezeit', '30 Sek.'],
          ['Schlüsselweite', '19 mm'],
        ],
        tip: 'Tuch ins Becken legen — falls das Werkzeug fällt, bleibt die Keramik unbeschädigt.',
        tint: '#D6CFB8',
      },
      {
        title: 'Hebelgriff & Kappe demontieren',
        body: 'Indexkappe vom Hebelgriff abhebeln, Innensechskantschraube (3 mm) lösen, Griff abziehen. Anschließend die Abdeckkappe von Hand abdrehen — keine Zange direkt auf Chrom.',
        figure: 'FIG. 2', page: 4,
        img: './uploads/manual/fig-4-2-griff-ab.png',
        callouts: [
          ['HOT', 'Linksseitig — Warmwasserkartusche 45 882'],
          ['COLD', 'Rechtsseitig — Kaltwasserkartusche 45 883'],
        ],
        specs: [
          ['Schraube', 'Innensechskant 3 mm'],
          ['Kappe', 'handfest gegen Uhrzeigersinn'],
          ['Schlüsselweite (Kartusche)', '17 mm'],
        ],
        warn: 'Heiß / kalt nicht vertauschen — die Kartuschen sind unterschiedlich vorgespannt.',
        tint: '#CFC8B0',
      },
      {
        title: 'Kartusche entkalken',
        body: 'Kartusche mit 32 mm Schlüssel herausschrauben, vollständig in lebensmittelechte Zitronensäurelösung (1 : 4) eintauchen. Nach 30 min mit weicher Bürste die Steuerscheibe (Detail im Kreis) reinigen.',
        figure: 'FIG. 3', page: 5,
        img: './uploads/manual/fig-4-3-kartusche-entkalken.png',
        callouts: [
          ['!', 'Vor Demontage Druckfreiheit prüfen'],
          ['HOT', 'Kartusche links — höher vorgespannt'],
          ['🔍', 'Steuerscheibe vorsichtig bürsten — nicht kratzen'],
        ],
        specs: [
          ['Zitronensäure (E330)', '100 g'],
          ['Destilliertes Wasser', '400 ml'],
          ['Einwirkzeit', '30 min'],
          ['Temperatur', '35 – 45 °C konstant'],
          ['Schlüsselweite (Lösen)', '32 mm'],
        ],
        warn: 'Keine Essigessenz > 25 % verwenden — greift die EPDM-Dichtungen an und löst die Herstellergarantie auf.',
        tint: '#D9D0B0',
      },
      {
        title: 'Dichtsitz & O-Ringe prüfen',
        body: 'Nach dem Entkalken den Dichtsitz im Gehäuse mit feuchtem Tuch auswischen. Beide O-Ringe (oben + unten) auf Risse prüfen. Bei sichtbarer Beschädigung Dichtsatz 19 017 ersetzen.',
        figure: 'FIG. 4', page: 5,
        img: './uploads/manual/fig-4-4-dichtung.png',
        callouts: [
          ['!', 'Filterscheibe richtig herum einsetzen — Strahlrichtung beachten'],
          ['↓↑', 'Dichtsitz beidseitig prüfen'],
          ['19017', 'Ersatz-Dichtsatz Art-Nr 19 017'],
        ],
        specs: [
          ['Dichtsatz', 'Art-Nr 19 017'],
          ['Schlüsselweite (Sitz)', '13 mm'],
          ['Sichtprüfung', 'keine Risse, keine Verformung'],
        ],
        tip: 'Vor dem Wiedereinbau alle Dichtflächen leicht mit Silikonfett (lebensmittelecht) einreiben.',
        tint: '#CFC8B0',
      },
      {
        title: 'Wiedermontage & Funktionstest',
        body: 'Kartusche, Kappe und Griff in umgekehrter Reihenfolge einbauen. Beide Flexschläuche knickfrei (nicht gewendelt, nicht über Kreuz) anschließen. Eckventile öffnen, 60 Sek. Vollstrahl prüfen.',
        figure: 'FIG. 5', page: 5,
        img: './uploads/manual/fig-4-5-montage-pruefen.png',
        callouts: [
          ['✓', 'Schlauch gerade oder einfach gebogen'],
          ['✗', 'Nicht verdreht, nicht über Kreuz, nicht geknickt'],
        ],
        specs: [
          ['Anzugsmoment (Schlauch)', '15 Nm'],
          ['Mindestradius (Biegung)', 'r ≥ 25 mm'],
          ['Funktionstest', '60 Sek. Vollstrahl'],
        ],
        tip: 'Nach dem Einbau Eckventile langsam öffnen — Druckstoß vermeiden. Strahl muss klar und gerade sein.',
        tint: '#D6CFB8',
      },
    ],
  },
  washer: {
    id: 'washer',
    title: 'Waschmaschine pumpt nicht ab',
    category: 'Haushaltsgeräte',
    confidence: 88,
    selfFixable: false,
    tint: '#B8BCC2',
    summary: 'Die Laugenpumpe oder das Flusensieb sind vermutlich verstopft. Erste Schritte selbst möglich, dann Profi.',
    difficulty: 'Mittel',
    time: '~45 min',
    tools: 'Schraubendreher',
    safety: 'Vor Arbeiten den Stecker ziehen und den Wasserhahn schließen. Restwasser im Trommelbereich.',
    steps: [
      { title: 'Strom & Wasser abdrehen', body: 'Ziehe den Stecker und drehe den Wasserzulauf an der Wand ab.', warn: 'Niemals mit eingestecktem Gerät am Innenraum arbeiten.', tint: '#B8BCC2' },
      { title: 'Flusensieb finden', body: 'Hinter der kleinen Klappe unten an der Front. Stelle eine flache Schale davor — es läuft Wasser raus.', tint: '#BCC0C6' },
      { title: 'Sieb herausdrehen', body: 'Gegen den Uhrzeigersinn herausdrehen. Entferne Fremdkörper (Münzen, Haare, Knöpfe).', tip: 'Münzen sind die Nummer-1-Ursache. Vor dem Waschen Taschen leeren spart die Reparatur.', tint: '#B0B4BA' },
      { title: 'Pumpenrad prüfen', body: 'Greife mit einem Finger in die Öffnung und drehe das Pumpenrad. Es muss frei rotieren.', warn: 'Dreht es nicht frei oder brummt die Pumpe weiter — Profi kontaktieren.', tint: '#B8BCC2' },
      { title: 'Test starten', body: 'Sieb wieder einschrauben, Klappe schließen, Strom + Wasser an, kurzes Programm starten.', tint: '#BCC0C6' },
    ],
  },
  switch: {
    id: 'switch',
    title: 'Defekter Lichtschalter',
    category: 'Elektrik',
    confidence: 91,
    selfFixable: false,
    tint: '#D9CDB0',
    summary: 'Vermutlich lose Kontakte oder defekter Schaltmechanismus. Arbeiten an 230V ausschließlich mit Fachkenntnis.',
    difficulty: 'Hoch',
    time: 'Profi nötig',
    tools: 'Spannungsprüfer',
    safety: 'Arbeiten an 230V können tödlich sein. Wir empfehlen dringend einen Elektriker — die Schritte unten sind nur zur Eingrenzung.',
    steps: [
      { title: 'Sicherung ausschalten', body: 'Schalte im Sicherungskasten den FI-Schutzschalter und die zuständige Sicherung aus.', warn: 'Strom MUSS aus sein. Prüfe mit Spannungsprüfer, bevor du irgendetwas öffnest.', tint: '#D9CDB0' },
      { title: 'Spannungsfreiheit prüfen', body: 'Halte den Spannungsprüfer an beide Kontakte. Keine Anzeige = sicher.', tint: '#D6CAB0' },
      { title: 'Beobachten, nicht reparieren', body: 'Foto vom Schalter und ggf. Klemmen machen, an den Profi senden. Selbst tauschen ist in Deutschland nur Elektrofachkräften erlaubt.', tip: 'Manche Vermieter übernehmen die Kosten — vor Beauftragung kurz nachfragen.', tint: '#D9CDB0' },
    ],
  },
};

Object.assign(window, {
  HomeScreen, CameraScreen, DescribeScreen, AnalyzingScreen, DiagnosisScreen, ManualScreen, StepsScreen,
  DoneScreen, ProsScreen, ProDetailScreen, SentScreen, PROBLEMS, HANDYMEN, Icon,
});