/* screen_marketing_resultados_analise.jsx
   Marketing · Resultados · Análise: a análise diária da Digi AI ligada ao BP e ao RPC,
   com as campanhas a fazer. Expõe window.MktResultadosAnaliseScreen.
   Lê /api/marketing/resultados/v2/analise*; só escreve o estado das propostas. */

const RA_API = '/api/marketing/resultados/v2/analise';
const RA_TABS = [
  { id: 'resumo', label: 'Resumo' },
  { id: 'campanhas', label: 'Campanhas a fazer' },
  { id: 'equipas', label: 'BP e RPC por equipa' },
  { id: 'comerciais', label: 'Comerciais' },
  { id: 'historico', label: 'Histórico' },
];
const RA_TIPO = { captacao: 'Captação', reactivacao: 'Reactivação', familia: 'Família em queda', equipamento: 'Equipamento', cross_sell: 'Cross-sell', corrigir: 'Corrigir campanha' };
const RA_ESTADO = { proposta: 'Proposta', briefing_criado: 'Briefing criado', descartada: 'Descartada' };
const RA_TOM = { verde: 'No caminho', amarelo: 'Atenção', vermelho: 'Acção urgente' };
const RA_BRIEF_TOM = { urgente: 'vermelho', atencao: 'amarelo', 'atenção': 'amarelo', positivo: 'verde', normal: 'verde' };

function raQs(extra = {}) {
  const p = new URLSearchParams();
  const email = window.currentUser?.email;
  if (email) p.set('email', email);
  Object.entries(extra).forEach(([k, v]) => { if (v != null && v !== '') p.set(k, v); });
  return p.toString();
}

async function raFetch(url, opts = {}) {
  const r = await fetch(url, { headers: { 'Content-Type': 'application/json' }, ...opts });
  let body = {};
  try { body = await r.json(); } catch {}
  if (!r.ok) throw new Error(body.error || `HTTP ${r.status}`);
  return body;
}

function raHora(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleString('pt-PT', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
}

function raDiaLabel(dia) {
  if (!dia) return '';
  const d = new Date(`${dia}T12:00:00`);
  return d.toLocaleDateString('pt-PT', { weekday: 'short', day: '2-digit', month: 'short' });
}

function raCsv(linhas, nome) {
  const esc = (v) => `"${String(v ?? '').replace(/"/g, '""')}"`;
  const txt = linhas.map(l => l.map(esc).join(';')).join('\n');
  const blob = new Blob(['\ufeff' + txt], { type: 'text/csv;charset=utf-8' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = nome;
  a.click();
  setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}

const RaChip = ({ cor = 'var(--ai-500, #3859D0)', children, solido }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10.5, fontWeight: 600, whiteSpace: 'nowrap',
    padding: '2px 8px', borderRadius: 99, color: solido ? '#fff' : cor,
    background: solido ? cor : `color-mix(in oklch, ${cor} 12%, transparent)`,
  }}>{children}</span>
);

const RaTexto = ({ children, style }) => <div style={{ fontSize: 12.5, lineHeight: 1.6, color: 'var(--text)', ...style }}>{children}</div>;

const RaSeccao = ({ titulo, sub, children, direita }) => (
  <div style={{ marginBottom: 22 }}>
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-muted)', textTransform: 'uppercase', fontFamily: 'var(--font-mono)' }}>{titulo}</div>
        {sub && <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 2 }}>{sub}</div>}
      </div>
      {direita}
    </div>
    {children}
  </div>
);

