const { useState, useRef, useEffect, useCallback } = React;

// ─── Design Tokens ────────────────────────────────────────────
const C = {
  bg:"#0a0b10",bgCard:"#111320",bgSurf:"#181a28",bgHover:"#1e2038",
  brd:"#252840",brdA:"#3a3e68",
  txt:"#e8e9f0",txtM:"#8b8fa8",txtD:"#565a78",
  acc:"#3b82f6",accG:"rgba(59,130,246,0.15)",
  teal:"#06b6d4",tealG:"rgba(6,182,212,0.15)",
  grn:"#10b981",grnG:"rgba(16,185,129,0.15)",
  red:"#ef4444",redG:"rgba(239,68,68,0.15)",
  gold:"#f59e0b",goldG:"rgba(245,158,11,0.15)",
  purp:"#8b5cf6",purpG:"rgba(139,92,246,0.15)",
  orng:"#f97316",
};
const Fn={body:"'Outfit',sans-serif",mono:"'JetBrains Mono',monospace"};

const injectCSS=()=>{
  if(document.getElementById("acme-css"))return;
  const el=document.createElement("style");el.id="acme-css";
  el.textContent=`
    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
    *{box-sizing:border-box;margin:0;padding:0;}
    body{background:${C.bg};color:${C.txt};font-family:${Fn.body};}
    ::-webkit-scrollbar{width:4px;height:4px;}
    ::-webkit-scrollbar-track{background:${C.bg};}
    ::-webkit-scrollbar-thumb{background:${C.brd};border-radius:4px;}
    @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
    @keyframes dot{0%,80%,100%{transform:scale(.55);opacity:.3;}40%{transform:scale(1);opacity:1;}}
    .fi{animation:fadeIn .28s ease both;}
    .tp{animation:pulse 2s infinite;}
  `;
  document.head.appendChild(el);
};

// ─── Helpers ──────────────────────────────────────────────────
const fmt=(n,d=1)=>n.toFixed(d);
const sc=s=>s>=3.5?C.grn:s>=2.5?C.gold:C.red;
const sl=s=>s>=4?"Líder":s>=3.5?"Avançado":s>=2.5?"Desenvolvido":s>=1.5?"Emergente":"Inicial";
const brl=n=>n>=1e9?`R$${(n/1e9).toFixed(1)}Bi`:n>=1e6?`R$${(n/1e6).toFixed(0)}M`:`R$${(n/1e3).toFixed(0)}K`;
const priColor=p=>p==="URGENTE"?C.red:p==="ALTO"?C.gold:C.acc;

// ─── Data ─────────────────────────────────────────────────────
const PEERS=[
  {name:"Nubank",         score:4.1,assets:"R$480Bi",color:C.purp},
  {name:"Itaú Unibanco",  score:3.9,assets:"R$2,4T", color:C.grn},
  {name:"BTG Pactual",    score:3.7,assets:"R$620Bi",color:C.teal},
  {name:"Bradesco",       score:3.5,assets:"R$1,7T", color:C.acc},
  {name:"Banco do Brasil",score:3.2,assets:"R$2,1T", color:C.gold},
  {name:"Santander Brasil",score:3.0,assets:"R$1,0T",color:C.orng},
  {name:"Banco Acme",     score:2.8,assets:"R$1,2T", color:C.red},
];

