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>
  )
}