const RaBarraInline = ({ pct, luz, largura = 70 }) => {
  const p = pct == null ? null : Math.max(0, Math.min(150, Number(pct)));
  const cor = window.AN_LUZ?.[luz || window.anLuzPct?.(pct)] || 'var(--ai-500)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <div style={{ position: 'relative', width: largura, height: 6, background: 'var(--bg-sunken, #e8edf5)', borderRadius: 3, flexShrink: 0 }}>
        {p != null && <div className="an-bar-x" style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${p / 150 * 100}%`, borderRadius: '3px 1px 1px 3px', ...(window.anBarraH ? window.anBarraH(cor) : { background: cor }) }} />}
        <div style={{ position: 'absolute', left: `${100 / 150 * 100}%`, top: -2, bottom: -2, width: 1.5, background: 'var(--text)' }} />
      </div>
      <span style={{ fontSize: 11, fontWeight: 600, color: cor, minWidth: 38 }}>{p == null ? '—' : `${Math.round(pct)} %`}</span>
    </div>
  );
};

const RaBotao = ({ children, onClick, disabled, primario, title }) => {
  const [over, setOver] = React.useState(false);
  return (
    <button type="button" className={primario ? 'btn btn-sm btn-ai' : 'btn btn-sm'} disabled={disabled} title={title}
      onClick={onClick} onMouseEnter={() => setOver(true)} onMouseLeave={() => setOver(false)}
      style={{ filter: over && !disabled ? 'brightness(1.06)' : 'none', transition: 'filter .15s' }}>{children}</button>
  );
};

// ── Resumo ──────────────────────────────────────────────────────────────────
const RaResumo = ({ data, hist, isMobile }) => {
  const f = data.ficha || {};
  const an = data.analise || {};
  const g = f.graficos || {};
  const kpis = f.kpis || [];
  const kpi = (id) => kpis.find(k => k.id === id);
  const comentario = (id) => (an.kpis || []).find(k => k.id === id)?.comentario;
  const notas = an.notas_graficos || {};
  const fi = f.necessidade?.funil_invertido || {};
  const serie = (id) => [...(hist?.analises || [])].sort((a, b) => a.dia.localeCompare(b.dia)).map(h => ({ dia: h.dia, v: (h.kpis || []).find(k => k.id === id)?.valor ?? null }));
  const tomCor = window.AN_LUZ?.[an.tom] || 'var(--text-muted)';
  const alertas = (f.funil?.alertas || []).slice(0, 6);
  const prioritarios = an.comerciais_prioritarios || [];
  const comerciaisPorCod = Object.fromEntries((f.rpc?.comerciais || []).map(c => [c.codigo, c]));
  const kBp = kpi('bp'); const kLeads = kpi('leads_vs_nec'); const kSdr = kpi('sdr');
  const fontes = g.fontes || {};
  const CORES_FONTE = { WEB: 'var(--ai-500, #3859D0)', ADS: '#8B5CF6', NEWSLETTER: '#0EA5E9' };

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1.5fr) minmax(0, 1fr)', gap: 14, marginBottom: 18 }}>
        <AnCartao acento={tomCor}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
            <RaChip cor={tomCor}>{RA_TOM[an.tom] || an.tom}</RaChip>
            <span style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{data.origem === 'ai' ? `Digi AI · ${data.modelo || ''}` : 'regras (sem modelo)'}</span>
          </div>
          <div className="font-display" style={{ fontSize: 16, fontWeight: 650, color: 'var(--text)', lineHeight: 1.35, marginBottom: 8 }}>{an.titulo}</div>
          <RaTexto>{an.leitura}</RaTexto>
          {an.compromisso_semana && (
            <div style={{ marginTop: 12, padding: '10px 12px', borderRadius: 8, background: 'color-mix(in oklch, var(--ai-500, #3859D0) 7%, transparent)', border: '1px solid color-mix(in oklch, var(--ai-500, #3859D0) 20%, transparent)' }}>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--ai-500, #3859D0)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 3 }}>Compromisso da semana</div>
              <RaTexto style={{ fontSize: 12.5, fontWeight: 500 }}>{an.compromisso_semana}</RaTexto>
            </div>
          )}
        </AnCartao>
        <AnCartao titulo="Onde estamos" sub={`Dados de ${raHora(f.dados_em)} · vendas do snapshot Primavera (comercial_ytd_snap)`}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 6 }}>
            <AnGauge pct={kBp?.pct} valor={kBp?.valor_txt} label="% do BP" sub={kBp?.texto} luz={kBp?.luz} size={130} />
            <AnGauge pct={kLeads?.pct} valor={kLeads?.valor_txt} label="Leads mkt" sub={`de ${kLeads?.alvo_txt || '—'} necessárias`} luz={kLeads?.luz} size={130} />
            <AnGauge pct={kSdr?.pct} valor={kSdr?.valor_txt} label="Digi AI SDR" sub={kSdr?.texto} luz={kSdr?.luz} size={130} />
          </div>
        </AnCartao>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(200px, 1fr))', gap: 10, marginBottom: 18 }}>
        {kpis.map(k => {
          const s = serie(k.id);
          const cor = window.AN_LUZ?.[k.luz] || 'var(--text)';
          return (
            <div key={k.id} className="card an-card" style={{ padding: 12, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--bg-elev)', minWidth: 0 }}>
              <div style={{ fontSize: 9.5, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.05em', fontFamily: 'var(--font-mono)' }}>{k.label}</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 8, marginTop: 4 }}>
                <div>
                  <div className="font-display" style={{ fontSize: 20, fontWeight: 700, color: cor, lineHeight: 1.1 }}>{k.valor_txt}</div>
                  {k.alvo_txt && k.alvo_txt !== '—' && <div style={{ fontSize: 10.5, color: 'var(--text-muted)' }}>objectivo {k.alvo_txt}</div>}
                </div>
                <AnSpark valores={s.map(x => x.v)} labels={s.map(x => x.dia)} cor={cor} w={84} h={26} />
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 6, lineHeight: 1.45 }}>{comentario(k.id) || k.texto}</div>
            </div>
          );
        })}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 14, marginBottom: 18 }}>
        <AnCartao titulo="Vendas contra o BP, por mês" sub="Snapshot Primavera dos comerciais com BP · BP de comercial_bp_targets" nota={notas.bp_mensal}>
          <AnMesBars bp={g.mensal?.bp} real={g.mensal?.real} mes={g.mes} />
        </AnCartao>
        <AnCartao titulo="Funil invertido" sub={fi.premissa} nota={notas.funil_invertido}
          direita={<span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>gap {anFmtEur(fi.gap_proj_eur)} · {anFmtN(fi.meses_restantes, 1)} meses</span>}>
          <AnFunilInvertido etapas={g.funil_invertido || fi.etapas} />
          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 10, lineHeight: 1.5 }}>
            Conversão lead → WIN {anFmtPct(fi.conv_pct)} e {anFmtEur(fi.ticket_eur)} por WIN ({fi.fonte_taxa}). Para cobrir 100 % do gap seriam {anFmtN(fi.leads_nec_mes_100, 1)} leads por mês.
          </div>
        </AnCartao>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)', gap: 14, marginBottom: 18 }}>
        <AnCartao titulo="Capacidade da Digi AI SDR" sub="Últimos 30 dias: entradas, qualificação e handoff" nota={notas.capacidade}>
          <AnFunilSdr etapas={g.sdr_funil} />
        </AnCartao>
        <AnCartao titulo="Leads de marketing por fonte" sub="OPs do Gestor com fonte G1005, G1006 e G1007 no ano">
          <AnEmpilhada partes={Object.entries(fontes).map(([k, v]) => ({ label: k, valor: v, cor: CORES_FONTE[k] || 'var(--text-dim)' }))} altura={14} />
          <div style={{ marginTop: 14 }}>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>Leads de marketing por mês</div>
            <AnSpark valores={(g.mensal?.leads_mkt || []).slice(0, g.mes || 12)} labels={(window.AN_MESES || []).slice(0, g.mes || 12)} w={280} h={40} />
          </div>
        </AnCartao>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)', gap: 14, marginBottom: 18 }}>
        <AnCartao titulo="Correcção" sub="O que corrigir já">
          {(an.correccao || []).length ? (an.correccao || []).map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '7px 0', borderTop: i ? '1px solid var(--border)' : 'none' }}>
              <RaChip cor={c.prioridade === 'p0' ? 'var(--danger)' : c.prioridade === 'p1' ? 'var(--warning)' : 'var(--text-muted)'}>{String(c.prioridade || '').toUpperCase()}</RaChip>
              <RaTexto style={{ fontSize: 12 }}>{c.texto}</RaTexto>
            </div>
          )) : <AnVazio altura={60} texto="sem correcções" />}
        </AnCartao>
        <AnCartao titulo="Melhoria" sub="O que acelerar">
          {(an.melhoria || []).length ? (an.melhoria || []).map((m, i) => (
            <div key={i} style={{ padding: '7px 0', borderTop: i ? '1px solid var(--border)' : 'none' }}>
              <RaTexto style={{ fontSize: 12 }}>{typeof m === 'string' ? m : m.texto}</RaTexto>
            </div>
          )) : <AnVazio altura={60} texto="sem melhorias" />}
        </AnCartao>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)', gap: 14 }}>
        <AnCartao titulo="Comerciais prioritários" sub="Onde o marketing ajuda mais o BP">
          {prioritarios.length ? prioritarios.map((p, i) => {
            const c = comerciaisPorCod[p.codigo];
            return (
              <div key={p.codigo} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, padding: '7px 0', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'start' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{c?.nome || p.codigo} <span style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{p.codigo}{c?.equipa_label ? ` · ${c.equipa_label}` : ''}</span></div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.45, marginTop: 2 }}>{p.motivo}</div>
                </div>
                {c && <RaBarraInline pct={c.pct_bp} luz={c.luz_bp} largura={60} />}
              </div>
            );
          }) : <AnVazio altura={60} texto="sem comerciais prioritários" />}
        </AnCartao>
        <AnCartao titulo="Alertas do funil" sub="Campanhas e canais a vigiar">
          {alertas.length ? alertas.map((a, i) => (
            <div key={a.id || i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '6px 0', borderTop: i ? '1px solid var(--border)' : 'none' }}>
              <RaChip cor={a.gravidade === 'p1' ? 'var(--warning)' : 'var(--text-muted)'}>{String(a.gravidade || '').toUpperCase()}</RaChip>
              <span style={{ fontSize: 11.5, lineHeight: 1.45 }}>{a.texto}</span>
            </div>
          )) : <AnVazio altura={60} texto="sem alertas" />}
        </AnCartao>
      </div>
    </>
  );
};

// ── Campanhas a fazer ───────────────────────────────────────────────────────
const RaCampanhas = ({ data, marca, setSub, onMudou, isMobile }) => {
  const f = data.ficha || {};
  const an = data.analise || {};
  const [tipo, setTipo] = React.useState('');
  const [equipa, setEquipa] = React.useState('');
  const [estado, setEstado] = React.useState('');
  const [aGravar, setAGravar] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  const Filtro = window.ResFiltro;
  const campanhas = an.campanhas || [];
  const fi = f.necessidade?.funil_invertido || {};
  const quota = Number(f.necessidade?.premissas?.quota_gap_mkt_pct || 25) / 100;
  const gapMkt = Number(fi.gap_proj_eur || 0) * quota;
  const leadsPropostas = campanhas.filter(c => c.estado !== 'descartada').reduce((s, c) => s + Number(c.leads_alvo || 0), 0);
  const lista = campanhas.filter(c => (!tipo || c.tipo === tipo) && (!equipa || c.equipa === equipa) && (!estado || (c.estado || 'proposta') === estado));
  const tipos = [...new Set(campanhas.map(c => c.tipo))];
  const equipas = [...new Map(campanhas.filter(c => c.equipa).map(c => [c.equipa, c.equipa_label || c.equipa])).entries()];
  const idsProposta = new Set(campanhas.map(c => c.gatilho_id));
  const outros = (f.necessidade?.gatilhos || []).filter(g => !idsProposta.has(g.id)).slice(0, 12);

  const criarBriefing = (c) => {
    const b = c.briefing || {};
    const prefill = {
      marca: c.marca || (marca !== 'todas' ? marca : null),
      respostas: [b.objectivo || c.titulo, b.mensagem || '', b.publico || c.publico || '', b.restricoes || ''],
      origem: { origem: 'resultados-analise', proposta_id: c.proposta_id, gatilho_id: c.gatilho_id, titulo: c.titulo, analise_id: data.id, dia: String(data.dia || '').slice(0, 10) },
    };
    try { localStorage.setItem('mkt-briefing-prefill', JSON.stringify(prefill)); } catch {}
    setSub && setSub('briefings');
  };
  const mudarEstado = async (c, novo) => {
    if (!c.proposta_id) return;
    setAGravar(c.gatilho_id); setErro(null);
    try {
      await raFetch(`${RA_API}/campanhas/${c.proposta_id}?${raQs()}`, { method: 'PATCH', body: JSON.stringify({ estado: novo }) });
      onMudou && onMudou();
    } catch (e) { setErro(e.message); } finally { setAGravar(null); }
  };

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 14, marginBottom: 18 }}>
        <AnCartao titulo="Quanto do gap as propostas cobrem" sub={`Quota do marketing: ${Math.round(quota * 100)} % do gap projectado ao BP`} nota={an.notas_graficos?.campanhas}>
          <AnImpacto itens={campanhas.filter(c => c.estado !== 'descartada').map(c => ({ label: c.titulo, valor: c.impacto_eur, coberto: c.estado === 'briefing_criado' }))} gap={gapMkt} gapLabel="quota do marketing no gap" />
        </AnCartao>
        <AnCartao titulo="Leads alvo contra o défice" sub="Leads por mês que as propostas trazem contra as que faltam">
          <AnBullet real={leadsPropostas} bpData={fi.defice_mes} bpAno={fi.leads_nec_mes} label="Leads alvo das propostas" fmt={(v) => `${anFmtN(v, 1)}/mês`}
            sub={`Défice ${anFmtN(fi.defice_mes, 1)}/mês · necessárias ${anFmtN(fi.leads_nec_mes, 1)}/mês · ritmo ${anFmtN(fi.ritmo_mes, 1)}/mês`} />
          <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 12, lineHeight: 1.5 }}>
            A Digi AI propõe e o utilizador decide. "Criar briefing" abre o Briefing rápido já preenchido; a proposta passa a "briefing criado" quando o briefing é gravado.
          </div>
        </AnCartao>
      </div>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center', marginBottom: 14 }}>
        {Filtro && <Filtro label="Tipo" value={tipo} onChange={setTipo} options={[{ value: '', label: 'Todos' }, ...tipos.map(t => ({ value: t, label: RA_TIPO[t] || t }))]} />}
        {Filtro && <Filtro label="Equipa" value={equipa} onChange={setEquipa} options={[{ value: '', label: 'Todas' }, ...equipas.map(([id, l]) => ({ value: id, label: l }))]} />}
        {Filtro && <Filtro label="Estado" value={estado} onChange={setEstado} options={[{ value: '', label: 'Todos' }, ...Object.entries(RA_ESTADO).map(([v, l]) => ({ value: v, label: l }))]} />}
        <span style={{ fontSize: 11, color: 'var(--text-muted)', marginLeft: 6 }}>{lista.length} de {campanhas.length} propostas</span>
        {erro && <span style={{ fontSize: 11, color: 'var(--danger)' }}>{erro}</span>}
      </div>

      {!lista.length && <AnVazio altura={120} texto="sem propostas com estes filtros" />}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(360px, 1fr))', gap: 12, marginBottom: 22 }}>
        {lista.map(c => {
          const est = c.estado || 'proposta';
          const corEstado = est === 'briefing_criado' ? 'var(--success)' : est === 'descartada' ? 'var(--text-dim)' : 'var(--ai-500, #3859D0)';
          const contributo = gapMkt > 0 ? Math.min(100, Number(c.impacto_eur || 0) / gapMkt * 100) : 0;
          const brand = (window.MKT_BRANDS || []).find(b => b.id === c.marca);
          return (
            <div key={c.gatilho_id} className="card an-card" style={{ padding: 14, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--bg-elev)', opacity: est === 'descartada' ? 0.6 : 1, display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                <RaChip>{RA_TIPO[c.tipo] || c.tipo}</RaChip>
                {c.marca && <RaChip cor={brand?.cor || 'var(--text-muted)'}>{brand?.nome || c.marca}</RaChip>}
                {c.equipa_label && <span style={{ fontSize: 10.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{c.equipa_label}</span>}
                <span style={{ flex: 1 }} />
                <RaChip cor={corEstado} solido={est === 'briefing_criado'}>{RA_ESTADO[est] || est}</RaChip>
              </div>
              <div className="font-display" style={{ fontSize: 14, fontWeight: 650, lineHeight: 1.35 }}>{c.titulo}</div>
              <RaTexto style={{ fontSize: 12, color: 'var(--text-muted)' }}>{c.porque}</RaTexto>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 12px', fontSize: 11.5 }}>
                <div style={{ gridColumn: '1 / -1' }}><span style={{ color: 'var(--text-dim)' }}>Público </span>{c.publico}{c.publico_n ? ` (${anFmtN(c.publico_n)} contactos)` : ''}</div>
                <div style={{ gridColumn: '1 / -1' }}><span style={{ color: 'var(--text-dim)' }}>Canal </span>{c.canal}</div>
                <div><span style={{ color: 'var(--text-dim)' }}>Leads alvo </span><b>{c.leads_alvo ? `${anFmtN(c.leads_alvo)}/mês` : '—'}</b></div>
                <div><span style={{ color: 'var(--text-dim)' }}>Orçamento ref. </span><b>{c.orcamento_ref_eur ? `${anFmtN(c.orcamento_ref_eur)} €/mês` : '—'}</b></div>
                <div title={c.cpl_fonte || ''}><span style={{ color: 'var(--text-dim)' }}>Custo por lead </span>{c.cpl_ref_eur ? `${anFmtN(c.cpl_ref_eur, 2)} €` : '—'}</div>
                <div><span style={{ color: 'var(--text-dim)' }}>Prazo </span>{c.prazo || '—'}</div>
                {c.kpi && <div style={{ gridColumn: '1 / -1' }}><span style={{ color: 'var(--text-dim)' }}>KPI </span>{c.kpi}</div>}
              </div>
              {c.impacto_eur > 0 && (
                <div title={`${anFmtEur(c.impacto_eur)} de ${anFmtEur(gapMkt)}`}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--text-muted)', marginBottom: 3 }}>
                    <span>Contributo para a quota do gap</span><span>{anFmtEur(c.impacto_eur)} · {anFmtN(contributo, 1)} %</span>
                  </div>
                  <div style={{ height: 6, borderRadius: 3, background: 'var(--bg-sunken)' }}>
                    <div style={{ height: '100%', width: `${Math.max(1, contributo)}%`, background: est === 'briefing_criado' ? 'var(--success)' : 'var(--ai-500, #3859D0)', borderRadius: 3 }} />
                  </div>
                </div>
              )}
              <div style={{ display: 'flex', gap: 6, marginTop: 'auto', paddingTop: 6, flexWrap: 'wrap' }}>
                {est === 'proposta' && <RaBotao primario disabled={!c.proposta_id} onClick={() => criarBriefing(c)}>Criar briefing</RaBotao>}
                {est === 'proposta' && <RaBotao disabled={!c.proposta_id || aGravar === c.gatilho_id} onClick={() => mudarEstado(c, 'descartada')}>{aGravar === c.gatilho_id ? 'A gravar…' : 'Descartar'}</RaBotao>}
                {est === 'briefing_criado' && <RaBotao onClick={() => setSub && setSub('briefings')}>Abrir Briefings{c.briefing_id ? ` · #${c.briefing_id}` : ''}</RaBotao>}
                {est === 'descartada' && <RaBotao disabled={aGravar === c.gatilho_id} onClick={() => mudarEstado(c, 'proposta')}>Repor proposta</RaBotao>}
              </div>
            </div>
          );
        })}
      </div>

      {outros.length > 0 && (
        <RaSeccao titulo="Outros gatilhos do dia" sub="Sinais calculados a partir do BP e do RPC que ficaram fora das propostas de hoje">
          <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-elev)' }}>
            {outros.map((g, i) => (
              <div key={g.id} className="an-tr" style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '140px 1fr 110px 110px', gap: 10, padding: '8px 12px', borderTop: i ? '1px solid var(--border)' : 'none', fontSize: 11.5, alignItems: 'center' }}>
                <span style={{ color: 'var(--ai-500, #3859D0)', fontWeight: 600 }}>{RA_TIPO[g.tipo] || g.tipo}{g.equipa_label ? ` · ${g.equipa_label}` : ''}</span>
                <span style={{ color: 'var(--text-muted)' }}>{g.motivo}</span>
                {isMobile ? (
                  <span style={{ color: 'var(--text-subtle)' }}>
                    Alvo <b style={{ color: 'var(--text)' }}>{g.leads_alvo ? `${anFmtN(g.leads_alvo)} leads/mês` : '—'}</b> · impacto <b style={{ color: 'var(--text)' }}>{g.impacto_eur ? anFmtEur(g.impacto_eur) : '—'}</b>
                  </span>
                ) : (
                  <>
                    <span title="Leads alvo por mês">{g.leads_alvo ? `${anFmtN(g.leads_alvo)} leads/mês` : '—'}</span>
                    <span title="Impacto estimado" style={{ textAlign: 'right' }}>{g.impacto_eur ? anFmtEur(g.impacto_eur) : '—'}</span>
                  </>
                )}
              </div>
            ))}
          </div>
        </RaSeccao>
      )}
    </>
  );
};

