/* =============================================================================
   screen_comercial_rpc_sdr.jsx — RPC SDR · Outbound & Prospecção
   =============================================================================
   Fase 1: dados mock. Ligações à BD a fazer numa fase seguinte.
   ============================================================================= */

const SDR_MESES = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

const SDR_TABS = [
  { id: 'funil',       label: 'Funil & SLA' },
  { id: 'por-sdr',     label: 'Por SDR' },
  { id: 'definicoes',  label: 'Definições' },
];

const SDR_METAS = {
  taxa_contacto:  70,
  taxa_qualif:    40,
  agendadas_mes:  17,
  noshow_pct:     15,
  tempo_resp:      4,
  conv_pct:       40,
};

// ─── SDR List (adicionar aqui quando houver mais SDRs) ────────────────────────
const SDR_LIST = [
  { id: 'carina', nome: 'Carina Reis', isAI: false },
];

// ─── Mock data (Fase 1) — por SDR ─────────────────────────────────────────────
const SDR_FUNIL_BY_SDR = {
  carina: [
    { mes:'Jan', atribuidos:42, contactados:32, qualificados:28, agendadas:18, noshow_pct:11, tempo_resp:3.1, passados:16, pipeline_k:58,  conv_pct:57.1 },
    { mes:'Fev', atribuidos:38, contactados:29, qualificados:25, agendadas:16, noshow_pct:13, tempo_resp:3.4, passados:14, pipeline_k:50,  conv_pct:56.0 },
    { mes:'Mar', atribuidos:45, contactados:35, qualificados:30, agendadas:20, noshow_pct:10, tempo_resp:2.9, passados:18, pipeline_k:65,  conv_pct:60.0 },
    { mes:'Abr', atribuidos:40, contactados:30, qualificados:26, agendadas:15, noshow_pct:16, tempo_resp:4.2, passados:13, pipeline_k:46,  conv_pct:50.0 },
    { mes:'Mai', atribuidos:48, contactados:38, qualificados:33, agendadas:22, noshow_pct: 9, tempo_resp:2.7, passados:20, pipeline_k:72,  conv_pct:60.6 },
    { mes:'Jun', atribuidos:46, contactados:36, qualificados:31, agendadas:20, noshow_pct:12, tempo_resp:3.0, passados:18, pipeline_k:65,  conv_pct:58.1 },
    { mes:'Jul', atribuidos:38, contactados:27, qualificados:20, agendadas:12, noshow_pct:18, tempo_resp:4.5, passados:10, pipeline_k:36,  conv_pct:50.0 },
    { mes:'Ago', atribuidos:28, contactados:18, qualificados:12, agendadas: 7, noshow_pct:24, tempo_resp:5.8, passados: 5, pipeline_k:18,  conv_pct:41.7 },
    { mes:'Set', atribuidos:50, contactados:42, qualificados:38, agendadas:26, noshow_pct: 8, tempo_resp:1.8, passados:24, pipeline_k:86,  conv_pct:63.2 },
  ],
};

// Agregado "Todos" — soma de todos os SDRs (por agora = Carina; escalar aqui no futuro)
const SDR_FUNIL_ALL = SDR_FUNIL_BY_SDR.carina;

const SDR_POR_SDR = [
  { nome:'SDR AI · digi.ai Outbound', isAI:true,  atribuidos:130, contactados:105, qualificados:25, agendadas: 7, pipeline_k:26 },
  { nome:'Carina Reis',               isAI:false, atribuidos: 50, contactados: 42, qualificados:38, agendadas:26, pipeline_k:86 },
];

