/* screen_marketing_sdr.jsx
   Marketing · Monitorização — em desenvolvimento.
   Observatório de contactos + rulebook consultável de SPs + regras de Follow-up.
   Expõe window.MktLeadsScreen.
*/

// ─── Dados estáticos: arquitectura das SPs ─────────────────────────────────

const _SP_CLIENTES = {
  name: 'SP_CLIENTES',
  subtitle: 'Externos · WA · email · DM · portal · site — único SP que fala com leads',
  color: '#3859D0',
  sections: [
    { title: 'Regras absolutas (13)', items: [
      'Nunca citar dados técnicos do anúncio na resposta',
      'Nunca inventar preços, specs, URLs, prazos, stock',
      'Nunca expor formato interno (JSON, consultas)',
      'Nunca confirmar demo sem [DEMO CONFIRMADA]',
      'Nunca enviar documento sem ter o link real',
      'Nunca acção automática crítica sem approval gate',
      'Nunca substituir partner como interlocutor comercial',
      'Nunca marcar demo directa nem negociar preço com lead de partner',
      'Nunca criar OP directa sem validação responsável mercado',
      'Nunca revelar estrutura de partners ao lead',
      'Nunca mencionar "AllDecor" ao lead',
      'Nunca encaminhar aprovação NetScreen para Armando',
      'Nunca encaminhar aprovação outras marcas para Bruno',
    ] },
    { title: 'Channel Adapter', items: [
      'Input: WA + email + DM + portal + site',
      'Output formatado por canal (comprimento, tom, formatação)',
    ] },
    { title: 'Context Injection (11 camadas)', items: [
      '0. Channel context — regras por marca (Mimaki/BIOND/Decal/Sensek/AllDecor/NetScreen) + partner vs end-user',
      '1. Resolução de identidade — lookup Gestor por telefone/email',
      '2. Perfil da pessoa — FMRS_API_CONTACTOS (nome, cargo)',
      '3. Perfil da empresa — FMRS_API_ENTIDADES + PROFILE (sector)',
      '4. Gestor CRM — pipeline empresa (OPs + Notas)',
      '5. Primavera ERP — cliente activo? volume? margens?',
      '6. SAT — equipamentos instalados + histórico assistências',
      '7. Market Intel KB — tom, cultura, concorrência, showrooms',
      '8. Memória multi-canal — WA + Email + Redes + Site',
      '9. Estado global negócio — campanhas activas',
      '10. Router — intent detection da última mensagem',
    ] },
    { title: 'Frameworks activas', items: [
      'FRAME-QUALIFICACAO-v2 — Straight Line + micro-compromissos → demo (a funcionar)',
      'FRAME-NURTURING-v1 — stages 65/80/90, Three Tens + Pain Profile',
      'FRAME-TROUBLESHOOTING — 5 níveis diagnóstico + ticket SAT',
      'FRAME-CRESCIMENTO-CLIENTE — reactivação + cross-sell + upsell',
    ] },
    { title: 'Decision Triggers', items: [
      'AUTÓNOMO — memória, contexto, análise',
      'SEMI-AUTÓNOMO — drafts com aprovação',
      'APOIO — sugestões',
      'CROSS-DEPT — OPs / ToDos em outros departamentos',
    ] },
    { title: 'Take Notes (por conversa)', items: [
      'Three Tens (produto / empresa / comercial)',
      'Pain Profile',
      'Objecções',
      'Compromissos',
      'Stage classificado',
      'Next Step',
    ] },
    { title: 'Handoff Protocols', items: [
      'Digi AI → Comercial (após stage 20 / 50 / 60)',
      'Digi AI → Comercial (lead não decisor)',
      'Digi AI → Equipa SAT (suporte técnico)',
    ] },
    { title: 'Approval Gates', items: [
      'Emails automáticos → comercial aprova (timeout 30 min)',
      'Open OP nova → confirma no WA',
      'Emails correcção preço → FC ou comercial',
      'Acções críticas → sempre validação humana',
    ] },
    { title: 'Tools (endpoints)', items: [
      'gestor_lookup / gestor_write [aguarda Walter]',
      'primavera_lookup [João Paulino]',
      'sat_lookup [João Rodrigues]',
      'calendar_tool',
      'ticket_sat',
      'email_send (approval gate)',
      'email_carina (demo confirmada)',
    ] },
    { title: 'Skills', items: [
      'alldecor-mockup',
      'document-sender',
      'client-growth',
      'simulador (ROI / PrintPlan / DigiRent)',
    ] },
    { title: 'KBs (via RAG)', items: [
      'mimaki_kb · biond_kb · decal_kb · sensek_kb · alldecor_kb',
      'store_kb (WooCommerce)',
      'market_intel_kb (transversal)',
    ] },
    { title: 'Sub-agentes de marca', items: [
      'mimaki_agent ✅ · biond_agent ✅ · decal_agent ✅ · sensek_agent ✅ · alldecor_agent ✅',
    ] },
    { title: 'Memory (5 camadas)', items: [
      '1. Perfil do lead',
      '2. Pain Profile + Three Tens',
      '3. Histórico Gestor + Primavera + SAT',
      '4. Estado global negócio',
      '5. Histórico multi-canal',
    ] },
    { title: 'Triggers time-based', items: [
      'Demo amanhã → confirmação',
      'X dias sem resposta → callback',
      'Stage mudou → activar protocolo',
      'Nova compra Primavera → trigger CRESCIMENTO',
      'Campanha aplicável → reminder comercial',
    ] },
    { title: 'Escalation', items: [
      'Carina Reis → demo confirmada',
      'Comercial → lead não decisor / reunião',
      'Resp. partners PT/ES → channel conflict',
      'Media Export Sales → fora Ibéria',
      'Equipa SAT → ticket Mimaki',
      'Rui / Armando → aprovações (excepto NetScreen)',
      'Bruno → aprovações NetScreen',
      'FC → casos críticos',
    ] },
  ],
};