// ── BP e RPC por equipa ─────────────────────────────────────────────────────
const RaEquipas = ({ data, isMobile, onVerComerciais }) => {
  const f = data.ficha || {};
  const an = data.analise || {};
  const rpc = f.rpc || {};
  const g = f.graficos || {};
  const [aberta, setAberta] = React.useState(null);
  const obj = rpc.objectivos_rpc || {};
  const necEq = Object.fromEntries((f.necessidade?.por_equipa || []).map(e => [e.equipa, e]));
  const notaEq = Object.fromEntries((an.notas_equipas || []).map(n => [n.equipa, n.nota]));
  const comPorEq = {};
  for (const c of g.comerciais || []) (comPorEq[c.equipa] = comPorEq[c.equipa] || []).push(c);
  const equipas = (rpc.equipas || []).filter(e => e.bp_ano > 0 || e.vendas_ytd > 0);
  const familias = (g.familias || []).slice(0, 14);
  const quedas = familias.filter(x => x.var_eur < 0);
  const subidas = [...(g.familias || [])].filter(x => x.var_eur > 0).sort((a, b) => b.var_eur - a.var_eur).slice(0, 6);
  const reclass = (rpc.equipas || []).flatMap(e => (e.familias_reclassificadas || []).map(x => ({ ...x, equipa_label: e.label }))).sort((a, b) => Math.abs(b.var_eur) - Math.abs(a.var_eur)).slice(0, 6);
  const modelos = (g.modelos || []).filter(m => Number(m.bp_qty_ytd) > 0).sort((a, b) => Number(b.gap_qty) - Number(a.gap_qty)).slice(0, 12);
  const bpMkt = (rpc.bp_marketing || []).filter(b => Number(b.target_ytd) > 0);
  const fmtX = (v) => (v == null ? '—' : `${anFmtN(v, 2)}×`);
  const fmtP = (v) => (v == null ? '—' : `${anFmtN(v, 1)} %`);

  return (
    <>
      <AnCartao titulo="Onde e quando o BP falha" sub="% do BP por equipa e mês · snapshot Primavera. Carregue numa equipa para ver os comerciais." nota={an.notas_graficos?.equipas} style={{ marginBottom: 18 }}>
        <AnHeatmap linhas={g.heatmap} onPick={(eq) => {
          setAberta(eq);
          setTimeout(() => document.getElementById(`ra-eq-${eq}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 60);
        }} />
      </AnCartao>

      <RaSeccao titulo="Equipas" sub="Vendas contra BP, KPIs do RPC, carteira e leads de marketing contra as necessárias">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {equipas.map(e => {
            const nec = necEq[e.equipa] || {};
            const mesesDec = Math.max(1, Number(e.frac_ano || 0) * 12);
            const racioVp = e.open_eur > 0 ? (e.vendas_ytd / mesesDec) / e.open_eur * 100 : null;
            const cart = e.carteira || {};
            const retidos = Math.max(0, Number(cart.activos || 0) - Number(cart.novos || 0));
            const open = aberta === e.equipa;
            const coms = (comPorEq[e.equipa] || []).slice().sort((a, b) => Number(a.pct_bp ?? 999) - Number(b.pct_bp ?? 999));
            return (
              <div key={e.equipa} id={`ra-eq-${e.equipa}`} className="card an-card" data-activo={open ? '1' : '0'} style={{ padding: 14, borderRadius: 10, scrollMarginTop: 120, border: `1px solid ${open ? 'var(--ai-500, #3859D0)' : 'var(--border)'}`, background: 'var(--bg-elev)' }}>
                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(170px, 1fr) minmax(200px, 1.4fr) minmax(260px, 2fr) minmax(170px, 1.2fr) minmax(150px, 1fr)', gap: 16, alignItems: 'center' }}>
                  <button type="button" onClick={() => setAberta(open ? null : e.equipa)} style={{ background: 'none', border: 'none', padding: 0, textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text)' }}>
                    <div className="font-display" style={{ fontSize: 13.5, fontWeight: 650 }}>{e.label} <span style={{ fontSize: 10, color: 'var(--text-dim)' }}>{open ? '▴' : '▾'}</span></div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 2 }}>{e.n_comerciais} comerciais{(e.chefes || []).length ? ` · chefe ${(e.chefes || []).join(', ')}` : ''}</div>
                    {e.rpc_rating != null && <div style={{ fontSize: 10.5, color: 'var(--text-muted)' }}>RPC Rating {anFmtN(e.rpc_rating, 1)}</div>}
                  </button>
                  <AnBullet real={e.vendas_ytd_com_bp ?? e.vendas_ytd} bpData={e.bp_ytd} bpAno={e.bp_ano} label="Vendas contra BP" sub={`${anFmtEur(e.vendas_ytd)} de ${anFmtEur(e.bp_ytd)} à data · gap proj. ${anFmtEur(e.gap_proj)}`} />
                  <AnMiniKpis itens={[
                    { label: 'Margem', valor: e.margem_pct, obj: obj.margem?.verde ?? 35, amarelo: obj.margem?.amarelo ?? 25, max: 60, fmt: fmtP },
                    { label: 'Win rate', valor: e.win_rate, obj: obj.win_rate?.verde ?? 25, amarelo: obj.win_rate?.amarelo ?? 15, max: 60, fmt: fmtP },
                    { label: 'Cobertura', valor: e.cobertura, obj: obj.cobertura?.verde ?? 4, amarelo: obj.cobertura?.amarelo ?? 2, max: 8, fmt: fmtX },
                    { label: 'Rácio V/P', valor: racioVp == null ? null : Math.round(racioVp * 10) / 10, obj: obj.racio_vp?.obj ?? 10, max: 30, fmt: fmtP },
                  ]} />
                  <div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginBottom: 4 }}>Carteira · {anFmtN(cart.activos)} activos</div>
                    <AnEmpilhada altura={10} legenda={false} partes={[
                      { label: 'Retidos', valor: retidos, cor: 'var(--ai-500, #3859D0)' },
                      { label: 'Novos', valor: cart.novos, cor: 'var(--success)' },
                      { label: 'Perdidos', valor: cart.perdidos, cor: 'var(--danger)' },
                    ]} />
                    <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 4 }}>{anFmtN(cart.novos)} novos · {anFmtN(cart.perdidos)} perdidos ({anFmtEur(cart.valor_perdidos_ant)} no ano anterior)</div>
                  </div>
                  <AnBullet real={nec.ritmo_mes} bpData={nec.leads_nec_mes} bpAno={nec.leads_nec_mes} label="Leads mkt/mês" fmt={(v) => anFmtN(v, 1)}
                    sub={nec.leads_nec_mes != null ? `${anFmtN(nec.ritmo_mes, 1)} de ${anFmtN(nec.leads_nec_mes, 1)} necessárias` : 'sem necessidade calculada'} />
                </div>
                {notaEq[e.label] && <AnNota texto={notaEq[e.label]} />}
                {open && (
                  <div style={{ marginTop: 12, borderTop: '1px solid var(--border)', paddingTop: 10 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)' }}>Comerciais de {e.label}</span>
                      <RaBotao onClick={() => onVerComerciais && onVerComerciais(e.equipa)}>Ver no separador Comerciais</RaBotao>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(260px, 1fr))', gap: 8 }}>
                      {coms.map(c => (
                        <div key={c.codigo} className="an-kpi an-host" style={{ padding: '8px 10px', borderRadius: 8, background: 'var(--bg)', border: '1px solid var(--border)' }}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 6, fontSize: 12, fontWeight: 600 }}>
                            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.nome}</span>
                            <span style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{c.codigo}</span>
                          </div>
                          <RaBarraInline pct={c.pct_bp} largura={120} />
                          <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 2 }}>{anFmtN(c.leads_ytd)} leads mkt no ano · {anFmtN(c.ritmo_mes, 1)}/mês de {anFmtN(c.leads_nec_mes, 1)} · gap proj. {anFmtEur(c.gap_proj)}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
          {!equipas.length && <AnVazio altura={100} texto="sem equipas com BP nesta marca" />}
        </div>
      </RaSeccao>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)', gap: 14, marginBottom: 18 }}>
        <AnCartao titulo="Famílias contra o ano anterior" sub="Snapshot Primavera à mesma data · só famílias com vendas nos dois anos">
          <AnDivergente itens={[...quedas.slice(0, 8), ...subidas].map(x => ({ label: `${x.familia} · ${x.equipa_label}`, valor: x.var_eur, pct: x.var_pct, sub: `${anFmtEur(x.v)} contra ${anFmtEur(x.ant)}` }))} />
          {reclass.length > 0 && (
            <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 10, lineHeight: 1.5 }}>
              Reclassificadas no Primavera (só com vendas num dos anos): {reclass.map(x => `${x.familia} · ${x.equipa_label} (${anFmtEur(x.ant)} → ${anFmtEur(x.v)})`).join('; ')}.
            </div>
          )}
        </AnCartao>
        <AnCartao titulo="Equipamentos Mimaki contra o BP" sub="Unidades ganhas no ano contra bp_objectivos (PTDIG e DIGES)">
          {modelos.length ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {modelos.map(m => (
                <AnBullet key={`${m.empresa}:${m.modelo}`} real={m.wins_qty} bpData={m.bp_qty_ytd} bpAno={m.bp_qty_ano} label={`${m.modelo} · ${m.empresa} · ${m.segmento}`} fmt={(v) => `${anFmtN(v, 1)} un.`} altura={10} />
              ))}
            </div>
          ) : <AnVazio altura={100} texto="sem BP de equipamentos nesta marca" />}
        </AnCartao>
      </div>

      {bpMkt.length > 0 && (
        <AnCartao titulo="BP de marketing" sub="mkt_bp_targets contra bp_actuals por equipa">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12 }}>
            {bpMkt.map(b => (
              <AnBullet key={`${b.marca}:${b.equipa}`} real={b.actual_ytd} bpData={b.target_ytd} bpAno={b.target_ano} label={b.label} sub={`${anFmtN(b.actual_qty_ytd)} de ${anFmtN(b.target_qty_ytd)} unidades à data`} />
            ))}
          </div>
        </AnCartao>
      )}
    </>
  );
};

// ── Comerciais ──────────────────────────────────────────────────────────────
const RaComercialDetalhe = ({ c, rpcCom, prioritario, mes, onClose }) => {
  const [ops, setOps] = React.useState(null);
  React.useEffect(() => {
    let vivo = true;
    setOps(null);
    raFetch(`${RA_API}/comercial-ops?${raQs({ vendedor: c.codigo })}`).then(d => vivo && setOps(d.ops || [])).catch(() => vivo && setOps([]));
    return () => { vivo = false; };
  }, [c.codigo]);
  const brief = rpcCom?.brief || {};
  return (
    <AnCartao titulo={`${c.nome} · ${c.codigo}`} sub={`${c.equipa_label} · ${anFmtN(c.pct_bp, 1)} % do BP à data · gap projectado ${anFmtEur(c.gap_proj)}`}
      direita={<RaBotao onClick={onClose}>Fechar</RaBotao>} style={{ marginBottom: 14, borderColor: 'var(--ai-500, #3859D0)' }}>
      {prioritario && <AnNota texto={prioritario.motivo} />}
      <div style={{ marginTop: 10 }}>
        <AnMesBars bp={c.bp_mensal} real={c.vendas_mensal} mes={mes} altura={180} />
      </div>
      {brief.compromisso && (
        <div style={{ marginTop: 12, padding: '8px 10px', borderRadius: 8, background: 'var(--bg)', border: '1px solid var(--border)' }}>
          <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 3 }}>Compromisso do brief diário · {brief.data || ''} · {brief.tom || ''}</div>
          <RaTexto style={{ fontSize: 12 }}>{brief.compromisso}</RaTexto>
        </div>
      )}
      <div style={{ marginTop: 12 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6 }}>OPs de marketing (ano e abertas)</div>
        {ops == null ? <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>a carregar…</div> : !ops.length ? <AnVazio altura={50} texto="sem OPs de marketing" /> : (
          <div style={{ maxHeight: 260, overflowY: 'auto', border: '1px solid var(--border)', borderRadius: 8 }} className="scrollbar">
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11.5 }}>
              <thead>
                <tr style={{ color: 'var(--text-dim)', textAlign: 'left', background: 'var(--bg)' }}>
                  {['Início', 'Entidade', 'Fonte', 'Etapa', 'Estado', '€'].map(h => <th key={h} style={{ padding: '6px 8px', fontWeight: 600, fontSize: 10.5, position: 'sticky', top: 0, background: 'var(--bg)' }}>{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {ops.map(o => (
                  <tr key={o.fm_id} className="an-tr" style={{ borderTop: '1px solid var(--border)' }}>
                    <td style={{ padding: '5px 8px', whiteSpace: 'nowrap', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>{String(o.inicio || '').slice(0, 10)}</td>
                    <td style={{ padding: '5px 8px', maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={o.produto || ''}>{o.entidade || '—'}</td>
                    <td style={{ padding: '5px 8px' }}>{o.fonte}</td>
                    <td style={{ padding: '5px 8px', whiteSpace: 'nowrap' }}>{o.etapa}</td>
                    <td style={{ padding: '5px 8px', color: o.estado === 'WON' ? 'var(--success)' : o.estado === 'LOST' ? 'var(--danger)' : 'var(--text)' }}>{o.estado}</td>
                    <td style={{ padding: '5px 8px', textAlign: 'right', whiteSpace: 'nowrap' }}>{o.valor_eur ? anFmtEur(o.valor_eur) : '—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </AnCartao>
  );
};

const RaComerciais = ({ data, isMobile, equipaInicial }) => {
  const f = data.ficha || {};
  const an = data.analise || {};
  const g = f.graficos || {};
  const rpc = f.rpc || {};
  const Filtro = window.ResFiltro;
  const [equipa, setEquipa] = React.useState(equipaInicial || '');
  const [ordem, setOrdem] = React.useState('gap');
  const [sel, setSel] = React.useState(null);
  React.useEffect(() => { if (equipaInicial) setEquipa(equipaInicial); }, [equipaInicial]);
  const rpcPorCod = Object.fromEntries((rpc.comerciais || []).map(c => [c.codigo, c]));
  const prioritarios = Object.fromEntries((an.comerciais_prioritarios || []).map(p => [p.codigo, p]));
  const todos = (g.comerciais || []).filter(c => c.bp_ano > 0 || c.leads_ytd > 0);
  const equipas = [...new Map(todos.map(c => [c.equipa, c.equipa_label])).entries()];
  const ordenar = {
    gap: (a, b) => Number(b.gap_proj || 0) - Number(a.gap_proj || 0),
    pct: (a, b) => Number(a.pct_bp ?? 999) - Number(b.pct_bp ?? 999),
    leads: (a, b) => Number(b.leads_ytd || 0) - Number(a.leads_ytd || 0),
    racio: (a, b) => Number(a.racio_leads ?? 999) - Number(b.racio_leads ?? 999),
  };
  const lista = todos.filter(c => !equipa || c.equipa === equipa).sort(ordenar[ordem]);
  const pontos = lista.filter(c => c.bp_ano > 0 && c.pct_bp != null).map(c => ({
    id: c.codigo, label: `${c.nome} · ${c.codigo}`, sub: c.equipa_label, x: c.pct_bp, y: c.racio_leads ?? 0, r: c.gap_proj,
    yTxt: `${anFmtN(c.ritmo_mes, 1)} de ${anFmtN(c.leads_nec_mes, 1)} por mês`,
  }));
  const selC = sel ? todos.find(c => c.codigo === sel) : null;
  const cob = rpc.cobertura || {};
  const th = { padding: '7px 8px', fontWeight: 600, fontSize: 10.5, color: 'var(--text-dim)', textAlign: 'left', whiteSpace: 'nowrap', position: 'sticky', top: 0, background: 'var(--bg-elev)' };
  const td = { padding: '6px 8px', whiteSpace: 'nowrap' };

  return (
    <>
      <AnCartao titulo="Comerciais: BP contra leads de marketing" sub="% do BP à data (eixo X) · leads de marketing ÷ necessárias (eixo Y) · tamanho = gap projectado. Carregue numa bolha para abrir o comercial."
        nota={an.notas_graficos?.comerciais} style={{ marginBottom: 14 }}>
        <AnDispersao pontos={pontos} onPick={setSel} altura={isMobile ? 260 : 320} />
      </AnCartao>

      {selC && <RaComercialDetalhe c={selC} rpcCom={rpcPorCod[selC.codigo]} prioritario={prioritarios[selC.codigo]} mes={g.mes} onClose={() => setSel(null)} />}

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center', marginBottom: 10 }}>
        {Filtro && <Filtro label="Equipa" value={equipa} onChange={setEquipa} options={[{ value: '', label: 'Todas' }, ...equipas.map(([id, l]) => ({ value: id, label: l }))]} />}
        {Filtro && <Filtro label="Ordenar" value={ordem} onChange={setOrdem} options={[
          { value: 'gap', label: 'Maior gap projectado' }, { value: 'pct', label: 'Menor % do BP' },
          { value: 'racio', label: 'Menos leads contra necessárias' }, { value: 'leads', label: 'Mais leads de marketing' },
        ]} />}
        <span style={{ fontSize: 11, color: 'var(--text-muted)', marginLeft: 6 }}>{lista.length} comerciais</span>
      </div>

      <div className="scrollbar" style={{ border: '1px solid var(--border)', borderRadius: 10, background: 'var(--bg-elev)', overflow: 'auto', maxHeight: 560, marginBottom: 20 }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
          <thead>
            <tr>
              {['Comercial', 'Equipa', '% do BP', 'Margem', 'Cobertura', 'Win rate', 'Leads mkt 12 meses', 'Ritmo / necessárias', "WIN's mkt", 'Brief'].map(h => <th key={h} style={th}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            {lista.map(c => {
              const activo = sel === c.codigo;
              const briefCor = window.AN_LUZ?.[RA_BRIEF_TOM[String(c.brief_tom || '').toLowerCase()]] || 'var(--text-dim)';
              return (
                <tr key={c.codigo} className="an-tr" onClick={() => setSel(activo ? null : c.codigo)}
                  style={{ borderTop: '1px solid var(--border)', cursor: 'pointer', background: activo ? 'color-mix(in oklch, var(--ai-500, #3859D0) 8%, transparent)' : undefined }}>
                  <td style={td}>
                    <div style={{ fontWeight: 600 }}>{c.nome}{prioritarios[c.codigo] ? <span title="Comercial prioritário da análise" style={{ color: 'var(--ai-500, #3859D0)', marginLeft: 4 }}>●</span> : null}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{c.codigo}</div>
                  </td>
                  <td style={{ ...td, fontSize: 11, color: 'var(--text-muted)' }}>{c.equipa_label}</td>
                  <td style={td}>{c.bp_ano > 0 ? <RaBarraInline pct={c.pct_bp} /> : <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>sem BP</span>}</td>
                  <td style={td}><RaBarraInline pct={c.margem_pct == null ? null : c.margem_pct / 35 * 100} largura={40} /></td>
                  <td style={{ ...td, color: c.cobertura == null ? 'var(--text-dim)' : c.cobertura >= 4 ? 'var(--success)' : c.cobertura >= 2 ? 'var(--warning)' : 'var(--danger)', fontWeight: 600 }}>{c.cobertura == null ? '—' : `${anFmtN(c.cobertura, 2)}×`}</td>
                  <td style={{ ...td, color: c.win_rate == null ? 'var(--text-dim)' : c.win_rate >= 25 ? 'var(--success)' : c.win_rate >= 15 ? 'var(--warning)' : 'var(--danger)', fontWeight: 600 }}>{c.win_rate == null ? '—' : `${anFmtN(c.win_rate, 1)} %`}</td>
                  <td style={td}><AnSpark valores={(c.leads_mensal || []).slice(0, g.mes || 12)} labels={(window.AN_MESES || []).slice(0, g.mes || 12)} w={90} h={22} /> <span style={{ fontSize: 11, marginLeft: 4 }}>{anFmtN(c.leads_ytd)}</span></td>
                  <td style={{ ...td, fontSize: 11.5 }}>{anFmtN(c.ritmo_mes, 1)} / {c.leads_nec_mes != null ? anFmtN(c.leads_nec_mes, 1) : '—'}</td>
                  <td style={{ ...td, fontSize: 11.5 }}>{anFmtN(c.wins_mkt)}{c.wins_mkt_eur ? ` · ${anFmtEur(c.wins_mkt_eur)}` : ''}</td>
                  <td style={td}>{c.brief_tom ? <RaChip cor={briefCor}>{c.brief_tom}</RaChip> : <span style={{ color: 'var(--text-dim)' }}>—</span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <RaSeccao titulo="Cobertura dos dados" sub="Onde o marketing e o BP estão desalinhados">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
          <AnCartao titulo="Com leads e sem BP" sub="Comerciais que recebem leads de marketing e não têm BP">
            {(cob.leads_sem_bp || []).length ? (cob.leads_sem_bp || []).map(x => (
              <div key={x.codigo} style={{ fontSize: 11.5, display: 'flex', justifyContent: 'space-between', gap: 6, padding: '3px 0' }}><span>{x.nome} <span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>{x.codigo}</span></span><span>{anFmtN(x.leads_ytd)} leads</span></div>
            )) : <AnVazio altura={50} texto="nenhum" />}
          </AnCartao>
          <AnCartao titulo="Com BP e sem leads" sub="Comerciais com BP e sem leads de marketing no ano">
            {(cob.bp_sem_leads || []).length ? (cob.bp_sem_leads || []).map(x => (
              <div key={x.codigo} style={{ fontSize: 11.5, display: 'flex', justifyContent: 'space-between', gap: 6, padding: '3px 0' }}><span>{x.nome} <span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>{x.codigo}</span></span><span>{x.bp_ano ? anFmtEur(x.bp_ano) : ''}</span></div>
            )) : <AnVazio altura={50} texto="nenhum" />}
          </AnCartao>
          <AnCartao titulo="Com BP e sem vendas no snapshot" sub="Código ERP ou empresa a confirmar">
            {(cob.bp_sem_vendas_snapshot || []).length ? (cob.bp_sem_vendas_snapshot || []).map(x => (
              <div key={x.codigo} style={{ fontSize: 11.5, display: 'flex', justifyContent: 'space-between', gap: 6, padding: '3px 0' }}><span>{x.nome} <span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>{x.codigo}</span></span><span>{x.bp_ano ? anFmtEur(x.bp_ano) : ''}</span></div>
            )) : <AnVazio altura={50} texto="nenhum" />}
          </AnCartao>
          <AnCartao titulo="OPs de marketing sem vendedor" sub="No ano, por fonte">
            {cob.ops_sem_vendedor?.n ? (
              <>
                <div className="font-display" style={{ fontSize: 20, fontWeight: 700 }}>{anFmtN(cob.ops_sem_vendedor.n)}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{Object.entries(cob.ops_sem_vendedor.por_fonte || {}).map(([k, v]) => `${k} ${v}`).join(' · ')}</div>
                {(cob.ops_sem_vendedor.exemplos || []).slice(0, 4).map((x, i) => <div key={i} style={{ fontSize: 10.5, color: 'var(--text-dim)', marginTop: 3 }}>{typeof x === 'string' ? x : [x.entidade_nome || x.entidade, x.produto_name || x.produto, String(x.start_date || x.inicio || '').slice(0, 10)].filter(Boolean).join(' · ')}</div>)}
              </>
            ) : <AnVazio altura={50} texto="nenhuma" />}
          </AnCartao>
        </div>
      </RaSeccao>
    </>
  );
};

// ── Histórico ───────────────────────────────────────────────────────────────
const RaHistorico = ({ hist, dia, setDia, isMobile }) => {
  const [janela, setJanela] = React.useState(30);
  const Filtro = window.ResFiltro;
  const todas = [...(hist?.analises || [])].sort((a, b) => a.dia.localeCompare(b.dia));
  const limite = new Date(Date.now() - janela * 86400000).toISOString().slice(0, 10);
  const lista = todas.filter(a => a.dia >= limite);
  const kv = (a, id) => (a.kpis || []).find(k => k.id === id)?.valor ?? null;
  const semanas = (hist?.semanas || []).map(s => ({ ...s, semana: String(s.semana).slice(0, 10) }));
  const mdUrl = (id) => `${RA_API}/${id}.md?${raQs()}`;
  return (
    <>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 14, flexWrap: 'wrap' }}>
        {Filtro && <Filtro label="Janela" value={janela} onChange={setJanela} options={[{ value: 30, label: '30 dias' }, { value: 90, label: '90 dias' }]} />}
        <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{lista.length === 1 ? '1 análise diária' : `${lista.length} análises diárias`}</span>
      </div>
      <AnCartao titulo="Tom da análise por dia" sub="Carregue num dia para abrir essa análise" style={{ marginBottom: 14 }}>
        <AnTomTimeline dias={lista.map(a => ({ dia: a.dia, tom: a.tom, titulo: a.titulo }))} onPick={setDia} activo={dia} />
      </AnCartao>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, minmax(0, 1fr))', gap: 12, marginBottom: 14 }}>
        <AnCartao titulo="% do BP à data" sub="Snapshot Primavera">
          <AnLinha pontos={lista.map(a => ({ x: a.dia, y: a.pct_bp }))} alvo={100} fmt={(v) => `${anFmtN(v, 1)} %`} />
        </AnCartao>
        <AnCartao titulo="Défice de leads por mês" sub="Necessárias menos o ritmo de 3 meses">
          <AnLinha pontos={lista.map(a => ({ x: a.dia, y: a.defice_mes }))} cor="var(--danger)" fmt={(v) => anFmtN(v, 1)} />
        </AnCartao>
        <AnCartao titulo="Capacidade da Digi AI SDR" sub="% das entradas já classificadas">
          <AnLinha pontos={lista.map(a => ({ x: a.dia, y: kv(a, 'sdr') }))} alvo={100} fmt={(v) => `${anFmtN(v, 1)} %`} />
        </AnCartao>
      </div>
      <AnCartao titulo="Campanhas por semana" sub="Propostas, briefings criados e descartadas" style={{ marginBottom: 14 }}>
        <AnBarrasSemana semanas={semanas} />
      </AnCartao>
      <RaSeccao titulo="Análises por dia">
        <div style={{ border: '1px solid var(--border)', borderRadius: 10, background: 'var(--bg-elev)', overflow: 'hidden' }}>
          {[...lista].reverse().map((a, i) => {
            const cor = window.AN_LUZ?.[a.tom] || 'var(--text-dim)';
            const camps = a.campanhas || {};
            return (
              <div key={a.id} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '110px 1fr 90px 110px 150px 120px', gap: 10, alignItems: 'center', padding: '8px 12px', borderTop: i ? '1px solid var(--border)' : 'none', fontSize: 11.5, background: a.dia === dia ? 'color-mix(in oklch, var(--ai-500, #3859D0) 6%, transparent)' : '' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11 }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: cor }} />{a.dia}</span>
                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: isMobile ? 'normal' : 'nowrap' }} title={a.titulo}>{a.titulo}</span>
                <span>{a.pct_bp != null ? `${anFmtN(a.pct_bp, 1)} % BP` : '—'}</span>
                <span>défice {anFmtN(a.defice_mes, 1)}/mês</span>
                <span style={{ color: 'var(--text-muted)' }}>{anFmtN(camps.proposta || 0)} prop. · {anFmtN(camps.briefing_criado || 0)} brief. · {anFmtN(camps.descartada || 0)} desc.</span>
                <span style={{ display: 'flex', gap: 6, justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
                  <RaBotao onClick={() => setDia(a.dia)}>Abrir</RaBotao>
                  <a className="btn btn-sm" href={mdUrl(a.id)} target="_blank" rel="noopener noreferrer">MD</a>
                </span>
              </div>
            );
          })}
          {!lista.length && <AnVazio altura={80} texto="sem análises nesta janela" />}
        </div>
      </RaSeccao>
    </>
  );
};

// ── Ecrã ────────────────────────────────────────────────────────────────────
const MktResultadosAnaliseScreen = ({ setSub }) => {
  const brandApi = window.useMktBrand ? window.useMktBrand() : { brand: 'todas', isAll: true, setBrand: () => {} };
  const { brand, isAll, setBrand, userMarcas } = brandApi;
  const bp = window.useBreakpoint ? window.useBreakpoint() : { isMobile: false };
  const isMobile = bp.isMobile;
  const marcasNav = [{ id: 'todas', nome: 'Todas' }, ...((window.MKT_BRANDS || []).filter(b => b.id !== 'todas' && (!userMarcas?.length || userMarcas.includes(b.id))))];
  const marca = isAll ? 'todas' : brand;
  const [tab, setTabState] = React.useState(() => { try { return sessionStorage.getItem('mkt-analise-tab') || 'resumo'; } catch { return 'resumo'; } });
  const scrollRef = React.useRef(null);
  const setTab = (t) => {
    setTabState(t);
    try { sessionStorage.setItem('mkt-analise-tab', t); } catch {}
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };
  const [dia, setDia] = React.useState('');
  const [data, setData] = React.useState(null);
  const [hist, setHist] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [erro, setErro] = React.useState(null);
  window.useMktZoneLoading(loading && !data);
  const [gerando, setGerando] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const [equipaComerciais, setEquipaComerciais] = React.useState('');
  const [overTab, setOverTab] = React.useState(null);
  const MenuAccoes = window.ResMenuAccoes;
  const Filtro = window.ResFiltro;

  React.useEffect(() => {
    try {
      const pedida = localStorage.getItem('mkt-analise-marca');
      if (pedida) {
        localStorage.removeItem('mkt-analise-marca');
        if (pedida !== marca && marcasNav.some(b => b.id === pedida)) setBrand && setBrand(pedida);
      }
    } catch {}
  }, []);

  const carregar = React.useCallback(() => {
    setLoading(true); setErro(null);
    return Promise.all([
      raFetch(`${RA_API}?${raQs({ marca, dia })}`),
      raFetch(`${RA_API}/historico?${raQs({ marca, dias: 90 })}`).catch(() => null),
    ]).then(([d, h]) => { setData(d); setHist(h); }).catch(e => setErro(e.message)).finally(() => setLoading(false));
  }, [marca, dia]);
  React.useEffect(() => { carregar(); }, [carregar]);
  React.useEffect(() => { setDia(''); }, [marca]);

  const actualizar = async () => {
    setGerando(true); setMsg('A Digi AI está a refazer a análise desta marca. Demora cerca de 2 minutos.');
    try {
      await raFetch(`${RA_API}/gerar?${raQs()}`, { method: 'POST', body: JSON.stringify({ marca, refrescar: true, email: window.currentUser?.email }) });
      setMsg(null); setDia(''); await carregar();
    } catch (e) { setMsg(`Falhou: ${e.message}`); } finally { setGerando(false); }
  };
  const abrirMd = () => { if (data?.id) window.open(`${RA_API}/${data.id}.md?${raQs()}`, '_blank', 'noopener'); };
  const exportarCsv = () => {
    const cs = data?.analise?.campanhas || [];
    raCsv([
      ['dia', 'marca', 'tipo', 'equipa', 'titulo', 'estado', 'leads_alvo_mes', 'orcamento_ref_eur_mes', 'cpl_ref_eur', 'impacto_eur', 'canal', 'prazo', 'kpi', 'publico', 'porque', 'gatilho_id'],
      ...cs.map(c => [String(data.dia).slice(0, 10), c.marca, RA_TIPO[c.tipo] || c.tipo, c.equipa_label, c.titulo, RA_ESTADO[c.estado || 'proposta'], c.leads_alvo, c.orcamento_ref_eur, c.cpl_ref_eur, c.impacto_eur, c.canal, c.prazo, c.kpi, c.publico, c.porque, c.gatilho_id]),
    ], `propostas-resultados-${marca}-${String(data?.dia || '').slice(0, 10)}.csv`);
  };

  const an = data?.analise;
  const tom = an?.tom;
  const diasHist = (hist?.analises || []).map(a => a.dia);
  const diaActual = data?.dia ? String(data.dia).slice(0, 10) : '';
  const menu = [
    { id: 'resultados', label: 'Resultados', sub: 'Funil, objectivos e campanhas', onClick: () => setSub && setSub('resultados') },
    { id: 'analise', label: 'Análise da Digi AI', sub: 'Leitura, BP e campanhas a fazer', ponto: tom ? window.AN_LUZ?.[tom] : undefined, checked: true, onClick: () => setTab('resumo') },
    { separador: true },
    ...(data?.admin ? [{ id: 'actualizar', label: gerando ? 'A actualizar…' : 'Actualizar análise', sub: 'Refaz a análise desta marca com os dados de agora', disabled: gerando, onClick: actualizar }] : []),
    { id: 'md', label: 'Abrir markdown do dia', sub: 'Registo da análise em markdown', disabled: !data?.tem_md, onClick: abrirMd },
    { id: 'csv', label: 'Exportar propostas CSV', sub: 'Campanhas propostas pela Digi AI', disabled: !(an?.campanhas || []).length, onClick: exportarCsv },
  ];
  const Trilho = window.ResTrilho;

  const nPropostas = (an?.campanhas || []).filter(c => (c.estado || 'proposta') === 'proposta').length;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, background: 'var(--bg)' }}>
      <div style={{ background: 'var(--bg-elev)', borderBottom: '1px solid var(--border)', padding: isMobile ? '16px 16px 0' : '20px 40px 0', flexShrink: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 6, fontFamily: 'var(--font-mono)' }}>
          MARKETING · RESULTADOS
        </div>
        <h1 style={{ margin: 0, fontSize: 21, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          Resultados
        </h1>
        <div style={{ height: 1, background: 'var(--border)', margin: isMobile ? '14px -16px 0' : '16px -40px 0' }} />
        <div style={{ display: 'flex', gap: 0, overflowX: 'auto' }}>
          {marcasNav.map(b => {
            const active = b.id === marca;
            return (
              <button key={b.id} type="button" onClick={() => setBrand && setBrand(b.id)}
                style={{
                  background: 'none', border: 'none', outline: 'none',
                  borderBottom: `2px solid ${active ? 'var(--ai-500)' : 'transparent'}`,
                  color: active ? 'var(--text)' : 'var(--text-muted)',
                  fontSize: 13, fontWeight: active ? 600 : 500,
                  fontFamily: 'var(--font-display)', letterSpacing: '.01em',
                  padding: '10px 18px 12px', cursor: 'pointer', whiteSpace: 'nowrap',
                  transition: 'color .15s, border-color .15s',
                }}>{b.nome}</button>
            );
          })}
        </div>
      </div>

      <div ref={scrollRef} className="scrollbar" style={{ overflowY: 'auto', flex: 1, minHeight: 0, padding: isMobile ? '18px 16px 64px' : '28px 40px 64px', background: 'var(--bg)' }}>
        {Trilho && (
          <Trilho
            segmentos={[{ label: 'Resultados', onClick: () => setSub && setSub('resultados') }, { label: 'Análise da Digi AI' }]}
            nota={
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-muted)', flexWrap: 'wrap' }}>
                {tom && (
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: window.AN_LUZ?.[tom], fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 10, fontFamily: 'var(--font-mono)' }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: window.AN_LUZ?.[tom] }} />{RA_TOM[tom]}
                  </span>
                )}
                <span>{diaActual ? `${raDiaLabel(diaActual)} · gerada ${raHora(data.gerado_em)}` : 'Sem análise gravada'}</span>
                {data?.origem && <span>{data.origem === 'ai' ? 'Digi AI' : 'regras'}</span>}
                {data?.ficha?.rpc?.snapshot?.mes_max && <span>snapshot até {String(data.ficha.rpc.snapshot.mes_max).padStart(2, '0')}/{data.ficha.rpc.ano}</span>}
              </span>
            }
            extra={
              <>
                {Filtro && diasHist.length > 0 && (
                  <Filtro label="Dia" value={dia || diaActual} onChange={(v) => setDia(v === diasHist[0] ? '' : v)}
                    options={diasHist.map(d => ({ value: d, label: raDiaLabel(d) }))} menuMinWidth={150} />
                )}
                {MenuAccoes && <MenuAccoes icone items={menu} />}
              </>
            } />
        )}
        <div style={{ display: 'flex', gap: 4, marginBottom: 18, overflowX: 'auto', borderBottom: '1px solid var(--border)' }}>
          {RA_TABS.map(t => {
            const active = tab === t.id;
            const over = overTab === t.id;
            return (
              <button key={t.id} type="button" onClick={() => setTab(t.id)} onMouseEnter={() => setOverTab(t.id)} onMouseLeave={() => setOverTab(null)}
                style={{
                  background: over && !active ? 'var(--bg-hover, #f1f5f9)' : 'none', border: 'none', outline: 'none',
                  borderBottom: `2px solid ${active ? 'var(--ai-500)' : 'transparent'}`, marginBottom: -1,
                  color: active || over ? 'var(--text)' : 'var(--text-muted)', fontSize: 12.5, fontWeight: active ? 650 : 500,
                  padding: '8px 14px 10px', cursor: 'pointer', whiteSpace: 'nowrap', borderRadius: '6px 6px 0 0',
                  transition: 'color .15s, border-color .15s, background .15s', fontFamily: 'inherit',
                }}>
                {t.label}
                {t.id === 'campanhas' && nPropostas > 0 && <span style={{ marginLeft: 6, fontSize: 10, fontWeight: 700, color: '#fff', background: 'var(--ai-500, #3859D0)', borderRadius: 99, padding: '1px 6px' }}>{nPropostas}</span>}
              </button>
            );
          })}
        </div>

        {msg && <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 8, fontSize: 12, background: 'color-mix(in oklch, var(--ai-500, #3859D0) 8%, transparent)', color: 'var(--text)' }}>{msg}</div>}
        {loading && !data && <AnVazio altura={200} texto="A carregar a análise…" />}
        {erro && <div style={{ padding: 16, color: 'var(--danger)', fontSize: 12.5 }}>{erro}</div>}
        {!loading && !erro && data && !data.analise && (
          <AnCartao titulo="Ainda sem análise para esta marca">
            <RaTexto>A análise diária corre a partir das 06:30 para todas as marcas e fica aqui com a leitura, os gráficos e as campanhas a fazer.</RaTexto>
            {data.admin && <div style={{ marginTop: 10 }}><RaBotao primario disabled={gerando} onClick={actualizar}>{gerando ? 'A gerar…' : 'Gerar análise agora'}</RaBotao></div>}
          </AnCartao>
        )}
        {data?.analise && data?.ficha && (
          <div style={{ opacity: loading ? 0.6 : 1, transition: 'opacity .15s' }}>
            {tab === 'resumo' && <RaResumo data={data} hist={hist} isMobile={isMobile} />}
            {tab === 'campanhas' && <RaCampanhas data={data} marca={marca} setSub={setSub} onMudou={carregar} isMobile={isMobile} />}
            {tab === 'equipas' && <RaEquipas data={data} isMobile={isMobile} onVerComerciais={(eq) => { setEquipaComerciais(eq); setTab('comerciais'); }} />}
            {tab === 'comerciais' && <RaComerciais data={data} isMobile={isMobile} equipaInicial={equipaComerciais} />}
            {tab === 'historico' && <RaHistorico hist={hist} dia={diaActual} setDia={(d) => { setDia(d === diasHist[0] ? '' : d); setTab('resumo'); }} isMobile={isMobile} />}
          </div>
        )}
      </div>
    </div>
  );
};

window.MktResultadosAnaliseScreen = MktResultadosAnaliseScreen;