refactor: architecture compliance pass — DS tokens, hook boundary, god component split, AI hardening

- DS token migration: Anfragen.tsx + child components (AnfragenInquiryItem, AnfragenMessageBubble) fully migrated; DS_TEXT.brandDark added; scoreTheme.ts moved to src/lib/ with re-export proxy - Hook boundary: Results.tsx no longer calls needService directly — routes through useNeeds() with optional refetchOnMount/gcTime overrides - NewListing.tsx (440L) split into useNewListingForm hook + 8 section components under src/components/new-listing/; page shell reduced to 121 lines - AI hardening: Zod .strict() on all schemas, AIProvenance extended with schemaVersion/ fallbackReason/traceId/latencyMs, AITraceStore stats with p50/p90/p99 + failure breakdowns, MockAIService buildFollowUpQuestions with priority ordering + area-ambiguity detection, prompt templates updated (LIGHT_INDUSTRIAL, budget unit, ambiguity detection, decimal precision) - Tests: all 154 passing; fixed test regression caused by OfferEmailResponseSchema body min(50) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 16:10:39 +02:00
parent e36c5bc979
commit e1f4beb898
44 changed files with 1610 additions and 1058 deletions
@@ -1,6 +1,7 @@
 import { Box, Card, Chip, Stack, Typography } from '@mui/material'
 import { MapPin, Ruler, Wallet, Calendar, CheckCircle } from 'lucide-react'
 import type { PropertyNeedMatch } from '../../domain/match'