const _SP_COMERCIAL = {
  name: 'SP_COMERCIAL',
  subtitle: 'Uso interno · 14 módulos comerciais · Board / SM / Individual',
  color: '#059669',
  sections: [
    { title: 'Regras absolutas', items: [
      'Nunca alterar BP sem autorização Sales Manager',
      'Nunca abrir OP sem aprovação do comercial',
      'Nunca alterar stage OP sem base em notas',
      'Nunca partilhar performance individual entre comerciais',
      'Nunca sugerir acções nos módulos v1 (legacy)',
      'Board nunca vê dados operacionais individuais',
      'Nunca enviar proposta sem aprovação comercial',
      'Nunca sugerir estratégia sem Three Tens actualizado',
    ] },
    { title: 'Context Injection', items: [
      '0. Perfil de acesso — Board / Sales Manager / Comercial Individual',
      '1. Identidade colaborador (BD RH)',
      '2. Contexto módulo activo (14 módulos)',
      '3. Pipeline pessoal ou equipa',
      '4. Business Plan (Mimaki/Decal/BIOND/Sensek)',
      '5. Primavera (vendas YTD, margens, contratos)',
      '6. SAT (upgrades/renovações)',
      '7. Market Context',
      '8. Campanhas activas aplicáveis',
      '9. Router (contexto de trabalho)',
    ] },
    { title: 'Frameworks', items: [
      'FRAME-COACH-SALES — coaching por stage',
      'FRAME-MEETING-NOTES — estrutura reunião',
      'FRAME-PROSPECT — qualificação assistida',
    ] },
    { title: 'Decision Triggers', items: [
      'AUTÓNOMO — classificar stage, flag OPs, forecast',
      'SEMI-AUTÓNOMO — reminders, drafts emails',
      'APOIO — sugestões estratégia, próximos passos',
      'PRESCRITIVO — gap BP, ritmo Q ("faltam X leads em Y stage")',
    ] },
    { title: 'Tools (endpoints)', items: [
      'op_create · op_update_stage · op_add_note',
      'bp_get · bp_set',
      'forecast_calculate',
      'next_step_create · next_step_check',
      'lead_qualify',
      'proposal_generate',
      'geo_analyze',
    ] },
    { title: 'Skills', items: [
      'meeting-notes',
      'stage-classification',
      'prescriptive-analysis',
      'forecast-engine',
      'objection-handler',
      'geo-analysis',
      'coaching-engine',
      'simulador',
    ] },
    { title: 'KBs', items: [
      'mimaki · biond · decal · sensek · alldecor',
      'objecoes_kb (novo)',
      'casos_sucesso_kb (novo)',
    ] },
    { title: 'Sub-agentes', items: [
      'Por marca (mimaki_agent, biond_agent, decal_agent, sensek_agent, alldecor_agent)',
      'sales_analyst (novo)',
      'pipeline_analyst (novo)',
      'forecast_analyst (novo)',
      'media_sales_analyst (novo)',
    ] },
    { title: 'Handoff Protocols', items: [
      'Comercial → Digi AI (sugerir resposta)',
      'Comercial → Digi AI (assumir conversa)',
      'Digi AI → Sales Manager (escalação)',
      'Digi AI → Marketing (cross-dept)',
    ] },
    { title: 'Approval Gates', items: [
      'Alterações BP → Sales Manager',
      'Proposta ao cliente → comercial',
      'Emails correcção preço → FC ou comercial',
      'Reactivação LOST → Sales Manager',
    ] },
    { title: 'Quick Actions (chips Chat AI)', items: [
      'Gerar proposta → simulador + document-sender',
      'Preparar reunião → resumo cliente + notes template',
      'Analisar cliente → contexto 360º',
      'Sugerir estratégia → coaching-engine',
      'Ver oportunidades → filtro OPs pessoal',
      'Verificar objectivos → gap BP vs Real',
      'Análise geográfica → geo-analysis',
      'Pedir análise Manager → escalation',
    ] },
  ],
};