const FUNCTIONS=[
  // ── 1 CRÉDITO ──────────────────────────────────────────────
  {
    id:"credito",label:"Crédito Corporativo & PMEs",short:"Crédito",
    score:2.3,bench:3.7,costDay:1800000,roiM:980,
    featured:true,status:"CRÍTICO",icon:"🏦",color:C.red,
    tagline:"Modelo BBC com precisão 0,69 vs. limiar 0,82 — 287 contas em análise manual, R$1,8M/dia em risco",
    type:"Vazamento de Receita",
    kpis:[
      {l:"Score AIMRI",    v:"2,3/5",  c:C.red, sub:"Meta: 3,5+"},
      {l:"Custo Diário",   v:"R$1,8M", c:C.red, sub:"Em risco"},
      {l:"ROI Potencial",  v:"R$980M", c:C.grn, sub:"Identificado"},
      {l:"Cobertura PMEs", v:"34%",    c:C.gold,sub:"Benchmark: 78%"},
    ],
    subprocesses:[
      {n:"Onboarding Digital de Crédito",your:2.1,bench:3.8},
      {n:"Scoring Automatizado PMEs",   your:2.3,bench:3.9},
      {n:"BBC — Capacidade de Endiv.",  your:1.9,bench:3.6},
      {n:"Monitoramento Contínuo",      your:2.5,bench:3.4},
      {n:"Decisão Assistida por IA",    your:2.0,bench:3.7},
    ],
    findings:[
      {
        id:"f1",sev:"CRÍTICO",type:"Vazamento de Receita",
        title:"Modelo BBC abaixo do limiar em PMEs",
        desc:"O modelo de Borrowing Base Certificate para PMEs apresenta precisão de 0,69 vs. limiar de 0,82 exigido pela Resolução BCB 4.557. 287 contas revertendo para análise manual — R$1,8M/dia em receita perdida e exposição regulatória.",
        peer:"Itaú Unibanco cobre 94 sub-segmentos com BBC automatizado (precisão 0,91). Bradesco implantou expansão automática de sub-segmentos em Q3 2024.",
        costDay:1800000,impact:"R$657M em 12 meses",source:"Databricks MLflow",recIds:["r1"],
      },
      {
        id:"f2",sev:"ALTO",type:"Atraso Competitivo",
        title:"Cobertura de sub-segmentos 56% abaixo do benchmark",
        desc:"Banco Acme cobre 41 sub-segmentos de PME vs. 93 do Itaú e 78 do Bradesco. Gap resulta em aprovação manual em 34% das solicitações e decisões de crédito em 4,2 dias vs. 6 horas do benchmark.",
        peer:"BTG Pactual completou automação de 100% dos sub-segmentos em Q3 2024 com tempo de decisão de 4 horas.",
        costDay:620000,impact:"R$226M em eficiência operacional",source:"AIMRI Assessment",recIds:["r2"],
      },
    ],
    recommendations:[
      {
        id:"r1",findingId:"f1",title:"Re-treinamento e Expansão do Modelo BBC",
        priority:"URGENTE",timeline:"4–6 semanas",invest:"R$2,8M",
        roiImpact:420,roiType:"Redução de Risco + Eficiência Operacional",
        whyNow:"Cada dia de inação com 287 contas em análise manual representa R$1,8M em receita perdida e risco crescente de não-conformidade com a Res. BCB 4.557. A auditoria BACEN de modelos de crédito pode resultar em exigência de capital adicional.",
        disruption:"Itaú atingiu precisão de 0,91 no modelo BBC com ensemble de modelos + dados do Open Finance. Bradesco anunciou expansão automática de sub-segmentos para 120 categorias até Q2 2026.",
        steps:[
          "Auditoria dos dados de treinamento por sub-segmento — identificar desvios de distribuição",
          "Re-treinamento do modelo BBC com dados dos últimos 18 meses via Databricks AutoML",
          "Deploy em staging com validação paralela por 2 semanas (shadow mode)",
          "Aprovação do Comitê de Risco de Modelos conforme Res. BCB 4.557",
          "Go-live com monitoramento automatizado e alertas de drift mensal",
        ],
        tools:[
          {n:"Databricks AutoML",desc:"Re-treinamento e validação do modelo BBC"},
          {n:"MLflow Model Registry",desc:"Rastreabilidade e versionamento de modelos"},
          {n:"Quod / Serasa API",desc:"Enriquecimento de dados de PMEs"},
          {n:"BACEN Open Finance API",desc:"Dados comportamentais de clientes"},
        ],
        benefits:[
          {l:"Precisão BBC",v:"0,69 → 0,85+"},
          {l:"Contas Reautomatizadas",v:"287 → 0 em análise manual"},
          {l:"Receita Recuperada",v:"R$420M/ano"},
          {l:"Custo da Inação",v:"R$1,8M/dia → ~R$0"},
        ],
      },
      {
        id:"r2",findingId:"f2",title:"Plataforma de Decisão de Crédito — Cobertura Total PMEs",
        priority:"ALTO",timeline:"8–12 semanas",invest:"R$5,4M",
        roiImpact:226,roiType:"Eficiência Operacional + Crescimento de Carteira",
        whyNow:"Com Selic em queda, crédito para PMEs é o principal driver de crescimento. Banco Acme perde market share mensalmente para bancos com decisão em < 6 horas.",
        disruption:"BTG Pactual e XP lançaram plataformas de crédito para PMEs com decisão em 4 horas e aprovação em 89% dos casos. O Banco Acme aprova 34% manualmente — 2 dias de desvantagem competitiva.",
        steps:[
          "Mapeamento de todos os 93 sub-segmentos de PME do benchmark Itaú",
          "Desenvolvimento de features por sub-segmento com dados Open Finance",
          "Treinamento de modelos ensemble por cluster de sub-segmento",
          "Integração com esteira de crédito e motor de decisão SAP",
          "Rollout por região: SP → RJ → demais estados",
        ],
        tools:[
          {n:"Salesforce Financial Services Cloud",desc:"Orquestração da jornada de crédito"},
          {n:"SAP Credit Management",desc:"Integração com motor de decisão legado"},
          {n:"AWS SageMaker",desc:"Treinamento de modelos por sub-segmento"},
          {n:"Open Finance BACEN",desc:"Dados de comportamento financeiro de PMEs"},
        ],
        benefits:[
          {l:"Sub-segmentos Cobertos",v:"41 → 93 (100% do benchmark)"},
          {l:"Aprovação Automática",v:"66% → 88% das solicitações"},
          {l:"Tempo de Decisão",v:"4,2 dias → 6 horas"},
          {l:"ROI Operacional",v:"+R$226M/ano"},
        ],
      },
    ],
    goals:["Elevar cobertura automática de PMEs de 34% para 88% até Q4 2026","Reduzir tempo de decisão de crédito de 4,2 dias para 6 horas","Atingir precisão BBC ≥ 0,85 em todos os sub-segmentos"],
    sources:["Databricks MLflow","Open Finance BACEN","Quod/Serasa APIs","Salesforce Financial Services Cloud","SAP S/4HANA"],
    scenarios:{
      bear:{label:"Conservador",roi:420,prob:25,assumptions:"Re-treinamento BBC apenas, sem expansão de sub-segmentos"},
      base:{label:"Base",      roi:980,prob:55,assumptions:"Adoção plena em 12 meses — BBC + cobertura total"},
      bull:{label:"Otimista",  roi:1800,prob:20,assumptions:"Expansão para PF e grandes empresas com mesmo motor"},
    },
  },

  // ── 2 MRM ──────────────────────────────────────────────────
  {
    id:"mrm",label:"Gestão de Risco de Modelos (MRM)",short:"MRM",
    score:2.1,bench:3.5,costDay:600000,roiM:340,
    featured:true,status:"CRÍTICO",icon:"⚖️",color:C.red,
    tagline:"5 modelos GenAI sem documentação BACEN — auditoria em 47 dias, exposição R$80–180M",
    type:"Risco Regulatório",
    kpis:[
      {l:"Score AIMRI",      v:"2,1/5",   c:C.red, sub:"Meta: 3,5+"},
      {l:"Auditoria BACEN",  v:"47 dias", c:C.red, sub:"Prazo crítico"},
      {l:"Modelos sem doc.", v:"5",        c:C.red, sub:"Não-conformes"},
      {l:"Exposição",        v:"R$180M",  c:C.gold,sub:"Multas + Remediação"},
    ],
    subprocesses:[
      {n:"Inventário de Modelos",         your:2.0,bench:3.8},
      {n:"Documentação e Validação",      your:1.8,bench:3.6},
      {n:"Monitoramento de Performance",  your:2.4,bench:3.5},
      {n:"Governança de Modelos GenAI",   your:1.6,bench:3.2},
      {n:"Conformidade Res. BCB 4.557",   your:2.1,bench:3.9},
    ],
    findings:[
      {
        id:"f3",sev:"CRÍTICO",type:"Risco Regulatório",
        title:"5 modelos GenAI sem documentação de governança",
        desc:"Cinco modelos de IA generativa implantados nos últimos 60 dias não possuem documentação de validação independente conforme a Res. BCB 4.557. Auditoria BACEN em 47 dias. Risco de multa estimado em R$80–180M.",
        peer:"Itaú e Bradesco possuem frameworks completos de governança LLM desde Q3 2025. Banco Acme: zero frameworks registrados para modelos GenAI.",
        costDay:600000,impact:"R$80–180M em exposição regulatória",source:"Archer GRC",recIds:["r3"],
      },
      {
        id:"f4",sev:"ALTO",type:"Lacuna Operacional",
        title:"Inventário de modelos desatualizado há 8 meses",
        desc:"O inventário oficial de modelos foi atualizado pela última vez em setembro de 2025. 23 novos modelos em produção não constam do registro — criando exposição ao processo de validação independente do BACEN.",
        peer:"Res. BCB 4.557 exige atualização mensal. Santander Brasil e BTG Pactual operam inventário em tempo real via integração CI/CD.",
        costDay:90000,impact:"R$33M em risco de remediação",source:"AIMRI Assessment",recIds:["r4"],
      },
    ],
    recommendations:[
      {
        id:"r3",findingId:"f3",title:"Programa Emergencial de Documentação MRM — 47 Dias",
        priority:"URGENTE",timeline:"3–4 semanas",invest:"R$1,2M",
        roiImpact:120,roiType:"Mitigação de Risco Regulatório",
        whyNow:"Auditoria BACEN em 47 dias. Itaú e Bradesco já possuem frameworks completos. Se o BACEN identificar modelos GenAI sem documentação durante a auditoria, a multa mínima é de R$10M por modelo — R$50M+ no total, além de risco de medida cautelar operacional.",
        disruption:"Itaú publicou seu LLM Governance Framework em setembro de 2025, tornando-se referência regulatória. O BACEN citou este framework explicitamente em sua última circular como exemplo de conformidade.",
        steps:[
          "Inventariar todos os modelos GenAI implantados nos últimos 90 dias — registrar no Archer GRC",
          "Produzir documentação de validação independente para os 5 modelos críticos (2 dias cada)",
          "Registrar trilha de auditoria completa com parâmetros, dados de treinamento e resultados",
          "Notificar proativamente a supervisão BACEN antes da auditoria com plano de ação",
          "Estabelecer processo contínuo: alertas automáticos de novos modelos sem documentação",
        ],
        tools:[
          {n:"Archer GRC",desc:"Registro e trilha de auditoria de modelos"},
          {n:"ModelRisk (Moody's Analytics)",desc:"Validação independente e documentação"},
          {n:"CLaiMB Govern Module",desc:"Monitoramento contínuo de conformidade"},
          {n:"BACEN Open Reporting API",desc:"Submissão proativa de relatórios regulatórios"},
        ],
        benefits:[
          {l:"Conformidade BACEN",v:"0% → 100% em 47 dias"},
          {l:"Risco de Multa",v:"R$80–180M → R$0"},
          {l:"Modelos Documentados",v:"5 críticos + processo contínuo"},
          {l:"Ciclo de Validação",v:"6 meses → 3 semanas"},
        ],
      },
      {
        id:"r4",findingId:"f4",title:"Inventário de Modelos em Tempo Real — Integração CI/CD",
        priority:"ALTO",timeline:"6–8 semanas",invest:"R$800K",
        roiImpact:33,roiType:"Redução de Risco Operacional",
        whyNow:"Com 23 modelos fora do inventário, o banco não sabe quais modelos estão em produção. Isso representa risco de shadow AI, exposição regulatória permanente e impossibilidade de resposta rápida em caso de incidente.",
        disruption:"Santander Brasil integrou seu inventário de modelos ao pipeline CI/CD — cada deploy de modelo gera automaticamente o registro no Archer GRC. Tempo de atualização: < 5 minutos.",
        steps:[
          "Auditoria completa de todos os ambientes de produção — identificar modelos não registrados",
          "Desenvolver webhook no pipeline CI/CD para captura automática de novos deploys",
          "Integrar com Archer GRC via API para registro automático",
          "Configurar alertas para modelos sem documentação após 7 dias de deploy",
          "Treinamento da equipe de MLOps no novo fluxo de governança",
        ],
        tools:[
          {n:"Archer GRC",desc:"Repositório central do inventário de modelos"},
          {n:"GitHub Actions / Azure DevOps",desc:"Integração CI/CD para captura automática"},
          {n:"MLflow Model Registry",desc:"Versionamento e metadados de modelos"},
          {n:"Datadog",desc:"Monitoramento de modelos em produção"},
        ],
        benefits:[
          {l:"Cobertura do Inventário",v:"70% → 100% em tempo real"},
          {l:"Latência de Registro",v:"8 meses atraso → < 5 minutos"},
          {l:"Modelos Shadow AI",v:"23 não registrados → 0"},
          {l:"Risco Operacional",v:"R$33M mitigado"},
        ],
      },
    ],
    goals:["100% de conformidade Res. BCB 4.557 antes da auditoria de 47 dias","Framework de governança LLM equivalente ao Itaú até Q3 2026","Inventário de modelos atualizado em tempo real via CI/CD"],
    sources:["Archer GRC","BACEN PSTG Sistema","ModelRisk Moody's Analytics","Confluence — Documentação Interna"],
    scenarios:{
      bear:{label:"Conservador",roi:80, prob:25,assumptions:"Remediação parcial, multa negociada"},
      base:{label:"Base",       roi:340,prob:55,assumptions:"Conformidade plena, zero multas, framework MRM"},
      bull:{label:"Otimista",   roi:580,prob:20,assumptions:"Framework líder — redução de capital regulatório"},
    },
  },

  // ── 3 FRAUDES ─────────────────────────────────────────────
  {
    id:"fraude",label:"Detecção e Prevenção de Fraudes",short:"Fraudes",
    score:3.1,bench:3.9,costDay:450000,roiM:520,
    featured:false,status:"ATENÇÃO",icon:"🛡️",color:C.gold,
    tagline:"Falsos positivos 2,3x acima do benchmark Pix — R$450K/dia em atrito e perdas",
    type:"Atraso Competitivo",
    kpis:[
      {l:"Score AIMRI",       v:"3,1/5",  c:C.gold,sub:"Meta: 4,0+"},
      {l:"Falsos Positivos",  v:"4,8%",   c:C.red, sub:"Benchmark: 2,1%"},
      {l:"Detecção Real-time",v:"78%",    c:C.gold,sub:"Benchmark: 94%"},
      {l:"Perda Anual",       v:"R$620M", c:C.gold,sub:"Fraude + atrito"},
    ],
    subprocesses:[
      {n:"Modelos de Detecção em Tempo Real",   your:3.2,bench:4.1},
      {n:"Análise Comportamental (Pix/TED)",    your:2.9,bench:3.8},
      {n:"Biometria e Autenticação Passiva",    your:3.5,bench:4.0},
      {n:"Investigação e Triagem Automatizada", your:2.8,bench:3.7},
      {n:"Retreinamento Contínuo (MLOps)",      your:3.0,bench:3.9},
    ],
    findings:[
      {
        id:"f5",sev:"ALTO",type:"Atraso Competitivo",
        title:"Taxa de falsos positivos Pix 2,3x acima do benchmark",
        desc:"O modelo de detecção comportamental para Pix apresenta 4,8% de falsos positivos vs. 2,1% do benchmark. 22.000 transações legítimas bloqueadas por dia, gerando R$450K/dia em custo operacional de revisão manual e atrito de clientes.",
        peer:"Nubank atingiu 1,8% de falsos positivos com ensemble comportamental + biometria passiva. Bradesco está em 2,0% após migração para modelo LLM-based em Q4 2024.",
        costDay:450000,impact:"R$164M em eficiência + retenção de clientes",source:"AWS SageMaker Monitoring",recIds:["r5"],
      },
      {
        id:"f6",sev:"MÉDIO",type:"Lacuna Operacional",
        title:"Investigação de fraude 100% manual para casos > R$50K",
        desc:"Alertas de fraude acima de R$50K são roteados 100% para analistas humanos sem triagem ou pré-análise por IA. Tempo médio de resolução: 4,2 horas vs. benchmark de 18 minutos. Custo por caso: R$380 vs. R$45 do benchmark.",
        peer:"BTG Pactual implantou triagem automatizada com resolução em < 20 min para 78% dos casos. XP resolveu 91% sem intervenção humana em 2025.",
        costDay:180000,impact:"R$66M em eficiência operacional",source:"AIMRI Assessment",recIds:["r6"],
      },
    ],
    recommendations:[
      {
        id:"r5",findingId:"f5",title:"Ensemble Comportamental para Detecção Pix — Benchmark em 90 Dias",
        priority:"ALTO",timeline:"6–8 semanas",invest:"R$3,2M",
        roiImpact:164,roiType:"Redução de Atrito + Eficiência Operacional",
        whyNow:"Pix ultrapassou 60 bilhões de transações/ano no Brasil. Cada ponto percentual de falso positivo representa milhões em atrito de cliente e custo operacional. O gap de 2,7pp custa R$164M/ano e erode o NPS digital a cada bloqueio indevido.",
        disruption:"Nubank usa ensemble LLM + análise comportamental em tempo real + biometria passiva, atingindo 1,8% de FP. Bradesco anunciou parceria com ClearSale para migração para modelo similar em Q1 2026. O Banco Acme corre risco de ter o pior indicador de FP entre os Tier 1 brasileiros em 2026.",
        steps:[
          "Extração de 200+ features comportamentais dos últimos 24 meses de transações Pix",
          "Treinar ensemble (XGBoost + LSTM + Transformer) com dados balanceados de fraude",
          "Integrar SDK de biometria passiva no app mobile para autenticação contínua",
          "Deploy gradual via A/B test: 10% → 30% → 70% → 100% do volume Pix",
          "Monitoramento em tempo real com auto-retreino mensal via Databricks",
        ],
        tools:[
          {n:"AWS SageMaker",desc:"Treinamento e orquestração do ensemble"},
          {n:"ClearSale API",desc:"Score de fraude especializado para Brasil"},
          {n:"Febraban Fraud Intelligence",desc:"Feed de inteligência de fraude setorial"},
          {n:"MLflow",desc:"Versionamento e monitoramento de modelos"},
          {n:"Datadog APM",desc:"Latência e performance de inferência em tempo real"},
        ],
        benefits:[
          {l:"Taxa de Falsos Positivos",v:"4,8% → 2,0% (benchmark)"},
          {l:"Transações Desbloqueadas",v:"22K/dia → < 9K/dia"},
          {l:"Eficiência Operacional",v:"+R$164M/ano"},
          {l:"NPS Digital",v:"+8 pontos estimados"},
        ],
      },
      {
        id:"r6",findingId:"f6",title:"Triagem Automatizada de Investigação — IA Human-in-the-Loop",
        priority:"MÉDIO",timeline:"8–10 semanas",invest:"R$1,8M",
        roiImpact:66,roiType:"Eficiência Operacional",
        whyNow:"Custo por analista-hora cresce 12% ao ano. Com 4,2h de resolução média, cada analista processa apenas 2 casos/turno. Automatizar triagem libera 40 analistas para casos de alta complexidade onde o julgamento humano agrega valor real.",
        disruption:"BTG Pactual e XP usam triagem 100% automatizada para casos até R$500K desde 2024. O modelo human-in-the-loop é o padrão da indústria global, com analistas focando apenas em casos de > R$2M ou padrões inéditos.",
        steps:[
          "Mapear regras de triagem atuais e critérios de decisão dos analistas de fraude",
          "Desenvolver modelo de priorização com score de risco, contexto do cliente e histórico",
          "Construir workflow automatizado no ServiceNow com escalação inteligente por tier",
          "Treinamento dos analistas no modelo human-in-the-loop (HITL)",
          "Medir e otimizar taxa de resolução automática mensal com feedback loop",
        ],
        tools:[
          {n:"ServiceNow AI",desc:"Orquestração de workflow de investigação"},
          {n:"Anthropic Claude API",desc:"Análise de contexto e narrativa de fraude"},
          {n:"Salesforce Financial Services Cloud",desc:"Visão 360° do cliente para contexto"},
          {n:"Archer GRC",desc:"Registro de casos e trilha de auditoria"},
        ],
        benefits:[
          {l:"Resolução Automática",v:"0% → 78% dos casos < 20 min"},
          {l:"Analistas Realocados",v:"40 para casos de alta complexidade"},
          {l:"Custo por Caso",v:"R$380 → R$45 (−88%)"},
          {l:"ROI Operacional",v:"+R$66M/ano"},
        ],
      },
    ],
    goals:["Reduzir falsos positivos Pix de 4,8% para ≤ 2,0% até Q3 2026","Elevar detecção real-time para 94% (benchmark)","Implementar triagem automatizada com 78% de resolução sem humano"],
    sources:["AWS SageMaker","ClearSale API","Febraban Fraud Intelligence","BACEN STR Sistema"],
    scenarios:{
      bear:{label:"Conservador",roi:180,prob:30,assumptions:"Melhoria incremental do modelo atual"},
      base:{label:"Base",       roi:520,prob:50,assumptions:"Ensemble + triagem automatizada completos"},
      bull:{label:"Otimista",   roi:890,prob:20,assumptions:"Liderança setorial em fraud AI — parceria Febraban"},
    },
  },

  // ── 4 CX ──────────────────────────────────────────────────
  {
    id:"cx",label:"Experiência do Cliente & IA Conversacional",short:"CX & IA",
    score:3.4,bench:4.0,costDay:280000,roiM:680,
    featured:false,status:"ATENÇÃO",icon:"💬",color:C.teal,
    tagline:"NPS digital 42pp abaixo da Nubank — plataforma LLM nativa captura R$680M",
    type:"Atraso Competitivo",
    kpis:[
      {l:"Score AIMRI",   v:"3,4/5",  c:C.teal,sub:"Meta: 4,2+"},
      {l:"NPS Digital",   v:"41",     c:C.gold,sub:"Nubank: 83"},
      {l:"Resolução 1°",  v:"64%",    c:C.gold,sub:"Benchmark: 88%"},
      {l:"Custo/Contato", v:"R$28,40",c:C.gold,sub:"Benchmark: R$11,20"},
    ],
    subprocesses:[
      {n:"Assistente Virtual (LLM Nativo)",    your:3.2,bench:4.3},
      {n:"Hiper-personalização de Ofertas",    your:3.0,bench:3.9},
      {n:"Jornada Digital Omnichannel",        your:3.6,bench:4.1},
      {n:"Análise de Sentimento em Tempo Real",your:3.4,bench:3.8},
      {n:"Next Best Action (NBA)",             your:3.8,bench:4.2},
    ],
    findings:[
      {
        id:"f7",sev:"ALTO",type:"Atraso Competitivo",
        title:"Assistente virtual com resolução de 1º contato 24pp abaixo da Nubank",
        desc:"O assistente virtual do Banco Acme resolve 64% das solicitações no primeiro contato vs. 88% da Nubank. O gap gera R$280K/dia em custo adicional de escalações, chamadas para agentes humanos e insatisfação. O sistema atual é baseado em regras (ciclo 2022).",
        peer:"Nubank usa LLM nativo com RAG sobre histórico do cliente, atingindo 88% de resolução e NPS 83. Bradesco anunciou migração completa para assistente LLM em H1 2026.",
        costDay:280000,impact:"R$102M em redução de custo operacional",source:"Salesforce Service Cloud",recIds:["r7"],
      },
      {
        id:"f8",sev:"MÉDIO",type:"Vazamento de Receita",
        title:"Next Best Action não operacional para 62% da base de clientes",
        desc:"O sistema de propensão e NBA cobre apenas 38% dos clientes ativos (PJ e PF premium). Clientes de varejo sem NBA ativo geram 3,4x menos receita adicional por interação. Oportunidade imediata de R$44M em receita incremental.",
        peer:"Itaú opera NBA em 100% da base com 47 modelos de propensão em tempo real, gerando R$2,1Bi em cross-sell em 2025.",
        costDay:120000,impact:"R$44M em receita incremental imediata",source:"AIMRI Assessment",recIds:["r8"],
      },
    ],
    recommendations:[
      {
        id:"r7",findingId:"f7",title:"Plataforma Conversacional LLM Nativa — Migração do Assistente Virtual",
        priority:"ALTO",timeline:"10–14 semanas",invest:"R$6,8M",
        roiImpact:102,roiType:"Redução de Custo + NPS + Retenção",
        whyNow:"Nubank cresce 3M de clientes/trimestre em grande parte por NPS digital superior a 80. Cada ponto de NPS equivale a +0,4% na taxa de churn e R$12M em receita de retenção. O gap de 42 pontos com a Nubank custa o banco R$504M/ano em retenção perdida.",
        disruption:"Bradesco anuncia migração completa para assistente LLM em H1 2026. Santander Brasil já migrou 60% dos fluxos para GPT-4o. O Banco Acme com chatbot de regras de 2022 será o último Tier 1 com tecnologia de geração anterior.",
        steps:[
          "Mapeamento dos 200 fluxos de maior volume no assistente atual",
          "Fine-tuning de modelo LLM com histórico de conversas e base de conhecimento do banco",
          "Implementar RAG sobre produtos, regulamentos e histórico de transações do cliente",
          "Deploy em canais digitais (app, WhatsApp Business, internet banking)",
          "Monitoramento de CSAT, escalações e NPS com A/B test vs. assistente legado",
        ],
        tools:[
          {n:"Anthropic Claude API",desc:"LLM base para o assistente conversacional"},
          {n:"AWS Bedrock + RAG",desc:"Retrieval de contexto de produtos e histórico"},
          {n:"Salesforce Einstein GPT",desc:"Integração com CRM e histórico do cliente"},
          {n:"Google Contact Center AI",desc:"Integração com canais de voz e chat"},
          {n:"Datadog",desc:"Monitoramento de CSAT e performance"},
        ],
        benefits:[
          {l:"Resolução 1º Contato",v:"64% → 88% (+24pp)"},
          {l:"Custo por Contato",v:"R$28,40 → R$11,20 (−61%)"},
          {l:"NPS Digital",v:"+18 pontos estimados"},
          {l:"ROI Operacional",v:"+R$102M/ano"},
        ],
      },
      {
        id:"r8",findingId:"f8",title:"Expansão do Next Best Action para 100% da Base",
        priority:"MÉDIO",timeline:"8–12 semanas",invest:"R$2,4M",
        roiImpact:44,roiType:"Receita Incremental",
        whyNow:"Clientes com NBA ativo geram R$340/ano a mais em receita de cross-sell. Expandir da cobertura atual de 38% para 100% da base representa R$44M+ de receita adicional no primeiro ano, sem custo de aquisição.",
        disruption:"Itaú reportou +R$2,1Bi em cross-sell em 2025 atribuído ao sistema NBA em tempo real com 47 modelos de propensão. O gap de cobertura do Acme (62%) representa a maior oportunidade de receita incremental não-realizada.",
        steps:[
          "Auditoria dos modelos de propensão existentes e cobertura por segmento",
          "Desenvolvimento de features comportamentais para clientes varejo (transacional + Open Finance)",
          "Redesign da camada de decisão NBA em tempo real (T+0)",
          "Integração com app, notificações push e canais digitais para entrega de ofertas",
          "Dashboard de performance de NBA por segmento, produto e canal",
        ],
        tools:[
          {n:"Salesforce Marketing Cloud",desc:"Orquestração e entrega de ofertas NBA"},
          {n:"Databricks Feature Store",desc:"Features em tempo real para propensão"},
          {n:"AWS Personalize",desc:"Personalização de recomendações"},
          {n:"Anthropic Claude API",desc:"Geração de mensagens personalizadas"},
        ],
        benefits:[
          {l:"Cobertura NBA",v:"38% → 100% da base"},
          {l:"Receita Adicional",v:"+R$44M/ano imediato"},
          {l:"Cross-sell Rate",v:"+2,8pp nos clientes atingidos"},
          {l:"Custo Incremental",v:"R$0 — base existente"},
        ],
      },
    ],
    goals:["Elevar NPS digital de 41 para 65+ até Q4 2026","Reduzir custo por contato de R$28,40 para R$13,00","Atingir 85% de resolução no primeiro contato via IA conversacional"],
    sources:["Salesforce Service Cloud","Zendesk","AWS Lex","Google Contact Center AI"],
    scenarios:{
      bear:{label:"Conservador",roi:220,prob:30,assumptions:"Melhoria incremental do assistente existente"},
      base:{label:"Base",       roi:680,prob:50,assumptions:"LLM nativo + NBA 100% + omnichannel"},
      bull:{label:"Otimista",   roi:1200,prob:20,assumptions:"Hiper-personalização + retenção premium + WhatsApp banking"},
    },
  },

  // ── 5 OPEN FINANCE ────────────────────────────────────────
  {
    id:"openfinance",label:"Open Finance & Conformidade Regulatória",short:"Open Finance",
    score:2.6,bench:3.6,costDay:200000,roiM:290,
    featured:false,status:"ATENÇÃO",icon:"📋",color:C.purp,
    tagline:"APIs Open Finance com SLA 87% (exigido: 99,5%) — 3 notificações BACEN em 2025",
    type:"Risco Regulatório",
    kpis:[
      {l:"Score AIMRI",        v:"2,6/5",  c:C.purp,sub:"Meta: 3,8+"},
      {l:"SLA APIs Open Fin.", v:"87%",    c:C.red, sub:"Exigido: 99,5%"},
      {l:"Conformidade COAF",  v:"Parcial",c:C.gold,sub:"Revisão pendente"},
      {l:"Exposição Regulat.", v:"R$73M",  c:C.gold,sub:"Multas estimadas"},
    ],
    subprocesses:[
      {n:"APIs Open Finance (Fases 1–4)",      your:2.8,bench:3.8},
      {n:"Compartilhamento de Dados (LGPD)",   your:2.5,bench:3.5},
      {n:"Monitoramento COAF/AML",             your:2.6,bench:3.7},
      {n:"Relatórios Regulatórios Automáticos",your:2.4,bench:3.6},
      {n:"Conformidade ESG (Res. BCB 4.943)",  your:2.7,bench:3.4},
    ],
    findings:[
      {
        id:"f9",sev:"ALTO",type:"Risco Regulatório",
        title:"APIs Open Finance com SLA abaixo do mínimo BACEN",
        desc:"As APIs Open Finance Fase 4 do Banco Acme apresentam SLA de 87% vs. 99,5% exigido. 3 notificações de não-conformidade recebidas em 2025. Próxima infração pode resultar em multa de R$10–50M e restrição ao uso dos dados de concorrentes no Open Finance.",
        peer:"Itaú, Bradesco e Santander operam com SLA ≥ 99,7% nas APIs Open Finance desde Q2 2025, utilizando auto-scaling e CDN dedicado.",
        costDay:200000,impact:"R$73M em exposição regulatória + oportunidade de dados",source:"BACEN Open Finance Directory",recIds:["r9"],
      },
      {
        id:"f10",sev:"MÉDIO",type:"Lacuna Operacional",
        title:"Monitoramento AML/COAF com latência T+2 dias",
        desc:"O sistema de monitoramento de lavagem de dinheiro opera com latência de T+2 vs. exigência T+1 do BACEN e best practice T+0 da indústria. 12 STRs (Suspeitas de Transação) atrasados identificados no último trimestre.",
        peer:"BTG Pactual e Nubank operam monitoramento AML em tempo real com reporte COAF automatizado T+0 desde 2024.",
        costDay:80000,impact:"R$29M em risco regulatório + reputacional",source:"COAF Sistema",recIds:["r10"],
      },
    ],
    recommendations:[
      {
        id:"r9",findingId:"f9",title:"Remediação de SLA e Infraestrutura das APIs Open Finance",
        priority:"URGENTE",timeline:"4–6 semanas",invest:"R$1,4M",
        roiImpact:73,roiType:"Mitigação de Risco Regulatório + Oportunidade de Dados",
        whyNow:"BACEN iniciou processo de enforcement em 2025. A 4ª notificação de não-conformidade desencadeia automaticamente processo administrativo com multa mínima de R$10M. Além disso, SLA ruim impede o banco de receber dados de clientes de concorrentes via Open Finance — canal de aquisição de 2026.",
        disruption:"Open Finance Fase 4 é o canal de aquisição mais importante de 2026. Bancos com SLA ≥ 99,5% têm acesso a dados financeiros de clientes de concorrentes para personalização de ofertas. O Banco Acme está bloqueado desse canal enquanto SLA permanecer abaixo do mínimo.",
        steps:[
          "Auditoria técnica dos endpoints com falha — identificar gargalos de latência e disponibilidade",
          "Upgrade de infraestrutura para APIs críticas: auto-scaling, load balancer e CDN dedicado",
          "Implementar health-check contínuo e alertas em tempo real (SLA < 99% por 5 min)",
          "Notificar BACEN proativamente com plano de ação antes da 4ª notificação",
          "Certificação de conformidade via OPUS Open Finance e submissão ao BACEN",
        ],
        tools:[
          {n:"AWS API Gateway",desc:"Auto-scaling e gerenciamento das APIs"},
          {n:"Datadog APM",desc:"Monitoramento de SLA em tempo real"},
          {n:"BACEN Open Finance Sandbox",desc:"Validação de conformidade técnica"},
          {n:"OPUS Open Finance",desc:"Certificação e testes de conformidade"},
          {n:"Cloudflare CDN",desc:"Redução de latência nas APIs"},
        ],
        benefits:[
          {l:"SLA das APIs",v:"87% → 99,7%"},
          {l:"Risco Regulatório",v:"R$73M mitigado"},
          {l:"Acesso Open Finance",v:"Dados de clientes de concorrentes desbloqueados"},
          {l:"Notificações BACEN",v:"0 após remediação"},
        ],
      },
      {
        id:"r10",findingId:"f10",title:"Monitoramento AML/COAF em Tempo Real — T+0",
        priority:"MÉDIO",timeline:"8–12 semanas",invest:"R$2,1M",
        roiImpact:29,roiType:"Mitigação de Risco + Eficiência Compliance",
        whyNow:"FATF Mutual Evaluation do Brasil em 2026 avaliará latência de reporte. Um rating negativo impacta o custo de captação internacional do banco. Além disso, com 12 STRs atrasados no último trimestre, há risco de inquérito COAF.",
        disruption:"Comply Advantage e Refinitiv operam análise AML em < 100ms. BTG Pactual e Nubank já migraram para T+0 com Kafka streaming. O modelo T+2 do Acme é tecnicamente obsoleto e regulatoriamente arriscado.",
        steps:[
          "Integrar feed de transações em tempo real no motor AML via Kafka streaming",
          "Configurar regras COAF em linguagem declarativa com Comply Advantage",
          "Automatizar geração e submissão de STRs aprovados pelo modelo",
          "Dashboard de monitoramento em tempo real para a equipe de compliance",
          "Validação com auditor independente e pré-notificação ao BACEN",
        ],
        tools:[
          {n:"Comply Advantage",desc:"Motor AML em tempo real com regras COAF"},
          {n:"Refinitiv World-Check",desc:"Listas de sanções e PEPs em tempo real"},
          {n:"Apache Kafka",desc:"Streaming de transações para análise T+0"},
          {n:"Archer GRC",desc:"Registro de alertas e trilha de auditoria"},
          {n:"COAF Portal API",desc:"Submissão automática de STRs"},
        ],
        benefits:[
          {l:"Latência AML",v:"T+2 → T+0 (tempo real)"},
          {l:"STRs Automatizados",v:"80% sem intervenção humana"},
          {l:"Risco FATF 2026",v:"Mitigado"},
          {l:"Custo de Compliance",v:"−40% com automação"},
        ],
      },
    ],
    goals:["Atingir SLA ≥ 99,5% nas APIs Open Finance até Q2 2026","Automatizar 100% dos relatórios regulatórios BACEN e COAF","Implementar monitoramento AML T+0"],
    sources:["BACEN Open Finance Directory","COAF Sistema","Refinitiv World-Check","Comply Advantage"],
    scenarios:{
      bear:{label:"Conservador",roi:90, prob:30,assumptions:"Remediação mínima de SLA"},
      base:{label:"Base",       roi:290,prob:55,assumptions:"SLA + AML T+0 + Open Finance ativado"},
      bull:{label:"Otimista",   roi:480,prob:15,assumptions:"Open Finance como canal de aquisição líder"},
    },
  },

  // ── 6 GENAI OPS ──────────────────────────────────────────
  {
    id:"genai",label:"GenAI & Eficiência Operacional",short:"GenAI Ops",
    score:2.9,bench:3.8,costDay:310000,roiM:760,
    featured:false,status:"ATENÇÃO",icon:"⚡",color:C.acc,
    tagline:"43% do back-office automatizável sem IA — índice eficiência 10pp pior que o Itaú",
    type:"Lacuna Operacional",
    kpis:[
      {l:"Score AIMRI",        v:"2,9/5",  c:C.acc, sub:"Meta: 4,0+"},
      {l:"Processos Auto.",    v:"31%",    c:C.gold,sub:"Benchmark: 67%"},
      {l:"Custo Operacional",  v:"R$2,1Bi",c:C.gold,sub:"Potencial: R$1,3Bi"},
      {l:"Prod. Colaboradores",v:"−18%",   c:C.red, sub:"vs. benchmark"},
    ],
    subprocesses:[
      {n:"Automação de Documentos e Contratos",   your:3.0,bench:4.0},
      {n:"Assistente GenAI para Colaboradores",   your:2.6,bench:3.8},
      {n:"Processamento Inteligente de Dados",    your:2.8,bench:3.7},
      {n:"Code Assist e Desenvolvimento",         your:3.2,bench:4.1},
      {n:"Integração e Orquestração de Agentes",  your:2.4,bench:3.5},
    ],
    findings:[
      {
        id:"f11",sev:"ALTO",type:"Lacuna Operacional",
        title:"43% do back-office automatizável ainda operando manualmente",
        desc:"Auditoria AIMRI identificou 43% das tarefas back-office como altamente automatizáveis por GenAI (análise de documentos, contratos, relatórios regulatórios). Custo anual desnecessário: R$810M. Benchmark do setor: 67% já automatizado — gap de 36pp.",
        peer:"Itaú reportou R$1,4Bi em eficiência via GenAI em 2025. Bradesco eliminou 2.400 posições back-office com automação inteligente. Índice de eficiência Itaú: 38,4% vs. estimativa Acme: 48,2%.",
        costDay:310000,impact:"R$810M em eficiência operacional anualizada",source:"AIMRI Assessment",recIds:["r11"],
      },
      {
        id:"f12",sev:"MÉDIO",type:"Atraso Competitivo",
        title:"Zero implantação de assistente GenAI para os 95.000 colaboradores",
        desc:"Pesquisa interna mostra 71% dos colaboradores usando ferramentas pessoais de IA (ChatGPT, Gemini) para tarefas de trabalho — risco de segurança e LGPD. Bradesco e Santander já implantaram Copilot Enterprise para 100% dos colaboradores.",
        peer:"Bradesco e Santander Brasil reportam +90 minutos/colaborador/dia de produtividade com Microsoft Copilot Enterprise desde Q3 2025.",
        costDay:0,impact:"Risco LGPD + R$380M em produtividade não-realizada",source:"AIMRI Assessment",recIds:["r12"],
      },
    ],
    recommendations:[
      {
        id:"r11",findingId:"f11",title:"Plataforma de Automação Inteligente de Back-Office",
        priority:"ALTO",timeline:"12–16 semanas",invest:"R$8,4M",
        roiImpact:380,roiType:"Eficiência Operacional + Redução de Headcount",
        whyNow:"Com a Selic em queda, margem financeira comprime e eficiência operacional torna-se o principal driver de lucro. O gap de 10pp no índice de eficiência vs. Itaú representa R$1,2Bi em lucro diferencial anual — o equivalente a todo o CAPEX de TI do banco.",
        disruption:"Itaú atingiu índice de eficiência de 38,4% em 2025 — 10pp melhor que a estimativa do Banco Acme. Bradesco eliminou 2.400 posições de back-office com IA sem cortar serviços. O modelo de banco de alto custo operacional não é mais sustentável na era GenAI.",
        steps:[
          "Mapear os 50 processos back-office de maior volume e custo manual — priorizar por ROI",
          "Implantar plataforma IDP (Intelligent Document Processing) para análise de documentos e contratos",
          "Desenvolver agentes GenAI por área: crédito, jurídico, compliance, RH, operações",
          "Integrar agentes com sistemas legados via APIs (SAP, Salesforce, sistemas proprietários)",
          "Medir gains mensais e expandir progressivamente até 70% de automação em 18 meses",
        ],
        tools:[
          {n:"Automation Anywhere",desc:"Plataforma RPA + IA para processos back-office"},
          {n:"Azure OpenAI / Claude API",desc:"LLM para análise de documentos e contratos"},
          {n:"ServiceNow AI",desc:"Orquestração de workflows automatizados"},
          {n:"Databricks",desc:"Processamento de dados em escala"},
          {n:"Microsoft Power Automate",desc:"Automação de tarefas repetitivas de desktop"},
        ],
        benefits:[
          {l:"Processos Automatizados",v:"31% → 74% em 18 meses"},
          {l:"Savings Operacionais",v:"R$380M no Ano 1"},
          {l:"Índice de Eficiência",v:"−5pp estimado (48% → 43%)"},
          {l:"Headcount Realocado",v:"1.200+ posições para funções de valor"},
        ],
      },
      {
        id:"r12",findingId:"f12",title:"Microsoft Copilot Enterprise — 95.000 Colaboradores",
        priority:"MÉDIO",timeline:"8–12 semanas",invest:"R$4,2M/ano",
        roiImpact:95,roiType:"Produtividade + Mitigação de Risco LGPD",
        whyNow:"71% dos colaboradores já usam IA pessoal para tarefas de trabalho — compartilhando dados confidenciais de clientes com ferramentas não-homologadas. O banco está exposto à LGPD sem saber. Cada dia sem solução homologada é um dia de exposição crescente.",
        disruption:"Bradesco e Santander estimam +90 minutos/colaborador/dia de produtividade com Copilot. No Banco Acme, isso representa R$380M/ano em produtividade. Bancos sem Copilot em 2026 terão dificuldade de contratar talentos tech, que já esperam ter acesso a IA no trabalho.",
        steps:[
          "Contratação Microsoft Copilot M365 Enterprise com licenciamento por ondas",
          "Configurar data governance e DLP (Data Loss Prevention) para proteger dados de clientes",
          "Rollout por ondas: C-Level + Liderança → Áreas Técnicas → Operações → Back-Office",
          "Monitorar adoção, produtividade e satisfação por área com Viva Insights",
          "Construir casos de uso proprietários sobre o Copilot (templates, workflows, agentes)",
        ],
        tools:[
          {n:"Microsoft Copilot Enterprise",desc:"Assistente IA integrado ao M365"},
          {n:"Microsoft Purview (DLP)",desc:"Proteção de dados e controle de exfiltração"},
          {n:"Azure Active Directory",desc:"Gestão de identidade e acesso"},
          {n:"Viva Insights",desc:"Monitoramento de adoção e produtividade"},
          {n:"Microsoft Defender",desc:"Segurança de endpoints e dados"},
        ],
        benefits:[
          {l:"Cobertura",v:"0% → 100% dos 95K colaboradores"},
          {l:"Produtividade",v:"+90 min/pessoa/dia"},
          {l:"Shadow AI Eliminado",v:"71% → 0% uso de ferramentas não-homologadas"},
          {l:"ROI 1º Ano",v:"R$95M em produtividade"},
        ],
      },
    ],
    goals:["Elevar automação back-office de 31% para 70% até Q1 2027","Implantar Copilot Enterprise para 100% dos colaboradores até Q3 2026","Reduzir custo operacional de R$2,1Bi para R$1,4Bi"],
    sources:["Microsoft Copilot Enterprise","ServiceNow AI","Automation Anywhere","Anthropic Claude API"],
    scenarios:{
      bear:{label:"Conservador",roi:280, prob:30,assumptions:"Copilot apenas, sem IDP de back-office"},
      base:{label:"Base",       roi:760, prob:55,assumptions:"Copilot + IDP + agentes GenAI"},
      bull:{label:"Otimista",   roi:1400,prob:15,assumptions:"GenAI end-to-end + índice eficiência líder"},
    },
  },
];