+import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER } from '../../lib/ds'

 interface Props {
  match: PropertyNeedMatch
@@ -9,9 +10,9 @@ interface Props {

 function ScoreBadge({ score }: { score: number }) {
  const isGold = score >= 90
-  const bg = isGold ? '#fef3c7' : '#f1f5f9'
-  const color = isGold ? '#d97706' : '#64748b'
-  const borderColor = isGold ? '#fde68a' : '#e2e8f0'
+  const bg = isGold ? DS_SURFACE.warning.bg : DS_BG.subtle
+  const color = isGold ? DS_TEXT.warning : DS_TEXT.muted
+  const borderColor = isGold ? DS_SURFACE.warning.border : DS_BORDER.default

  return (
    <Box
@@ -37,9 +38,9 @@ function ScoreBadge({ score }: { score: number }) {
 function InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-      <Box sx={{ color: '#94a3b8', display: 'flex', alignItems: 'center' }}>{icon}</Box>
-      <Typography variant="caption" sx={{ color: '#64748b', minWidth: 70 }}>{label}</Typography>
-      <Typography variant="caption" sx={{ color: '#0f172a', fontWeight: 500 }}>{value}</Typography>
+      <Box sx={{ color: DS_TEXT.disabled, display: 'flex', alignItems: 'center' }}>{icon}</Box>
+      <Typography variant="caption" sx={{ color: DS_TEXT.muted, minWidth: 70 }}>{label}</Typography>
+      <Typography variant="caption" sx={{ color: DS_TEXT.primary, fontWeight: 500 }}>{value}</Typography>
    </Box>
  )
 }
@@ -52,10 +53,10 @@ export function NeedMatchCard({ match, onClick }: Props) {
      sx={{
        p: 2,
        mb: 1.5,
-        border: '1px solid #e2e8f0',
+        border: `1px solid ${DS_BORDER.default}`,
        borderRadius: 1.5,
        cursor: onClick ? 'pointer' : 'default',
-        '&:hover': onClick ? { borderColor: '#1e3a5f', bgcolor: '#f8fafc', boxShadow: '0 2px 8px rgba(30,58,95,0.08)' } : { borderColor: '#cbd5e1', bgcolor: '#fafafa' },
+        '&:hover': onClick ? { borderColor: DS_TEXT.brand, bgcolor: DS_BG.page, boxShadow: '0 2px 8px rgba(30,58,95,0.08)' } : { borderColor: DS_BORDER.strong, bgcolor: DS_BG.page },
        transition: 'border-color 0.15s, background-color 0.15s, box-shadow 0.15s',
      }}
    >
@@ -64,7 +65,7 @@ export function NeedMatchCard({ match, onClick }: Props) {

        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
-            <Typography variant="body2" sx={{ fontWeight: 700, color: '#0f172a' }}>
+            <Typography variant="body2" sx={{ fontWeight: 700, color: DS_TEXT.primary }}>
              {match.company}
            </Typography>
            <Chip
@@ -73,10 +74,10 @@ export function NeedMatchCard({ match, onClick }: Props) {
              sx={{
                fontSize: '0.65rem',
                height: 18,
-                bgcolor: match.score >= 90 ? '#fef3c7' : '#f1f5f9',
-                color: match.score >= 90 ? '#92400e' : '#475569',
+                bgcolor: match.score >= 90 ? DS_SURFACE.warning.bg : DS_BG.subtle,
+                color: match.score >= 90 ? DS_TEXT.warningDark : DS_TEXT.secondary,
                border: '1px solid',
-                borderColor: match.score >= 90 ? '#fde68a' : '#e2e8f0',
+                borderColor: match.score >= 90 ? DS_SURFACE.warning.border : DS_BORDER.default,
              }}
            />
          </Box>
@@ -96,8 +97,8 @@ export function NeedMatchCard({ match, onClick }: Props) {
            <Box sx={{ mb: 1 }}>
              {match.matchHighlights.slice(0, 2).map((h, i) => (
                <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, mb: 0.25 }}>
-                  <CheckCircle size={11} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
-                  <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.4 }}>{h}</Typography>
+                  <CheckCircle size={11} color={DS_TEXT.success} style={{ marginTop: 2, flexShrink: 0 }} />
+                  <Typography variant="caption" sx={{ color: DS_TEXT.primary, lineHeight: 1.4 }}>{h}</Typography>
                </Box>
              ))}
            </Box>
@@ -110,11 +111,11 @@ export function NeedMatchCard({ match, onClick }: Props) {
                  key={mh}
                  label={mh}
                  size="small"
-                  sx={{ fontSize: '0.62rem', height: 18, bgcolor: '#f0fdf4', color: '#166534', border: '1px solid #bbf7d0' }}
+                  sx={{ fontSize: '0.62rem', height: 18, bgcolor: DS_SURFACE.success.bg, color: DS_TEXT.successDark, border: `1px solid ${DS_SURFACE.success.border}` }}
                />
              ))}
              {match.mustHaves.length > 3 && (
-                <Typography variant="caption" sx={{ color: '#94a3b8', alignSelf: 'center' }}>
+                <Typography variant="caption" sx={{ color: DS_TEXT.disabled, alignSelf: 'center' }}>
                  +{match.mustHaves.length - 3}
                </Typography>
              )}
@@ -5,8 +5,7 @@ import { useNeeds } from '../../hooks/useNeeds'
 import { getCityIntelligence, getMarketRent } from '../../lib/locationIntelligence'
 import type { Property } from '../../domain/property'
 import { generateSellingArguments, generateWeaknesses } from './negotiationInsightsUtils'
-
-// ── Main component ────────────────────────────────────────────────────────────
+import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER } from '../../lib/ds'

 interface Props {
  property: Property
@@ -20,7 +19,6 @@ export function NegotiationInsightsPanel({ property }: Props) {
  const marketRent = getMarketRent(property.location.city, property.assetType)
  const priceDiff = marketRent ? ((property.rentPricePerSqm - marketRent) / marketRent) * 100 : null

-  // Comparable properties for price positioning
  const comparables = allProperties
    .filter(p => p.id !== property.id && p.assetType === property.assetType && p.location.city === property.location.city)

@@ -28,7 +26,6 @@ export function NegotiationInsightsPanel({ property }: Props) {
    ? comparables.reduce((s, p) => s + p.rentPricePerSqm, 0) / comparables.length
    : null

-  // Active needs matching this property type/location
  const matchingNeeds = needs.filter(n =>
    n.assetType === property.assetType &&
    (n.preferredLocations?.some(loc => loc.toLowerCase().includes(property.location.city.toLowerCase())) ?? false)
@@ -39,6 +36,10 @@ export function NegotiationInsightsPanel({ property }: Props) {
  const strongArgs = sellingArgs.filter(a => a.strength === 'strong')
  const mediumArgs = sellingArgs.filter(a => a.strength === 'medium')

+  const priceDiffBg = priceDiff !== null
+    ? (Math.abs(priceDiff) < 10 ? DS_SURFACE.success.bg : priceDiff > 0 ? DS_SURFACE.orange.bg : DS_SURFACE.success.bg)
+    : DS_BG.page
+
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>

@@ -47,24 +48,24 @@ export function NegotiationInsightsPanel({ property }: Props) {
        <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.5 }}>Preispositionierung</Typography>

        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 1.5 }}>
-          <Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 120 }}>
+          <Box sx={{ flex: 1, p: 1.5, bgcolor: DS_BG.page, borderRadius: 1.5, border: `1px solid ${DS_BORDER.default}`, minWidth: 120 }}>
            <Typography variant="caption" color="text.secondary">Ihr Preis</Typography>