const _SP_MARKETING = {
  name: 'SP_MARKETING',
  subtitle: 'Uso interno · 13+ módulos maduros · 154 endpoints portal',
  color: '#8b5cf6',
  sections: [
    { title: 'Regras absolutas', items: [
      'Nunca activar sem critic loop em peça crítica',
      'Nunca violar prohibited_claims da marca',
      'Nunca nomear competitors listados',
      'Nunca prometer resultados fora do posicionamento',
      'Nunca cruzar dados de marcas em role NetScreen',
      'Nunca alterar approve-fc / approve-rl / approve-bruno flow',
      'Nunca guardar prompts com sensitive_info',
    ] },
    { title: 'Context Injection', items: [
      '0. Perfil — Board / Admin / AI Strategist / Marketing Manager / Comercial(read) / Cliente NetScreen',
      '1. Identidade + role via /me',
      '2. Contexto módulo activo (13+ módulos)',
      '3. Marca activa (/marcas/:brandId)',
      '4. Briefing activo (5 blocos + versão)',
      '5. Campanha activa (Kanban + KPIs)',
      '6. Estratégia (approve-fc + approve-rl)',
      '7. Plano de Comunicação',
      '8. Budget contexto',
      '9. Performance (Meta / Google / LinkedIn)',
      '10. Cross-dept (Comercial / Financeiro / Produção / Logística / SAT)',
      '11. KB Access Quality Score',
      '12. Router',
    ] },
    { title: 'Frameworks', items: [
      'FRAME-BRIEFING — 5 blocos + pesos (DOR 25% · OBJECTIVO 25% · QUEM 20% · RESPOSTA 20% · MERCADO 10%)',
      'FRAME-CONCEITO — 3 fases + big_idea',
      'FRAME-KPI — semáforo + trending + acções',
      'FRAME-ADS — hook framework 8 triggers',
      'FRAME-EDITORIAL — trimestral',
      'FRAME-CONTENT — blog / PR + SEO',
      'FRAME-EMAIL — sequências',
      'FRAME-SOCIAL — Stage por plataforma',
    ] },
    { title: 'Decision Triggers', items: [
      'AUTÓNOMO — refresh cache, AI summary, ROI, critic loop',
      'SEMI — drafts conceito / copy / plano / estratégia',
      'APOIO — sugestões budget, retargeting, temas, ângulos',
      'CROSS-DEPT — Comercial BP risk / SAT upgrade / Stock parado / Reclamação cluster / Budget alerta / Nova compra',
    ] },
    { title: 'Tools (154 endpoints)', items: [
      'Marcas — analyze-competitors, generate-icp/personas/tom, blocks',
      'Briefings — CRUD + extract PDF/URL + apreciation + suggest + rapido',
      'Estratégia — approve-fc + approve-rl + comm-plan',
      'Plano — CRUD + generate + itens/promote',
      'Campanhas — generate conceito / copy / idiomas / prompts / channel-setup',
      'Produção — Magnific + Nano Banana + critic loop + image manipulation',
      'Activação — fila + calendário + aprovar / agendar / cancelar / retry',
      'Budget — scan-emails + match + statements + upload-sharepoint',
      'Analytics — usage-summary + performance + cache',
    ] },
    { title: 'Skills (12 a instalar)', items: [
      'copywriting · social-content · content-strategy',
      'launch-strategy · email-sequence · image · blog-post',
      'social-media-marketing · executing-marketing-campaigns',
      'seo-content-writer · content-quality-auditor · content-gap-analysis',
      'muppi-content ✅ (existe)',
    ] },
    { title: 'Sub-agentes', items: [
      'Existentes: mimaki_agent · biond_agent · decal_agent · sensek_agent · alldecor_agent',
      'A criar: ANALYTICS · ADS · PR · CONTENT_STRATEGY · DISTRIBUTOR',
    ] },
    { title: 'NetScreen (isolamento total)', items: [
      'Vê só briefings NetScreen + acompanhamento',
      'Não vê dados outras marcas',
      'Briefing simplificado: foto + vídeo + objectivo',
      'Aprovação exclusiva Bruno',
      'Publicação DOOH Branddigital + NovaStar CMS',
    ] },
  ],
};

