/* Prospecção v2 · vistas EMPRESAS, MAPA, ANÁLISE */

// ======== EMPRESAS (72) ========
const ProspecEmpresaCard = ({ emp, onClick, onLeadClick }) => {
  const marca = PROSPEC_MARCAS[emp.marca];
  const topScore = Math.max(...emp.contactos.map(c => c.score || 0));
  const contactosOrdenados = [...emp.contactos].sort((a, b) => (b.score || 0) - (a.score || 0));
  const scoreCol = prospecScoreColor(topScore);

  return (
    <div style={{
      background: 'var(--bg-elev)', border: '1px solid var(--border)',
      borderRadius: 12, overflow: 'hidden',
      transition: 'all 0.15s',
    }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = scoreCol; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}
    >
      {/* Header */}
      <button onClick={() => onClick(emp)} style={{
        width: '100%', textAlign: 'left', padding: 14,
        display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 12,
        background: 'transparent', border: 'none', cursor: 'pointer',
        fontFamily: 'inherit',
      }}>
        <div style={{
          width: 46, height: 46, borderRadius: 10, flexShrink: 0,
          background: `linear-gradient(135deg, ${scoreCol}, color-mix(in oklch, ${scoreCol} 70%, #000))`,
          display: 'grid', placeItems: 'center',
          color: '#fff', fontFamily: 'var(--font-display)',
        }}>
          <div style={{ fontSize: 17, fontWeight: 700, lineHeight: 1 }}>{topScore}</div>
          <div style={{ fontSize: 7.5, letterSpacing: '0.1em', marginTop: -1, opacity: 0.85 }}>TOP</div>
        </div>
        <div style={{ minWidth: 0 }}>
          <div className="font-display" style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.15, marginBottom: 2, letterSpacing: '-0.005em' }}>
            {emp.empresa}
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
            <span>{emp.cidade || '—'}</span>
            {emp.funcionarios && <>
              <span style={{ opacity: 0.4 }}>·</span>
              <span style={{ fontFamily: 'var(--font-mono)' }}>{emp.funcionarios} emp</span>
            </>}
            {emp.facturacao && <>
              <span style={{ opacity: 0.4 }}>·</span>
              <span style={{ fontFamily: 'var(--font-mono)' }}>{prospecFormatFact(emp.facturacao)}</span>
            </>}
            {emp.gmbRating && <>
              <span style={{ opacity: 0.4 }}>·</span>
              <span style={{ color: '#f59e0b' }}>★ {emp.gmbRating}</span>
            </>}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
          {marca && (
            <span style={{ padding: '2px 8px', borderRadius: 999, fontSize: 10, fontWeight: 700, background: marca.bg, color: marca.color }}>
              {emp.marca}
            </span>
          )}
          <span style={{ fontSize: 10.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
            {emp.contactos.length} contactos
          </span>
        </div>
      </button>

      {/* Contactos inline (top 4) */}
      <div style={{ background: 'var(--bg)', padding: '6px 10px', borderTop: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {contactosOrdenados.slice(0, 4).map(c => {
          const emailMeta = PROSPEC_EMAIL_STATUS[c.emailStatus];
          const cScore = c.score || 0;
          return (
            <button key={c.id} onClick={() => onLeadClick(c.id)} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '6px 8px', borderRadius: 6,
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', textAlign: 'left', width: '100%',
              transition: 'background 0.1s',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span style={{
                width: 22, height: 22, borderRadius: 5, flexShrink: 0,
                background: `color-mix(in oklch, ${prospecScoreColor(cScore)} 18%, transparent)`,
                color: prospecScoreColor(cScore),
                display: 'grid', placeItems: 'center',
                fontSize: 10.5, fontWeight: 700, fontFamily: 'var(--font-display)',
              }}>{cScore}</span>
              <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {c.nome}
                </span>
                <span style={{ fontSize: 10.5, color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {c.cargo}
                </span>
              </div>
              {emailMeta && (
                <span style={{ fontSize: 10, color: emailMeta.color, fontFamily: 'var(--font-mono)', fontWeight: 700 }} title={emailMeta.label}>
                  {emailMeta.icon}
                </span>
              )}
            </button>
          );
        })}
        {contactosOrdenados.length > 4 && (
          <button onClick={() => onClick(emp)} style={{
            padding: '4px 8px', marginTop: 2, borderRadius: 6,
            background: 'transparent', border: 'none', cursor: 'pointer',
            fontSize: 10.5, color: 'var(--ai-500)', fontFamily: 'inherit', textAlign: 'left', fontWeight: 500,
          }}>+ {contactosOrdenados.length - 4} outros contactos</button>
        )}
      </div>
    </div>
  );
};

// ======== MAPA ========
const ProspecMapa = ({ leads, onLeadClick }) => {
  const mapRef = React.useRef(null);
  const mapInstance = React.useRef(null);
  const layerRef = React.useRef(null);

  React.useEffect(() => {
    if (typeof L === 'undefined') return;
    if (!mapInstance.current) {
      mapInstance.current = L.map(mapRef.current, {
        center: [40.2, -3.7], zoom: 6,
        zoomControl: true, attributionControl: false,
      });
      L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
        subdomains: 'abcd', maxZoom: 19,
      }).addTo(mapInstance.current);
      // invalidate after layout settles
      setTimeout(() => { try { mapInstance.current.invalidateSize(); } catch(e){} }, 100);
      setTimeout(() => { try { mapInstance.current.invalidateSize(); } catch(e){} }, 500);
    }
    // Clear existing layer
    if (layerRef.current) {
      mapInstance.current.removeLayer(layerRef.current);
    }

    // Agrupar leads por cidade (coordenadas aproximadas)
    const cityCoords = {
      'Madrid': [40.4168, -3.7038],
      'Barcelona': [41.3874, 2.1686],
      'Palau-solità i Plegamans': [41.5832, 2.1864],
      'Valencia': [39.4699, -0.3763],
      'Paterna': [39.5025, -0.4411],
      'Sevilla': [37.3891, -5.9845],
      'Málaga': [36.7213, -4.4214],
      'Zaragoza': [41.6488, -0.8891],
      'Bilbao': [43.2630, -2.9350],
      'Pinto': [40.2410, -3.6973],
      'Chinchilla de Montearagon': [38.9222, -1.7218],
      'Albacete': [38.9943, -1.8585],
      'A Coruña': [43.3623, -8.4115],
      'La Coruña': [43.3623, -8.4115],
      'Gijón': [43.5453, -5.6619],
      'Oviedo': [43.3619, -5.8494],
      'Santander': [43.4623, -3.8099],
      'Logroño': [42.4627, -2.4449],
      'Granada': [37.1773, -3.5986],
      'Toledo': [39.8628, -4.0273],
      'Badajoz': [38.8794, -6.9706],
      'Cáceres': [39.4753, -6.3724],
      'Riba-roja de Turia': [39.5407, -0.5715],
      'Torrejón de Ardoz': [40.4578, -3.4789],
      'Getafe': [40.3057, -3.7324],
      'Alcorcón': [40.3459, -3.8249],
      'Móstoles': [40.3230, -3.8649],
      'Mérida': [38.9165, -6.3437],
    };

    const bucket = {};
    leads.forEach(l => {
      const coords = cityCoords[l.cidade];
      if (!coords) return;
      const key = l.cidade;
      if (!bucket[key]) bucket[key] = { coords, leads: [] };
      bucket[key].leads.push(l);
    });

    layerRef.current = L.layerGroup();
    Object.entries(bucket).forEach(([cidade, data]) => {
      const avgScore = data.leads.reduce((a, l) => a + l.score, 0) / data.leads.length;
      const r = Math.max(10, Math.min(40, 6 + Math.sqrt(data.leads.length) * 4));
      const col = prospecScoreColor(Math.round(avgScore));
      const marker = L.circleMarker(data.coords, {
        radius: r,
        fillColor: col, color: col,
        weight: 2, opacity: 0.9, fillOpacity: 0.5,
      });
      // label count
      const divIcon = L.divIcon({
        className: 'prospec-map-label',
        html: `<div style="font-family: var(--font-display); font-weight: 700; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); white-space: nowrap;">${data.leads.length}</div>`,
        iconSize: [30, 14], iconAnchor: [15, 7],
      });
      const label = L.marker(data.coords, { icon: divIcon, interactive: false });
      const top3 = [...data.leads].sort((a, b) => b.score - a.score).slice(0, 3);
      const popup = `
        <div style="font-family: var(--font-sans, Inter, sans-serif); font-size: 11.5px; min-width: 220px;">
          <div style="font-family: var(--font-display, 'Rajdhani', sans-serif); font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #111;">${cidade}</div>
          <div style="font-size: 10px; color: #666; margin-bottom: 8px;">${data.leads.length} leads · score médio ${avgScore.toFixed(1)}</div>
          ${top3.map(l => `
            <div style="padding: 4px 0; border-top: 1px solid #eee; display: flex; gap: 8px; align-items: center;">
              <span style="width: 20px; height: 20px; border-radius: 4px; background: ${prospecScoreColor(l.score)}; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px;">${l.score}</span>
              <span style="flex: 1; color: #222; font-size: 11px;">${l.fullName}<br><span style="color: #888; font-size: 10px;">${l.empresa}</span></span>
            </div>
          `).join('')}
        </div>
      `;
      marker.bindPopup(popup);
      marker.addTo(layerRef.current);
      label.addTo(layerRef.current);
    });
    layerRef.current.addTo(mapInstance.current);
  }, [leads]);

  return (
    <div style={{ position: 'relative', flex: 1, minHeight: 0, width: '100%', display: 'flex' }}>
      <div ref={mapRef} style={{ flex: 1, minHeight: 400, width: '100%', background: '#0a0a0a' }} />
      <div style={{
        position: 'absolute', top: 12, right: 12, zIndex: 1000,
        padding: '10px 14px', borderRadius: 8,
        background: 'var(--bg-elev)', border: '1px solid var(--border)',
        fontSize: 11, display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--text-muted)', letterSpacing: '0.1em', marginBottom: 2 }}>SCORE MÉDIO</div>
        {[[9, '9'], [8, '8'], [7, '7'], [6, '6'], [5, '5']].map(([s, l]) => (
          <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: prospecScoreColor(s) }}></span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>{l}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ======== ANÁLISE (sheet Resumo do Fábio) ========
const ProspecAnaliseCard = ({ title, value, sub, accent }) => (
  <div style={{
    padding: 16, borderRadius: 10,
    background: 'var(--bg-elev)', border: '1px solid var(--border)',
    borderLeft: `3px solid ${accent || 'var(--ai-500)'}`,
  }}>
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--text-muted)', letterSpacing: '0.1em', marginBottom: 6 }}>{title}</div>
    <div className="font-display" style={{ fontSize: 26, fontWeight: 700, lineHeight: 1, color: 'var(--text)', marginBottom: 4 }}>{value}</div>
    {sub && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{sub}</div>}
  </div>
);

const ProspecAnaliseBar = ({ label, value, total, color, suffix }) => {
  const pct = total > 0 ? (value / total) * 100 : 0;
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 4 }}>
        <span style={{ color: 'var(--text)', fontWeight: 500 }}>{label}</span>
        <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{value}{suffix || ''}</span>
      </div>
      <div style={{ height: 6, borderRadius: 3, background: 'var(--bg-sunken)', overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: `${pct}%`,
          background: color || 'var(--ai-500)',
          transition: 'width 0.3s',
        }} />
      </div>
    </div>
  );
};

const ProspecAnalise = ({ leads, empresas }) => {
  const total = leads.length;
  const verif = leads.filter(l => l.emailStatus === 'Verified').length;
  const comTel = leads.filter(l => l.telMovel).length;
  const comLI = leads.filter(l => l.linkedin).length;
  const comGMB = empresas.filter(e => e.gmbRating).length;
  const avgScore = (leads.reduce((a, l) => a + l.score, 0) / total).toFixed(1);

  const scoreBuckets = {};
  leads.forEach(l => { scoreBuckets[l.score] = (scoreBuckets[l.score] || 0) + 1; });

  const abordagemCount = {};
  leads.forEach(l => { abordagemCount[l.abordagem] = (abordagemCount[l.abordagem] || 0) + 1; });

  const marcaCount = {};
  leads.forEach(l => { marcaCount[l.marca] = (marcaCount[l.marca] || 0) + 1; });

  const regiaoCount = {};
  leads.forEach(l => {
    const r = prospecRegiaoOf(l.cidade);
    regiaoCount[r] = (regiaoCount[r] || 0) + 1;
  });

  const topCidades = {};
  empresas.forEach(e => {
    if (e.cidade) topCidades[e.cidade] = (topCidades[e.cidade] || 0) + 1;
  });
  const topCidadesArr = Object.entries(topCidades).sort((a, b) => b[1] - a[1]).slice(0, 10);

  return (
    <div className="scrollbar" style={{ flex: 1, overflowY: 'auto', padding: 24, background: 'var(--bg)' }}>
      {/* Context banner */}
      <div style={{
        padding: 16, marginBottom: 20, borderRadius: 12,
        background: 'linear-gradient(135deg, color-mix(in oklch, var(--ai-500) 8%, transparent), color-mix(in oklch, var(--ai-500) 2%, transparent))',
        border: '1px solid color-mix(in oklch, var(--ai-500) 20%, var(--border))',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 10,
          background: 'var(--ai-500)', color: '#fff',
          display: 'grid', placeItems: 'center',
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,
        }}>FC</div>
        <div style={{ flex: 1 }}>
          <div className="font-display" style={{ fontSize: 15, fontWeight: 700, marginBottom: 2 }}>PAULA PARTNERS ES · Base de Prospecção</div>
          <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>
            Prospecção cruzada de Apollo + Google My Business + Axesor + LinkedIn · Construída por Fábio Costa
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.08em' }}>ACTUALIZADO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600 }}>21 Abr 2026</div>
        </div>
      </div>

      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 12, marginBottom: 24 }}>
        <ProspecAnaliseCard title="TOTAL CONTACTOS" value={total} sub={`${empresas.length} empresas`} accent="var(--ai-500)" />
        <ProspecAnaliseCard title="SCORE MÉDIO" value={avgScore} sub={`max ${Math.max(...leads.map(l => l.score))}`} accent={prospecScoreColor(Math.round(avgScore))} />
        <ProspecAnaliseCard title="EMAILS VERIFICADOS" value={verif} sub={`${Math.round(verif / total * 100)}% cobertura`} accent="var(--success)" />
        <ProspecAnaliseCard title="COM TELEMÓVEL" value={comTel} sub={`${Math.round(comTel / total * 100)}%`} accent="#f59e0b" />
        <ProspecAnaliseCard title="COM LINKEDIN" value={comLI} sub={`${Math.round(comLI / total * 100)}%`} accent="#0a66c2" />
        <ProspecAnaliseCard title="EMPRESAS COM GMB" value={comGMB} sub={`${Math.round(comGMB / empresas.length * 100)}%`} accent="#ea4335" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
        {/* Distribuição score */}
        <div style={{ padding: 16, borderRadius: 12, background: 'var(--bg-elev)', border: '1px solid var(--border)' }}>
          <div className="font-display" style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Distribuição por Score</div>
          {[9, 8, 7, 6, 5, 4].map(s => (
            <ProspecAnaliseBar key={s}
              label={`Score ${s}${s >= 8 ? ' 🔥' : s >= 7 ? ' ⚡' : ''}`}
              value={scoreBuckets[s] || 0} total={total}
              color={prospecScoreColor(s)}
            />
          ))}
        </div>

        {/* Marca sugerida */}
        <div style={{ padding: 16, borderRadius: 12, background: 'var(--bg-elev)', border: '1px solid var(--border)' }}>
          <div className="font-display" style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Marca Digidelta Recomendada</div>
          {Object.entries(marcaCount).sort((a, b) => b[1] - a[1]).map(([m, n]) => (
            <ProspecAnaliseBar key={m} label={m} value={n} total={total} color={PROSPEC_MARCAS[m]?.color || 'var(--ai-500)'} />
          ))}
          <div style={{ marginTop: 12, padding: 10, borderRadius: 8, background: 'var(--bg-sunken)', fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--text)' }}>BIOND</strong> (tintas) é a aposta principal — alargar portfolio.<br />
            <strong style={{ color: 'var(--text)' }}>Mimaki + Decal</strong> para distribuidores médios/grandes com máquinas instaladas.
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
        {/* Abordagem */}
        <div style={{ padding: 16, borderRadius: 12, background: 'var(--bg-elev)', border: '1px solid var(--border)' }}>
          <div className="font-display" style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Estratégia de Abordagem</div>
          {Object.entries(PROSPEC_ABORDAGEM).map(([k, v]) => (
            <div key={k} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 12px', marginBottom: 6,
              borderRadius: 8,
              background: `color-mix(in oklch, ${v.color} 6%, transparent)`,
              border: `1px solid color-mix(in oklch, ${v.color} 20%, var(--border))`,
            }}>
              <span style={{ fontSize: 22 }}>{v.icon}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: v.color }}>{v.label}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{v.short}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="font-display" style={{ fontSize: 22, fontWeight: 700, color: v.color, lineHeight: 1 }}>
                  {abordagemCount[k] || 0}
                </div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
                  {Math.round((abordagemCount[k] || 0) / total * 100)}%
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Regiões */}
        <div style={{ padding: 16, borderRadius: 12, background: 'var(--bg-elev)', border: '1px solid var(--border)' }}>
          <div className="font-display" style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Distribuição Regional</div>
          {Object.entries(regiaoCount).sort((a, b) => b[1] - a[1]).slice(0, 8).map(([r, n]) => (
            <ProspecAnaliseBar key={r} label={r} value={n} total={total} color="var(--ai-500)" />
          ))}
        </div>
      </div>

      {/* Insights */}
      <div style={{
        padding: 20, borderRadius: 12,
        background: 'var(--bg-elev)', border: '1px solid var(--border)',
        marginBottom: 16,
      }}>
        <div className="font-display" style={{ fontSize: 15, fontWeight: 700, marginBottom: 14 }}>💡 Insights principais</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
            { icon: '🎯', title: 'Sweet spot: 10-50 funcionários', body: 'Distribuidores médios são o perfil ideal — suficiente volume para justificar equipamento médio-alto (Mimaki, Decal) mas agilidade para decidir.' },
            { icon: '🇪🇸', title: 'Concentração Madrid + Barcelona', body: 'Áreas metropolitanas absorvem 60%+ dos leads. Prioridade de deslocações e feiras regionais (C!Print Madrid).' },
            { icon: '📧', title: `${Math.round(verif / total * 100)}% emails verificados`, body: 'Qualidade de dados alta — email-first é viável. Email extrapolado usar só com A/B test de entrega.' },
            { icon: '📱', title: 'Hiring + crescimento = timing', body: 'Distribuidores em hiring activo são 3x mais receptivos a novos fornecedores — sinal forte de expansão ou substituição.' },
          ].map((ins, i) => (
            <div key={i} style={{
              padding: 12, borderRadius: 8,
              background: 'var(--bg-sunken)', border: '1px solid var(--border-subtle)',
            }}>
              <div style={{ fontSize: 20, marginBottom: 4 }}>{ins.icon}</div>
              <div style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 4 }}>{ins.title}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>{ins.body}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Top cidades */}
      <div style={{ padding: 16, borderRadius: 12, background: 'var(--bg-elev)', border: '1px solid var(--border)' }}>
        <div className="font-display" style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Top 10 Cidades (por # empresas)</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          {topCidadesArr.map(([c, n], i) => (
            <div key={c} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 10px', borderRadius: 7,
              background: 'var(--bg-sunken)', border: '1px solid var(--border-subtle)',
            }}>
              <span style={{
                width: 20, height: 20, borderRadius: 4,
                background: 'var(--ai-500)', color: '#fff',
                display: 'grid', placeItems: 'center',
                fontSize: 10, fontWeight: 700, fontFamily: 'var(--font-mono)',
              }}>{i + 1}</span>
              <span style={{ flex: 1, fontSize: 12, fontWeight: 500 }}>{c}</span>
              <span style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{n} emp</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.ProspecEmpresaCard = ProspecEmpresaCard;
window.ProspecMapa = ProspecMapa;
window.ProspecAnalise = ProspecAnalise;
