refactor: extract helpers from ReminderDetailDrawer + OfferCreationWizard

- ReminderDetailDrawer (340→257 lines): constants + SectionTitle/DateRow/ActivityEntry → reminderDetailHelpers.tsx - OfferCreationWizard (350→276 lines): PDF step JSX → OfferWizardPdfStep.tsx Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
refactor: extract sub-components from PropertyMarketSignalsTab + NegotiationInsightsPanel
2026-05-24 01:10:31 +02:00 · 2026-05-24 01:08:45 +02:00
9 changed files with 620 additions and 581 deletions
@@ -1,14 +1,15 @@
 import { useEffect, useRef, useState } from 'react'
 import {
  Box, Button, CircularProgress, Dialog, DialogContent,
-  IconButton, LinearProgress, Stack, Step, StepLabel, Stepper,
+  IconButton, Stack, Step, StepLabel, Stepper,
  TextField, Typography,
 } from '@mui/material'
-import { Download, Plus, Send, Trash2, X } from 'lucide-react'
+import { Plus, Trash2, X } from 'lucide-react'
 import type { OfferReportDraft, ViewingAppointmentOption } from '../../domain/offerReport'
 import { offerReportService } from '../../services/offerReportService'
 import { usePropertyById } from '../../hooks/useProperties'
 import { useToastStore } from '../../stores/toastStore'
+import { OfferWizardPdfStep } from './OfferWizardPdfStep'

 interface Props {
  inquiryId: string
@@ -213,94 +214,19 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose

        {/* Step 3: PDF */}
        {step === 3 && (
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 3 }}>
-            {generating ? (
-              <>
-                <CircularProgress size={48} sx={{ color: '#1e3a5f' }} />
-                <Typography variant="body1" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
-                  PDF wird generiert…
-                </Typography>
-                <Box sx={{ width: '100%', maxWidth: 400 }}>
-                  <LinearProgress variant="determinate" value={progress} sx={{ height: 6, borderRadius: 3 }} />
-                  <Typography variant="caption" sx={{ color: '#64748b', display: 'block', textAlign: 'center', mt: 1 }}>
-                    {Math.round(progress)}%
-                  </Typography>
-                </Box>
-              </>
-            ) : ready ? (
-              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, width: '100%' }}>
-                <Box
-                  sx={{
-                    width: '100%',
-                    maxWidth: 520,
-                    height: 380,
-                    bgcolor: '#f8fafc',
-                    border: '1px solid #e2e8f0',
-                    borderRadius: 1.5,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    overflow: 'hidden',
-                  }}
-                >
-                  <Box sx={{ bgcolor: '#1e3a5f', px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#ef4444' }} />
-                    <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#f59e0b' }} />
-                    <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#10b981' }} />
-                    <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.7)', ml: 1, fontSize: '0.7rem' }}>
-                      Angebot_{draft?.propertyId ?? 'Objekt'}.pdf
-                    </Typography>
-                  </Box>
-                  <Box sx={{ flex: 1, p: 3 }}>
-                    <Typography variant="body2" sx={{ fontWeight: 700, color: '#1e3a5f', mb: 1 }}>
-                      Angebotsschreiben
-                    </Typography>
-                    {draft?.editableFields.slice(0, 3).map(f => (
-                      <Box key={f.id} sx={{ mb: 1 }}>
-                        <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.65rem', display: 'block' }}>{f.label}</Typography>
-                        <Typography variant="caption" sx={{ color: '#374151', fontSize: '0.75rem', display: 'block' }}>
-                          {f.value.slice(0, 80)}{f.value.length > 80 ? '…' : ''}
-                        </Typography>
-                      </Box>
-                    ))}
-                    {(draft?.viewingAppointments.length ?? 0) > 0 && (
-                      <Box sx={{ mt: 1.5, p: 1, bgcolor: '#f1f5f9', borderRadius: 1 }}>
-                        <Typography variant="caption" sx={{ fontWeight: 600, fontSize: '0.72rem', display: 'block', mb: 0.5 }}>
-                          Besichtigungstermine
-                        </Typography>
-                        {draft!.viewingAppointments.map(a => (
-                          <Typography key={a.id} variant="caption" sx={{ fontSize: '0.7rem', display: 'block', color: '#475569' }}>
-                            {new Date(a.date).toLocaleDateString('de-CH')} · {a.timeSlot}
-                          </Typography>
-                        ))}
-                      </Box>
-                    )}
-                  </Box>
-                </Box>
-                <Box sx={{ display: 'flex', gap: 1.5 }}>
-                  <Button
-                    variant="contained"
-                    startIcon={<Download size={16} />}
-                    onClick={() => showToast('PDF wird heruntergeladen…', 'info')}
-                    sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
-                  >
-                    Herunterladen
-                  </Button>
-                  <Button
-                    variant="outlined"
-                    startIcon={<Send size={16} />}
-                    onClick={() => {
-                      const label = `Angebot_${property?.title ?? 'Objekt'}.pdf`
-                      onAttach(label)
-                      showToast('Angebot als Anhang hinzugefügt', 'success')
-                    }}
-                    sx={{ textTransform: 'none' }}
-                  >
-                    An Nachricht anhängen
-                  </Button>
-                </Box>
-              </Box>
-            ) : null}
-          </Box>
+          <OfferWizardPdfStep
+            generating={generating}
+            progress={progress}
+            ready={ready}
+            draft={draft}
+            property={property}
+            onDownload={() => showToast('PDF wird heruntergeladen…', 'info')}
+            onAttach={() => {
+              const label = `Angebot_${property?.title ?? 'Objekt'}.pdf`
+              onAttach(label)
+              showToast('Angebot als Anhang hinzugefügt', 'success')
+            }}
+          />
        )}
      </DialogContent>