const _SP_OUTROS = {
  name: 'Outros SPs Colaboradores',
  subtitle: 'SP_SAT · SP_FINANCEIRO · SP_LOGISTICA · SP_PRODUCAO · SP_QUALIDADE · SP_COMPRAS · SP_RH',
  color: '#f59e0b',
  sections: [
    { title: 'SP_SAT — Suporte Técnico', items: [
      'Regras: nunca fechar ticket sem confirmação técnico; nunca escalar sem briefing; nunca prometer prazo sem validação; nunca sugerir peça sem stock Primavera',
      'Frameworks: FRAME-DIAGNOSTIC (5 níveis) · FRAME-TICKET (routing)',
      'Tools: sat_lookup · ticket_open · ticket_update · stock_check',
      'Skills: root-cause-analysis · diagnostic-tree',
    ] },
    { title: 'SP_FINANCEIRO', items: [
      'Perfis: Board / CFO / Contabilidade / Cobranças / Tesouraria / Controlling',
      'Frameworks: FRAME-COBRANCAS · FRAME-TESOURARIA · FRAME-FECHO-MENSAL · FRAME-PL-ANALYSIS',
      'Regras: read-only Primavera · approval gates em pagamentos / cobrança',
      'Cross-dept: Comercial · Marketing · Logística · Qualidade · Produção · Compras',
    ] },
    { title: 'SP_LOGISTICA', items: [
      'Monitorização stock, alertas ruptura/excesso',
      'Skills: kpi-monitoring · mrp-analysis · nc-root-cause · batch-age-monitoring',
      'Cross-dept: stock parado 180d → ToDo Marketing (escoamento)',
    ] },
    { title: 'SP_PRODUCAO · SP_QUALIDADE · SP_COMPRAS · SP_RH', items: [
      'Cada um com regras absolutas, context injection, frameworks e tools próprios',
      'Padrão comum: perfil de acesso, cross-dept triggers, escalation, approval gates',
    ] },
  ],
};

const _SP_ALL = [_SP_CLIENTES, _SP_COMERCIAL, _SP_MARKETING, _SP_OUTROS];

// ─── Follow-up rules (decididas 2026-07-27) ────────────────────────────────

const _FOLLOWUP_CADENCIA = [
  { t: 'T-3', dias: '3 dias', gatilho: 'Sem resposta desde última interacção', tom: 'Leve, curto, referência à conversa anterior' },
  { t: 'T-7', dias: '7 dias', gatilho: 'Ainda sem resposta',                    tom: 'Contexto ligeiramente mais concreto, oferta de valor' },
  { t: 'T-14', dias: '14 dias', gatilho: 'Sem resposta ao T-7',                 tom: 'Referência a caso / prova / mercado' },
  { t: 'T-21', dias: '21 dias', gatilho: 'Último toque antes de arquivar',      tom: 'Directo, pergunta se ainda faz sentido' },
];