-            <Typography variant="h6" sx={{ fontWeight: 700, color: '#0f1923' }}>
+            <Typography variant="h6" sx={{ fontWeight: 700, color: DS_TEXT.primary }}>
              CHF {property.rentPricePerSqm}/m²/Jahr
            </Typography>
          </Box>
          {marketRent && (
-            <Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 120 }}>
+            <Box sx={{ flex: 1, p: 1.5, bgcolor: DS_BG.page, borderRadius: 1.5, border: `1px solid ${DS_BORDER.default}`, minWidth: 120 }}>
              <Typography variant="caption" color="text.secondary">Marktmedian {property.location.city}</Typography>
-              <Typography variant="h6" sx={{ fontWeight: 700, color: '#475569' }}>
+              <Typography variant="h6" sx={{ fontWeight: 700, color: DS_TEXT.secondary }}>
                CHF {marketRent}/m²
              </Typography>
            </Box>
          )}
          {avgComparableRent && (
-            <Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 120 }}>
+            <Box sx={{ flex: 1, p: 1.5, bgcolor: DS_BG.page, borderRadius: 1.5, border: `1px solid ${DS_BORDER.default}`, minWidth: 120 }}>
              <Typography variant="caption" color="text.secondary">Vergleichsangebote Ø</Typography>
-              <Typography variant="h6" sx={{ fontWeight: 700, color: '#475569' }}>
+              <Typography variant="h6" sx={{ fontWeight: 700, color: DS_TEXT.secondary }}>
                CHF {Math.round(avgComparableRent)}/m²
              </Typography>
            </Box>
@@ -72,9 +73,9 @@ export function NegotiationInsightsPanel({ property }: Props) {
        </Box>

        {priceDiff !== null && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 1.25, bgcolor: Math.abs(priceDiff) < 10 ? '#f0fdf4' : priceDiff > 0 ? '#fff8f0' : '#f0fdf4', borderRadius: 1.5 }}>