const NAV=[
  {id:"overview",  label:"Visão Geral",       icon:"◉"},
  {id:"functions", label:"Funções de Negócio", icon:"⬡"},
  {id:"findings",  label:"Descobertas",        icon:"⚠"},
  {id:"recs",      label:"Recomendações",      icon:"✦"},
  {id:"roi",       label:"Planejador de ROI",  icon:"◈"},
  {id:"ask",       label:"Pergunte ao CLaiMB", icon:"✧"},
  {id:"maturity",  label:"Maturidade",         icon:"◎"},
  {id:"roadmap",   label:"Roadmap",            icon:"▸"},
  {id:"competitive",label:"Intel. Competitiva",icon:"⊞"},
  {id:"corpus",    label:"Corpus Documental",  icon:"☰"},
  {id:"settings",  label:"Configurações",      icon:"⚙"},
];

// ─── Atoms ────────────────────────────────────────────────────
const SevBadge=({sev})=>{
  const m={CRÍTICO:{bg:C.redG,c:C.red},ALTO:{bg:C.goldG,c:C.gold},MÉDIO:{bg:C.accG,c:C.acc}};
  const s=m[sev]||m.MÉDIO;
  return <span style={{background:s.bg,color:s.c,border:`1px solid ${s.c}44`,borderRadius:4,fontSize:9,fontWeight:700,padding:"2px 7px"}}>{sev}</span>;
};
const PriBadge=({p})=>{
  const c=priColor(p);
  return <span style={{background:`${c}18`,color:c,border:`1px solid ${c}44`,borderRadius:4,fontSize:9,fontWeight:700,padding:"2px 7px"}}>{p}</span>;
};
const KpiCard=({l,v,c,sub})=>(
  <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:10,padding:"12px 16px",flex:1,minWidth:110}}>
    <div style={{fontSize:10,color:C.txtM,marginBottom:3}}>{l}</div>
    <div style={{fontSize:20,fontWeight:800,color:c}}>{v}</div>
    {sub&&<div style={{fontSize:9,color:C.txtD,marginTop:2}}>{sub}</div>}
  </div>
);
const ScoreBadge=({score})=>{
  const c=sc(score);
  return <span style={{background:`${c}20`,color:c,border:`1px solid ${c}44`,borderRadius:6,padding:"2px 9px",fontSize:13,fontWeight:700}}>{fmt(score)} · {sl(score)}</span>;
};
const SubBar=({n,your,bench})=>{
  const yc=sc(your);
  return (
    <div style={{marginBottom:12}}>
      <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}>
        <span style={{fontSize:11,color:C.txtM}}>{n}</span>
        <div style={{display:"flex",gap:8}}>
          <span style={{fontSize:11,fontWeight:700,color:yc}}>{fmt(your)}</span>
          {bench>your&&<span style={{fontSize:9,color:C.red}}>▼{fmt(bench-your)}</span>}
        </div>
      </div>
      <div style={{height:5,background:C.bgSurf,borderRadius:3,overflow:"hidden",position:"relative"}}>
        <div style={{position:"absolute",width:`${(bench/5)*100}%`,height:"100%",background:`${C.acc}25`,borderRadius:3}}/>
        <div style={{position:"absolute",width:`${(your/5)*100}%`,height:"100%",background:yc,borderRadius:3,transition:"width 1s"}}/>
      </div>
      <div style={{fontSize:9,color:C.txtD,marginTop:2}}>Benchmark: {fmt(bench)}</div>
    </div>
  );
};