const SDR_DEFINICOES = [
  { kpi:'Taxa de Contacto',                  formula:'Contactados ÷ Atribuídos',                            meta:`≥ ${SDR_METAS.taxa_contacto}%`,    regra:'Conta qualquer tentativa registada na ficha (chamada, WhatsApp, email) com resposta do lead.' },
  { kpi:'Taxa de Qualificação BANT',          formula:'Qualificados BANT ÷ Contactados',                     meta:`≥ ${SDR_METAS.taxa_qualif}%`,      regra:'Só conta como qualificado o lead com nota BANT de 4 campos preenchidos — parcial não entra no numerador.' },
  { kpi:'Visitas/Demos Agendadas',            formula:'Nº de agendamentos com data e comercial responsável',  meta:`≥ ${SDR_METAS.agendadas_mes}/mês`, regra:'Meta definida no Daily Prospect; o SDR AI conta para o volume mas não para a meta individual do SDR Humano.' },
  { kpi:'Taxa de No-Show',                    formula:'Não Compareceu ÷ Agendadas',                          meta:`≤ ${SDR_METAS.noshow_pct}%`,       regra:'Resultado da visita/demo registado até 24h depois — sem registo, a visita fica "por confirmar" e não fecha o KPI.' },
  { kpi:'Tempo de Resposta a Lead Novo',      formula:'1º contacto − hora de atribuição do lead',            meta:`≤ ${SDR_METAS.tempo_resp}h úteis`, regra:'Timestamp automático da ficha; separa SDR AI (minutos) de SDR Humano (horas).' },
  { kpi:'Leads Passados à Equipa',            formula:'Visitas/demos realizadas entregues ao comercial',      meta:'—',                               regra:'O handoff fica registado na ficha CRM — é o que o Maestro AI lê para montar o Daily Prospect do comercial.' },
  { kpi:'Taxa de Conversão Qualif.→Passado', formula:'Leads Passados ÷ Qualificados BANT',                  meta:`≥ ${SDR_METAS.conv_pct}%`,        regra:'Mede se a qualificação gera oportunidade real — não só atividade registada.' },
  { kpi:'Pipeline Gerado',                    formula:'Valor estimado das OPs nascidas de um lead SDR',      meta:'—',                               regra:'Herdado do RPC Equipamento/Consumíveis no momento em que a OP ou encomenda é criada.' },
];

// ─── Helpers ─────────────────────────────────────────────────────────────────

function sdrPct(num, den) {
  if (!den) return null;
  return Math.round(num / den * 1000) / 10;
}

function sdrColor(val, meta, higherIsBetter = true) {
  if (val === null || val === undefined) return 'var(--dgd-fg-3)';
  return higherIsBetter
    ? (val >= meta ? '#166534' : '#991b1b')
    : (val <= meta ? '#166534' : '#991b1b');
}

function sdrBg(val, meta, higherIsBetter = true) {
  if (val === null || val === undefined) return 'transparent';
  const ok = higherIsBetter ? val >= meta : val <= meta;
  return ok
    ? 'color-mix(in oklch,#22c55e 8%,transparent)'
    : 'color-mix(in oklch,#ef4444 8%,transparent)';
}

// ─── Sub-components ──────────────────────────────────────────────────────────