-            {priceDiff > 0 ? <TrendingUp size={15} color="#d97706" /> : <TrendingDown size={15} color="#1a7a4a" />}
-            <Typography variant="body2" sx={{ color: priceDiff > 15 ? '#92400e' : priceDiff > 0 ? '#d97706' : '#1a7a4a', fontWeight: 500 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 1.25, bgcolor: priceDiffBg, borderRadius: 1.5 }}>
+            {priceDiff > 0 ? <TrendingUp size={15} color={DS_TEXT.warning} /> : <TrendingDown size={15} color={DS_TEXT.success} />}
+            <Typography variant="body2" sx={{ color: priceDiff > 15 ? DS_TEXT.warningDark : priceDiff > 0 ? DS_TEXT.warning : DS_TEXT.success, fontWeight: 500 }}>
              {priceDiff > 15
                ? `Ihr Preis liegt ${Math.round(priceDiff)}% über dem Marktmedian — starke USPs nötig zur Rechtfertigung.`
                : priceDiff > 5
@@ -86,7 +87,6 @@ export function NegotiationInsightsPanel({ property }: Props) {
          </Box>
        )}

-        {/* Price bar vs market */}
        {marketRent && (
          <Box sx={{ mt: 1.5 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
@@ -95,7 +95,7 @@ export function NegotiationInsightsPanel({ property }: Props) {
                CHF {Math.round(marketRent * 0.7)}–{Math.round(marketRent * 1.4)}/m²
              </Typography>
            </Box>
-            <Box sx={{ position: 'relative', height: 8, bgcolor: '#e2e8f0', borderRadius: 4 }}>
+            <Box sx={{ position: 'relative', height: 8, bgcolor: DS_BORDER.default, borderRadius: 4 }}>
              <Box sx={{
                position: 'absolute',
                left: `${Math.min(90, Math.max(5, ((property.rentPricePerSqm - marketRent * 0.7) / (marketRent * 0.7)) * 100))}%`,
@@ -103,7 +103,7 @@ export function NegotiationInsightsPanel({ property }: Props) {
                width: 12,
                height: 12,
                borderRadius: '50%',
-                bgcolor: '#1e3a5f',
+                bgcolor: DS_TEXT.brand,
                border: '2px solid white',
                boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
              }} />
@@ -121,11 +121,11 @@ export function NegotiationInsightsPanel({ property }: Props) {
        {matchingNeeds.length > 0 ? (
          <>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-              <Typography variant="h4" sx={{ fontWeight: 800, color: '#1e3a5f' }}>{matchingNeeds.length}</Typography>
+              <Typography variant="h4" sx={{ fontWeight: 800, color: DS_TEXT.brand }}>{matchingNeeds.length}</Typography>
              <Typography variant="body2" color="text.secondary">aktive Suchprofile für diesen Typ & Standort</Typography>
            </Box>
            {matchingNeeds.slice(0, 4).map(n => (
-              <Box key={n.id} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 0.75, borderBottom: '1px solid #f1f5f9' }}>
+              <Box key={n.id} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 0.75, borderBottom: `1px solid ${DS_BORDER.muted}` }}>
                <Box>
                  <Typography variant="caption" sx={{ fontWeight: 500 }}>{n.companyName}</Typography>
                  <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
@@ -137,8 +137,8 @@ export function NegotiationInsightsPanel({ property }: Props) {
                  label={n.status === 'ACTIVE' ? 'Aktiv' : n.status === 'DRAFT' ? 'Entwurf' : n.status}
                  size="small"
                  sx={{
-                    bgcolor: n.status === 'ACTIVE' ? '#f0fdf4' : '#f1f5f9',
-                    color: n.status === 'ACTIVE' ? '#1a7a4a' : '#64748b',
+                    bgcolor: n.status === 'ACTIVE' ? DS_SURFACE.success.bg : DS_BG.subtle,
+                    color: n.status === 'ACTIVE' ? DS_TEXT.success : DS_TEXT.muted,
                    fontSize: 10, height: 18,
                  }}
                />
@@ -156,10 +156,10 @@ export function NegotiationInsightsPanel({ property }: Props) {
          </Typography>
        )}
        {intel && (
-          <Box sx={{ mt: 1.5, p: 1.25, bgcolor: '#f8fafc', borderRadius: 1.5 }}>
+          <Box sx={{ mt: 1.5, p: 1.25, bgcolor: DS_BG.page, borderRadius: 1.5 }}>
            <Typography variant="caption" color="text.secondary">
              Ø Vermietungsdauer vergleichbarer Objekte in {property.location.city}:{' '}
-              <strong style={{ color: '#1e3a5f' }}>{intel.avgDaysOnMarket} Tage</strong>
+              <strong style={{ color: DS_TEXT.brand }}>{intel.avgDaysOnMarket} Tage</strong>
            </Typography>
          </Box>
        )}
@@ -175,12 +175,12 @@ export function NegotiationInsightsPanel({ property }: Props) {

          {strongArgs.length > 0 && (
            <Box sx={{ mb: 1.5 }}>
-              <Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a', display: 'block', mb: 0.75 }}>
+              <Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.success, display: 'block', mb: 0.75 }}>
                Starke Argumente
              </Typography>
              {strongArgs.map((arg, i) => (
                <Box key={i} sx={{ display: 'flex', gap: 1, mb: 1 }}>
-                  <CheckCircle size={15} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
+                  <CheckCircle size={15} color={DS_TEXT.success} style={{ marginTop: 2, flexShrink: 0 }} />
                  <Box>
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{arg.title}</Typography>
                    <Typography variant="caption" color="text.secondary">{arg.detail}</Typography>
@@ -192,12 +192,12 @@ export function NegotiationInsightsPanel({ property }: Props) {

          {mediumArgs.length > 0 && (
            <Box>
-              <Typography variant="caption" sx={{ fontWeight: 600, color: '#d97706', display: 'block', mb: 0.75 }}>
+              <Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.warning, display: 'block', mb: 0.75 }}>
                Weitere Vorteile
              </Typography>
              {mediumArgs.map((arg, i) => (
                <Box key={i} sx={{ display: 'flex', gap: 1, mb: 0.75 }}>
-                  <CheckCircle size={14} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
+                  <CheckCircle size={14} color={DS_TEXT.warning} style={{ marginTop: 2, flexShrink: 0 }} />
                  <Box>
                    <Typography variant="body2" sx={{ fontWeight: 500 }}>{arg.title}</Typography>
                    <Typography variant="caption" color="text.secondary">{arg.detail}</Typography>
@@ -218,10 +218,10 @@ export function NegotiationInsightsPanel({ property }: Props) {
          </Typography>
          {weaknesses.map((w, i) => (
            <Box key={i} sx={{ mb: 1.25 }}>
-              <Typography variant="body2" sx={{ fontWeight: 600, color: '#c0392b', mb: 0.25 }}>
+              <Typography variant="body2" sx={{ fontWeight: 600, color: DS_TEXT.error, mb: 0.25 }}>
                ⚠ {w.issue}
              </Typography>
-              <Box sx={{ pl: 1.5, borderLeft: '2px solid #e2e8f0' }}>
+              <Box sx={{ pl: 1.5, borderLeft: `2px solid ${DS_BORDER.default}` }}>
                <Typography variant="caption" color="text.secondary">→ {w.mitigation}</Typography>
              </Box>
              {i < weaknesses.length - 1 && <Divider sx={{ mt: 1.25 }} />}
@@ -240,14 +240,14 @@ export function NegotiationInsightsPanel({ property }: Props) {
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75 }}>
            {intel.dominantIndustryClusters.map(c => (
              <Chip key={c} label={c} size="small"
-                sx={{ bgcolor: '#eff6ff', color: '#1e3a5f', fontSize: 11, height: 24, fontWeight: 500 }}
+                sx={{ bgcolor: DS_SURFACE.blue.bg, color: DS_TEXT.brand, fontSize: 11, height: 24, fontWeight: 500 }}
              />
            ))}
          </Box>
          <LinearProgress
            variant="determinate"
            value={intel.demandStrength === 'VERY_HIGH' ? 95 : intel.demandStrength === 'HIGH' ? 75 : intel.demandStrength === 'MEDIUM' ? 50 : 25}
-            sx={{ mt: 1.5, height: 6, borderRadius: 3, bgcolor: '#f1f5f9', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
+            sx={{ mt: 1.5, height: 6, borderRadius: 3, bgcolor: DS_BG.subtle, '& .MuiLinearProgress-bar': { bgcolor: DS_TEXT.brand } }}
          />
          <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block' }}>
            Nachfragestärke: {' '}
@@ -0,0 +1,38 @@
+import { Box, Typography } from '@mui/material'
+import { Target, TrendingUp, Users } from 'lucide-react'
+import { DS_PRE_MARKET } from '../../lib/ds'
+
+interface Props {
+  demandProfiles: number
+  highQualityLeads: number
+}
+
+export function PreMarketDemandIntelligence({ demandProfiles, highQualityLeads }: Props) {
+  return (
+    <Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DS_PRE_MARKET.border}` }}>
+      <Typography variant="caption" sx={{ fontWeight: 700, color: '#4c1d95', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.63rem', display: 'block', mb: 0.875 }}>
+        Matching Demand Intelligence
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          <Users size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
+          <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
+            <strong>{demandProfiles} aktive Suchprofile</strong> im System erkannt
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          <Target size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
+          <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
+            <strong>{highQualityLeads} hochwertige Suchanfragen</strong> mit passendem Flächenbedarf
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          <TrendingUp size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
+          <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
+            Frühzeitige Matchgelegenheit — vor offizieller Vermarktung exklusiv verfügbar
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
@@ -1,12 +1,15 @@
 import { useState } from 'react'
-import { Box, Chip, CircularProgress, Divider, Switch, TextField, Typography } from '@mui/material'
-import { Clock, Layers, ShieldCheck, Target, TrendingUp, Users, Zap } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+import { Box, Chip, CircularProgress, Divider, Switch, Typography } from '@mui/material'
+import { Clock, ShieldCheck, Zap } from 'lucide-react'
 import type { Property } from '../../domain/property'
 import { MockupUnitProvider } from '../../provider/MockupUnitProvider'
 import { useUpdateProperty } from '../../hooks/useProperties'
 import { useToastStore } from '../../stores/toastStore'
 import { DS_BORDER, DS_PRE_MARKET, DS_SURFACE, DS_TEXT } from '../../lib/ds'
-import { floorLabel, SectionTitle } from './PropertyDetailHelpers'
+import { SectionTitle } from './PropertyDetailHelpers'
+import { PreMarketDemandIntelligence } from './PreMarketDemandIntelligence'
+import { PreMarketUnitGrid } from './PreMarketUnitGrid'

 export const MOCK_TODAY = new Date('2026-05-20')

@@ -24,6 +27,7 @@ export function PreMarketPanel({ p }: { p: Property }) {
    return init
  })
  const [unitSaving, setUnitSaving] = useState<Record<string, boolean>>({})
+  const queryClient = useQueryClient()
  const updateProperty = useUpdateProperty()
  const showToast = useToastStore(s => s.showToast)
  const saving = updateProperty.isPending
@@ -48,7 +52,6 @@ export function PreMarketPanel({ p }: { p: Property }) {
    ? Math.max(0, Math.round((targetDate.getTime() - MOCK_TODAY.getTime()) / (1000 * 60 * 60 * 24 * 30)))
    : null

-  // Mock demand intelligence (derived deterministically from property characteristics)
  const demandProfiles = Math.min(14, (p.areaSqm >= 1000 ? 5 : p.areaSqm >= 500 ? 8 : 4) +
    (['Zürich', 'Basel', 'Bern', 'Zug'].some(c => (p.location?.city ?? '').includes(c)) ? 4 : 1))
  const highQualityLeads = Math.max(1, Math.floor(demandProfiles * 0.38))
@@ -133,7 +136,7 @@ export function PreMarketPanel({ p }: { p: Property }) {
          </Box>
        </Box>

-        {/* Active: lead time + status + demand intelligence */}
+        {/* Active: lead time + status + unit grid + demand intelligence */}
        {enabled && (
          <Box sx={{ mt: 1.5 }}>
            {/* Lead time selector */}
@@ -182,94 +185,20 @@ export function PreMarketPanel({ p }: { p: Property }) {
              </Typography>
            </Box>

-            {/* Unit-level release controls */}
            {(p.units?.length ?? 0) > 0 && (
-              <Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DS_PRE_MARKET.border}` }}>
-                <Typography variant="caption" sx={{ fontWeight: 700, color: '#4c1d95', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.63rem', display: 'block', mb: 0.875 }}>
-                  Einheiten freigeben
-                </Typography>
-                {p.units!.map(u => {
-                  const us = unitStates[u.id] ?? { enabled: false, availableFrom: '' }
-                  return (
-                    <Box
-                      key={u.id}
-                      sx={{
-                        display: 'grid', gridTemplateColumns: '1fr 140px auto',
-                        gap: 1, alignItems: 'center', py: 0.75,
-                        borderBottom: '1px solid #f3e8ff',
-                        '&:last-child': { borderBottom: 'none' },
-                      }}
-                    >
-                      <Box>
-                        <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: DS_TEXT.primary }}>
-                          {floorLabel(u)}{u.unitLabel ? ` · ${u.unitLabel}` : ''}
-                        </Typography>
-                        <Typography sx={{ fontSize: '0.65rem', color: DS_TEXT.muted }}>
-                          {u.areaSqm.toLocaleString('de-CH')} m²
-                          {u.currentTenant ? ` · ${u.currentTenant}` : ''}
-                        </Typography>
-                      </Box>
-                      <TextField
-                        type="date"
-                        size="small"
-                        value={us.availableFrom}
-                        disabled={!us.enabled}
-                        slotProps={{ inputLabel: { shrink: true } }}
-                        sx={{ '& .MuiInputBase-input': { fontSize: '0.72rem', py: 0.5 } }}
-                        onChange={e => {
-                          const next = { ...us, availableFrom: e.target.value }
-                          setUnitStates(prev => ({ ...prev, [u.id]: next }))
-                          if (us.enabled) saveUnit(u.id, true, e.target.value)
-                        }}
-                      />
-                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                        {unitSaving[u.id] && <CircularProgress size={10} sx={{ color: DS_PRE_MARKET.accent }} />}
-                        <Switch
-                          size="small"
-                          checked={us.enabled}
-                          onChange={(_, checked) => {
-                            const next = { ...us, enabled: checked }
-                            setUnitStates(prev => ({ ...prev, [u.id]: next }))
-                            saveUnit(u.id, checked, us.availableFrom)
-                          }}
-                          sx={{
-                            '& .MuiSwitch-switchBase.Mui-checked': { color: DS_PRE_MARKET.accent },
-                            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: '#8b5cf6' },
-                          }}
-                        />
-                      </Box>
-                    </Box>
-                  )
-                })}
-              </Box>
+              <PreMarketUnitGrid
+                units={p.units!}
+                unitStates={unitStates}
+                unitSaving={unitSaving}
+                setUnitStates={setUnitStates}
+                saveUnit={saveUnit}
+              />
            )}

-            {/* Demand Intelligence */}
-            <Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DS_PRE_MARKET.border}` }}>
-              <Typography variant="caption" sx={{ fontWeight: 700, color: '#4c1d95', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.63rem', display: 'block', mb: 0.875 }}>
-                Matching Demand Intelligence
-              </Typography>
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-                  <Users size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
-                  <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
-                    <strong>{demandProfiles} aktive Suchprofile</strong> im System erkannt
-                  </Typography>
-                </Box>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-                  <Target size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
-                  <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
-                    <strong>{highQualityLeads} hochwertige Suchanfragen</strong> mit passendem Flächenbedarf
-                  </Typography>
-                </Box>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-                  <TrendingUp size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
-                  <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
-                    Frühzeitige Matchgelegenheit — vor offizieller Vermarktung exklusiv verfügbar
-                  </Typography>
-                </Box>
-              </Box>
-            </Box>
+            <PreMarketDemandIntelligence
+              demandProfiles={demandProfiles}
+              highQualityLeads={highQualityLeads}
+            />
          </Box>
        )}

@@ -0,0 +1,77 @@
+import { Box, CircularProgress, Switch, TextField, Typography } from '@mui/material'
+import type { Property } from '../../domain/property'
+import { DS_PRE_MARKET, DS_TEXT } from '../../lib/ds'
+import { floorLabel } from './PropertyDetailHelpers'
+
+type PropertyUnit = NonNullable<Property['units']>[number]
+
+interface Props {
+  units: PropertyUnit[]
+  unitStates: Record<string, { enabled: boolean; availableFrom: string }>
+  unitSaving: Record<string, boolean>
+  setUnitStates: React.Dispatch<React.SetStateAction<Record<string, { enabled: boolean; availableFrom: string }>>>
+  saveUnit: (unitId: string, enabled: boolean, availableFrom: string) => Promise<void>
+}
+
+export function PreMarketUnitGrid({ units, unitStates, unitSaving, setUnitStates, saveUnit }: Props) {
+  return (
+    <Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DS_PRE_MARKET.border}` }}>
+      <Typography variant="caption" sx={{ fontWeight: 700, color: '#4c1d95', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.63rem', display: 'block', mb: 0.875 }}>
+        Einheiten freigeben
+      </Typography>
+      {units.map(u => {
+        const us = unitStates[u.id] ?? { enabled: false, availableFrom: '' }
+        return (
+          <Box
+            key={u.id}
+            sx={{
+              display: 'grid', gridTemplateColumns: '1fr 140px auto',
+              gap: 1, alignItems: 'center', py: 0.75,
+              borderBottom: '1px solid #f3e8ff',
+              '&:last-child': { borderBottom: 'none' },
+            }}
+          >
+            <Box>
+              <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: DS_TEXT.primary }}>
+                {floorLabel(u)}{u.unitLabel ? ` · ${u.unitLabel}` : ''}
+              </Typography>
+              <Typography sx={{ fontSize: '0.65rem', color: DS_TEXT.muted }}>
+                {u.areaSqm.toLocaleString('de-CH')} m²
+                {u.currentTenant ? ` · ${u.currentTenant}` : ''}
+              </Typography>
+            </Box>
+            <TextField
+              type="date"
+              size="small"
+              value={us.availableFrom}
+              disabled={!us.enabled}
+              slotProps={{ inputLabel: { shrink: true } }}
+              sx={{ '& .MuiInputBase-input': { fontSize: '0.72rem', py: 0.5 } }}
+              onChange={e => {
+                const next = { ...us, availableFrom: e.target.value }
+                setUnitStates(prev => ({ ...prev, [u.id]: next }))
+                if (us.enabled) saveUnit(u.id, true, e.target.value)
+              }}
+            />
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              {unitSaving[u.id] && <CircularProgress size={10} sx={{ color: DS_PRE_MARKET.accent }} />}
+              <Switch
+                size="small"
+                checked={us.enabled}
+                onChange={(_, checked) => {
+                  const next = { ...us, enabled: checked }
+                  setUnitStates(prev => ({ ...prev, [u.id]: next }))
+                  saveUnit(u.id, checked, us.availableFrom)
+                }}
+                sx={{
+                  '& .MuiSwitch-switchBase.Mui-checked': { color: DS_PRE_MARKET.accent },
+                  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: '#8b5cf6' },
+                }}
+              />
+            </Box>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}