@@ -0,0 +1,103 @@
+import { Box, Button, CircularProgress, LinearProgress, Typography } from '@mui/material'
+import { Download, Send } from 'lucide-react'
+import type { OfferReportDraft } from '../../domain/offerReport'
+import type { Property } from '../../domain/property'
+
+interface OfferWizardPdfStepProps {
+  generating: boolean
+  progress: number
+  ready: boolean
+  draft: OfferReportDraft | null
+  property: Property | undefined
+  onDownload: () => void
+  onAttach: () => void
+}
+
+export function OfferWizardPdfStep({ generating, progress, ready, draft, property, onDownload, onAttach }: OfferWizardPdfStepProps) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 3 }}>
+      {generating ? (
+        <>
+          <CircularProgress size={48} sx={{ color: '#1e3a5f' }} />
+          <Typography variant="body1" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
+            PDF wird generiert…
+          </Typography>
+          <Box sx={{ width: '100%', maxWidth: 400 }}>
+            <LinearProgress variant="determinate" value={progress} sx={{ height: 6, borderRadius: 3 }} />
+            <Typography variant="caption" sx={{ color: '#64748b', display: 'block', textAlign: 'center', mt: 1 }}>
+              {Math.round(progress)}%
+            </Typography>
+          </Box>
+        </>
+      ) : ready ? (
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, width: '100%' }}>
+          <Box
+            sx={{
+              width: '100%',
+              maxWidth: 520,
+              height: 380,
+              bgcolor: '#f8fafc',
+              border: '1px solid #e2e8f0',
+              borderRadius: 1.5,
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+            }}
+          >
+            <Box sx={{ bgcolor: '#1e3a5f', px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#ef4444' }} />
+              <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#f59e0b' }} />
+              <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#10b981' }} />
+              <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.7)', ml: 1, fontSize: '0.7rem' }}>
+                Angebot_{property?.title ?? 'Objekt'}.pdf
+              </Typography>
+            </Box>
+            <Box sx={{ flex: 1, p: 3 }}>
+              <Typography variant="body2" sx={{ fontWeight: 700, color: '#1e3a5f', mb: 1 }}>
+                Angebotsschreiben
+              </Typography>
+              {draft?.editableFields.slice(0, 3).map(f => (
+                <Box key={f.id} sx={{ mb: 1 }}>
+                  <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.65rem', display: 'block' }}>{f.label}</Typography>
+                  <Typography variant="caption" sx={{ color: '#374151', fontSize: '0.75rem', display: 'block' }}>
+                    {f.value.slice(0, 80)}{f.value.length > 80 ? '…' : ''}
+                  </Typography>
+                </Box>
+              ))}
+              {(draft?.viewingAppointments.length ?? 0) > 0 && (
+                <Box sx={{ mt: 1.5, p: 1, bgcolor: '#f1f5f9', borderRadius: 1 }}>
+                  <Typography variant="caption" sx={{ fontWeight: 600, fontSize: '0.72rem', display: 'block', mb: 0.5 }}>
+                    Besichtigungstermine
+                  </Typography>
+                  {draft!.viewingAppointments.map(a => (
+                    <Typography key={a.id} variant="caption" sx={{ fontSize: '0.7rem', display: 'block', color: '#475569' }}>
+                      {new Date(a.date).toLocaleDateString('de-CH')} · {a.timeSlot}
+                    </Typography>
+                  ))}
+                </Box>
+              )}
+            </Box>
+          </Box>
+          <Box sx={{ display: 'flex', gap: 1.5 }}>
+            <Button
+              variant="contained"
+              startIcon={<Download size={16} />}
+              onClick={onDownload}
+              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+            >
+              Herunterladen
+            </Button>
+            <Button
+              variant="outlined"
+              startIcon={<Send size={16} />}
+              onClick={onAttach}
+              sx={{ textTransform: 'none' }}
+            >
+              An Nachricht anhängen
+            </Button>
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  )
+}
@@ -0,0 +1,238 @@
+import { useEffect, useRef, useState } from 'react'
+import { Box, Button, CircularProgress, Dialog, LinearProgress, Typography } from '@mui/material'
+import { CheckCircle, Download, FileText } from 'lucide-react'
+import type { MarketReport } from '../../domain/marketReport'
+
+const SECTION_COLORS: Record<string, string> = {
+  development: '#1e3a5f',
+  demand: '#1a7a4a',
+  supply: '#b45309',
+  negotiation: '#7c3aed',
+}
+const SECTION_LABELS: Record<string, string> = {
+  development: 'Entwicklungsnews',
+  demand: 'Nachfrage 5 km',
+  supply: 'Angebot 5 km',
+  negotiation: 'Verhandlungshinweise',
+}
+
+interface BerichtDialogProps {
+  onClose: () => void
+  report: MarketReport | null
+  propertyId: string
+}
+
+export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProps) {
+  const [ready, setReady] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    let p = 0
+    timerRef.current = setInterval(() => {
+      p += Math.random() * 18 + 8
+      if (p >= 100) {
+        clearInterval(timerRef.current!)
+        setProgress(100)
+        setReady(true)
+      } else {
+        setProgress(Math.min(100, p))
+      }
+    }, 200)
+    return () => { if (timerRef.current) clearInterval(timerRef.current) }
+  }, [])
+
+  function handleDownload() {
+    const signals = report?.signals ?? []
+    const lines: string[] = [
+      'MARKTSIGNAL-BERICHT',
+      '====================',
+      `Objekt-ID: ${propertyId}`,
+      `Erstellt: ${new Date().toLocaleString('de-CH')}`,
+      '',
+    ]
+    for (const s of signals) {
+      lines.push(`[${SECTION_LABELS[s.category] ?? s.category}]`)
+      lines.push(s.title)
+      lines.push(s.body)
+      if (s.source) lines.push(`Quelle: ${s.source}`)
+      lines.push('')
+    }
+    const blob = new Blob([lines.join('\n')], { type: 'application/pdf' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `Marktsignal-Bericht_${propertyId}.pdf`
+    a.click()
+    URL.revokeObjectURL(url)
+    onClose()
+  }
+
+  const signals = report?.signals ?? []
+  const categories = ['development', 'demand', 'supply', 'negotiation'] as const
+
+  return (
+    <Dialog
+      open
+      onClose={ready ? onClose : undefined}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{ sx: { height: '88vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' } }}
+    >
+      {/* Header */}
+      <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+        <Box>
+          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
+            Bericht erstellen
+          </Typography>
+          <Typography variant="body1" sx={{ fontWeight: 700, color: '#0f172a', fontSize: '0.95rem' }}>
+            Marktsignal-Bericht · {propertyId}
+          </Typography>
+        </Box>
+        {ready && (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <CheckCircle size={14} color="#1a7a4a" />
+            <Typography variant="caption" sx={{ color: '#166534', fontWeight: 600 }}>Bereit</Typography>
+          </Box>
+        )}
+      </Box>
+
+      {/* Generating state */}
+      {!ready && (
+        <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc', flexShrink: 0 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
+            <CircularProgress size={16} />
+            <Typography variant="caption" sx={{ color: '#374151' }}>
+              PDF-Bericht wird generiert…
+            </Typography>
+            <Typography variant="caption" sx={{ color: '#94a3b8', ml: 'auto' }}>{Math.round(progress)}%</Typography>
+          </Box>
+          <LinearProgress
+            variant="determinate"
+            value={progress}
+            sx={{ height: 4, borderRadius: 2, bgcolor: '#e2e8f0', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
+          />
+        </Box>
+      )}
+
+      {/* PDF Preview */}
+      <Box sx={{ flex: 1, overflow: 'auto', bgcolor: '#f1f5f9', p: 3 }}>
+        <Box
+          sx={{
+            bgcolor: 'white',
+            borderRadius: 1.5,
+            border: '1px solid #cbd5e1',
+            boxShadow: '0 4px 16px rgba(15,23,42,0.08)',
+            p: 4,
+            fontFamily: '"Georgia", "Times New Roman", serif',
+            filter: ready ? 'none' : 'blur(1px)',
+            transition: 'filter 0.3s ease',
+            pointerEvents: ready ? 'auto' : 'none',
+          }}
+        >
+          {/* Document header */}
+          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <FileText size={18} color="#1e3a5f" />
+              <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#1e3a5f', fontSize: '0.75rem', letterSpacing: 1, textTransform: 'uppercase' }}>
+                Marktsignal-Bericht
+              </Typography>
+            </Box>
+            <Box sx={{ textAlign: 'right' }}>
+              <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>Wincasa AG · Zürich</Typography>
+              <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>{new Date().toLocaleDateString('de-CH')}</Typography>
+            </Box>
+          </Box>
+
+          <Box sx={{ borderBottom: '2px solid #1e3a5f', mb: 2.5 }} />
+
+          <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '1.1rem', mb: 0.5 }}>
+            Standortintelligenz & Marktsignale
+          </Typography>
+          <Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.825rem', mb: 3 }}>
+            Objekt-ID: {propertyId} · Generiert: {report?.generatedAt ? new Date(report.generatedAt).toLocaleDateString('de-CH') : new Date().toLocaleDateString('de-CH')} · {signals.length} Signale
+          </Typography>
+
+          {/* Sections */}
+          {categories.map(cat => {
+            const catSignals = signals.filter(s => s.category === cat)
+            if (catSignals.length === 0) return null
+            const color = SECTION_COLORS[cat]
+            const label = SECTION_LABELS[cat]
+            return (
+              <Box key={cat} sx={{ mb: 3.5 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1.5, pb: 0.75, borderBottom: `1px solid ${color}22` }}>
+                  <Box sx={{ width: 3, height: 16, bgcolor: color, borderRadius: 1, flexShrink: 0 }} />
+                  <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color, fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                    {label}
+                  </Typography>
+                  <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', ml: 0.5 }}>
+                    ({catSignals.length})
+                  </Typography>
+                </Box>
+                {catSignals.map((s, i) => (
+                  <Box key={s.id} sx={{ mb: i < catSignals.length - 1 ? 2 : 0, pl: 1.5, borderLeft: `2px solid #e2e8f0` }}>
+                    <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.5 }}>
+                      <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '0.875rem', lineHeight: 1.4 }}>
+                        {s.title}
+                      </Typography>
+                      {s.confidence != null && (
+                        <Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.75rem', flexShrink: 0 }}>
+                          KI-Konfidenz: {Math.round(s.confidence * 100)}%
+                        </Typography>
+                      )}
+                    </Box>
+                    <Typography sx={{ fontFamily: 'inherit', color: '#374151', fontSize: '0.825rem', lineHeight: 1.6, mb: 0.5 }}>
+                      {s.body}
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 2 }}>
+                      {s.date && (
+                        <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
+                          {new Date(s.date).toLocaleDateString('de-CH')}
+                        </Typography>
+                      )}
+                      {s.source && (
+                        <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
+                          Quelle: {s.source}
+                        </Typography>
+                      )}
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            )
+          })}
+
+          {signals.length === 0 && (
+            <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.875rem', fontStyle: 'italic', textAlign: 'center', py: 4 }}>
+              Keine Marktsignale für dieses Objekt verfügbar.
+            </Typography>
+          )}
+
+          {/* Footer */}
+          <Box sx={{ borderTop: '1px solid #e2e8f0', mt: 3, pt: 2 }}>
+            <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', textAlign: 'center' }}>
+              Dieser Bericht wurde automatisch auf Basis von KI-generierten Marktsignalen erstellt. · Wincasa AG
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Footer actions */}
+      <Box sx={{ px: 3, py: 1.5, borderTop: '1px solid #e2e8f0', bgcolor: 'white', display: 'flex', justifyContent: 'flex-end', gap: 1, flexShrink: 0 }}>
+        <Button variant="outlined" onClick={onClose} sx={{ textTransform: 'none' }}>
+          Schliessen
+        </Button>
+        <Button
+          variant="contained"
+          startIcon={<Download size={15} />}
+          onClick={handleDownload}
+          disabled={!ready}
+          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+        >
+          Herunterladen
+        </Button>
+      </Box>
+    </Dialog>
+  )
+}
@@ -4,92 +4,7 @@ import { useProperties } from '../../hooks/useProperties'
 import { useNeeds } from '../../hooks/useNeeds'
 import { getCityIntelligence, getMarketRent } from '../../lib/locationIntelligence'
 import type { Property } from '../../domain/property'