const SdrKpiTile = ({ label, value, sub, color }) => (
  <div style={{ flex:'1 1 140px', padding:'10px 18px', borderRadius:8, background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)' }}>
    <div style={{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', letterSpacing:'0.08em', marginBottom:3 }}>{label}</div>
    <div className="font-display" style={{ fontSize:22, fontWeight:700, color:color||'var(--dgd-fg-1)', letterSpacing:'-0.02em', lineHeight:1.1 }}>{value}</div>
    <div style={{ fontSize:10.5, color:'var(--dgd-fg-3)', marginTop:4 }}>{sub}</div>
  </div>
);

const SdrSectionRow = ({ children, cols }) => (
  <tr>
    <td colSpan={cols} style={{ background:'var(--dgd-bg-app,#f8fafc)', color:'var(--dgd-fg-3)', fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', letterSpacing:'0.08em', textTransform:'uppercase', fontWeight:600, padding:'5px 8px', borderBottom:'1px solid var(--dgd-border-1)' }}>{children}</td>
  </tr>
);

// ─── Tabela de métricas do funil (reutilizável por SDR ou agregado) ───────────

const SdrFunilTable = ({ rows }) => {
  const mesIdx = rows.length - 1;
  const nCols  = rows.length + 3; // label + obj + meses + ytd

  const ytd = rows.reduce((s, r) => ({
    atribuidos:   s.atribuidos   + r.atribuidos,
    contactados:  s.contactados  + r.contactados,
    qualificados: s.qualificados + r.qualificados,
    agendadas:    s.agendadas    + r.agendadas,
    passados:     s.passados     + r.passados,
    pipeline_k:   s.pipeline_k   + r.pipeline_k,
  }), { atribuidos:0, contactados:0, qualificados:0, agendadas:0, passados:0, pipeline_k:0 });

  const tcYTD   = sdrPct(ytd.contactados, ytd.atribuidos);
  const tqYTD   = sdrPct(ytd.qualificados, ytd.contactados);
  const convYTD = sdrPct(ytd.passados, ytd.qualificados);

  const th     = { padding:'7px 8px', textAlign:'right', fontSize:11, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', borderBottom:'1px solid var(--dgd-border-1)', whiteSpace:'nowrap', fontWeight:600 };
  const thL    = { ...th, textAlign:'left' };
  const tdBase = { padding:'6px 8px', fontSize:12, fontFamily:'var(--dgd-font-mono,monospace)', borderBottom:'1px solid var(--dgd-border-1)', whiteSpace:'nowrap', textAlign:'right', color:'var(--dgd-fg-2)' };
  const tdL    = { ...tdBase, textAlign:'left' };

  return (
    <div style={{ overflowX:'auto' }}>
      <table style={{ borderCollapse:'collapse', width:'100%', fontSize:12 }}>
        <thead>
          <tr>
            <th style={{ ...thL, minWidth:220 }}>Métrica</th>
            <th style={{ ...th, color:'#1d4ed8' }}>Obj.</th>
            {rows.map((r, i) => (
              <th key={r.mes} style={{ ...th, fontWeight:i===mesIdx?700:600, color:i===mesIdx?'var(--dgd-fg-1)':'var(--dgd-fg-3)' }}>{r.mes}</th>
            ))}
            <th style={{ ...th, color:'var(--dgd-fg-1)' }}>YTD</th>
          </tr>
        </thead>
        <tbody>
          <SdrSectionRow cols={nCols}>Funil de prospecção</SdrSectionRow>
          <tr>
            <td style={tdL}>Leads Atribuídos</td>
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400 }}>{r.atribuidos}</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{ytd.atribuidos}</td>
          </tr>
          <tr>
            <td style={tdL}>Leads Contactados</td>
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400 }}>{r.contactados}</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{ytd.contactados}</td>
          </tr>
          <tr>
            <td style={tdL}>Taxa de Contacto</td>
            <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>≥{SDR_METAS.taxa_contacto}%</td>
            {rows.map((r,i) => {
              const v = sdrPct(r.contactados, r.atribuidos);
              return <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:sdrColor(v,SDR_METAS.taxa_contacto), background:i===mesIdx?sdrBg(v,SDR_METAS.taxa_contacto):'transparent' }}>{v}%</td>;
            })}
            <td style={{ ...tdBase, fontWeight:700, color:sdrColor(tcYTD,SDR_METAS.taxa_contacto) }}>{tcYTD}%</td>
          </tr>
          <tr>
            <td style={tdL}>Qualificados BANT</td>
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400 }}>{r.qualificados}</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{ytd.qualificados}</td>
          </tr>
          <tr>
            <td style={tdL}>Taxa de Qualificação BANT</td>
            <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>≥{SDR_METAS.taxa_qualif}%</td>
            {rows.map((r,i) => {
              const v = sdrPct(r.qualificados, r.contactados);
              return <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:sdrColor(v,SDR_METAS.taxa_qualif), background:i===mesIdx?sdrBg(v,SDR_METAS.taxa_qualif):'transparent' }}>{v}%</td>;
            })}
            <td style={{ ...tdBase, fontWeight:700, color:sdrColor(tqYTD,SDR_METAS.taxa_qualif) }}>{tqYTD}%</td>
          </tr>

          <SdrSectionRow cols={nCols}>Agendamento &amp; SLA</SdrSectionRow>
          <tr>
            <td style={tdL}>Visitas/Demos Agendadas</td>
            <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>≥{SDR_METAS.agendadas_mes}/mês</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:sdrColor(r.agendadas,SDR_METAS.agendadas_mes), background:i===mesIdx?sdrBg(r.agendadas,SDR_METAS.agendadas_mes):'transparent' }}>{r.agendadas}</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{ytd.agendadas}</td>
          </tr>
          <tr>
            <td style={tdL}>Taxa de No-Show</td>
            <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>≤{SDR_METAS.noshow_pct}%</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:sdrColor(r.noshow_pct,SDR_METAS.noshow_pct,false), background:i===mesIdx?sdrBg(r.noshow_pct,SDR_METAS.noshow_pct,false):'transparent' }}>{r.noshow_pct}%</td>)}
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
          </tr>
          <tr>
            <td style={tdL}>Tempo de Resposta a Lead Novo</td>
            <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>≤{SDR_METAS.tempo_resp}h</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:sdrColor(r.tempo_resp,SDR_METAS.tempo_resp,false), background:i===mesIdx?sdrBg(r.tempo_resp,SDR_METAS.tempo_resp,false):'transparent' }}>{r.tempo_resp}h</td>)}
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
          </tr>
          <tr>
            <td style={tdL}>Leads Passados à Equipa</td>
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400 }}>{r.passados}</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{ytd.passados}</td>
          </tr>

          <SdrSectionRow cols={nCols}>Resultado</SdrSectionRow>
          <tr>
            <td style={tdL}>Pipeline Gerado</td>
            <td style={{ ...tdBase, color:'var(--dgd-fg-3)' }}>—</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:'#1d4ed8' }}>{r.pipeline_k}k</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:'#1d4ed8' }}>{ytd.pipeline_k}k</td>
          </tr>
          <tr>
            <td style={tdL}>Taxa de Conversão Qualif.→Passado</td>
            <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>≥{SDR_METAS.conv_pct}%</td>
            {rows.map((r,i) => <td key={r.mes} style={{ ...tdBase, fontWeight:i===mesIdx?700:400, color:sdrColor(r.conv_pct,SDR_METAS.conv_pct), background:i===mesIdx?sdrBg(r.conv_pct,SDR_METAS.conv_pct):'transparent' }}>{r.conv_pct}%</td>)}
            <td style={{ ...tdBase, fontWeight:700, color:sdrColor(convYTD,SDR_METAS.conv_pct) }}>{convYTD}%</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