// ─── Rec Chip (inside gap → opens RecDetailModal) ─────────────
function RecChip({rec,onOpen}){
  const pc=priColor(rec.priority);
  return (
    <div onClick={()=>onOpen(rec)}
      style={{display:"flex",justifyContent:"space-between",alignItems:"center",
        background:C.bgCard,border:`1px solid ${pc}33`,borderRadius:8,
        padding:"9px 13px",marginTop:8,cursor:"pointer",transition:"border-color .15s"}}
      onMouseEnter={e=>e.currentTarget.style.borderColor=pc}
      onMouseLeave={e=>e.currentTarget.style.borderColor=`${pc}33`}>
      <div style={{display:"flex",gap:8,alignItems:"center",flex:1,minWidth:0}}>
        <span style={{fontSize:11,color:pc,flexShrink:0}}>✦</span>
        <span style={{fontSize:12,fontWeight:600,color:C.txt,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{rec.title}</span>
      </div>
      <div style={{display:"flex",gap:7,alignItems:"center",flexShrink:0,marginLeft:10}}>
        <PriBadge p={rec.priority}/>
        <span style={{fontSize:11,fontWeight:700,color:C.grn}}>+R${rec.roiImpact}M</span>
        <span style={{fontSize:10,color:C.txtD}}>{rec.timeline}</span>
        <span style={{fontSize:11,color:C.acc}}>›</span>
      </div>
    </div>
  );
}

// ─── Rec Detail Modal (full WF advisory — standalone overlay) ──
function RecDetailModal({rec,fn,onClose}){
  if(!rec)return null;
  const pc=priColor(rec.priority);
  const linkedFindings=(fn?.findings||[]).filter(f=>rec.findingIds?.includes(f.id));
  return (
    <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.88)",zIndex:200,
      display:"flex",alignItems:"center",justifyContent:"center",padding:20}}
      onClick={onClose}>
      <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:16,
        width:"min(840px,96vw)",maxHeight:"90vh",display:"flex",flexDirection:"column",overflow:"hidden"}}
        onClick={e=>e.stopPropagation()}>

        {/* Header */}
        <div style={{padding:"18px 22px",borderBottom:`1px solid ${C.brd}`,background:`${pc}08`,flexShrink:0}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:12}}>
            <div style={{flex:1}}>
              <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:8,flexWrap:"wrap"}}>
                <PriBadge p={rec.priority}/>
                {fn&&<span style={{fontSize:9,color:C.txtD,background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:4,padding:"2px 7px"}}>{fn.short} · {rec.roiType}</span>}
              </div>
              <div style={{fontSize:16,fontWeight:700,color:C.txt,marginBottom:4}}>{rec.title}</div>
            </div>
            <button onClick={onClose} style={{background:"none",border:`1px solid ${C.brd}`,color:C.txtM,width:30,height:30,borderRadius:7,cursor:"pointer",fontSize:15,flexShrink:0}}>✕</button>
          </div>
          <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
            {[["Prazo",rec.timeline,C.acc],["Investimento",rec.invest,C.gold],["+ROI",`R$${rec.roiImpact}M`,C.grn]].map(([l,v,c])=>(
              <div key={l} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:8,padding:"8px 14px",textAlign:"center",flex:1,minWidth:90}}>
                <div style={{fontSize:9,color:C.txtD,marginBottom:2}}>{l.toUpperCase()}</div>
                <div style={{fontSize:14,fontWeight:800,color:c}}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Scrollable body */}
        <div style={{flex:1,overflowY:"auto",padding:"18px 22px",display:"flex",flexDirection:"column",gap:14}}>

          {/* Linked gaps */}
          {linkedFindings.length>0&&(
            <div style={{background:C.bgSurf,border:`1px solid ${C.brd}`,borderRadius:10,padding:12}}>
              <div style={{fontSize:9,fontWeight:700,color:C.red,letterSpacing:.5,marginBottom:8}}>LACUNAS VINCULADAS</div>
              {linkedFindings.map(f=>(
                <div key={f.id} style={{display:"flex",gap:7,alignItems:"center",padding:"5px 0",borderBottom:`1px solid ${C.brd}`,fontSize:11}}>
                  <SevBadge sev={f.sev}/>
                  <span style={{color:C.txt,flex:1}}>{f.title}</span>
                  <span style={{color:C.red,fontWeight:700,flexShrink:0}}>{brl(f.costDay)}/dia</span>
                </div>
              ))}
            </div>
          )}

          {/* CLaiMB Finding */}
          <div style={{background:C.bgSurf,border:`1px solid ${C.red}33`,borderRadius:10,padding:14}}>
            <div style={{fontSize:9,fontWeight:700,color:C.red,letterSpacing:.5,marginBottom:6}}>DESCOBERTA CLaiMB</div>
            <div style={{fontSize:12,color:C.txtM,lineHeight:1.7}}>{rec.finding}</div>
          </div>

          {/* Advisory */}
          <div style={{background:`${C.acc}0d`,border:`1px solid ${C.acc}33`,borderRadius:10,padding:14}}>
            <div style={{fontSize:9,fontWeight:700,color:C.acc,letterSpacing:.5,marginBottom:6}}>CONSULTORIA CLaiMB</div>
            <div style={{fontSize:12,color:C.txt,lineHeight:1.7}}>{rec.advisory}</div>
          </div>

          {/* Why Now */}
          <div style={{background:C.bgCard,border:`1px solid ${C.gold}33`,borderRadius:10,padding:14}}>
            <div style={{fontSize:9,fontWeight:700,color:C.gold,letterSpacing:.5,marginBottom:6}}>⚡ POR QUE AGIR AGORA</div>
            <div style={{fontSize:12,color:C.txtM,lineHeight:1.7}}>{rec.whyNow}</div>
          </div>

          {/* Disruption */}
          <div style={{background:C.bgCard,border:`1px solid ${C.acc}33`,borderRadius:10,padding:14}}>
            <div style={{fontSize:9,fontWeight:700,color:C.acc,letterSpacing:.5,marginBottom:6}}>🔍 INTELIGÊNCIA DE PEERS E DISRUPÇÃO</div>
            <div style={{fontSize:12,color:C.txtM,lineHeight:1.7}}>{rec.disruption}</div>
          </div>

          {/* Steps + Tools side by side */}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
            <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:10,padding:14}}>
              <div style={{fontSize:9,fontWeight:700,color:C.teal,letterSpacing:.5,marginBottom:10}}>ROTEIRO DE IMPLEMENTAÇÃO</div>
              {rec.steps.map((st,i)=>(
                <div key={i} style={{display:"flex",gap:8,alignItems:"flex-start",marginBottom:8}}>
                  <span style={{width:20,height:20,minWidth:20,borderRadius:5,background:C.accG,border:`1px solid ${C.acc}44`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:9,color:C.acc,fontWeight:700,marginTop:1,flexShrink:0}}>{i+1}</span>
                  <span style={{fontSize:11,color:C.txtM,lineHeight:1.55}}>{st}</span>
                </div>
              ))}
            </div>
            <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:10,padding:14}}>
              <div style={{fontSize:9,fontWeight:700,color:C.purp,letterSpacing:.5,marginBottom:10}}>FERRAMENTAS RECOMENDADAS</div>
              {rec.tools.map(t=>(
                <div key={t.n} style={{marginBottom:10}}>
                  <div style={{display:"flex",gap:6,alignItems:"center",marginBottom:2}}>
                    <div style={{width:5,height:5,borderRadius:2,background:C.teal,flexShrink:0}}/>
                    <span style={{fontSize:11,fontWeight:700,color:C.txt}}>{t.n}</span>
                  </div>
                  <div style={{fontSize:10,color:C.txtD,lineHeight:1.4,paddingLeft:11}}>{t.desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Benefits */}
          <div style={{background:C.bgCard,border:`1px solid ${C.grn}33`,borderRadius:10,padding:14}}>
            <div style={{fontSize:9,fontWeight:700,color:C.grn,letterSpacing:.5,marginBottom:10}}>✓ DECOMPOSIÇÃO DE BENEFÍCIOS</div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(190px,1fr))",gap:8}}>
              {rec.benefits.map(b=>(
                <div key={b.l} style={{background:C.bgSurf,border:`1px solid ${C.brd}`,borderRadius:8,
                  padding:"8px 12px",display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <span style={{fontSize:11,color:C.txtM}}>{b.l}</span>
                  <span style={{fontSize:11,fontWeight:700,color:C.grn,marginLeft:8}}>{b.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Full Rec Card (advisory tab) ─────────────────────────────
function RecFullCard({rec,fn,onOpenModal}){
  const [open,setOpen]=useState(false);
  const pc=priColor(rec.priority);
  const linkedFinding=fn.findings.find(f=>f.id===rec.findingId);

  return (
    <div style={{background:C.bgSurf,border:`1px solid ${C.brd}`,borderRadius:14,overflow:"hidden",marginBottom:14}}>
      {/* Header */}
      <div style={{padding:"16px 18px",borderBottom:`1px solid ${C.brd}`,background:`${pc}08`}}>
        <div style={{display:"flex",gap:8,alignItems:"flex-start",justifyContent:"space-between"}}>
          <div style={{flex:1}}>
            <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:8,flexWrap:"wrap"}}>
              <PriBadge p={rec.priority}/>
              <span style={{fontSize:9,color:C.txtD,background:C.bgCard,border:`1px solid ${C.brd}`,
                borderRadius:4,padding:"2px 7px"}}>{fn.short} · {rec.roiType}</span>
            </div>
            <div style={{fontSize:15,fontWeight:700,color:C.txt}}>{rec.title}</div>
          </div>
          <div style={{display:"flex",gap:8,flexShrink:0}}>
            {onOpenModal&&<button onClick={onOpenModal} style={{
              background:C.accG,border:`1px solid ${C.acc}44`,borderRadius:7,
              padding:"6px 12px",color:C.acc,fontSize:10,fontWeight:600,cursor:"pointer"
            }}>Detalhes ↗</button>}
            <button onClick={()=>setOpen(o=>!o)} style={{
              background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:8,
              padding:"6px 14px",color:C.acc,fontSize:11,fontWeight:600,cursor:"pointer"
            }}>{open?"Recolher ▲":"Expandir ▼"}</button>
          </div>
        </div>
        {/* KPI row */}
        <div style={{display:"flex",gap:8,marginTop:12,flexWrap:"wrap"}}>
          {[["Prazo",rec.timeline,C.acc],["Investimento",rec.invest,C.gold],[`+ROI`,`R$${rec.roiImpact}M`,C.grn]].map(([l,v,c])=>(
            <div key={l} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:8,
              padding:"8px 14px",textAlign:"center",flex:1,minWidth:100}}>
              <div style={{fontSize:9,color:C.txtD,marginBottom:2}}>{l.toUpperCase()}</div>
              <div style={{fontSize:14,fontWeight:800,color:c}}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Linked finding */}
      {linkedFinding&&(
        <div style={{padding:"10px 18px",background:C.bgCard,borderBottom:`1px solid ${C.brd}`,
          display:"flex",gap:8,alignItems:"center"}}>
          <SevBadge sev={linkedFinding.sev}/>
          <span style={{fontSize:11,color:C.txtM}}>Lacuna vinculada: <b style={{color:C.txt}}>{linkedFinding.title}</b></span>
          <span style={{fontSize:10,color:C.red,marginLeft:"auto",flexShrink:0,fontWeight:700}}>
            {brl(linkedFinding.costDay)}/dia
          </span>
        </div>
      )}

      {open&&(
        <div className="fi" style={{padding:"18px 18px 0"}}>
          {/* Why Now */}
          <div style={{background:C.bgCard,border:`1px solid ${C.gold}33`,borderRadius:10,padding:14,marginBottom:14}}>
            <div style={{fontSize:10,fontWeight:700,color:C.gold,marginBottom:6,letterSpacing:.6}}>⚡ POR QUE AGIR AGORA</div>
            <div style={{fontSize:12,color:C.txtM,lineHeight:1.7}}>{rec.whyNow}</div>
          </div>
          {/* Disruption intel */}
          <div style={{background:C.bgCard,border:`1px solid ${C.acc}33`,borderRadius:10,padding:14,marginBottom:14}}>
            <div style={{fontSize:10,fontWeight:700,color:C.acc,marginBottom:6,letterSpacing:.6}}>🔍 INTELIGÊNCIA DE PEERS E DISRUPÇÃO</div>
            <div style={{fontSize:12,color:C.txtM,lineHeight:1.7}}>{rec.disruption}</div>
          </div>

          {/* Two-column: steps + tools */}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:14}}>
            {/* Steps */}
            <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:10,padding:14}}>
              <div style={{fontSize:10,fontWeight:700,color:C.txtD,marginBottom:10,letterSpacing:.6}}>ROTEIRO DE IMPLEMENTAÇÃO</div>
              {rec.steps.map((st,i)=>(
                <div key={i} style={{display:"flex",gap:8,alignItems:"flex-start",marginBottom:8}}>
                  <span style={{width:20,height:20,minWidth:20,borderRadius:5,background:C.accG,
                    border:`1px solid ${C.acc}44`,display:"flex",alignItems:"center",
                    justifyContent:"center",fontSize:9,color:C.acc,fontWeight:700,marginTop:1}}>{i+1}</span>
                  <span style={{fontSize:11,color:C.txtM,lineHeight:1.55}}>{st}</span>
                </div>
              ))}
            </div>
            {/* Tools */}
            <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:10,padding:14}}>
              <div style={{fontSize:10,fontWeight:700,color:C.txtD,marginBottom:10,letterSpacing:.6}}>FERRAMENTAS RECOMENDADAS</div>
              {rec.tools.map(t=>(
                <div key={t.n} style={{marginBottom:10}}>
                  <div style={{display:"flex",gap:6,alignItems:"center",marginBottom:2}}>
                    <div style={{width:6,height:6,borderRadius:2,background:C.teal,flexShrink:0}}/>
                    <span style={{fontSize:11,fontWeight:700,color:C.txt}}>{t.n}</span>
                  </div>
                  <div style={{fontSize:10,color:C.txtD,lineHeight:1.4,paddingLeft:12}}>{t.desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Benefits */}
          <div style={{background:C.bgCard,border:`1px solid ${C.grn}33`,borderRadius:10,padding:14,marginBottom:18}}>
            <div style={{fontSize:10,fontWeight:700,color:C.grn,marginBottom:10,letterSpacing:.6}}>✓ DECOMPOSIÇÃO DE BENEFÍCIOS</div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:8}}>
              {rec.benefits.map(b=>(
                <div key={b.l} style={{background:C.bgSurf,border:`1px solid ${C.brd}`,borderRadius:8,
                  padding:"8px 12px",display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <span style={{fontSize:11,color:C.txtM}}>{b.l}</span>
                  <span style={{fontSize:11,fontWeight:700,color:C.grn,marginLeft:8,textAlign:"right"}}>{b.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Function Modal ───────────────────────────────────────────
function FnModal({fn,onClose}){
  const [tab,setTab]=useState("gaps");
  const [selectedRec,setSelectedRec]=useState(null);
  const tabs=[
    {k:"goals",l:"Metas"},{k:"sources",l:"Fontes"},{k:"assessment",l:"Avaliação AIMRI™"},
    {k:"gaps",l:`Lacunas (${fn.findings.length})`},{k:"advisory",l:`Recomendações (${fn.recommendations.length})`},{k:"bizcase",l:"Business Case"},{k:"readiness",l:"Prontidão"},
  ];

  return (
    <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.82)",zIndex:100,
      display:"flex",alignItems:"center",justifyContent:"center",padding:20}}
      onClick={onClose}>
      {selectedRec&&<RecDetailModal rec={selectedRec} fn={fn} onClose={e=>{e?.stopPropagation();setSelectedRec(null);}}/>}
      <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:16,
        width:"min(960px,96vw)",maxHeight:"90vh",display:"flex",flexDirection:"column",overflow:"hidden"}}
        onClick={e=>e.stopPropagation()}>
        {/* Header */}
        <div style={{padding:"18px 22px",borderBottom:`1px solid ${C.brd}`,
          background:`linear-gradient(135deg,${C.bg},${C.bgCard})`}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
            <div>
              <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:6}}>
                <span style={{fontSize:22}}>{fn.icon}</span>
                <h2 style={{fontSize:17,fontWeight:700,color:C.txt}}>{fn.label}</h2>
                <SevBadge sev={fn.status==="CRÍTICO"?"CRÍTICO":"ALTO"}/>
              </div>
              <p style={{fontSize:11,color:C.txtM}}>{fn.tagline}</p>
            </div>
            <button onClick={onClose} style={{background:"none",border:`1px solid ${C.brd}`,
              color:C.txtM,width:30,height:30,borderRadius:7,cursor:"pointer",fontSize:15}}>✕</button>
          </div>
          <div style={{display:"flex",gap:8,marginTop:12,flexWrap:"wrap"}}>
            {fn.kpis.map((k,i)=><KpiCard key={i} {...k}/>)}
          </div>
        </div>
        {/* Tabs */}
        <div style={{display:"flex",padding:"0 22px",borderBottom:`1px solid ${C.brd}`,background:C.bg,overflowX:"auto"}}>
          {tabs.map(t=>(
            <button key={t.k} onClick={()=>setTab(t.k)} style={{
              padding:"9px 13px",border:"none",background:"none",cursor:"pointer",whiteSpace:"nowrap",
              fontSize:11,fontWeight:tab===t.k?700:400,
              color:tab===t.k?C.acc:C.txtM,
              borderBottom:`2px solid ${tab===t.k?C.acc:"transparent"}`,
              transition:"all .15s",
            }}>{t.l}</button>
          ))}
        </div>
        {/* Content */}
        <div style={{flex:1,overflowY:"auto",padding:22}}>
          {/* METAS */}
          {tab==="goals"&&(
            <div className="fi">
              <h3 style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:14}}>Metas Estratégicas de IA</h3>
              {fn.goals.map((g,i)=>(
                <div key={i} style={{display:"flex",gap:10,alignItems:"flex-start",marginBottom:10}}>
                  <div style={{width:20,height:20,minWidth:20,borderRadius:5,background:C.accG,
                    border:`1px solid ${C.acc}44`,display:"flex",alignItems:"center",
                    justifyContent:"center",fontSize:9,color:C.acc,fontWeight:700}}>{i+1}</div>
                  <div style={{fontSize:12,color:C.txt,lineHeight:1.6}}>{g}</div>
                </div>
              ))}
            </div>
          )}
          {/* FONTES */}
          {tab==="sources"&&(
            <div className="fi">
              <h3 style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:14}}>Fontes de Dados Conectadas</h3>
              <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(190px,1fr))",gap:8}}>
                {fn.sources.map((s,i)=>(
                  <div key={i} style={{background:C.bgSurf,border:`1px solid ${C.brd}`,
                    borderRadius:8,padding:"9px 13px",fontSize:11,color:C.txt,display:"flex",gap:7,alignItems:"center"}}>
                    <span style={{color:C.grn}}>●</span>{s}
                  </div>
                ))}
              </div>
            </div>
          )}
          {/* AVALIAÇÃO */}
          {tab==="assessment"&&(
            <div className="fi">
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
                <h3 style={{fontSize:13,fontWeight:700,color:C.txt}}>Avaliação AIMRI™ — Sub-processos</h3>
                <ScoreBadge score={fn.score}/>
              </div>
              {fn.subprocesses.map((sp,i)=><SubBar key={i} {...sp}/>)}
            </div>
          )}
          {/* LACUNAS — with linked recs inline */}
          {tab==="gaps"&&(
            <div className="fi">
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
                <h3 style={{fontSize:13,fontWeight:700,color:C.txt}}>Lacunas e Descobertas Críticas</h3>
                <span style={{fontSize:11,color:C.txtM}}>{fn.findings.length} descobertas · {fn.recommendations.length} recomendações vinculadas</span>
              </div>
              {fn.findings.length===0?(
                <div style={{textAlign:"center",padding:"40px 0",color:C.txtD}}>
                  <div style={{fontSize:22,marginBottom:6}}>✓</div>
                  <div style={{fontSize:12,color:C.txtM}}>Nenhuma lacuna crítica identificada nesta função.</div>
                </div>
              ):fn.findings.map(f=>{
                const linkedRecs=fn.recommendations.filter(r=>f.recIds?.includes(r.id));
                return (
                  <div key={f.id} style={{background:C.bgSurf,border:`1px solid ${C.brd}`,
                    borderRadius:12,padding:16,marginBottom:14}}>
                    {/* Gap header */}
                    <div style={{display:"flex",gap:7,alignItems:"center",marginBottom:8,flexWrap:"wrap"}}>
                      <SevBadge sev={f.sev}/>
                      <span style={{fontSize:9,background:C.bgCard,border:`1px solid ${C.brd}`,
                        borderRadius:4,padding:"2px 7px",color:C.txtM}}>{f.type}</span>
                      <span style={{fontSize:9,color:C.txtD,marginLeft:"auto"}}>{f.source}</span>
                    </div>
                    <div style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:6}}>{f.title}</div>
                    <div style={{fontSize:11,color:C.txtM,lineHeight:1.7,marginBottom:10}}>{f.desc}</div>
                    {/* Peer comparison */}
                    <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:8,padding:10,marginBottom:10}}>
                      <div style={{fontSize:9,fontWeight:700,color:C.acc,marginBottom:3,letterSpacing:.5}}>COMPARAÇÃO COM PEERS</div>
                      <div style={{fontSize:11,color:C.txtM,lineHeight:1.6}}>{f.peer}</div>
                    </div>
                    {/* Impact metrics */}
                    <div style={{display:"flex",gap:8,marginBottom:f.recIds?.length?12:0}}>
                      <div style={{flex:1,background:C.redG,border:`1px solid ${C.red}44`,
                        borderRadius:7,padding:"7px 10px",textAlign:"center"}}>
                        <div style={{fontSize:9,color:C.txtD}}>Custo Diário</div>
                        <div style={{fontSize:14,fontWeight:800,color:C.red}}>{brl(f.costDay)}/dia</div>
                      </div>
                      <div style={{flex:1,background:C.grnG,border:`1px solid ${C.grn}44`,
                        borderRadius:7,padding:"7px 10px",textAlign:"center"}}>
                        <div style={{fontSize:9,color:C.txtD}}>Impacto Anual</div>
                        <div style={{fontSize:14,fontWeight:800,color:C.grn}}>{f.impact}</div>
                      </div>
                    </div>
                    {/* Linked recommendations — click to open detail modal */}
                    {linkedRecs.length>0&&(
                      <div style={{marginTop:12}}>
                        <div style={{fontSize:9,fontWeight:700,color:C.gold,letterSpacing:.5,marginBottom:2}}>
                          ✦ {linkedRecs.length} RECOMENDAÇÃO{linkedRecs.length>1?"ÕES":""} VINCULADA{linkedRecs.length>1?"S":""}
                        </div>
                        {linkedRecs.map(r=>(
                          <RecChip key={r.id} rec={r} onOpen={r=>setSelectedRec(r)}/>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
          {/* RECOMENDAÇÕES — full WF-style cards, title also opens detail modal */}
          {tab==="advisory"&&(
            <div className="fi">
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
                <h3 style={{fontSize:13,fontWeight:700,color:C.txt}}>Recomendações Estratégicas</h3>
                <span style={{fontSize:11,color:C.txtM}}>{fn.recommendations.length} recomendações · ROI total: R${fn.recommendations.reduce((a,r)=>a+r.roiImpact,0)}M</span>
              </div>
              {fn.recommendations.length===0?(
                <div style={{textAlign:"center",padding:"40px 0",color:C.txtD}}>
                  <div style={{fontSize:12,color:C.txtM}}>Recomendações geradas após avaliação completa.</div>
                </div>
              ):fn.recommendations.map(r=>(
                <RecFullCard key={r.id} rec={r} fn={fn} onOpenModal={()=>setSelectedRec(r)}/>
              ))}
            </div>
          )}
          {/* BUSINESS CASE */}
          {tab==="bizcase"&&(
            <div className="fi">
              <h3 style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:14}}>Business Case — Cenários</h3>
              <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:12,marginBottom:18}}>
                {Object.entries(fn.scenarios).map(([key,sc_])=>{
                  const cm={bear:C.gold,base:C.acc,bull:C.grn};
                  const c=cm[key];
                  return (
                    <div key={key} style={{background:C.bgSurf,border:`1px solid ${c}44`,borderRadius:12,padding:16,textAlign:"center"}}>
                      <div style={{fontSize:9,color:c,fontWeight:700,marginBottom:5,letterSpacing:.8}}>{sc_.label.toUpperCase()}</div>
                      <div style={{fontSize:30,fontWeight:900,color:c}}>R${sc_.roi}M</div>
                      <div style={{fontSize:9,color:C.txtD,marginTop:2}}>ROI</div>
                      <div style={{background:C.bgCard,borderRadius:6,padding:"6px 10px",
                        marginTop:8,fontSize:10,color:C.txtM,lineHeight:1.5}}>{sc_.assumptions}</div>
                      <div style={{marginTop:6,fontSize:10,color:C.txtD}}>Probabilidade: {sc_.prob}%</div>
                    </div>
                  );
                })}
              </div>
              <div style={{background:C.bgSurf,border:`1px solid ${C.brd}`,borderRadius:12,padding:14}}>
                <div style={{fontSize:11,fontWeight:700,color:C.txt,marginBottom:8}}>Fontes RAG Indexadas</div>
                {["Resolução BCB 4.557 — Gestão de Risco de Modelos","Febraban Tech — IA em Serviços Financeiros 2025","AIMRI Assessment — "+fn.label,"Benchmark de Peers — Itaú, Bradesco, BTG, Nubank","BCB Agenda # — Estratégia de IA 2025–2026"].map(s=>(
                  <div key={s} style={{display:"flex",gap:7,alignItems:"center",
                    padding:"5px 0",borderBottom:`1px solid ${C.brd}`,fontSize:10,color:C.txtM}}>
                    <span style={{color:C.acc}}>☰</span>{s}
                  </div>
                ))}
              </div>
            </div>
          )}
          {/* PRONTIDÃO */}
          {tab==="readiness"&&(
            <div className="fi">
              <h3 style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:14}}>Prontidão para Implementação</h3>
              {[
                {l:"Dados & Infraestrutura",    v:68,note:"Pipeline ETL existente — upgrade necessário"},
                {l:"Talentos & Habilidades",    v:52,note:"Gap crítico em MLOps e GenAI Engineering"},
                {l:"Governança & Conformidade", v:45,note:"Processos MRM incompletos — ver BACEN"},
                {l:"Patrocínio Executivo",      v:80,note:"CDO e CRO alinhados"},
                {l:"Orçamento Aprovado",        v:60,note:"Aprovação parcial — Q3 2026"},
                {l:"Integração Tecnológica",    v:72,note:"APIs Open Finance prontas"},
              ].map((item,i)=>(
                <div key={i} style={{marginBottom:12}}>
                  <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}>
                    <span style={{fontSize:11,color:C.txt}}>{item.l}</span>
                    <span style={{fontSize:11,fontWeight:700,
                      color:item.v>=70?C.grn:item.v>=50?C.gold:C.red}}>{item.v}%</span>
                  </div>
                  <div style={{height:5,background:C.bgSurf,borderRadius:3,overflow:"hidden"}}>
                    <div style={{width:`${item.v}%`,height:"100%",borderRadius:3,
                      background:item.v>=70?C.grn:item.v>=50?C.gold:C.red}}/>
                  </div>
                  <div style={{fontSize:9,color:C.txtD,marginTop:2}}>{item.note}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── Overview ─────────────────────────────────────────────────
function Overview({onNav,openFn}){
  const [memoLoading,setMemoLoading]=useState(false);
  const [memoText,setMemoText]=useState(null);

  const genMemo=async()=>{
    setMemoLoading(true);
    try{
      const res=await fetch("/api/ask",{
        method:"POST",headers:{"Content-Type":"application/json"},
        body:JSON.stringify({
          model:"claude-sonnet-4-20250514",max_tokens:1000,
          messages:[{role:"user",content:"Gere um memorando executivo de 3–4 parágrafos para o Conselho do Banco Acme sobre: Score AIMRI 2,8/5 (38º percentil), custo de inação R$2,4M/dia, dois achados críticos — (1) modelo BBC PMEs precisão 0,69 vs limiar 0,82, R$1,8M/dia, 287 contas manuais; (2) 5 modelos GenAI sem doc. BACEN, auditoria em 47 dias, exposição R$80–180M. ROI identificado: R$2,3Bi. Tom: executivo, formal, em português do Brasil."}],
        }),
      });
      const d=await res.json();
      setMemoText(d.content?.find(b=>b.type==="text")?.text||"Erro");
    }catch(e){setMemoText("Erro: "+e.message);}
    finally{setMemoLoading(false);}
  };

  return (
    <div className="fi">
      {/* KPI strip */}
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:10,marginBottom:18}}>
        {[
          {l:"Score AIMRI™ Geral",  v:"2,8",        c:C.gold,sub:"38º percentil · Meta: 4,0"},
          {l:"Custo da Inação",     v:"R$2,4M/dia",  c:C.red, sub:"R$876M anualizado"},
          {l:"ROI Identificado",    v:"R$2,3Bi",     c:C.grn, sub:"18 meses"},
          {l:"Peers à Frente",      v:"4 de 6",      c:C.gold,sub:"Nubank lidera: 4,1"},
        ].map((k,i)=>(
          <div key={i} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:"14px 16px"}}>
            <div style={{fontSize:10,color:C.txtM,marginBottom:3}}>{k.l}</div>
            <div style={{fontSize:i===0?28:19,fontWeight:900,color:k.c}}>{k.v}</div>
            <div style={{fontSize:9,color:C.txtD,marginTop:2}}>{k.sub}</div>
          </div>
        ))}
      </div>

      <div style={{display:"grid",gridTemplateColumns:"1fr 340px",gap:14}}>
        {/* Left column — simple function list */}
        <div style={{display:"flex",flexDirection:"column",gap:14}}>
          {/* Function list */}
          <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,overflow:"hidden"}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",
              padding:"12px 16px",borderBottom:`1px solid ${C.brd}`}}>
              <span style={{fontSize:12,fontWeight:700,color:C.txt}}>Funções de Negócio — AIMRI™</span>
              <button onClick={()=>onNav("functions")} style={{fontSize:11,color:C.acc,background:"none",border:"none",cursor:"pointer"}}>Ver Detalhes →</button>
            </div>
            {/* Column headers */}
            <div style={{display:"grid",gridTemplateColumns:"2fr 70px 80px 80px 80px 22px",
              gap:8,padding:"6px 16px",background:C.bg,
              fontSize:9,color:C.txtD,fontWeight:700,letterSpacing:.6}}>
              <span>FUNÇÃO</span>
              <span style={{textAlign:"center"}}>AIMRI</span>
              <span style={{textAlign:"center"}}>CUSTO/DIA</span>
              <span style={{textAlign:"center"}}>ROI</span>
              <span style={{textAlign:"center"}}>STATUS</span>
              <span/>
            </div>
            {FUNCTIONS.map((fn,i)=>(
              <div key={fn.id} onClick={()=>openFn(fn)}
                style={{display:"grid",gridTemplateColumns:"2fr 70px 80px 80px 80px 22px",
                  gap:8,padding:"11px 16px",alignItems:"center",cursor:"pointer",
                  borderTop:`1px solid ${C.brd}`,borderLeft:`3px solid ${fn.color}`,
                  background:"transparent",transition:"background .15s"}}
                onMouseEnter={e=>e.currentTarget.style.background=C.bgHover}
                onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                <div style={{display:"flex",gap:8,alignItems:"center",minWidth:0}}>
                  <span style={{fontSize:16,flexShrink:0}}>{fn.icon}</span>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:12,fontWeight:600,color:C.txt,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{fn.label}</div>
                    <div style={{fontSize:9,color:C.txtD,marginTop:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{fn.tagline.slice(0,68)}…</div>
                  </div>
                </div>
                <div style={{textAlign:"center"}}>
                  <span style={{fontSize:13,fontWeight:800,color:sc(fn.score)}}>{fmt(fn.score)}</span>
                  {fn.bench>fn.score&&<div style={{fontSize:8,color:C.red}}>▼{fmt(fn.bench-fn.score)}</div>}
                </div>
                <div style={{textAlign:"center",fontSize:11,fontWeight:700,color:C.red}}>{brl(fn.costDay)}</div>
                <div style={{textAlign:"center",fontSize:11,fontWeight:700,color:C.grn}}>R${fn.roiM}M</div>
                <div style={{textAlign:"center"}}><SevBadge sev={fn.status==="CRÍTICO"?"CRÍTICO":"ALTO"}/></div>
                <div style={{color:C.acc,fontSize:13,textAlign:"center"}}>›</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right column */}
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          {/* Live triggers */}
          <div style={{background:C.bgCard,border:`1px solid ${C.red}55`,borderRadius:12,padding:14}}>
            <div style={{display:"flex",gap:6,alignItems:"center",marginBottom:10}}>
              <div className="tp" style={{width:7,height:7,borderRadius:"50%",background:C.red}}/>
              <span style={{fontSize:11,fontWeight:700,color:C.red}}>2 ALERTAS CRÍTICOS ATIVOS</span>
            </div>
            {[
              {src:"Databricks MLflow",time:"há 2h",title:"BBC PMEs: precisão 0,69 < limiar 0,82",sub:"287 contas → manual · R$1,8M/dia",c:C.red,fn:FUNCTIONS[0]},
              {src:"Archer GRC",time:"há 5h",title:"5 modelos GenAI sem doc. BACEN",sub:"Auditoria em 47 dias · R$80–180M",c:C.red,fn:FUNCTIONS[1]},
            ].map((t,i)=>(
              <div key={i} onClick={()=>openFn(t.fn)}
                style={{background:C.bgSurf,border:`1px solid ${t.c}33`,borderRadius:8,
                  padding:10,marginBottom:8,cursor:"pointer",transition:"border-color .15s"}}
                onMouseEnter={e=>e.currentTarget.style.borderColor=t.c}
                onMouseLeave={e=>e.currentTarget.style.borderColor=`${t.c}33`}>
                <div style={{display:"flex",justifyContent:"space-between",marginBottom:3}}>
                  <span style={{fontSize:9,color:t.c,fontWeight:700}}>{t.src}</span>
                  <span style={{fontSize:9,color:C.txtD}}>{t.time}</span>
                </div>
                <div style={{fontSize:11,fontWeight:600,color:C.txt}}>{t.title}</div>
                <div style={{fontSize:9,color:C.txtD,marginTop:2}}>{t.sub}</div>
              </div>
            ))}
          </div>

          {/* Peer ranking */}
          <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:14}}>
            <div style={{fontSize:11,fontWeight:700,color:C.txt,marginBottom:10}}>Ranking de Maturidade de IA</div>
            {[...PEERS].sort((a,b)=>b.score-a.score).map((p,i)=>{
              const isMe=p.name==="Banco Acme";
              return (
                <div key={p.name} style={{display:"flex",alignItems:"center",gap:7,padding:"5px 7px",
                  marginBottom:3,borderRadius:5,
                  background:isMe?`${C.acc}10`:"transparent",
                  border:isMe?`1px solid ${C.acc}33`:"1px solid transparent"}}>
                  <span style={{fontSize:9,color:C.txtD,width:14,textAlign:"right"}}>{i+1}</span>
                  <span style={{flex:1,fontSize:10,fontWeight:isMe?700:400,color:isMe?C.acc:C.txtM}}>{p.name}</span>
                  <div style={{width:55,height:3,background:C.bgSurf,borderRadius:2,overflow:"hidden"}}>
                    <div style={{width:`${(p.score/5)*100}%`,height:"100%",background:p.color}}/>
                  </div>
                  <span style={{fontSize:10,fontWeight:700,color:p.color,width:26}}>{fmt(p.score)}</span>
                </div>
              );
            })}
          </div>

          {/* Memo generator */}
          <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:14}}>
            <div style={{fontSize:11,fontWeight:700,color:C.txt,marginBottom:6}}>CLaiMB Intelligence</div>
            <div style={{fontSize:10,color:C.txtM,marginBottom:10,lineHeight:1.6}}>
              Banco Acme: <b style={{color:C.gold}}>38º percentil</b>. Custo diário: <b style={{color:C.red}}>R$2,4M</b>. Dois achados críticos requerem ação imediata.
            </div>
            <button onClick={genMemo} disabled={memoLoading} style={{
              width:"100%",padding:"9px 0",borderRadius:8,
              background:memoLoading?C.brd:`linear-gradient(135deg,${C.acc},${C.teal})`,
              border:"none",color:"#fff",fontSize:11,fontWeight:700,cursor:memoLoading?"wait":"pointer",
            }}>{memoLoading?"Gerando...":"Gerar Memo para o Conselho →"}</button>
            {memoText&&(
              <div style={{marginTop:10,background:C.bgSurf,border:`1px solid ${C.brd}`,
                borderRadius:8,padding:10,fontSize:10,color:C.txtM,lineHeight:1.7,
                maxHeight:200,overflowY:"auto",whiteSpace:"pre-wrap"}}>{memoText}</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Functions Page — clean list like WF demo ─────────────────
function FunctionsPage({openFn}){
  return (
    <div className="fi">
      {/* Header */}
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
        <div>
          <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Funções de Negócio</h2>
          <p style={{fontSize:11,color:C.txtM,marginTop:2}}>Clique em qualquer função para ver avaliação, lacunas e recomendações completas</p>
        </div>
        <div style={{display:"flex",gap:8}}>
          {[["CRÍTICO",C.red,FUNCTIONS.filter(f=>f.status==="CRÍTICO").length],["ATENÇÃO",C.gold,FUNCTIONS.filter(f=>f.status!=="CRÍTICO").length]].map(([l,c,n])=>(
            <div key={l} style={{background:`${c}14`,border:`1px solid ${c}44`,borderRadius:7,padding:"5px 12px",fontSize:10,color:c,fontWeight:700}}>{n} {l}</div>
          ))}
        </div>
      </div>

      {/* Column headers */}
      <div style={{display:"grid",gridTemplateColumns:"2.5fr 90px 90px 100px 90px 100px 22px",
        gap:8,padding:"7px 16px",background:C.bg,borderRadius:"8px 8px 0 0",
        border:`1px solid ${C.brd}`,borderBottom:"none",
        fontSize:9,color:C.txtD,fontWeight:700,letterSpacing:.6}}>
        <span>FUNÇÃO DE NEGÓCIO</span>
        <span style={{textAlign:"center"}}>AIMRI</span>
        <span style={{textAlign:"center"}}>BENCH.</span>
        <span style={{textAlign:"center"}}>CUSTO/DIA</span>
        <span style={{textAlign:"center"}}>ROI</span>
        <span style={{textAlign:"center"}}>STATUS</span>
        <span/>
      </div>

      {/* Rows */}
      {FUNCTIONS.map((fn,i)=>{
        const gap=fn.bench-fn.score;
        const isLast=i===FUNCTIONS.length-1;
        return(
          <div key={fn.id}
            onClick={()=>openFn(fn)}
            style={{display:"grid",gridTemplateColumns:"2.5fr 90px 90px 100px 90px 100px 22px",
              gap:8,padding:"14px 16px",alignItems:"center",cursor:"pointer",
              background:C.bgCard,
              border:`1px solid ${C.brd}`,borderTop:"none",
              borderRadius:isLast?"0 0 10px 10px":"0",
              borderLeft:`3px solid ${fn.color}`,
              transition:"background .15s"}}
            onMouseEnter={e=>e.currentTarget.style.background=C.bgHover}
            onMouseLeave={e=>e.currentTarget.style.background=C.bgCard}>

            {/* Function identity */}
            <div style={{display:"flex",gap:10,alignItems:"center",minWidth:0}}>
              <span style={{fontSize:20,flexShrink:0}}>{fn.icon}</span>
              <div style={{minWidth:0}}>
                <div style={{fontSize:13,fontWeight:700,color:C.txt}}>{fn.label}</div>
                <div style={{fontSize:10,color:C.txtD,marginTop:2,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{fn.tagline}</div>
                <div style={{display:"flex",gap:5,marginTop:4}}>
                  {fn.findings.length>0&&<span style={{fontSize:9,background:C.redG,color:C.red,border:`1px solid ${C.red}33`,borderRadius:3,padding:"1px 5px"}}>⚠ {fn.findings.length} lacuna{fn.findings.length>1?"s":""}</span>}
                  {fn.recommendations.length>0&&<span style={{fontSize:9,background:C.accG,color:C.acc,border:`1px solid ${C.acc}33`,borderRadius:3,padding:"1px 5px"}}>✦ {fn.recommendations.length} rec.</span>}
                </div>
              </div>
            </div>

            {/* Score */}
            <div style={{textAlign:"center"}}>
              <div style={{fontSize:15,fontWeight:800,color:sc(fn.score)}}>{fmt(fn.score)}</div>
              {gap>0&&<div style={{fontSize:9,color:C.red,marginTop:1}}>▼{fmt(gap)}</div>}
            </div>

            {/* Benchmark */}
            <div style={{textAlign:"center",fontSize:12,color:C.txtM}}>{fmt(fn.bench)}</div>

            {/* Cost */}
            <div style={{textAlign:"center"}}>
              <div style={{fontSize:12,fontWeight:700,color:C.red}}>{brl(fn.costDay)}</div>
              <div style={{fontSize:9,color:C.txtD,marginTop:1}}>por dia</div>
            </div>

            {/* ROI */}
            <div style={{textAlign:"center"}}>
              <div style={{fontSize:12,fontWeight:700,color:C.grn}}>R${fn.roiM}M</div>
              <div style={{fontSize:9,color:C.txtD,marginTop:1}}>potencial</div>
            </div>

            {/* Status */}
            <div style={{textAlign:"center"}}><SevBadge sev={fn.status==="CRÍTICO"?"CRÍTICO":"ALTO"}/></div>

            <div style={{color:C.acc,fontSize:14,textAlign:"center"}}>›</div>
          </div>
        );
      })}
    </div>
  );
}

// ─── Findings Page ────────────────────────────────────────────
function FindingsPage({openFn}){
  const [filter,setFilter]=useState("TODOS");
  const all=FUNCTIONS.flatMap(fn=>fn.findings.map(f=>({...f,fn})));
  const shown=filter==="TODOS"?all:all.filter(f=>f.sev===filter);

  return (
    <div className="fi">
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
        <div>
          <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Descobertas — Todas as Funções</h2>
          <p style={{fontSize:11,color:C.txtM,marginTop:2}}>{all.length} descobertas identificadas</p>
        </div>
        <div style={{display:"flex",gap:5}}>
          {["TODOS","CRÍTICO","ALTO","MÉDIO"].map(s=>(
            <button key={s} onClick={()=>setFilter(s)} style={{
              padding:"4px 11px",borderRadius:5,border:`1px solid ${filter===s?C.acc:C.brd}`,
              background:filter===s?C.accG:"none",color:filter===s?C.acc:C.txtM,
              fontSize:10,cursor:"pointer",
            }}>{s}</button>
          ))}
        </div>
      </div>
      {shown.map((f,i)=>(
        <div key={i} style={{background:C.bgCard,border:`1px solid ${C.brd}`,
          borderRadius:12,padding:14,marginBottom:10}}>
          <div style={{display:"flex",gap:7,alignItems:"center",marginBottom:7,flexWrap:"wrap"}}>
            <SevBadge sev={f.sev}/>
            <span style={{fontSize:9,color:C.txtD,background:C.bgSurf,border:`1px solid ${C.brd}`,
              borderRadius:4,padding:"2px 7px"}}>{f.type}</span>
            <button onClick={()=>openFn(f.fn)} style={{marginLeft:"auto",background:"none",border:`1px solid ${C.brd}`,
              borderRadius:5,padding:"2px 8px",color:C.acc,fontSize:10,cursor:"pointer"}}>
              {f.fn.icon} {f.fn.short} →
            </button>
          </div>
          <div style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:5}}>{f.title}</div>
          <div style={{fontSize:11,color:C.txtM,lineHeight:1.7,marginBottom:8}}>{f.desc}</div>
          <div style={{display:"flex",gap:8}}>
            <div style={{flex:1,background:C.redG,border:`1px solid ${C.red}33`,
              borderRadius:7,padding:"6px 10px",textAlign:"center"}}>
              <div style={{fontSize:8,color:C.txtD}}>Custo Diário</div>
              <div style={{fontSize:13,fontWeight:800,color:C.red}}>{brl(f.costDay)}/dia</div>
            </div>
            <div style={{flex:1,background:C.grnG,border:`1px solid ${C.grn}33`,
              borderRadius:7,padding:"6px 10px",textAlign:"center"}}>
              <div style={{fontSize:8,color:C.txtD}}>Impacto Anual</div>
              <div style={{fontSize:13,fontWeight:800,color:C.grn}}>{f.impact}</div>
            </div>
            <div style={{flex:1,background:C.bgSurf,border:`1px solid ${C.brd}`,
              borderRadius:7,padding:"6px 10px",textAlign:"center"}}>
              <div style={{fontSize:8,color:C.txtD}}>Fonte</div>
              <div style={{fontSize:11,fontWeight:700,color:C.acc}}>{f.source}</div>
            </div>
          </div>
          {/* Linked recs preview */}
          {f.recIds&&f.recIds.length>0&&(
            <div style={{marginTop:8,background:C.goldG,border:`1px solid ${C.gold}33`,
              borderRadius:7,padding:"6px 10px",display:"flex",gap:7,alignItems:"center"}}>
              <span style={{fontSize:9,color:C.gold,fontWeight:700}}>✦ RECOMENDAÇÃO VINCULADA</span>
              {f.fn.recommendations.filter(r=>f.recIds.includes(r.id)).map(r=>(
                <span key={r.id} style={{fontSize:9,color:C.txtM}}>{r.title} · +R${r.roiImpact}M</span>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ─── Recs Page ────────────────────────────────────────────────
function RecsPage(){
  const allRecs=FUNCTIONS.flatMap(fn=>fn.recommendations.map(r=>({...r,fn})));
  return (
    <div className="fi">
      <div style={{marginBottom:14}}>
        <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Recomendações Estratégicas</h2>
        <p style={{fontSize:11,color:C.txtM,marginTop:2}}>
          {allRecs.length} recomendações · ROI total: R${allRecs.reduce((a,r)=>a+r.roiImpact,0)}M
        </p>
      </div>
      {allRecs.map((r,i)=>{
        const linkedFinding=r.fn.findings.find(f=>f.id===r.findingId);
        const pc=priColor(r.priority);
        return (
          <RecFullCard key={i} rec={r} fn={r.fn}/>
        );
      })}
    </div>
  );
}

// ─── ROI Planner ──────────────────────────────────────────────
function ROIPlanner(){
  const [levels,setLevels]=useState(()=>Object.fromEntries(FUNCTIONS.map(f=>[f.id,f.score])));
  const totalROI=Math.round(FUNCTIONS.reduce((a,f)=>{
    const uplift=Math.max(0,levels[f.id]-f.score);
    return a+f.roiM*(uplift/2);
  },0));

  return (
    <div className="fi" style={{display:"flex",gap:18,height:"100%",minHeight:0}}>
      <div style={{flex:1,overflowY:"auto",display:"flex",flexDirection:"column",gap:10}}>
        <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Planejador de ROI</h2>
        <p style={{fontSize:11,color:C.txtM}}>Ajuste o nível-alvo de maturidade por função para simular o ROI.</p>
        {FUNCTIONS.map(f=>{
          const lv=levels[f.id];
          const r=Math.round(f.roiM*Math.max(0,lv-f.score)/2);
          return (
            <div key={f.id} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:"14px 18px"}}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                <div>
                  <span style={{fontSize:13,fontWeight:600,color:C.txt}}>{f.icon} {f.label}</span>
                  <div style={{fontSize:10,color:C.txtM,marginTop:1}}>
                    Atual: <span style={{color:sc(f.score)}}>{fmt(f.score)}</span> → Meta: <span style={{color:sc(lv)}}>{fmt(lv)}</span>
                  </div>
                </div>
                <div style={{textAlign:"right"}}>
                  <div style={{fontSize:18,fontWeight:800,color:r>0?C.grn:C.txtD}}>{r>0?`+R$${r}M`:"—"}</div>
                  <div style={{fontSize:9,color:C.txtD}}>ROI projetado</div>
                </div>
              </div>
              <input type="range" min={f.score} max={5} step={0.1} value={lv}
                onChange={e=>setLevels(p=>({...p,[f.id]:parseFloat(e.target.value)}))}
                style={{width:"100%",accentColor:f.color||C.acc}}/>
              <div style={{display:"flex",justifyContent:"space-between",fontSize:8,color:C.txtD,marginTop:2}}>
                <span>Atual {fmt(f.score)}</span><span>Líder 5,0</span>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{width:240,display:"flex",flexDirection:"column",gap:10}}>
        <div style={{background:C.bgCard,border:`2px solid ${C.grn}44`,borderRadius:14,padding:18,textAlign:"center"}}>
          <div style={{fontSize:10,color:C.txtM,marginBottom:4}}>ROI TOTAL PROJETADO</div>
          <div style={{fontSize:34,fontWeight:900,color:C.grn}}>R${totalROI}M</div>
        </div>
        <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:14}}>
          <div style={{fontSize:11,fontWeight:700,color:C.txt,marginBottom:8}}>Por Função</div>
          {FUNCTIONS.map(f=>{
            const r=Math.round(f.roiM*Math.max(0,levels[f.id]-f.score)/2);
            return (
              <div key={f.id} style={{display:"flex",justifyContent:"space-between",marginBottom:6}}>
                <span style={{fontSize:10,color:C.txtM}}>{f.icon} {f.short}</span>
                <span style={{fontSize:11,fontWeight:700,color:r>0?C.grn:C.txtD}}>{r>0?`R$${r}M`:"—"}</span>
              </div>
            );
          })}
        </div>
        <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:14}}>
          <div style={{fontSize:11,fontWeight:700,color:C.txt,marginBottom:6}}>Custo da Inação</div>
          <div style={{fontSize:20,fontWeight:800,color:C.red}}>R$2,4M/dia</div>
          <div style={{fontSize:9,color:C.txtD,marginTop:3}}>R$876M anualizado</div>
        </div>
      </div>
    </div>
  );
}

// ─── Ask CLaiMB ───────────────────────────────────────────────
const SYS=`Você é o CLaiMB Intelligence, assistente estratégico de IA para o Banco Acme (Tier 1 brasileiro, R$1,2T ativos, ACME3/B3).

CONTEXTO: Score AIMRI 2,8/5 (38º percentil). Custo de inação: R$2,4M/dia. ROI identificado: R$2,3Bi.
ACHADOS CRÍTICOS: (1) Crédito PMEs — BBC precisão 0,69 vs limiar 0,82, 287 contas manuais, R$1,8M/dia; (2) MRM — 5 modelos GenAI sem doc. BACEN, auditoria em 47 dias, R$80–180M exposição.
PEERS: Nubank 4,1 · Itaú 3,9 · BTG 3,7 · Bradesco 3,5 · BB 3,2 · Santander 3,0.
Responda sempre em português do Brasil, linguagem executiva, dados quantitativos, referências à regulação BACEN/CVM/COAF/LGPD quando relevante.`;

const SUGESTOES=[
  "Qual o risco regulatório mais urgente com o BACEN?",
  "Como priorizamos R$2,3Bi de ROI?",
  "O que o Itaú faz em crédito PMEs que não fazemos?",
  "Gere um memo executivo para o Conselho",
  "Qual o impacto do Open Finance na nossa estratégia?",
  "Como reduzimos R$2,4M/dia em 90 dias?",
];

function AskClaimb(){
  const [msgs,setMsgs]=useState([]);
  const [inp,setInp]=useState("");
  const [loading,setLoading]=useState(false);
  const [err,setErr]=useState(null);
  const endRef=useRef(null);
  useEffect(()=>endRef.current?.scrollIntoView({behavior:"smooth"}),[msgs]);

  const send=useCallback(async(text)=>{
    const q=(text||inp).trim();
    if(!q||loading)return;
    setInp("");setErr(null);
    const um={role:"user",text:q};
    setMsgs(p=>[...p,um]);
    setLoading(true);
    try{
      const history=[...msgs,um].map(m=>({role:m.role==="user"?"user":"assistant",content:m.text}));
      const res=await fetch("/api/ask",{
        method:"POST",headers:{"Content-Type":"application/json"},
        body:JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1000,system:SYS,messages:history}),
      });
      const d=await res.json();
      setMsgs(p=>[...p,{role:"assistant",text:d.content?.find(b=>b.type==="text")?.text||"(sem resposta)"}]);
    }catch(e){setErr("Erro: "+e.message);}
    finally{setLoading(false);}
  },[msgs,inp,loading]);

  return (
    <div className="fi" style={{display:"flex",flexDirection:"column",height:"100%",gap:10}}>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
        <div>
          <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Pergunte ao CLaiMB</h2>
          <p style={{fontSize:10,color:C.txtM,marginTop:1}}>Assistente estratégico com contexto completo do Banco Acme</p>
        </div>
        <div style={{background:C.grnG,border:`1px solid ${C.grn}44`,borderRadius:7,padding:"3px 11px",fontSize:10,color:C.grn}}>● Ao Vivo</div>
      </div>
      <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
        {SUGESTOES.map((s,i)=>(
          <button key={i} onClick={()=>send(s)} style={{
            background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:18,
            padding:"4px 11px",fontSize:10,color:C.txtM,cursor:"pointer"}}>{s}</button>
        ))}
      </div>
      <div style={{flex:1,overflowY:"auto",background:C.bgCard,borderRadius:10,
        border:`1px solid ${C.brd}`,padding:14,display:"flex",flexDirection:"column",gap:10}}>
        {msgs.length===0&&(
          <div style={{textAlign:"center",padding:"40px 0",color:C.txtD}}>
            <div style={{fontSize:26,marginBottom:8}}>✧</div>
            <div style={{fontSize:12,fontWeight:600,color:C.txtM}}>CLaiMB Intelligence · Banco Acme</div>
          </div>
        )}
        {msgs.map((m,i)=>(
          <div key={i} style={{display:"flex",justifyContent:m.role==="user"?"flex-end":"flex-start",gap:7}}>
            {m.role==="assistant"&&(
              <div style={{width:26,height:26,minWidth:26,borderRadius:7,
                background:`linear-gradient(135deg,${C.acc},${C.teal})`,
                display:"flex",alignItems:"center",justifyContent:"center",
                fontSize:11,color:"#fff",marginTop:1}}>✦</div>
            )}
            <div style={{maxWidth:"78%",padding:"10px 14px",
              borderRadius:m.role==="user"?"12px 12px 3px 12px":"12px 12px 12px 3px",
              background:m.role==="user"?C.acc:C.bgSurf,
              border:m.role==="user"?"none":`1px solid ${C.brd}`,
              color:m.role==="user"?"#fff":C.txt,fontSize:11,lineHeight:1.7,
            }} dangerouslySetInnerHTML={{__html:m.role==="user"?m.text:m.text.replace(/\*\*(.*?)\*\*/g,"<b>$1</b>").replace(/\n/g,"<br/>")}}/>
          </div>
        ))}
        {loading&&(
          <div style={{display:"flex",gap:7,alignItems:"flex-start"}}>
            <div style={{width:26,height:26,minWidth:26,borderRadius:7,
              background:`linear-gradient(135deg,${C.acc},${C.teal})`,
              display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,color:"#fff"}}>✦</div>
            <div style={{background:C.bgSurf,border:`1px solid ${C.brd}`,
              borderRadius:"12px 12px 12px 3px",padding:"12px 16px",display:"flex",gap:8,alignItems:"center"}}>
              {[0,1,2].map(j=>(
                <div key={j} style={{width:7,height:7,borderRadius:"50%",background:C.acc,
                  animation:`dot 1.2s ${j*.2}s infinite`}}/>
              ))}
              <span style={{fontSize:10,color:C.txtM}}>Analisando contexto do Banco Acme...</span>
            </div>
          </div>
        )}
        {err&&<div style={{background:C.redG,border:`1px solid ${C.red}44`,borderRadius:8,padding:10,fontSize:10,color:C.red}}>{err}</div>}
        <div ref={endRef}/>
      </div>
      <div style={{display:"flex",gap:7,background:C.bgCard,borderRadius:12,border:`1px solid ${C.brdA}`,padding:5}}>
        <input value={inp} onChange={e=>setInp(e.target.value)}
          onKeyDown={e=>{if(e.key==="Enter"){e.preventDefault();send();}}}
          placeholder="Faça uma pergunta estratégica sobre o Banco Acme..."
          style={{flex:1,padding:"9px 12px",border:"none",background:"transparent",
            color:C.txt,fontSize:11,outline:"none",fontFamily:Fn.body}}/>
        <button onClick={()=>send()} disabled={loading} style={{
          padding:"9px 18px",borderRadius:9,border:"none",
          background:loading?C.brd:C.acc,color:"#fff",fontSize:11,fontWeight:700,cursor:loading?"wait":"pointer"}}>
          {loading?"...":"Enviar →"}
        </button>
      </div>
    </div>
  );
}

// ─── Maturity Radar ───────────────────────────────────────────
function Maturity(){
  const dims=["Estratégia","Governança","Dados & Infra","Modelos MLOps","Talentos","Produtos IA","Automação","Segurança","Ética","Parcerias","Inovação","Exp. Cliente","IA Riscos","ROI","IA Regulatória"];
  const your=[3.2,2.1,2.8,2.4,2.6,3.1,3.4,2.9,2.7,3.0,2.5,3.4,2.3,2.6,2.1];
  const bench=[3.9,3.8,3.6,3.7,3.4,3.9,3.8,3.5,3.4,3.6,3.7,4.0,3.6,3.5,3.9];
  const n=dims.length;const cx=190,cy=190,R=140;
  const pt=(i,v)=>{const a=(Math.PI*2*i/n)-Math.PI/2;const r=(v/5)*R;return[cx+r*Math.cos(a),cy+r*Math.sin(a)];};
  const poly=arr=>arr.map(([x,y])=>`${x},${y}`).join(" ");
  return (
    <div className="fi" style={{display:"flex",gap:20,flexWrap:"wrap"}}>
      <div style={{flex:"0 0 400px"}}>
        <svg width="400" height="400" viewBox="-10 -10 400 400">
          {[1,2,3,4,5].map(v=><polygon key={v} points={poly(Array.from({length:n},(_,i)=>pt(i,v)))} fill="none" stroke={C.brd} strokeWidth={.8} opacity={.5}/>)}
          {Array.from({length:n},(_,i)=>{const[x,y]=pt(i,5);return<line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke={C.brd} strokeWidth={.7} opacity={.4}/>;} )}
          <polygon points={poly(Array.from({length:n},(_,i)=>pt(i,bench[i])))} fill={`${C.acc}12`} stroke={C.acc} strokeWidth={1.5} strokeDasharray="4,3"/>
          <polygon points={poly(Array.from({length:n},(_,i)=>pt(i,your[i])))} fill={`${C.grn}18`} stroke={C.grn} strokeWidth={2}/>
          {dims.map((d,i)=>{const[x,y]=pt(i,5.8);const a=x<cx-8?"end":x>cx+8?"start":"middle";return<text key={i} x={x} y={y} textAnchor={a} fontSize={8} fill={C.txtM} fontFamily={Fn.body}>{d}</text>;})}
          {your.map((s,i)=>{const[x,y]=pt(i,s);return<circle key={i} cx={x} cy={y} r={3} fill={sc(s)}/>;} )}
        </svg>
      </div>
      <div style={{flex:1,minWidth:200}}>
        <div style={{display:"flex",gap:12,marginBottom:12}}>
          {[{l:"Score Geral",v:"2,8",c:C.gold},{l:"Percentil",v:"38º",c:C.gold},{l:"Gap Crítico",v:"MRM 2,1",c:C.red}].map(k=>(
            <div key={k.l} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:8,padding:"8px 12px",flex:1,textAlign:"center"}}>
              <div style={{fontSize:9,color:C.txtD}}>{k.l}</div>
              <div style={{fontSize:14,fontWeight:800,color:k.c}}>{k.v}</div>
            </div>
          ))}
        </div>
        <div style={{overflowY:"auto",maxHeight:330}}>
          {dims.map((d,i)=>(
            <div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"5px 0",borderBottom:`1px solid ${C.brd}`}}>
              <span style={{width:130,fontSize:9,color:C.txtM,flexShrink:0}}>{d}</span>
              <div style={{flex:1,height:4,background:C.bgSurf,borderRadius:2,overflow:"hidden",position:"relative"}}>
                <div style={{position:"absolute",width:`${(bench[i]/5)*100}%`,height:"100%",background:`${C.acc}25`,borderRadius:2}}/>
                <div style={{position:"absolute",width:`${(your[i]/5)*100}%`,height:"100%",background:sc(your[i]),borderRadius:2}}/>
              </div>
              <span style={{fontSize:9,fontWeight:700,color:sc(your[i]),width:24,textAlign:"right"}}>{fmt(your[i])}</span>
              {bench[i]>your[i]&&<span style={{fontSize:8,color:C.red,width:28,textAlign:"right"}}>▼{fmt(bench[i]-your[i])}</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Roadmap ──────────────────────────────────────────────────
function Roadmap(){
  const phases=[
    {n:1,label:"Fase 1 — Estabilizar",color:C.red,span:"Meses 1–3",items:[
      {fn:"MRM",t:"Programa Emergencial de Documentação MRM",roi:"R$120M",w:"3–4 sem"},
      {fn:"Crédito",t:"Re-treinamento BBC e Expansão Sub-segmentos",roi:"R$420M",w:"4–6 sem"},
      {fn:"Open Finance",t:"Remediação SLA APIs Open Finance",roi:"R$73M",w:"4–6 sem"},
    ]},
    {n:2,label:"Fase 2 — Escalar",color:C.gold,span:"Meses 4–8",items:[
      {fn:"Fraudes",t:"Ensemble Comportamental Detecção Pix",roi:"R$164M",w:"6–8 sem"},
      {fn:"CX & IA",t:"Plataforma LLM Conversacional Nativa",roi:"R$102M",w:"10–14 sem"},
      {fn:"GenAI Ops",t:"Microsoft Copilot Enterprise — 95K colaboradores",roi:"R$95M",w:"8–12 sem"},
    ]},
    {n:3,label:"Fase 3 — Liderar",color:C.grn,span:"Meses 9–18",items:[
      {fn:"Crédito",t:"Plataforma de Crédito Inteligente — Cobertura Total PMEs",roi:"R$226M",w:"8–12 sem"},
      {fn:"GenAI Ops",t:"Automação Inteligente Back-Office",roi:"R$380M",w:"12–16 sem"},
      {fn:"CX & IA",t:"Next Best Action — 100% da Base",roi:"R$44M",w:"8–12 sem"},
    ]},
  ];
  return (
    <div className="fi">
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
        <div>
          <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Roadmap de Transformação de IA</h2>
          <p style={{fontSize:11,color:C.txtM,marginTop:2}}>Banco Acme · 18 meses · ROI total projetado: R$1,6Bi</p>
        </div>
        <div style={{display:"flex",gap:8}}>
          {[["R$2,4M/dia",C.red,"Custo da Inação"],["R$1,6Bi",C.grn,"ROI Projetado 18m"]].map(([v,c,l])=>(
            <div key={l} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:9,padding:"7px 13px",textAlign:"center"}}>
              <div style={{fontSize:15,fontWeight:800,color:c}}>{v}</div>
              <div style={{fontSize:8,color:C.txtD}}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      {phases.map(ph=>(
        <div key={ph.n} style={{marginBottom:18}}>
          <div style={{display:"flex",gap:10,alignItems:"center",marginBottom:10}}>
            <div style={{width:26,height:26,borderRadius:7,background:`${ph.color}18`,
              border:`1px solid ${ph.color}55`,display:"flex",alignItems:"center",
              justifyContent:"center",fontSize:11,fontWeight:800,color:ph.color}}>{ph.n}</div>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:ph.color}}>{ph.label}</div>
              <div style={{fontSize:9,color:C.txtD}}>{ph.span}</div>
            </div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(230px,1fr))",gap:8,paddingLeft:36}}>
            {ph.items.map((it,i)=>(
              <div key={i} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:9,padding:"10px 13px"}}>
                <div style={{fontSize:8,color:ph.color,fontWeight:700,marginBottom:3}}>{it.fn.toUpperCase()}</div>
                <div style={{fontSize:11,color:C.txt,marginBottom:6,lineHeight:1.4}}>{it.t}</div>
                <div style={{display:"flex",justifyContent:"space-between"}}>
                  <span style={{fontSize:11,fontWeight:700,color:C.grn}}>{it.roi}</span>
                  <span style={{fontSize:9,color:C.txtD}}>{it.w}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Competitive Intelligence ─────────────────────────────────
function Competitive(){
  return (
    <div className="fi">
      <h2 style={{fontSize:15,fontWeight:700,color:C.txt,marginBottom:4}}>Inteligência Competitiva</h2>
      <p style={{fontSize:11,color:C.txtM,marginBottom:14}}>Benchmarking de maturidade de IA — setor bancário brasileiro</p>
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(165px,1fr))",gap:10,marginBottom:20}}>
        {PEERS.map(p=>{
          const isMe=p.name==="Banco Acme";
          return (
            <div key={p.name} style={{background:isMe?`${C.acc}12`:C.bgCard,
              border:`1px solid ${isMe?C.acc:C.brd}`,borderRadius:12,padding:"13px 15px"}}>
              <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}>
                <span style={{fontSize:11,fontWeight:isMe?700:500,color:isMe?C.acc:C.txt}}>{p.name}</span>
              </div>
              <div style={{fontSize:22,fontWeight:800,color:p.color,marginBottom:3}}>{fmt(p.score)}</div>
              <div style={{fontSize:9,color:C.txtD,marginBottom:6}}>{sl(p.score)}</div>
              <div style={{height:3,background:C.bgSurf,borderRadius:2,overflow:"hidden"}}>
                <div style={{width:`${(p.score/5)*100}%`,height:"100%",background:p.color}}/>
              </div>
              <div style={{fontSize:9,color:C.txtD,marginTop:4}}>{p.assets}</div>
            </div>
          );
        })}
      </div>
      {/* Scale vs Fix matrix */}
      <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:18}}>
        <div style={{fontSize:13,fontWeight:700,color:C.txt,marginBottom:12}}>Matriz Estratégica — Escalar vs. Corrigir</div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gridTemplateRows:"1fr 1fr",gap:10,height:240}}>
          {[
            {l:"ESCALAR AGORA",c:C.grn,items:["Detecção de Fraudes","Exp. do Cliente & IA"],sub:"Alta maturidade · Alto impacto"},
            {l:"TRANSFORMAR",  c:C.acc,items:["GenAI Ops","Open Finance & Compliance"],sub:"Média maturidade · Alto impacto"},
            {l:"CONSOLIDAR",   c:C.gold,items:["CX NBA (pós escalonamento)"],sub:"Boa maturidade · Impacto moderado"},
            {l:"CORRIGIR URGENTE",c:C.red,items:["Crédito PMEs · BBC","Gestão de Risco (MRM)"],sub:"Baixa maturidade · Risco crítico"},
          ].map((q,i)=>(
            <div key={i} style={{background:`${q.c}10`,border:`1px solid ${q.c}44`,borderRadius:9,padding:12}}>
              <div style={{fontSize:9,fontWeight:700,color:q.c,marginBottom:5}}>{q.l}</div>
              {q.items.map(it=><div key={it} style={{fontSize:10,color:C.txtM,marginBottom:2}}>· {it}</div>)}
              <div style={{fontSize:8,color:C.txtD,marginTop:5}}>{q.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Corpus ───────────────────────────────────────────────────
function Corpus(){
  const cats=[
    {c:C.red,label:"Regulatório & Conformidade",docs:["Res. BCB 4.557 — Gestão de Risco de Modelos (2024)","Res. BCB 4.943 — Risco Climático e ESG","Open Finance BACEN — Fases 1–4","Instrução CVM nº 629 — IA em Valores Mobiliários","LGPD 13.709 — Proteção de Dados","Circular COAF nº 16 — AML","Res. CMN 4.966 — Instrumentos Financeiros"]},
    {c:C.acc,label:"Inteligência de Peers",docs:["Itaú Unibanco — Relatório de IA 2025","Bradesco Next — Estratégia Digital 2025–2027","BTG Pactual — Governança de IA 2025","Nubank — Modelo de IA para Crédito (Research)","Febraban — Pesquisa Anual de Tecnologia 2025","BIS — Princípios para IA Responsável em Bancos"]},
    {c:C.teal,label:"Técnico & Setorial",docs:["AIMRI Assessment — Banco Acme · Relatório Completo","Databricks MLflow — Análise de Degradação BBC","Archer GRC — Relatório de Conformidade de Modelos","McKinsey — IA nos Bancos Brasileiros 2025","Gartner — Magic Quadrant AI Governance 2025","BCB Agenda # — Estratégia de IA 2025–2026","AWS — Soluções IA para Serviços Financeiros"]},
  ];
  return (
    <div className="fi">
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
        <div>
          <h2 style={{fontSize:15,fontWeight:700,color:C.txt}}>Corpus Documental</h2>
          <p style={{fontSize:11,color:C.txtM,marginTop:2}}>20 documentos indexados · RAG atualizado automaticamente</p>
        </div>
        <button style={{background:C.accG,border:`1px solid ${C.acc}44`,borderRadius:7,
          padding:"6px 14px",color:C.acc,fontSize:11,fontWeight:600,cursor:"pointer"}}>
          + Adicionar
        </button>
      </div>
      {cats.map((cat,ci)=>(
        <div key={ci} style={{marginBottom:16}}>
          <div style={{display:"flex",gap:7,alignItems:"center",marginBottom:8}}>
            <div style={{width:3,height:14,borderRadius:2,background:cat.c}}/>
            <span style={{fontSize:11,fontWeight:700,color:cat.c}}>{cat.label}</span>
            <span style={{fontSize:9,color:C.txtD}}>({cat.docs.length})</span>
          </div>
          {cat.docs.map((d,di)=>(
            <div key={di} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:7,
              padding:"6px 12px",marginBottom:4,display:"flex",justifyContent:"space-between",
              fontSize:11,color:C.txtM}}>
              <span style={{display:"flex",gap:6}}><span style={{color:cat.c}}>☰</span>{d}</span>
              <span style={{fontSize:8,color:C.grn}}>● indexado</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

// ─── Settings ─────────────────────────────────────────────────
function Settings(){
  const [conn,setConn]=useState({
    "Databricks MLflow":true,"Open Finance BACEN":true,"Salesforce FSC":true,
    "Archer GRC":true,"SAP S/4HANA":false,"Quod/Serasa API":true,
    "COAF Sistema":false,"AWS SageMaker":true,"Microsoft Copilot":false,
    "Google CCAI":false,"Febraban Fraud Intel":true,"ClearSale API":false,
    "Refinitiv World-Check":true,"Bloomberg":false,"Comply Advantage":false,
    "Zendesk":true,"ServiceNow AI":false,"Power BI":true,"BACEN PSTG":true,"LGPD Consent Hub":true,
  });
  return (
    <div className="fi">
      <h2 style={{fontSize:15,fontWeight:700,color:C.txt,marginBottom:16}}>Configurações — Banco Acme</h2>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:20}}>
        {[["Nome","Banco Acme S.A."],["Ticker","ACME3 · B3 Novo Mercado"],["Setor","Serviços Financeiros · Tier 1"],["Ativos","R$1,2 trilhão"],["Sede","São Paulo, SP"],["Colaboradores","95.000+"]].map(([l,v])=>(
          <div key={l} style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:9,padding:"10px 14px"}}>
            <div style={{fontSize:9,color:C.txtD,marginBottom:3}}>{l}</div>
            <div style={{fontSize:12,color:C.txt,fontWeight:500}}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{background:C.bgCard,border:`1px solid ${C.brd}`,borderRadius:12,padding:16}}>
        <div style={{fontSize:12,fontWeight:700,color:C.txt,marginBottom:12}}>
          Conectores de Dados ({Object.values(conn).filter(Boolean).length}/{Object.keys(conn).length} ativos)
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:7}}>
          {Object.entries(conn).map(([n,on])=>(
            <div key={n} onClick={()=>setConn(p=>({...p,[n]:!p[n]}))}
              style={{display:"flex",justifyContent:"space-between",alignItems:"center",
                background:on?`${C.grn}08`:C.bgSurf,
                border:`1px solid ${on?C.grn+"44":C.brd}`,
                borderRadius:7,padding:"7px 11px",cursor:"pointer"}}>
              <span style={{fontSize:10,color:on?C.txt:C.txtM}}>{n}</span>
              <div style={{width:26,height:15,borderRadius:7,background:on?C.grn:C.brd,position:"relative",transition:"background .2s"}}>
                <div style={{width:11,height:11,borderRadius:"50%",background:"#fff",
                  position:"absolute",top:2,left:on?13:2,transition:"left .2s"}}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Root ──────────────────────────────────────────────────────
function App(){
  useEffect(()=>{injectCSS();},[]);
  const [page,setPage]=useState("overview");
  const [selFn,setSelFn]=useState(null);

  const render=()=>{
    switch(page){
      case"overview":   return <Overview onNav={setPage} openFn={setSelFn}/>;
      case"functions":  return <FunctionsPage openFn={setSelFn}/>;
      case"findings":   return <FindingsPage openFn={setSelFn}/>;
      case"recs":       return <RecsPage/>;
      case"roi":        return <ROIPlanner/>;
      case"ask":        return <AskClaimb/>;
      case"maturity":   return <Maturity/>;
      case"roadmap":    return <Roadmap/>;
      case"competitive":return <Competitive/>;
      case"corpus":     return <Corpus/>;
      case"settings":   return <Settings/>;
      default:          return <Overview onNav={setPage} openFn={setSelFn}/>;
    }
  };

  return (
    <div style={{display:"flex",height:"100vh",overflow:"hidden",background:C.bg,fontFamily:Fn.body}}>
      {/* Sidebar */}
      <div style={{width:210,minWidth:210,height:"100vh",background:C.bgCard,
        borderRight:`1px solid ${C.brd}`,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        <div style={{padding:"18px 16px 14px",borderBottom:`1px solid ${C.brd}`}}>
          <div style={{fontSize:19,fontWeight:900,letterSpacing:-.5}}>
            <span style={{color:C.txt}}>CLai</span><span style={{color:C.acc}}>MB</span><span style={{color:C.txtM,fontSize:12}}>.ai</span>
          </div>
          <div style={{fontSize:8,color:C.txtD,marginTop:2,letterSpacing:1}}>BANCO ACME · AIMRI™</div>
        </div>
        <div style={{padding:"10px 14px 10px",borderBottom:`1px solid ${C.brd}`}}>
          <div style={{fontSize:11,fontWeight:600,color:C.txt}}>Banco Acme S.A.</div>
          <div style={{fontSize:9,color:C.txtD,marginTop:1}}>ACME3 · R$1,2T ativos</div>
          <div style={{display:"flex",gap:5,marginTop:7,alignItems:"center"}}>
            <div style={{flex:1,height:4,background:C.bgSurf,borderRadius:2,overflow:"hidden"}}>
              <div style={{width:"56%",height:"100%",background:C.gold,borderRadius:2}}/>
            </div>
            <span style={{fontSize:9,fontWeight:700,color:C.gold}}>2,8</span>
          </div>
          <div style={{fontSize:8,color:C.txtD,marginTop:2}}>38º percentil</div>
        </div>
        <div style={{flex:1,overflowY:"auto",padding:"6px 0"}}>
          {NAV.map(n=>{
            const act=page===n.id;
            return (
              <button key={n.id} onClick={()=>setPage(n.id)} style={{
                width:"100%",padding:"8px 16px",border:"none",background:act?C.accG:"none",
                color:act?C.acc:C.txtM,fontSize:11,textAlign:"left",cursor:"pointer",
                display:"flex",gap:9,alignItems:"center",
                borderLeft:`2px solid ${act?C.acc:"transparent"}`,transition:"all .15s",
              }}
              onMouseEnter={e=>{if(!act){e.currentTarget.style.background=C.bgSurf;e.currentTarget.style.color=C.txt;}}}
              onMouseLeave={e=>{if(!act){e.currentTarget.style.background="none";e.currentTarget.style.color=C.txtM;}}}>
                <span style={{fontSize:13}}>{n.icon}</span>{n.label}
              </button>
            );
          })}
        </div>
        <div style={{margin:"8px",padding:"9px 12px",borderRadius:9,
          background:C.redG,border:`1px solid ${C.red}44`}}>
          <div style={{display:"flex",gap:5,alignItems:"center",marginBottom:3}}>
            <div className="tp" style={{width:5,height:5,borderRadius:"50%",background:C.red}}/>
            <span style={{fontSize:8,fontWeight:700,color:C.red}}>2 ALERTAS CRÍTICOS</span>
          </div>
          <div style={{fontSize:8,color:C.txtD,lineHeight:1.5}}>BBC PMEs · MRM BACEN<br/>R$2,4M/dia em risco</div>
        </div>
      </div>
      {/* Main */}
      <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        <div style={{height:50,borderBottom:`1px solid ${C.brd}`,background:C.bgCard,
          display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 22px",flexShrink:0}}>
          <span style={{fontSize:13,fontWeight:600,color:C.txt}}>
            {NAV.find(n=>n.id===page)?.label||"Visão Geral"}
          </span>
          <div style={{display:"flex",gap:10,alignItems:"center"}}>
            <span style={{fontSize:10,color:C.txtD}}>Atualizado há 2h · Databricks MLflow</span>
            <span style={{background:C.grnG,border:`1px solid ${C.grn}44`,borderRadius:5,
              padding:"2px 9px",fontSize:9,color:C.grn}}>● Plataforma ao vivo</span>
            <span style={{background:C.redG,border:`1px solid ${C.red}55`,borderRadius:5,
              padding:"2px 9px",fontSize:9,color:C.red,fontWeight:700}}>⚠ 2 Críticos</span>
          </div>
        </div>
        <div style={{flex:1,overflowY:"auto",padding:20}}>
          {render()}
        </div>
      </div>
      {selFn&&<FnModal fn={selFn} onClose={()=>setSelFn(null)}/>}
    </div>
  );
}


const rootEl=document.getElementById('root');
ReactDOM.createRoot(rootEl).render(<App />);