-
-// ── Selling argument generator ────────────────────────────────────────────────
-
-interface Argument {
-  title: string
-  detail: string
-  strength: 'strong' | 'medium'
-}
-
-function generateSellingArguments(p: Property): Argument[] {
-  const args: Argument[] = []
-  const sf = p.softFactors
-  const intel = getCityIntelligence(p.location.city)
-
-  if (sf) {
-    const footfall = sf.footfallScore ?? (sf.passerbyFrequency ? { LOW: 0.25, MEDIUM: 0.5, HIGH: 0.78, VERY_HIGH: 0.95 }[sf.passerbyFrequency] ?? 0 : 0)
-    if (footfall >= 0.72)
-      args.push({ title: 'Hervorragende Frequenzlage', detail: 'Überdurchschnittliche Passantenfrequenz — sichert Sichtbarkeit und Kundenzugang.', strength: 'strong' })
-
-    const taxScore = sf.taxEnvironmentScore ?? (intel ? Math.max(0, 1 - intel.taxIndexCanton / 150) : undefined)
-    if (taxScore !== undefined && taxScore >= 0.65)
-      args.push({ title: 'Steuerattraktiver Standort', detail: `${p.location.city} bietet eine günstige Steuerlast${intel ? ` (Index ${intel.taxIndexCanton}, CH = 100)` : ''} — relevant für Unternehmensansiedlungen.`, strength: 'strong' })
-
-    const ov = sf.commuterAccessScore
-    if (ov !== undefined && ov >= 0.72)
-      args.push({ title: 'Sehr gute ÖV-Anbindung', detail: sf.publicTransportMinutes ? `Ca. ${sf.publicTransportMinutes} Min. zum nächsten Bahnhof.` : 'Ausgezeichnete öffentliche Erreichbarkeit.', strength: 'strong' })
-
-    const prestige = sf.prestigeScore ?? (typeof sf.prestige === 'number' ? sf.prestige : undefined)
-    if (prestige !== undefined && prestige >= 0.7)
-      args.push({ title: 'Repräsentativer Standort', detail: 'Hoher Prestige-Wert — ideal für Unternehmen mit Repräsentationsanspruch und Aussenauftritt.', strength: 'strong' })
-
-    const talent = sf.talentAccessScore ?? (typeof sf.talentAccess === 'number' ? sf.talentAccess : undefined)
-    if (talent !== undefined && talent >= 0.65)
-      args.push({ title: 'Grosser Talentpool', detail: 'Zugang zu gut ausgebildeten Fachkräften im Einzugsgebiet — entscheidend für wachsende Unternehmen.', strength: 'medium' })
-
-    if (sf.flexibilityScore !== undefined && sf.flexibilityScore >= 0.65)
-      args.push({ title: 'Flexible Flächengestaltung', detail: 'Grundriss und Ausbaustandard ermöglichen individuelle Anpassungen.', strength: 'medium' })
-
-    if (sf.esgScore !== undefined && sf.esgScore >= 0.7)
-      args.push({ title: 'Nachhaltigkeitszertifizierung', detail: 'Guter ESG-Score — relevant für Unternehmen mit Nachhaltigkeitszielen und ESG-Reporting.', strength: 'medium' })
-  }
-
-  if (p.hardFacts?.isBarrierFree)
-    args.push({ title: 'Barrierefrei', detail: 'Vollständig rollstuhlgängig — gesetzlich zunehmend gefordert.', strength: 'medium' })
-
-  if (p.hardFacts?.parking && p.hardFacts.parking > 0)
-    args.push({ title: `${p.hardFacts.parking} Parkplätze inkl.`, detail: 'Eigene Parkierungsmöglichkeiten — in Städten ein knappes Gut.', strength: 'medium' })
-
-  if (p.hardFacts?.hasServerRoom)
-    args.push({ title: 'Serverraum vorhanden', detail: 'Sofortig nutzbare IT-Infrastruktur — spart Einrichtungskosten.', strength: 'medium' })
-
-  if (intel?.demandStrength === 'VERY_HIGH' || intel?.demandStrength === 'HIGH')
-    args.push({ title: 'Stark nachgefragter Markt', detail: `${p.location.city} verzeichnet ${intel.demandStrength === 'VERY_HIGH' ? 'sehr hohe' : 'hohe'} Nachfrage — kurze Leerstandszeiten zu erwarten.`, strength: 'strong' })
-
-  return args
-}
-
-// ── Proactive weakness acknowledgement ───────────────────────────────────────
-
-interface Weakness {
-  issue: string
-  mitigation: string
-}
-
-function generateWeaknesses(p: Property): Weakness[] {
-  const ws: Weakness[] = []
-  const sf = p.softFactors
-  const intel = getCityIntelligence(p.location.city)
-
-  if (intel && intel.vacancyRatePct >= 5)
-    ws.push({ issue: 'Hohe Leerstandsquote in der Region', mitigation: 'Mietfreie Zeit oder Ausbaukostenbeteiligung als Anreiz anbieten.' })
-
-  if (intel && intel.taxIndexCanton >= 115)
-    ws.push({ issue: 'Überdurchschnittliche Steuerlast', mitigation: 'Andere Standortvorteile (Prestige, ÖV) gezielt hervorheben.' })
-
-  if (sf?.commuterAccessScore !== undefined && sf.commuterAccessScore < 0.45)
-    ws.push({ issue: 'Eingeschränkte ÖV-Anbindung', mitigation: 'Parkplatz-Angebot und Veloinfrastruktur als Alternative betonen.' })
-
-  if (p.hardFacts?.parking === 0 || (p.hardFacts?.parking === undefined && !sf?.parkingSpots))
-    ws.push({ issue: 'Keine eigenen Parkplätze', mitigation: 'Öffentliche Parkhäuser in der Nähe aufzeigen. Ggf. Parkabonnement als Mietbonus anbieten.' })
-
-  if (p.dataQuality.score < 0.65)
-    ws.push({ issue: 'Unvollständige Objektdaten', mitigation: 'Fehlende Angaben vor dem Gespräch vervollständigen, um Vertrauen zu stärken.' })
-
-  return ws
-}
+import { generateSellingArguments, generateWeaknesses } from './negotiationInsightsUtils'

 // ── Main component ────────────────────────────────────────────────────────────