const _FOLLOWUP_REGRAS = [
  'Janela horária: 9h00 – 18h00 hora de Lisboa',
  'Dias úteis apenas — nunca fim-de-semana, feriados PT ou ES',
  'Templates marca-agnostic com placeholders: {{nome}} · {{marca}} · {{contexto_campanha}} · {{comercial_atribuido}}',
  'Sensor abertura vs seca: template lido → cadência normal; sem leitura → cadência mais lenta',
  'Stop conditions: resposta do contacto · handoff aceite · pedido de opt-out · limite 4 toques atingido',
  'Fila 24h previsível: FC pode adiar / cancelar por contacto antes do disparo',
  'Histórico registado: template enviado, hora, leitura, resposta',
];

// ─── Accordion component ───────────────────────────────────────────────────

const _SPAccordion = ({ title, subtitle, color, sections, defaultOpen = false }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  const [openSection, setOpenSection] = React.useState(null);
  return (
    <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden', marginBottom: 10 }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: '100%', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10,
        background: open ? 'var(--bg-sunken)' : 'transparent', border: 'none', cursor: 'pointer',
        textAlign: 'left', color: 'var(--text)',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, flexShrink: 0 }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{title}</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{subtitle}</div>
        </div>
        <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{open ? '▾' : '▸'}</span>
      </button>
      {open && (
        <div style={{ borderTop: '1px solid var(--border)', background: 'var(--bg)' }}>
          {sections.map((sec, i) => {
            const isOpen = openSection === i;
            return (
              <div key={i} style={{ borderBottom: i < sections.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <button onClick={() => setOpenSection(isOpen ? null : i)} style={{
                  width: '100%', padding: '9px 14px 9px 30px', display: 'flex', alignItems: 'center', gap: 8,
                  background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
                  fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
                  color: isOpen ? 'var(--ai-500)' : 'var(--text-muted)',
                }}>
                  <span style={{ flex: 1 }}>{sec.title}</span>
                  <span style={{ fontSize: 10, color: 'var(--text-dim)' }}>{sec.items.length}</span>
                  <span style={{ fontSize: 9, color: 'var(--text-dim)' }}>{isOpen ? '−' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '4px 14px 12px 30px', display: 'flex', flexDirection: 'column', gap: 4 }}>
                    {sec.items.map((it, j) => (
                      <div key={j} style={{ fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.6, paddingLeft: 8, borderLeft: `2px solid ${color}33` }}>{it}</div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

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

const MktLeadsScreen = ({ userName }) => {
  const hour = new Date().getHours();
  const saudacao = hour < 12 ? 'Bom dia' : hour < 19 ? 'Boa tarde' : 'Boa noite';
  const rawName = userName || (window.currentUser && (window.currentUser.nome_apresentar || window.currentUser.nome)) || '';
  const firstName = rawName.split(' ')[0] || 'Fábio';

  const cardStyle = { padding: '14px 16px', borderRadius: 10, background: 'var(--bg-sunken)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4 };
  const titleStyle = { fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 2 };
  const descStyle  = { fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 };
  const sectionLabel = { fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', color: 'var(--text-dim)', marginBottom: 10 };
  const subLabel = {
    fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
    color: 'var(--ai-500, #3859D0)', fontFamily: 'var(--font-mono)', marginBottom: 8, marginTop: 4,
    display: 'flex', alignItems: 'center', gap: 6,
  };
  const dot = (color) => ({ width: 7, height: 7, borderRadius: '50%', background: color, flexShrink: 0, display: 'inline-block' });

  const tableHeader = { fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', padding: '6px 10px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)' };
  const tableCell   = { fontSize: 12, color: 'var(--text)', padding: '8px 10px', borderBottom: '1px solid var(--border)', lineHeight: 1.5 };
  const tableCellMuted = { ...tableCell, color: 'var(--text-muted)' };

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto' }}>

      {/* Page header */}
      <div style={{ padding: '28px 32px 0', flexShrink: 0 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
          MARKETING · MONITORIZAÇÃO
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Monitorização
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Observatório de contactos · Rulebook das SPs · Regras de Follow-up
          <span style={{
            fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.09em', fontWeight: 600,
            padding: '2px 7px', borderRadius: 4,
            background: 'color-mix(in oklch, var(--warning) 12%, transparent)',
            color: 'var(--warning)',
            border: '1px solid color-mix(in oklch, var(--warning) 28%, transparent)',
          }}>EM DESENVOLVIMENTO</span>
        </div>

        <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', marginBottom: 6, letterSpacing: '-0.02em' }}>
          {saudacao}, {firstName}.
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.65, maxWidth: 700, marginBottom: 28 }}>
          Painel único de observação e consulta para o Marketing. Do lado esquerdo, o que acontece no terreno com todos os contactos expostos à comunicação. Do lado direito das secções seguintes, o rulebook completo das SPs (regras, tools, skills, sub-agentes) e as regras de Follow-up que governam a Digi AI — consultáveis sem sair do portal.
        </div>
      </div>

      {/* Two-column layout */}
      <div style={{ padding: '0 32px 40px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24, alignItems: 'start' }}>

        {/* ── Coluna esquerda ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>

          {/* ═══════ PARTE A — OBSERVATÓRIO ═══════ */}

          <div>
            <div style={sectionLabel}>PARTE A · OBSERVATÓRIO OPERACIONAL</div>
            <div style={{ ...subLabel }}><span style={dot('#3859D0')} />Origem de Dados</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'wa_envios', d: 'Campanhas WA enviadas por contacto, marca e template.' },
                { t: 'heydigi_sessions', d: 'Sessões de conversa da Digi AI — canal, marca, duração, transições de estado.' },
                { t: 'contact_memory', d: 'Perfil consolidado por contacto — resumo, dor, compromissos, canal preferido.' },
                { t: 'Brevo (email)', d: 'Envios de email transaccional + marketing, taxa de abertura, cliques, unsubscribes.' },
                { t: 'Meta / Google / LinkedIn Ads', d: 'Impressões, cliques e leads gerados por campanha e criativo.' },
                { t: 'leads · lead_scores', d: 'Pipeline marketing com score comportamental e demográfico.' },
                { t: 'Gestor (closed-loop)', d: 'OPs criadas a partir de leads marketing — stage, comercial atribuído, win/loss.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />Visão de Contactos Activos</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Total por marca × estado', d: 'Cada marca com breakdown por estado — novo · aquecido · qualificado · handoff · silêncio · lost. Drill-down por origem.' },
                { t: 'Segmentação por sector', d: 'Cruza com FMRS_API_ENTIDADES_PROFILE (Walter) — ver que sectores estão activos por marca.' },
                { t: 'Ranking de engagement', d: 'Contactos ordenados por frequência de interacção nos últimos 30 dias.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Exposição Multi-canal</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Timeline por contacto', d: 'Vista cronológica de todos os toques por contacto — Ad servido, email aberto, WA recebido, click, resposta.' },
                { t: 'Peso relativo de cada canal', d: 'Que canais convertem melhor por marca × sector — base para decisão de mix.' },
                { t: 'Sequência típica', d: 'Padrão médio de exposições antes de conversa iniciada — informa cadência óptima.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#8b5cf6')} />Interacções e Respostas</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Taxa de abertura por template', d: 'Templates WA e email ordenados por eficácia — abertura, resposta, conversão em conversa.' },
                { t: 'Tempo médio de reacção', d: 'Quanto tempo o contacto demora a responder por marca / hora / dia da semana.' },
                { t: 'Engagement por marca', d: 'Comparação entre marcas — que marca gera mais conversas por lead exposto.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Funil por Origem</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Ads · Orgânico · Email · Referral', d: 'Funil paralelo por origem — exposição → click → conversa → qualificado → handoff → OP → win.' },
                { t: 'Drop-off por passo', d: 'Onde se perde volume — identifica o passo crítico a optimizar.' },
                { t: 'Custo por lead qualificado', d: 'Cruza com Performance Ads — CPL real por origem, não só por campanha.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#ef4444')} />Handoffs para Comercial</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Volume por marca × comercial', d: 'Quantos handoffs passaram para cada comercial nos últimos 7 / 30 / 90 dias.' },
                { t: 'Taxa de aceitação', d: 'Handoffs aceites vs rejeitados pelo comercial — sinal de qualidade da qualificação.' },
                { t: 'Tempo até OP + taxa win', d: 'Do handoff à OP criada, e depois à venda fechada — closed-loop completo.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#ec4899')} />Detecção de Silêncio</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Contactos por janela T-3 / 7 / 14 / 21', d: 'Fila de contactos que pararam de responder — organizada pela janela de tempo desde última interacção.' },
                { t: 'Sinal de intenção residual', d: 'Cruza com abertura de email / click em ad recente para distinguir "silêncio real" de "silêncio activo".' },
                { t: 'Recomendação de acção', d: 'Follow-up automático · reactivação humana · arquivar — sugestão AI por perfil.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#06b6d4')} />Cross-brand</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Contactos com >1 marca activa', d: 'Empresas que interagiram com múltiplas marcas Digidelta — oportunidade cross-sell.' },
                { t: 'Padrões de combinação', d: 'Que combinações são frequentes (Mimaki + BIOND · Decal + Sensek) — informa estratégia comercial.' },
                { t: 'Alertas AllDecor implícitos', d: 'Contactos que qualificam para modelo AllDecor (Mimaki UV + BIOND) sem exposição directa — sinal para partner routing.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#a855f7')} />Sinais para Marketing</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Campanhas / canais que qualificam', d: 'Ranking de origens por % de handoff aceite — orienta decisão de mix e budget.' },
                { t: 'Campanhas que atraem desqualificados', d: 'Fontes com alto volume mas baixa taxa de conversa útil — candidatas a pausar ou refinar targeting.' },
                { t: 'Sugestão AI de ajuste', d: 'Recomendação automática de aumento / redução de budget por campanha com base em pipeline gerado.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* ═══════ PARTE B — RULEBOOK SPs ═══════ */}

          <div>
            <div style={sectionLabel}>PARTE B · RULEBOOK CONSULTÁVEL</div>
            <div style={{ ...subLabel }}><span style={dot('#3859D0')} />Arquitectura das SPs</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6, marginBottom: 10 }}>
              Origem: <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>Farben_AI_Arquitectura_Completa.md</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>heydigi-local/prompts/*.md</span>. Clica cada SP para expandir, depois cada secção para ver o detalhe.
            </div>
            <div>
              {_SP_ALL.map((sp, i) => (
                <_SPAccordion key={i} title={sp.name} subtitle={sp.subtitle} color={sp.color} sections={sp.sections} defaultOpen={i === 0} />
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#22c55e')} />Regras de Follow-up</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6, marginBottom: 10 }}>
              Cadência e janela decididas em 2026-07-27. Aplica a todos os contactos com conversa iniciada e sem resposta.
            </div>

            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden', marginBottom: 12 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '60px 80px 1.4fr 1.4fr' }}>
                <div style={tableHeader}>Toque</div>
                <div style={tableHeader}>Delay</div>
                <div style={tableHeader}>Gatilho</div>
                <div style={tableHeader}>Tom</div>
              </div>
              {_FOLLOWUP_CADENCIA.map((f, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 80px 1.4fr 1.4fr' }}>
                  <div style={{ ...tableCell, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ai-500)', fontWeight: 700 }}>{f.t}</div>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{f.dias}</div>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{f.gatilho}</div>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{f.tom}</div>
                </div>
              ))}
            </div>

            <div style={{ ...cardStyle, gap: 6 }}>
              {_FOLLOWUP_REGRAS.map((r, i) => (
                <div key={i} style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.55, display: 'flex', gap: 8 }}>
                  <span style={{ color: 'var(--ai-500)', flexShrink: 0 }}>·</span>
                  <span>{r}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={{ ...subLabel }}><span style={dot('#94a3b8')} />Ligações ao Sistema Existente</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 2, color: 'var(--text)' }}>
              <div>Origens (wa_envios / heydigi_sessions / Brevo / Ads / Gestor) → <span style={{ color: 'var(--ai-500)' }}>Monitorização</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Observatório operacional + Rulebook + Follow-up</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Sinais → Objectivos / Resultados / Performance Ads</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Rulebook consultável ← ficheiros SP / FRAME</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── Follow-up scheduler → wa_send / Brevo</div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Actualização de campanhas + reactivação de silêncio → <span style={{ color: 'var(--ai-500)' }}>Digi AI · Comercial · Marketing</span></div>
            </div>
          </div>

          <div style={{
            padding: '14px 16px', borderRadius: 8,
            background: 'color-mix(in oklch, var(--warning) 6%, transparent)',
            border: '1px solid color-mix(in oklch, var(--warning) 25%, transparent)',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--warning)', fontFamily: 'var(--font-mono)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Consideração técnica</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.65 }}>
              Para deixar o módulo funcional é necessário:
              <br /><br />
              1. Endpoints agregados sobre <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>wa_envios</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>heydigi_sessions</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>leads</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>agent_runs</span>.
              <br />
              2. Tabelas <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>sdr_followup_queue</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>sdr_followup_history</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>sdr_funnel_snapshots</span> · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>sdr_silence_flags</span> [criar].
              <br />
              3. Skill <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>sp-reader</span> — parser Markdown live que lê os prompts (para o rulebook não desactualizar).
              <br />
              4. <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>followup-scheduler</span> — cron janela 9h-18h Lisbon, dias úteis, feriados PT+ES, disparo Meta WA + Brevo.
              <br />
              5. FRAME-CLOSED-LOOP + FRAME-FOLLOWUP a criar.
            </div>
          </div>
        </div>

        {/* ── Coluna direita ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'sticky', top: 0 }}>

          <div>
            <div style={sectionLabel}>SKILLS E TOOLS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                <div style={tableHeader}>Skill / Tool</div>
                <div style={tableHeader}>O que faz</div>
              </div>
              {[
                ['attribution-engine',        'Liga contacto a campanha e origem'],
                ['funnel-analytics',          'Métricas por passo × origem'],
                ['silence-detector',          'Detecta paragem T-3/7/14/21'],
                ['cross-brand-correlation',   'Contactos expostos a >1 marca'],
                ['followup-scheduler',        'Cron janela + templates + sensores'],
                ['sp-reader',                 'Parser Markdown live das SPs / FRAMEs'],
                ['FRAME-CLOSED-LOOP',         'Lead → OP → win attribution (por criar)'],
                ['FRAME-FOLLOWUP',            'Cadência T-3/7/14/21 (por criar)'],
                ['RAG contact_memory',        'Contexto consolidado do contacto'],
              ].map(([skill, desc], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                  <div style={{ ...tableCell, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ai-500)' }}>{skill}</div>
                  <div style={tableCellMuted}>{desc}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={sectionLabel}>O QUE GANHAMOS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                <div style={{ ...tableHeader, color: 'var(--danger)' }}>Antes</div>
                <div style={{ ...tableHeader, color: 'var(--success)' }}>Depois</div>
              </div>
              {[
                ['Sem visibilidade após exposição',   'Journey por contacto'],
                ['Handoffs sem métrica',              'Aceitação + tempo até OP'],
                ['Silêncio detectado tarde',          'Fila T-3/7/14/21 com sugestão'],
                ['Follow-up manual inconsistente',    'Cadência automatizada + sensores'],
                ['Regras da Digi AI só em Markdown',  'Rulebook consultável no portal'],
                ['Cross-brand invisível',             'Oportunidade explícita'],
                ['Attribution só por campanha',       'Attribution por contacto e origem'],
              ].map(([before, after], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{before}</div>
                  <div style={{ ...tableCell, fontSize: 11 }}>{after}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div style={sectionLabel}>BD</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.8, color: 'var(--text-muted)' }}>
              <div><span style={{ color: 'var(--success)' }}>wa_envios</span> · <span style={{ color: 'var(--success)' }}>heydigi_sessions</span> ✅</div>
              <div><span style={{ color: 'var(--success)' }}>contact_memory</span> · <span style={{ color: 'var(--success)' }}>agent_runs</span> ✅</div>
              <div><span style={{ color: 'var(--success)' }}>leads</span> · <span style={{ color: 'var(--success)' }}>lead_scores</span> ✅</div>
              <div><span style={{ color: 'var(--success)' }}>conteudo_campanhas</span> · <span style={{ color: 'var(--success)' }}>performance_cache</span> ✅</div>
              <div><span style={{ color: 'var(--ai-500)' }}>sdr_funnel_snapshots</span> [criar]</div>
              <div><span style={{ color: 'var(--ai-500)' }}>sdr_silence_flags</span> [criar]</div>
              <div><span style={{ color: 'var(--ai-500)' }}>sdr_followup_queue</span> [criar]</div>
              <div><span style={{ color: 'var(--ai-500)' }}>sdr_followup_history</span> [criar]</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktLeadsScreen = MktLeadsScreen;