// ─── Screen principal ─────────────────────────────────────────────────────────

const ScreenComercialRpcSDR = ({ user }) => {
  const [tab,    setTab]    = React.useState('funil');
  const [selSDR, setSelSDR] = React.useState(null); // null = Todos

  const allRows = SDR_FUNIL_ALL;
  const mesIdx  = allRows.length - 1;
  const ultimo  = allRows[mesIdx];

  const ytd = allRows.reduce((s, r) => ({
    atribuidos:   s.atribuidos   + r.atribuidos,
    contactados:  s.contactados  + r.contactados,
    qualificados: s.qualificados + r.qualificados,
    agendadas:    s.agendadas    + r.agendadas,
    passados:     s.passados     + r.passados,
    pipeline_k:   s.pipeline_k   + r.pipeline_k,
  }), { atribuidos:0, contactados:0, qualificados:0, agendadas:0, passados:0, pipeline_k:0 });

  const totalSDR = SDR_POR_SDR.reduce((s, r) => ({
    atribuidos:   s.atribuidos   + r.atribuidos,
    contactados:  s.contactados  + r.contactados,
    qualificados: s.qualificados + r.qualificados,
    agendadas:    s.agendadas    + r.agendadas,
    pipeline_k:   s.pipeline_k   + r.pipeline_k,
  }), { atribuidos:0, contactados:0, qualificados:0, agendadas:0, pipeline_k:0 });

  const tcMes = sdrPct(ultimo.contactados, ultimo.atribuidos);
  const tqMes = sdrPct(ultimo.qualificados, ultimo.contactados);

  const kpis = [
    { l:'Taxa de Contacto',  v:`${tcMes}%`,              d:`Obj. ≥ ${SDR_METAS.taxa_contacto}%`,    c:sdrColor(tcMes, SDR_METAS.taxa_contacto) },
    { l:'Qualificação BANT', v:`${tqMes}%`,              d:`Obj. ≥ ${SDR_METAS.taxa_qualif}%`,      c:sdrColor(tqMes, SDR_METAS.taxa_qualif) },
    { l:'Tempo de Resposta', v:`${ultimo.tempo_resp}h`,  d:`Obj. ≤ ${SDR_METAS.tempo_resp}h úteis`, c:sdrColor(ultimo.tempo_resp, SDR_METAS.tempo_resp, false) },
    { l:'Demos Agendadas',   v:ultimo.agendadas,         d:`Obj. ≥ ${SDR_METAS.agendadas_mes}/mês`, c:sdrColor(ultimo.agendadas, SDR_METAS.agendadas_mes) },
    { l:'Pipeline Gerado',   v:`${ultimo.pipeline_k}k€`, d:`${ytd.pipeline_k}k€ YTD`,              c:'#1d4ed8' },
  ];

  // Dados filtrados para o funil
  const funilRows = selSDR ? (SDR_FUNIL_BY_SDR[selSDR] || allRows) : allRows;

  const pillBase     = { padding:'4px 12px', fontSize:12, borderRadius:20, border:'1px solid var(--dgd-border-1)', cursor:'pointer', whiteSpace:'nowrap', background:'none' };
  const pillActive   = { ...pillBase, background:'var(--dgd-fg-1)', color:'white', borderColor:'var(--dgd-fg-1)', fontWeight:600 };
  const pillInactive = { ...pillBase, color:'var(--dgd-fg-2)', fontWeight:400 };

  const th     = { padding:'7px 8px', textAlign:'right', fontSize:11, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', borderBottom:'1px solid var(--dgd-border-1)', whiteSpace:'nowrap', fontWeight:600 };
  const thL    = { ...th, textAlign:'left' };
  const tdBase = { padding:'6px 8px', fontSize:12, fontFamily:'var(--dgd-font-mono,monospace)', borderBottom:'1px solid var(--dgd-border-1)', whiteSpace:'nowrap', textAlign:'right', color:'var(--dgd-fg-2)' };
  const tdL    = { ...tdBase, textAlign:'left' };

  return (
    <div className="scrollbar" style={{ height:'100%', overflowY:'auto', background:'var(--dgd-bg-app,#f8fafc)' }}>
      <div style={{ padding:'18px 24px 80px' }}>

        {/* Header */}
        <div style={{ marginBottom:16 }}>
          <div style={{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', letterSpacing:'0.1em', marginBottom:2 }}>COMERCIAL · RPC SDR · {new Date().getFullYear()}</div>
          <h2 className="font-display" style={{ margin:0, fontSize:21, fontWeight:600, letterSpacing:'-0.01em', color:'var(--dgd-fg-1)' }}>
            RPC SDR — Outbound &amp; Prospecção
            <span style={{ fontSize:11, fontWeight:400, color:'#b45309', marginLeft:10, fontFamily:'var(--dgd-font-mono,monospace)', background:'color-mix(in oklch,#f59e0b 10%,transparent)', padding:'2px 7px', borderRadius:4, border:'1px solid color-mix(in oklch,#f59e0b 35%,transparent)' }}>MOCK</span>
          </h2>
        </div>

        {/* KPIs */}
        <div style={{ display:'flex', gap:8, marginBottom:14, flexWrap:'wrap' }}>
          {kpis.map(k => <SdrKpiTile key={k.l} label={k.l} value={k.v} sub={k.d} color={k.c} />)}
        </div>

        {/* Sub-tabs */}
        <div style={{ display:'flex', gap:2, marginBottom:16, borderBottom:'1px solid var(--dgd-border-1)', flexWrap:'wrap' }}>
          {SDR_TABS.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)}
              style={{ padding:'7px 14px', fontSize:12, fontWeight:tab===t.id?700:400, color:tab===t.id?'var(--dgd-fg-1)':'var(--dgd-fg-3)', background:'none', border:'none', borderBottom:tab===t.id?'2px solid var(--dgd-fg-1)':'2px solid transparent', cursor:'pointer', marginBottom:-1, whiteSpace:'nowrap' }}>
              {t.label}
            </button>
          ))}
        </div>

        {/* ── Tab: Funil & SLA ── */}
        {tab === 'funil' && (
          <>
            {/* Selector SDR */}
            <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:14, flexWrap:'wrap' }}>
              <span style={{ fontSize:11, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', letterSpacing:'0.06em', marginRight:2 }}>SDR</span>
              <button onClick={() => setSelSDR(null)} style={selSDR===null ? pillActive : pillInactive}>Todos</button>
              {SDR_LIST.map(s => (
                <button key={s.id} onClick={() => setSelSDR(s.id)} style={selSDR===s.id ? pillActive : pillInactive}>
                  {s.nome}
                </button>
              ))}
            </div>

            <div style={{ background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, overflow:'hidden' }}>
              <SdrFunilTable rows={funilRows} />
            </div>
          </>
        )}

        {/* ── Tab: Por SDR ── */}
        {tab === 'por-sdr' && (
          <>
            <div style={{ background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, overflow:'hidden', marginBottom:12 }}>
              <div style={{ padding:'10px 14px 0', fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', letterSpacing:'0.08em' }}>
                {SDR_MESES[mesIdx]} {new Date().getFullYear()} — desempenho por SDR
              </div>
              <div style={{ overflowX:'auto' }}>
                <table style={{ borderCollapse:'collapse', width:'100%', fontSize:12 }}>
                  <thead>
                    <tr>
                      <th style={{ ...thL, minWidth:200 }}>SDR</th>
                      <th style={th}>Atribuídos</th>
                      <th style={th}>Contactados</th>
                      <th style={th}>Taxa Contacto</th>
                      <th style={th}>Qualificados</th>
                      <th style={th}>Taxa Qualif.</th>
                      <th style={th}>Agendadas</th>
                      <th style={th}>Pipeline</th>
                    </tr>
                  </thead>
                  <tbody>
                    {SDR_POR_SDR.map(r => {
                      const tc = sdrPct(r.contactados, r.atribuidos);
                      const tq = sdrPct(r.qualificados, r.contactados);
                      return (
                        <tr key={r.nome}>
                          <td style={{ ...tdL, fontWeight:600, color:r.isAI?'#1d4ed8':'var(--dgd-fg-1)' }}>{r.nome}</td>
                          <td style={tdBase}>{r.atribuidos}</td>
                          <td style={tdBase}>{r.contactados}</td>
                          <td style={{ ...tdBase, color:sdrColor(tc,SDR_METAS.taxa_contacto), background:sdrBg(tc,SDR_METAS.taxa_contacto) }}>{tc}%</td>
                          <td style={tdBase}>{r.qualificados}</td>
                          <td style={{ ...tdBase, color:sdrColor(tq,SDR_METAS.taxa_qualif), background:sdrBg(tq,SDR_METAS.taxa_qualif) }}>{tq}%</td>
                          <td style={tdBase}>{r.agendadas}</td>
                          <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>{r.pipeline_k}k€</td>
                        </tr>
                      );
                    })}
                    <tr style={{ borderTop:'2px solid var(--dgd-border-1)' }}>
                      <td style={{ ...tdL, fontWeight:700, color:'var(--dgd-fg-1)' }}>Total</td>
                      <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{totalSDR.atribuidos}</td>
                      <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{totalSDR.contactados}</td>
                      <td style={{ ...tdBase, fontWeight:700, color:sdrColor(sdrPct(totalSDR.contactados,totalSDR.atribuidos),SDR_METAS.taxa_contacto) }}>{sdrPct(totalSDR.contactados,totalSDR.atribuidos)}%</td>
                      <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{totalSDR.qualificados}</td>
                      <td style={{ ...tdBase, fontWeight:700, color:sdrColor(sdrPct(totalSDR.qualificados,totalSDR.contactados),SDR_METAS.taxa_qualif) }}>{sdrPct(totalSDR.qualificados,totalSDR.contactados)}%</td>
                      <td style={{ ...tdBase, fontWeight:700, color:'var(--dgd-fg-1)' }}>{totalSDR.agendadas}</td>
                      <td style={{ ...tdBase, fontWeight:700, color:'#1d4ed8' }}>{totalSDR.pipeline_k}k€</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div style={{ padding:'10px 14px', borderRadius:7, background:'color-mix(in oklch,#6366f1 6%,transparent)', border:'1px solid color-mix(in oklch,#6366f1 20%,transparent)', fontSize:12, color:'var(--dgd-fg-2)', lineHeight:1.6 }}>
              O SDR AI gera volume mas qualifica pouco sozinho (taxa baixa): o seu papel é filtrar e escalar os leads quentes para a Carina fechar o BANT — daí a taxa de qualificação dela rondar os 90%. É o padrão esperado.
            </div>
          </>
        )}

        {/* ── Tab: Definições ── */}
        {tab === 'definicoes' && (
          <>
            <div style={{ background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, overflow:'hidden', marginBottom:12 }}>
              <div style={{ overflowX:'auto' }}>
                <table style={{ borderCollapse:'collapse', width:'100%', fontSize:12 }}>
                  <thead>
                    <tr>
                      <th style={{ ...thL, minWidth:200 }}>KPI</th>
                      <th style={{ ...thL, minWidth:220, whiteSpace:'normal' }}>Fórmula</th>
                      <th style={{ ...th, minWidth:80 }}>Meta</th>
                      <th style={{ ...thL, minWidth:300, whiteSpace:'normal' }}>Fonte / Regra</th>
                    </tr>
                  </thead>
                  <tbody>
                    {SDR_DEFINICOES.map(row => (
                      <tr key={row.kpi}>
                        <td style={{ ...tdL, fontWeight:600, color:'var(--dgd-fg-1)', whiteSpace:'nowrap' }}>{row.kpi}</td>
                        <td style={{ ...tdL, whiteSpace:'normal', lineHeight:1.5 }}>{row.formula}</td>
                        <td style={{ ...tdBase, color:'#1d4ed8', fontWeight:600 }}>{row.meta}</td>
                        <td style={{ ...tdL, whiteSpace:'normal', lineHeight:1.5, color:'var(--dgd-fg-3)' }}>{row.regra}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <div style={{ padding:'10px 14px', borderRadius:7, background:'color-mix(in oklch,#ef4444 6%,transparent)', border:'1px solid color-mix(in oklch,#ef4444 20%,transparent)', fontSize:12, color:'var(--dgd-fg-2)', lineHeight:1.6 }}>
              <strong style={{ color:'#991b1b' }}>Regra de ouro:</strong> um lead só sai de "em qualificação" quando os 4 campos BANT estão preenchidos — sem isso, não conta para a taxa de qualificação nem pode ser agendado. O SDR AI nunca fecha o funil sozinho: todo o handoff para a equipa comercial passa por confirmação humana.
            </div>
          </>
        )}

      </div>
    </div>
  );
};

window.ScreenComercialRpcSDR = ScreenComercialRpcSDR;