@@ -1,8 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { Alert, Box, Button, Chip, CircularProgress, Dialog, DialogContent, DialogTitle, LinearProgress, Typography } from '@mui/material'
-import { BarChart2, Building2, CheckCircle, Download, FileText, Lightbulb, TrendingUp } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Alert, Box, Button, Chip, CircularProgress, Typography } from '@mui/material'
+import { BarChart2, Building2, FileText, Lightbulb, TrendingUp } from 'lucide-react'
 import { marketReportService } from '../../services/marketReportService'
-import type { MarketReport, PropertyMarketSignal, SignalCategory } from '../../domain/marketReport'
+import type { MarketReport, SignalCategory } from '../../domain/marketReport'
+import { SignalCard } from './SignalCard'
+import { BerichtDialog } from './BerichtDialog'

 interface Props {
  propertyId: string
@@ -15,322 +17,6 @@ const SECTION_CONFIG: { category: SignalCategory; label: string; icon: React.Rea
  { category: 'negotiation', label: 'Verhandlungshinweise', icon: <Lightbulb size={16} />, color: '#7c3aed' },
 ]

-function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
-  return (
-    <Box
-      sx={{
-        p: 1.75,
-        mb: 1.25,
-        borderRadius: 1.5,
-        border: '1px solid #e2e8f0',
-        bgcolor: 'white',
-      }}
-    >
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.75 }}>
-        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', lineHeight: 1.35 }}>
-          {signal.title}
-        </Typography>
-        {signal.confidence != null && (
-          <Chip
-            label={`${Math.round(signal.confidence * 100)}%`}
-            size="small"
-            sx={{ fontSize: '0.62rem', height: 18, flexShrink: 0, bgcolor: '#f0f9ff', color: '#0369a1', border: '1px solid #bae6fd' }}
-          />
-        )}
-      </Box>
-
-      <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.5, display: 'block', mb: signal.source || signal.confidence ? 1 : 0 }}>
-        {signal.body}
-      </Typography>
-
-      {signal.confidence != null && (
-        <Box sx={{ mb: 0.75 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
-            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>KI-Konfidenz</Typography>
-            <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.62rem' }}>{Math.round(signal.confidence * 100)}%</Typography>
-          </Box>
-          <LinearProgress
-            variant="determinate"
-            value={signal.confidence * 100}
-            sx={{
-              height: 3,
-              borderRadius: 2,
-              bgcolor: '#e2e8f0',
-              '& .MuiLinearProgress-bar': { bgcolor: signal.confidence >= 0.8 ? '#1a7a4a' : signal.confidence >= 0.6 ? '#d97706' : '#64748b' },
-            }}
-          />
-        </Box>
-      )}
-
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        {signal.date && (
-          <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>
-            {new Date(signal.date).toLocaleDateString('de-CH')}
-          </Typography>
-        )}
-        {signal.source && (
-          <Box
-            component={signal.sourceUrl ? 'a' : 'span'}
-            href={signal.sourceUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            sx={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 0.375,
-              fontSize: '0.62rem',
-              color: signal.sourceUrl ? '#1e3a5f' : '#94a3b8',
-              textDecoration: 'none',
-              '&:hover': signal.sourceUrl ? { textDecoration: 'underline' } : {},
-            }}
-          >
-            <FileText size={10} />
-            {signal.source}
-          </Box>
-        )}
-      </Box>
-    </Box>
-  )
-}
-
-// ── PDF preview dialog ────────────────────────────────────────────────────────
-
-const SECTION_COLORS: Record<string, string> = {
-  development: '#1e3a5f',
-  demand: '#1a7a4a',
-  supply: '#b45309',
-  negotiation: '#7c3aed',
-}
-const SECTION_LABELS: Record<string, string> = {
-  development: 'Entwicklungsnews',
-  demand: 'Nachfrage 5 km',
-  supply: 'Angebot 5 km',
-  negotiation: 'Verhandlungshinweise',
-}
-
-interface BerichtDialogProps {
-  onClose: () => void
-  report: MarketReport | null
-  propertyId: string
-}
-
-function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProps) {
-  const [ready, setReady] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
-  useEffect(() => {
-    let p = 0
-    timerRef.current = setInterval(() => {
-      p += Math.random() * 18 + 8
-      if (p >= 100) {
-        clearInterval(timerRef.current!)
-        setProgress(100)
-        setReady(true)
-      } else {
-        setProgress(Math.min(100, p))
-      }
-    }, 200)
-    return () => { if (timerRef.current) clearInterval(timerRef.current) }
-  }, [])
-
-  function handleDownload() {
-    const signals = report?.signals ?? []
-    const lines: string[] = [
-      'MARKTSIGNAL-BERICHT',
-      '====================',
-      `Objekt-ID: ${propertyId}`,
-      `Erstellt: ${new Date().toLocaleString('de-CH')}`,
-      '',
-    ]
-    for (const s of signals) {
-      lines.push(`[${SECTION_LABELS[s.category] ?? s.category}]`)
-      lines.push(s.title)
-      lines.push(s.body)
-      if (s.source) lines.push(`Quelle: ${s.source}`)
-      lines.push('')
-    }
-    const blob = new Blob([lines.join('\n')], { type: 'application/pdf' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `Marktsignal-Bericht_${propertyId}.pdf`
-    a.click()
-    URL.revokeObjectURL(url)
-    onClose()
-  }
-
-  const signals = report?.signals ?? []
-  const categories = ['development', 'demand', 'supply', 'negotiation'] as const
-
-  return (
-    <Dialog
-      open
-      onClose={ready ? onClose : undefined}
-      maxWidth="md"
-      fullWidth
-      PaperProps={{ sx: { height: '88vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' } }}
-    >
-      {/* Header */}
-      <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-        <Box>
-          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
-            Bericht erstellen
-          </Typography>
-          <Typography variant="body1" sx={{ fontWeight: 700, color: '#0f172a', fontSize: '0.95rem' }}>
-            Marktsignal-Bericht · {propertyId}
-          </Typography>
-        </Box>
-        {ready && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            <CheckCircle size={14} color="#1a7a4a" />
-            <Typography variant="caption" sx={{ color: '#166534', fontWeight: 600 }}>Bereit</Typography>
-          </Box>
-        )}
-      </Box>
-
-      {/* Generating state */}
-      {!ready && (
-        <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc', flexShrink: 0 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
-            <CircularProgress size={16} />
-            <Typography variant="caption" sx={{ color: '#374151' }}>
-              PDF-Bericht wird generiert…
-            </Typography>
-            <Typography variant="caption" sx={{ color: '#94a3b8', ml: 'auto' }}>{Math.round(progress)}%</Typography>
-          </Box>
-          <LinearProgress
-            variant="determinate"
-            value={progress}
-            sx={{ height: 4, borderRadius: 2, bgcolor: '#e2e8f0', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
-          />
-        </Box>
-      )}
-
-      {/* PDF Preview */}
-      <Box sx={{ flex: 1, overflow: 'auto', bgcolor: '#f1f5f9', p: 3 }}>
-        <Box
-          sx={{
-            bgcolor: 'white',
-            borderRadius: 1.5,
-            border: '1px solid #cbd5e1',
-            boxShadow: '0 4px 16px rgba(15,23,42,0.08)',
-            p: 4,
-            fontFamily: '"Georgia", "Times New Roman", serif',
-            filter: ready ? 'none' : 'blur(1px)',
-            transition: 'filter 0.3s ease',
-            pointerEvents: ready ? 'auto' : 'none',
-          }}
-        >
-          {/* Document header */}
-          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 3 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <FileText size={18} color="#1e3a5f" />
-              <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#1e3a5f', fontSize: '0.75rem', letterSpacing: 1, textTransform: 'uppercase' }}>
-                Marktsignal-Bericht
-              </Typography>
-            </Box>
-            <Box sx={{ textAlign: 'right' }}>
-              <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>Wincasa AG · Zürich</Typography>
-              <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>{new Date().toLocaleDateString('de-CH')}</Typography>
-            </Box>
-          </Box>
-
-          <Box sx={{ borderBottom: '2px solid #1e3a5f', mb: 2.5 }} />
-
-          <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '1.1rem', mb: 0.5 }}>
-            Standortintelligenz & Marktsignale
-          </Typography>
-          <Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.825rem', mb: 3 }}>
-            Objekt-ID: {propertyId} · Generiert: {report?.generatedAt ? new Date(report.generatedAt).toLocaleDateString('de-CH') : new Date().toLocaleDateString('de-CH')} · {signals.length} Signale
-          </Typography>
-
-          {/* Sections */}
-          {categories.map(cat => {
-            const catSignals = signals.filter(s => s.category === cat)
-            if (catSignals.length === 0) return null
-            const color = SECTION_COLORS[cat]
-            const label = SECTION_LABELS[cat]
-            return (
-              <Box key={cat} sx={{ mb: 3.5 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1.5, pb: 0.75, borderBottom: `1px solid ${color}22` }}>
-                  <Box sx={{ width: 3, height: 16, bgcolor: color, borderRadius: 1, flexShrink: 0 }} />
-                  <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color, fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                    {label}
-                  </Typography>
-                  <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', ml: 0.5 }}>
-                    ({catSignals.length})
-                  </Typography>
-                </Box>
-                {catSignals.map((s, i) => (
-                  <Box key={s.id} sx={{ mb: i < catSignals.length - 1 ? 2 : 0, pl: 1.5, borderLeft: `2px solid #e2e8f0` }}>
-                    <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.5 }}>
-                      <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '0.875rem', lineHeight: 1.4 }}>
-                        {s.title}
-                      </Typography>
-                      {s.confidence != null && (
-                        <Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.75rem', flexShrink: 0 }}>
-                          KI-Konfidenz: {Math.round(s.confidence * 100)}%
-                        </Typography>
-                      )}
-                    </Box>
-                    <Typography sx={{ fontFamily: 'inherit', color: '#374151', fontSize: '0.825rem', lineHeight: 1.6, mb: 0.5 }}>
-                      {s.body}
-                    </Typography>
-                    <Box sx={{ display: 'flex', gap: 2 }}>
-                      {s.date && (
-                        <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
-                          {new Date(s.date).toLocaleDateString('de-CH')}
-                        </Typography>
-                      )}
-                      {s.source && (
-                        <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
-                          Quelle: {s.source}
-                        </Typography>
-                      )}
-                    </Box>
-                  </Box>
-                ))}
-              </Box>
-            )
-          })}
-
-          {signals.length === 0 && (
-            <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.875rem', fontStyle: 'italic', textAlign: 'center', py: 4 }}>
-              Keine Marktsignale für dieses Objekt verfügbar.
-            </Typography>
-          )}
-
-          {/* Footer */}
-          <Box sx={{ borderTop: '1px solid #e2e8f0', mt: 3, pt: 2 }}>
-            <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', textAlign: 'center' }}>
-              Dieser Bericht wurde automatisch auf Basis von KI-generierten Marktsignalen erstellt. · Wincasa AG
-            </Typography>
-          </Box>
-        </Box>
-      </Box>
-
-      {/* Footer actions */}
-      <Box sx={{ px: 3, py: 1.5, borderTop: '1px solid #e2e8f0', bgcolor: 'white', display: 'flex', justifyContent: 'flex-end', gap: 1, flexShrink: 0 }}>
-        <Button variant="outlined" onClick={onClose} sx={{ textTransform: 'none' }}>
-          Schliessen
-        </Button>
-        <Button
-          variant="contained"
-          startIcon={<Download size={15} />}
-          onClick={handleDownload}
-          disabled={!ready}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
-        >
-          Herunterladen
-        </Button>
-      </Box>
-    </Dialog>
-  )
-}
-
-// ── Main tab component ────────────────────────────────────────────────────────
-
 export function PropertyMarketSignalsTab({ propertyId }: Props) {
  const [report, setReport] = useState<MarketReport | null>(null)
  const [loading, setLoading] = useState(true)
@@ -18,91 +18,8 @@ import { useReminder, useCompleteReminder, useDismissReminder, useSnoozeReminder
 import { ReminderPriorityBadge } from './ReminderPriorityBadge'
 import { ReminderTypeBadge } from './ReminderTypeBadge'
 import { ReminderDaysIndicator } from './ReminderDaysIndicator'
-import { ReminderStatus, ShadowMarketRisk } from '../../domain/reminder'
-import type { ReminderActivity } from '../../domain/reminder'
-
-const SHADOW_RISK_COLOR: Record<string, string> = {
-  NONE: '#64748b',
-  LOW: '#16a34a',
-  MEDIUM: '#ca8a04',
-  HIGH: '#dc2626',
-}
-
-const SHADOW_RISK_LABEL: Record<string, string> = {
-  NONE: 'Kein Risiko',
-  LOW: 'Niedrig',
-  MEDIUM: 'Mittel',
-  HIGH: 'Hoch',
-}
-
-const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
-  ACTIVE: 'info',
-  SNOOZED: 'warning',
-  COMPLETED: 'success',
-  DISMISSED: 'default',
-}
-
-const STATUS_LABEL: Record<string, string> = {
-  ACTIVE: 'Aktiv',
-  SNOOZED: 'Schlummernd',
-  COMPLETED: 'Erledigt',
-  DISMISSED: 'Verworfen',
-}
-
-const ACTION_LABEL: Record<string, string> = {
-  CREATED: 'Erstellt',
-  SNOOZED: 'Zurückgestellt',
-  COMPLETED: 'Erledigt',
-  DISMISSED: 'Verworfen',
-  NOTED: 'Notiz',
-}
-
-function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-      {icon}
-      <Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#1e293b', fontSize: '0.8125rem' }}>
-        {children}
-      </Typography>
-    </Box>
-  )
-}
-
-function DateRow({ label, value }: { label: string; value?: string }) {
-  if (!value) return null
-  return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 1, alignItems: 'baseline' }}>
-      <Typography variant="caption" color="text.secondary">{label}</Typography>
-      <Typography variant="body2" sx={{ fontWeight: 500 }}>{new Date(value).toLocaleDateString('de-CH')}</Typography>
-    </Box>
-  )
-}
-
-function ActivityEntry({ entry }: { entry: ReminderActivity }) {
-  return (
-    <Box sx={{ display: 'flex', gap: 1.5 }}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
-        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#94a3b8', mt: '4px' }} />
-        <Box sx={{ width: 1, flex: 1, bgcolor: '#e2e8f0', mt: 0.5 }} />
-      </Box>
-      <Box sx={{ pb: 1.5, minWidth: 0 }}>
-        <Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
-          <Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b' }}>
-            {ACTION_LABEL[entry.action]}
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            {entry.by} · {new Date(entry.at).toLocaleDateString('de-CH')}
-          </Typography>
-        </Box>
-        {entry.note && (
-          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
-            {entry.note}
-          </Typography>
-        )}
-      </Box>
-    </Box>
-  )
-}
+import { ReminderStatus } from '../../domain/reminder'
+import { SHADOW_RISK_COLOR, SHADOW_RISK_LABEL, STATUS_CHIP_COLOR, STATUS_LABEL, ACTION_LABEL, SectionTitle, DateRow, ActivityEntry } from './reminderDetailHelpers'

 export function ReminderDetailDrawer() {
  const { selectedId, drawerOpen, setDrawerOpen, setSelectedId } = useReminderStore()
@@ -0,0 +1,81 @@
+import { Box, Chip, LinearProgress, Typography } from '@mui/material'
+import { FileText } from 'lucide-react'
+import type { PropertyMarketSignal } from '../../domain/marketReport'
+
+export function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
+  return (
+    <Box
+      sx={{
+        p: 1.75,
+        mb: 1.25,
+        borderRadius: 1.5,
+        border: '1px solid #e2e8f0',
+        bgcolor: 'white',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.75 }}>
+        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', lineHeight: 1.35 }}>
+          {signal.title}
+        </Typography>
+        {signal.confidence != null && (
+          <Chip
+            label={`${Math.round(signal.confidence * 100)}%`}
+            size="small"
+            sx={{ fontSize: '0.62rem', height: 18, flexShrink: 0, bgcolor: '#f0f9ff', color: '#0369a1', border: '1px solid #bae6fd' }}
+          />
+        )}
+      </Box>
+
+      <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.5, display: 'block', mb: signal.source || signal.confidence ? 1 : 0 }}>
+        {signal.body}
+      </Typography>
+
+      {signal.confidence != null && (
+        <Box sx={{ mb: 0.75 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
+            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>KI-Konfidenz</Typography>
+            <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.62rem' }}>{Math.round(signal.confidence * 100)}%</Typography>
+          </Box>
+          <LinearProgress
+            variant="determinate"
+            value={signal.confidence * 100}
+            sx={{
+              height: 3,
+              borderRadius: 2,
+              bgcolor: '#e2e8f0',
+              '& .MuiLinearProgress-bar': { bgcolor: signal.confidence >= 0.8 ? '#1a7a4a' : signal.confidence >= 0.6 ? '#d97706' : '#64748b' },
+            }}
+          />
+        </Box>
+      )}
+
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        {signal.date && (
+          <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>
+            {new Date(signal.date).toLocaleDateString('de-CH')}
+          </Typography>
+        )}
+        {signal.source && (
+          <Box
+            component={signal.sourceUrl ? 'a' : 'span'}
+            href={signal.sourceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 0.375,
+              fontSize: '0.62rem',
+              color: signal.sourceUrl ? '#1e3a5f' : '#94a3b8',
+              textDecoration: 'none',
+              '&:hover': signal.sourceUrl ? { textDecoration: 'underline' } : {},
+            }}
+          >
+            <FileText size={10} />
+            {signal.source}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}
@@ -0,0 +1,88 @@
+import { getCityIntelligence } from '../../lib/locationIntelligence'
+import type { Property } from '../../domain/property'
+
+// ── Selling argument generator ────────────────────────────────────────────────
+
+export interface Argument {
+  title: string
+  detail: string
+  strength: 'strong' | 'medium'
+}
+
+export function generateSellingArguments(p: Property): Argument[] {
+  const args: Argument[] = []
+  const sf = p.softFactors
+  const intel = getCityIntelligence(p.location.city)
+
+  if (sf) {
+    const footfall = sf.footfallScore ?? (sf.passerbyFrequency ? { LOW: 0.25, MEDIUM: 0.5, HIGH: 0.78, VERY_HIGH: 0.95 }[sf.passerbyFrequency] ?? 0 : 0)
+    if (footfall >= 0.72)
+      args.push({ title: 'Hervorragende Frequenzlage', detail: 'Überdurchschnittliche Passantenfrequenz — sichert Sichtbarkeit und Kundenzugang.', strength: 'strong' })
+
+    const taxScore = sf.taxEnvironmentScore ?? (intel ? Math.max(0, 1 - intel.taxIndexCanton / 150) : undefined)
+    if (taxScore !== undefined && taxScore >= 0.65)
+      args.push({ title: 'Steuerattraktiver Standort', detail: `${p.location.city} bietet eine günstige Steuerlast${intel ? ` (Index ${intel.taxIndexCanton}, CH = 100)` : ''} — relevant für Unternehmensansiedlungen.`, strength: 'strong' })
+
+    const ov = sf.commuterAccessScore
+    if (ov !== undefined && ov >= 0.72)
+      args.push({ title: 'Sehr gute ÖV-Anbindung', detail: sf.publicTransportMinutes ? `Ca. ${sf.publicTransportMinutes} Min. zum nächsten Bahnhof.` : 'Ausgezeichnete öffentliche Erreichbarkeit.', strength: 'strong' })
+
+    const prestige = sf.prestigeScore ?? (typeof sf.prestige === 'number' ? sf.prestige : undefined)
+    if (prestige !== undefined && prestige >= 0.7)
+      args.push({ title: 'Repräsentativer Standort', detail: 'Hoher Prestige-Wert — ideal für Unternehmen mit Repräsentationsanspruch und Aussenauftritt.', strength: 'strong' })
+
+    const talent = sf.talentAccessScore ?? (typeof sf.talentAccess === 'number' ? sf.talentAccess : undefined)
+    if (talent !== undefined && talent >= 0.65)
+      args.push({ title: 'Grosser Talentpool', detail: 'Zugang zu gut ausgebildeten Fachkräften im Einzugsgebiet — entscheidend für wachsende Unternehmen.', strength: 'medium' })
+
+    if (sf.flexibilityScore !== undefined && sf.flexibilityScore >= 0.65)
+      args.push({ title: 'Flexible Flächengestaltung', detail: 'Grundriss und Ausbaustandard ermöglichen individuelle Anpassungen.', strength: 'medium' })
+
+    if (sf.esgScore !== undefined && sf.esgScore >= 0.7)
+      args.push({ title: 'Nachhaltigkeitszertifizierung', detail: 'Guter ESG-Score — relevant für Unternehmen mit Nachhaltigkeitszielen und ESG-Reporting.', strength: 'medium' })
+  }
+
+  if (p.hardFacts?.isBarrierFree)
+    args.push({ title: 'Barrierefrei', detail: 'Vollständig rollstuhlgängig — gesetzlich zunehmend gefordert.', strength: 'medium' })
+
+  if (p.hardFacts?.parking && p.hardFacts.parking > 0)
+    args.push({ title: `${p.hardFacts.parking} Parkplätze inkl.`, detail: 'Eigene Parkierungsmöglichkeiten — in Städten ein knappes Gut.', strength: 'medium' })
+
+  if (p.hardFacts?.hasServerRoom)
+    args.push({ title: 'Serverraum vorhanden', detail: 'Sofortig nutzbare IT-Infrastruktur — spart Einrichtungskosten.', strength: 'medium' })
+
+  if (intel?.demandStrength === 'VERY_HIGH' || intel?.demandStrength === 'HIGH')
+    args.push({ title: 'Stark nachgefragter Markt', detail: `${p.location.city} verzeichnet ${intel.demandStrength === 'VERY_HIGH' ? 'sehr hohe' : 'hohe'} Nachfrage — kurze Leerstandszeiten zu erwarten.`, strength: 'strong' })
+
+  return args
+}
+
+// ── Proactive weakness acknowledgement ───────────────────────────────────────
+
+export interface Weakness {
+  issue: string
+  mitigation: string
+}
+
+export function generateWeaknesses(p: Property): Weakness[] {
+  const ws: Weakness[] = []
+  const sf = p.softFactors
+  const intel = getCityIntelligence(p.location.city)
+
+  if (intel && intel.vacancyRatePct >= 5)
+    ws.push({ issue: 'Hohe Leerstandsquote in der Region', mitigation: 'Mietfreie Zeit oder Ausbaukostenbeteiligung als Anreiz anbieten.' })
+
+  if (intel && intel.taxIndexCanton >= 115)
+    ws.push({ issue: 'Überdurchschnittliche Steuerlast', mitigation: 'Andere Standortvorteile (Prestige, ÖV) gezielt hervorheben.' })
+
+  if (sf?.commuterAccessScore !== undefined && sf.commuterAccessScore < 0.45)
+    ws.push({ issue: 'Eingeschränkte ÖV-Anbindung', mitigation: 'Parkplatz-Angebot und Veloinfrastruktur als Alternative betonen.' })
+
+  if (p.hardFacts?.parking === 0 || (p.hardFacts?.parking === undefined && !sf?.parkingSpots))
+    ws.push({ issue: 'Keine eigenen Parkplätze', mitigation: 'Öffentliche Parkhäuser in der Nähe aufzeigen. Ggf. Parkabonnement als Mietbonus anbieten.' })
+
+  if (p.dataQuality.score < 0.65)
+    ws.push({ issue: 'Unvollständige Objektdaten', mitigation: 'Fehlende Angaben vor dem Gespräch vervollständigen, um Vertrauen zu stärken.' })
+
+  return ws
+}
@@ -0,0 +1,85 @@
+import { Box, Typography } from '@mui/material'
+import type { ReminderActivity } from '../../domain/reminder'
+
+export const SHADOW_RISK_COLOR: Record<string, string> = {
+  NONE: '#64748b',
+  LOW: '#16a34a',
+  MEDIUM: '#ca8a04',
+  HIGH: '#dc2626',
+}
+
+export const SHADOW_RISK_LABEL: Record<string, string> = {
+  NONE: 'Kein Risiko',
+  LOW: 'Niedrig',
+  MEDIUM: 'Mittel',
+  HIGH: 'Hoch',
+}
+
+export const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  ACTIVE: 'info',
+  SNOOZED: 'warning',
+  COMPLETED: 'success',
+  DISMISSED: 'default',
+}
+
+export const STATUS_LABEL: Record<string, string> = {
+  ACTIVE: 'Aktiv',
+  SNOOZED: 'Schlummernd',
+  COMPLETED: 'Erledigt',
+  DISMISSED: 'Verworfen',
+}
+
+export const ACTION_LABEL: Record<string, string> = {
+  CREATED: 'Erstellt',
+  SNOOZED: 'Zurückgestellt',
+  COMPLETED: 'Erledigt',
+  DISMISSED: 'Verworfen',
+  NOTED: 'Notiz',
+}
+
+export function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+      {icon}
+      <Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#1e293b', fontSize: '0.8125rem' }}>
+        {children}
+      </Typography>
+    </Box>
+  )
+}
+
+export function DateRow({ label, value }: { label: string; value?: string }) {
+  if (!value) return null
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 1, alignItems: 'baseline' }}>
+      <Typography variant="caption" color="text.secondary">{label}</Typography>
+      <Typography variant="body2" sx={{ fontWeight: 500 }}>{new Date(value).toLocaleDateString('de-CH')}</Typography>
+    </Box>
+  )
+}
+
+export function ActivityEntry({ entry }: { entry: ReminderActivity }) {
+  return (
+    <Box sx={{ display: 'flex', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
+        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#94a3b8', mt: '4px' }} />
+        <Box sx={{ width: 1, flex: 1, bgcolor: '#e2e8f0', mt: 0.5 }} />
+      </Box>
+      <Box sx={{ pb: 1.5, minWidth: 0 }}>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
+          <Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b' }}>
+            {ACTION_LABEL[entry.action]}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {entry.by} · {new Date(entry.at).toLocaleDateString('de-CH')}
+          </Typography>
+        </Box>
+        {entry.note && (
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
+            {entry.note}
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  )
+}