/* DEV screen wrapper: secondary sidebar + sub-page switcher.
   Ensures dark theme while in DEV mode.
   Sub-secções (13): Início, Architecture, Prompts, Knowledge Base, Sub-agentes,
   Skills, Tools, Routing, Replay, Costs, Deploy, Integrações, Roadmap. */

const DevScreen = ({ variation, onOpenChat, forceTheme, user }) => {
  const [sub, setSub] = useSubNav('digi-dev-sub', 'inicio');

  // Force dark in DEV
  React.useEffect(() => {
    const prev = document.documentElement.dataset.theme;
    document.documentElement.dataset.theme = 'dark';
    return () => { if (prev) document.documentElement.dataset.theme = prev; };
  }, []);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      const map = {
        '1':'inicio','2':'architecture','3':'prompts','4':'kb','5':'agents',
        '6':'skills','7':'tools','8':'routing','9':'conversations',
        'c':'costs','C':'costs','d':'deploy','D':'deploy',
        'i':'integracoes','I':'integracoes','r':'roadmap','R':'roadmap',
      };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const Comp = { architecture: DevArchitecture }[sub];

  // Stub pages — formas finais coerentes; conteúdo real fica para fases seguintes
  const stub = (title, badge, blurb, sections) => (
    <div style={{ flex: 1, overflow: 'auto', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '28px 32px 80px' }}>
        <div style={{ fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
          DEV · {title.toUpperCase()}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '6px 0 6px' }}>
          <h1 className="font-display" style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>{title}</h1>
          {badge && (
            <span style={{
              padding: '3px 8px', fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 600,
              borderRadius: 4, color: 'var(--ai-500)',
              background: 'color-mix(in oklch, var(--ai-500) 14%, transparent)',
              border: '1px solid color-mix(in oklch, var(--ai-500) 30%, transparent)',
              letterSpacing: '0.06em',
            }}>{badge}</span>
          )}
        </div>
        <p style={{ margin: '0 0 24px', color: 'var(--text-muted)', fontSize: 13.5, lineHeight: 1.55, maxWidth: 760 }}>{blurb}</p>

        {sections && sections.map((s, i) => (
          <section key={i} style={{ marginBottom: 22 }}>
            <h3 className="font-display" style={{ margin: '0 0 10px', fontSize: 14, fontWeight: 600, letterSpacing: '0.02em' }}>{s.title}</h3>
            {s.kind === 'grid' && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 8 }}>
                {s.items.map((it, j) => (
                  <div key={j} style={{
                    padding: 12, borderRadius: 8,
                    border: '1px solid var(--border)', background: 'var(--bg-elev)',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span className="font-mono" style={{ fontSize: 11, color: 'var(--text)', fontWeight: 600 }}>{it.name}</span>
                      {it.status && (
                        <span style={{
                          padding: '1px 5px', fontSize: 9, fontWeight: 700, fontFamily: 'var(--font-mono)',
                          borderRadius: 3, letterSpacing: '0.04em',
                          background: it.status === 'ok' ? 'color-mix(in oklch, var(--success) 18%, transparent)'
                                    : it.status === 'pending' ? 'oklch(0.32 0.1 70)' : 'oklch(0.3 0.14 30)',
                          color: it.status === 'ok' ? 'var(--success)'
                               : it.status === 'pending' ? 'oklch(0.85 0.16 70)' : 'oklch(0.85 0.18 30)',
                        }}>{it.status === 'ok' ? '✓' : it.status === 'pending' ? '…' : '⚠'}</span>
                      )}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>{it.desc}</div>
                    {it.meta && <div style={{ marginTop: 6, fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{it.meta}</div>}
                  </div>
                ))}
              </div>
            )}
            {s.kind === 'rows' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {s.items.map((it, j) => (
                  <div key={j} style={{
                    padding: '10px 12px', borderRadius: 7,
                    border: '1px solid var(--border)', background: 'var(--bg-elev)',
                    display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 14,
                    alignItems: 'center',
                  }}>
                    <span className="font-mono" style={{ fontSize: 11, fontWeight: 600 }}>{it.name}</span>
                    <span style={{ fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>{it.desc}</span>
                    {it.meta && <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{it.meta}</span>}
                  </div>
                ))}
              </div>
            )}
          </section>
        ))}

        <div className="ai-surface" style={{ marginTop: 24, padding: 14, borderRadius: 8, fontSize: 12.5 }}>
          <span className="ai-chip"><span className="ai-dot" />Digi AI</span>
          <p style={{ margin: '8px 0 0', color: 'var(--text-muted)', lineHeight: 1.55 }}>
            Esta secção tem a forma final mas ainda não é interactiva. Próximo passo: ligar a Postgres + heydigi.js + Anthropic API para mostrar dados reais. Pede-me e construímos.
          </p>
        </div>
      </div>
    </div>
  );

  // ─── Stubs existentes ──────────────────────────────────────────────────────
  const stubs = {
    conversations: () => stub('Replay', '518 sessões hoje',
      'Replay de conversas reais. Filtros por modo, departamento, marca, data. Clica numa linha → split view com trace completo: Query Analysis → Retrieval (chunks KB) → SP+FRAME → tokens/latency/cost.',
      [{ title: 'Sessões recentes (mock)', kind: 'rows', items: [
        { name: '2026-04-27 17:42', desc: 'sales · clientes · qualificação · UJV330 800m²/mês', meta: '12 turns · 1.4k tok · $0.008' },
        { name: '2026-04-27 17:38', desc: 'sat · diagnostics · Mimaki JV300 · printing nozzle clog L2', meta: '8 turns · 0.9k tok · $0.005' },
        { name: '2026-04-27 17:31', desc: 'finance · aging · Patrícia · top 10 clientes >90d', meta: '4 turns · 0.6k tok · $0.003' },
        { name: '2026-04-27 17:28', desc: 'colaboradores · operations · Manager · pendentes Carlos', meta: '6 turns · 1.1k tok · $0.006' },
      ] }]),

    prompts: () => stub('Prompts', '8 SP · 22 FRAMEs',
      'Editor SP + FRAME tipo Monaco. Tree esquerda (SP_GERAL, SP_CLIENTES, SP_COLABORADORES com 8 sub-módulos, 22 FRAMEs). Diff staging↔produção. Deploy com confirm.',
      [{ title: 'System Prompts (8)', kind: 'grid', items: [
        { name: 'SP_GERAL', desc: 'Base comum — identidade, tom, formato', status: 'ok', meta: 'v3.2 · 2.1k tok' },
        { name: 'SP_CLIENTES', desc: 'Modo clientes — 3 pipelines', status: 'ok', meta: 'v2.8 · 3.4k tok' },
        { name: 'SP_COLABORADORES', desc: 'Router por dept × empresa', status: 'ok', meta: 'v3.0 · 4.2k tok' },
        { name: 'SP_DEV', desc: 'Modo dev — 5 utilizadores', status: 'ok', meta: 'v1.4 · 1.8k tok' },
        { name: 'SP_BOARD', desc: 'Modo board — 3 utilizadores', status: 'ok', meta: 'v1.0 · 1.2k tok' },
        { name: 'SP_FINANCEIRO_AGING', desc: 'Sub-módulo Finance', status: 'warn', meta: '2 hallucinations flagged' },
        { name: 'FRAME-OBJECCOES-PRECO', desc: 'Sub-módulo Sales', status: 'warn', meta: '1 tom errado' },
        { name: 'FRAME-GESTAO-TICKETS', desc: 'Sub-módulo SAT', status: 'pending', meta: 'staged · low risk' },
      ] }]),

    kb: () => stub('Knowledge Base', '15 sources · 83.551 chunks',
      'Grid de 15 sources · 83.551 chunks. quality_kb pendente (Sónia Casimiro, ~4.000 chunks). store_kb 21.070 chunks. 61G livres, HNSW warning >200K docs, IVFFlat probes=10.',
      [{ title: 'Sources', kind: 'rows', items: [
        { name: 'mimaki_manuals', desc: '359 PDFs · operação, manutenção, troubleshooting', meta: '49.288 chunks · ok' },
        { name: 'digidelta_store', desc: 'Loja online · catálogo + tooltips', meta: '16.052 chunks · ok' },
        { name: 'mimaki_kb', desc: 'Produtos, specs, comparativos', meta: '4.946 chunks · ok' },
        { name: 'biond_films', desc: 'Site BIOND · 14 fichas técnicas', meta: '3.632 chunks · ok' },
        { name: 'mimaki_sales_guides', desc: 'Guias de venda', meta: '3.481 chunks · ok' },
        { name: 'quality_kb', desc: '243 RATs · testes DA · FAQs · QC · novos produtos', meta: '~4.000 chunks · pendente Sónia' },
      ] }]),

    agents: () => stub('Sub-agentes', '20 + 4 marcas',
      '20 sub-agentes autónomos por área (OPS 6, MKT 6, FIN 4, TKT 2, CLI 2) + 4 sub-agentes de marca always-on (Mimaki, BIOND, Decal, Sensek). Cada um com FRAMEs e skills próprios.',
      [
        { title: 'OPS (6)', kind: 'grid', items: [
          { name: 'PLANEAMENTO', desc: 'OFs × capacidade × material', status: 'pending', meta: 'Paula Valente' },
          { name: 'MONITOR PRODUÇÃO', desc: 'Output, paragens, desvios', status: 'pending', meta: 'Paula Valente' },
          { name: 'COMPRAS', desc: 'Necessidades, ruptura, scoring', status: 'pending', meta: 'Graça Godinho' },
          { name: 'EXPEDIÇÃO', desc: 'Priorização, risco, guias', status: 'pending', meta: 'Márcio Fojo' },
          { name: 'QUALIDADE', desc: 'Rejeições, padrões, certificações', status: 'pending', meta: 'Sónia Casimiro' },
          { name: 'MANUTENÇÃO', desc: 'Preventiva máquinas industriais', status: 'pending', meta: 'Ricardo Figueiredo' },
        ] },
        { title: 'MKT (6) · FIN (4) · TKT (2) · CLI (2)', kind: 'grid', items: [
          { name: 'ADS', desc: 'Campanhas pagas por marca', status: 'pending', meta: 'Fábio Silva' },
          { name: 'CONTENT', desc: 'Blog, PR, artigos', status: 'pending', meta: 'FC' },
          { name: 'EMAIL', desc: 'Email marketing, nurturing', status: 'pending', meta: 'FC' },
          { name: 'SEO', desc: 'Auditoria, keywords', status: 'pending', meta: 'F.Silva' },
          { name: 'SOCIAL', desc: 'Redes sociais, calendário', status: 'pending', meta: 'F.Silva' },
          { name: 'DISTRIBUTOR', desc: 'Multi-canal + paineis LED', status: 'pending', meta: 'FC' },
          { name: 'COBRANÇAS', desc: 'Aging, priorização, acções', status: 'pending', meta: 'Patrícia Mota' },
          { name: 'TESOURARIA', desc: 'Saldos, cash flow, pagamentos', status: 'pending', meta: 'Sandra Monteiro' },
          { name: 'CONTABILIDADE', desc: 'Fecho, pendentes, deadlines', status: 'pending', meta: 'Etelvina Martins' },
          { name: 'CONTROLLING', desc: 'KPIs, desvios, reports Board', status: 'pending', meta: 'Filipa Moura' },
          { name: 'TICKET MANAGER', desc: 'Tickets Mimaki via Gestor SAT', status: 'pending', meta: 'Paulo Neto' },
          { name: 'QUALIDADE MEDIA', desc: 'Reclamações Decal/BIOND', status: 'pending', meta: 'Sónia Casimiro' },
          { name: 'ATENDIMENTO', desc: 'Encomendas + logística + docs', status: 'pending', meta: 'Cláudia Monteiro' },
          { name: 'CRESCIMENTO', desc: 'Recompra + upsell + cross-sell', status: 'pending', meta: 'Cláudia Monteiro' },
        ] },
        { title: 'Sub-agentes de marca (4)', kind: 'grid', items: [
          { name: 'MIMAKI', desc: '8 categorias · specs · SAT · PrintPlan', status: 'ok' },
          { name: 'BIOND', desc: 'Bio-Print · overlaminação · AllDecor', status: 'ok' },
          { name: 'DECAL', desc: '4 famílias autoc/lam/label/têxtil', status: 'ok' },
          { name: 'SENSEK', desc: 'Ecossistema sublimação têxtil', status: 'ok' },
        ] },
      ]),

    deploy: () => stub('Deploy', '1 staged',
      'Pipeline staging → produção. Diff viewer, rollback, history. Owner por componente.',
      [{ title: 'Staged', kind: 'rows', items: [
        { name: 'FRAME-GESTAO-TICKETS', desc: 'Novo sub-módulo SAT · cobertura testes 94%', meta: 'João Pedro · há 2h · low risk' },
      ] }]),

    costs: () => stub('Costs', '$1.24K MTD',
      'Decomposição de custo por modelo · modo · sub-módulo. Spike Anthropic Opus +23% concentra-se em sales · clientes — fallback Sonnet em queries simples está em avaliação.',
      [{ title: 'Modelos · 7d', kind: 'rows', items: [
        { name: 'claude-opus-4.5', desc: 'sales · clientes (qualificação + simulator)', meta: '$412 · +23% WoW' },
        { name: 'claude-sonnet-4.5', desc: 'sat · operações · finance', meta: '$486 · stable' },
        { name: 'claude-haiku-4.5', desc: 'routing + classificação rápida', meta: '$98 · stable' },
        { name: 'whisper-1', desc: 'audio transcription (WhatsApp)', meta: '$24 · pending Paulino' },
      ] }]),

    // ─── Novos stubs ──────────────────────────────────────────────────────
    skills: () => stub('Skills', '7 + 21 por criar',
      '7 skills construídas com tools Python e referências. 21 por criar (OPS, MKT, FIN, HR, TKT, CLI). Cada skill encapsula um conjunto de operações: scraping, simulação, diagnóstico, geração de mockups, envio de docs.',
      [
        { title: 'Construídas (7)', kind: 'rows', items: [
          { name: 'prospecting/', desc: 'Apollo + web search + LinkedIn + Racius · scoring leads', meta: '5 ficheiros · ok' },
          { name: 'simulator/', desc: '44 modelos Mimaki · DigiRent + PrintPlan + Pronto', meta: '3 ficheiros · ok' },
          { name: 'diagnostics/', desc: '359 manuais mapeados · error codes · peças', meta: '4 ficheiros · ok' },
          { name: 'document-sender/', desc: '45+ PDFs via WhatsApp · multi-marca multi-idioma', meta: '3 ficheiros · ok' },
          { name: 'muppi-content/', desc: 'Painéis LED showroom · VNNOX NovaCloud API', meta: '4 ficheiros · ok' },
          { name: 'alldecor-mockup/', desc: '59+ texturas · Claude Vision + fal.ai', meta: '3 ficheiros · ok' },
          { name: 'hr-self-service/', desc: 'KB políticas + Primavera RH (sem salários)', meta: 'em build' },
        ] },
        { title: 'Por criar (21)', kind: 'grid', items: [
          { name: 'production-monitor', desc: 'OPS · ProdTrack API', status: 'pending' },
          { name: 'stock-forecast', desc: 'OPS · mínimos · ruptura', status: 'pending' },
          { name: 'supplier-scoring', desc: 'OPS · fornecedores', status: 'pending' },
          { name: 'expedition-priority', desc: 'OPS · priorização envio', status: 'pending' },
          { name: 'campaign-analytics', desc: 'MKT · Meta + Google + GA4', status: 'pending' },
          { name: 'content-writer', desc: 'MKT · por marca/tom', status: 'pending' },
          { name: 'email-marketing', desc: 'MKT · segmentação · cadência', status: 'pending' },
          { name: 'seo-audit', desc: 'MKT · keywords · rankings', status: 'pending' },
          { name: 'social-media', desc: 'MKT · calendário', status: 'pending' },
          { name: 'primavera-finance', desc: 'FIN · 21 módulos API', status: 'pending' },
          { name: 'aging-analysis', desc: 'FIN · cobranças', status: 'pending' },
          { name: 'cash-flow-forecast', desc: 'FIN · tesouraria', status: 'pending' },
          { name: 'budget-analysis', desc: 'FIN · controlling', status: 'pending' },
          { name: 'fiscal-calendar', desc: 'FIN · obrigações fiscais PT', status: 'pending' },
          { name: 'labor-calendar', desc: 'HR · calendário laboral PT', status: 'pending' },
          { name: 'ticket-management', desc: 'TKT · Mimaki + Gestor SAT', status: 'pending' },
          { name: 'quality-claims', desc: 'TKT · Decal/BIOND + ProdTrack', status: 'pending' },
          { name: 'primavera-client', desc: 'CLI · encomendas + logística', status: 'pending' },
          { name: 'client-growth', desc: 'CLI · upsell + cross-sell + recompra', status: 'pending' },
        ] },
      ]),

    tools: () => stub('Tools', '3 funcionais · 2 pendentes',
      'Tools Python testados com dados reais. Bridge Node ↔ Python via heydigi.js (pendente Paulino). Cada tool exporta funções consumidas pelas skills.',
      [{ title: 'Tools', kind: 'rows', items: [
        { name: 'apollo_tools.py', desc: 'search_companies · enrich · build_prospect_briefing · score_lead', meta: 'ok · Apollo Basic $59/mês' },
        { name: 'web_search_tools.py', desc: 'compile_intel · LinkedIn · scrape · racius', meta: 'ok · DuckDuckGo' },
        { name: 'simulator_tools.py', desc: 'simular_pronto · digirent · printplan · comparar', meta: 'ok · 44 modelos · tabela Abr 2026' },
        { name: 'ga4_tools.py', desc: 'get_page_views · top_pages · traffic_sources · conversion', meta: 'pendente · Paulino credentials' },
        { name: 'clearbit_tools.py', desc: 'identify_visitor · recent · hot_visitors', meta: 'pendente · FC decidir contratar' },
      ] }]),

    routing: () => stub('Routing', 'identificar_contacto()',
      'Função PostgreSQL na BD VPS que identifica quem fala com o Digi por telemóvel. 4 passos: colaboradores → contact_memory → clientes → desconhecido. Resultado define que SP carregar e que contexto injectar. Crítico para go-live (P1 Paulino).',
      [
        { title: 'Fluxo de identificação', kind: 'rows', items: [
          { name: '1. colaboradores', desc: 'CHECK telemovel_norm → modo_digi · empresa · departamento · cargo', meta: '193 registos · ok' },
          { name: '2. contact_memory', desc: 'CHECK conversas anteriores → resumo · n sessões', meta: 'modo CLIENTES com histórico' },
          { name: '3. clientes', desc: 'CHECK telefone → nome · notas · fase · estado', meta: 'modo CLIENTES com perfil' },
          { name: '4. desconhecido', desc: 'Fallback default', meta: 'modo CLIENTES (default)' },
        ] },
        { title: 'Distribuição modo_digi', kind: 'grid', items: [
          { name: 'interno', desc: 'Modo colaboradores (default)', meta: '188 colaboradores' },
          { name: 'dev', desc: 'Acesso total · build · alterar', meta: '5 colaboradores' },
          { name: 'board', desc: 'Modo board · estratégico', meta: '3 colaboradores' },
        ] },
      ]),

    integracoes: () => stub('Integrações', '16 fontes',
      'Estado de integração das 16 fontes de verdade. P1 (bloqueia go-live): Primavera v10, ProdTrack, processamento ficheiros WA. P2: GA4, Meta Ads, Google Ads. P3: VNNOX, fal.ai, Clearbit.',
      [
        { title: 'Funcionais (8)', kind: 'rows', items: [
          { name: 'Gestor CRM', desc: 'FileMaker · OPs · clientes · contactos · notas (6 BDs)', meta: 'ok' },
          { name: 'Gestor SAT', desc: 'FileMaker · equipamentos · assistências · intervenções', meta: 'ok · layouts incompletos' },
          { name: 'KB Postgres', desc: '83.551 chunks · 20 sources · VPS', meta: 'ok' },
          { name: 'BD Colaboradores', desc: '193 registos · 48 campos · identificar_contacto()', meta: 'ok' },
          { name: 'Apollo.io', desc: 'Prospecção · enriquecimento empresas', meta: 'ok · Basic $59/mês' },
          { name: 'Microsoft Graph', desc: 'Calendários · demos · visitas · reuniões', meta: 'ok' },
          { name: 'ClickUp', desc: 'Tarefas marketing', meta: 'ok' },
          { name: 'DuckDuckGo', desc: 'Web search · LinkedIn · notícias', meta: 'ok' },
        ] },
        { title: 'Pendentes (8)', kind: 'rows', items: [
          { name: 'Primavera ERP v10', desc: 'Finanças · compras · stock · RH · 21 módulos · 400+ entidades', meta: 'P1 · Paulino API' },
          { name: 'ProdTrack', desc: 'Produção · OFs · linhas + tickets Decal/BIOND', meta: 'P1 · Paulino API' },
          { name: 'GA4', desc: 'Analytics sites', meta: 'P2 · Paulino credentials' },
          { name: 'Meta Ads API', desc: 'Campanhas Facebook/Instagram', meta: 'P3 · Fábio Silva' },
          { name: 'Google Ads API', desc: 'Campanhas Google', meta: 'P3 · Fábio Silva' },
          { name: 'VNNOX NovaCloud', desc: 'Painéis LED showroom', meta: 'P3 · NetScreen credentials' },
          { name: 'fal.ai', desc: 'Geração mockups AllDecor', meta: 'P3 · Fábio Silva' },
          { name: 'Clearbit / Leadfeeder', desc: 'Reverse IP lookup', meta: 'P4 · FC decidir' },
        ] },
      ]),

    roadmap: () => stub('Roadmap', '33 tarefas · P1→P4',
      'Roadmap completo de integração. P1 bloqueia go-live (5 tarefas — todas Paulino). P2 funcionalidades-chave (4). P3 frameworks + sub-agentes + integrações avançadas. P4 pilotos.',
      [
        { title: 'P1 · BLOQUEIA GO-LIVE', kind: 'rows', items: [
          { name: '1. Processamento ficheiros WA', desc: '10 sub-tarefas no heydigi.js · PDF/IMG/AUDIO branching', meta: 'JP · 4/10 done' },
          { name: '2. Deploy SP_COLABORADORES v3.0', desc: 'Copiar prompts-v2/ → ~/heydigi/prompts/ na VPS', meta: 'JP' },
          { name: '3. Routing departamental', desc: 'Ler perfil → carregar módulo correcto no heydigi.js', meta: 'JP' },
          { name: '4. Contexto dinâmico por sessão', desc: 'Injectar empresa · dept · mercado · marcas · idioma · BD Gestor', meta: 'JP' },
          { name: '5. identificar_contacto() no webhook', desc: 'Antes de qualquer resposta · phone → modo + contexto', meta: 'JP · função existe' },
        ] },
        { title: 'P2 · FUNCIONALIDADES-CHAVE', kind: 'rows', items: [
          { name: '6. Layouts Gestor SAT', desc: 'FMRS_API_EQUIPAMENTOS · ASSISTÊNCIAS · INTERVENÇÕES', meta: 'JP' },
          { name: '7. Tools Python no heydigi.js', desc: 'apollo + web_search + simulator · Node ↔ Python bridge', meta: 'JP' },
          { name: '8. URLs públicas para PDFs + sendDocument()', desc: 'Site WP ou VPS static · WA Business API', meta: 'JP' },
          { name: '9. GA4 credentials + property IDs', desc: 'Service account JSON', meta: 'JP' },
          { name: '10. Validar FRAME-TROUBLESHOOTING', desc: 'Com Paulo Neto + Telmo Barros', meta: 'P.Neto' },
        ] },
        { title: 'P3 · FRAMEWORKS · SKILLS · INTEGRAÇÕES', kind: 'rows', items: [
          { name: '11–14. FWs MKT/FIN/OPS/HR/TKT', desc: '17 frameworks por criar (5+4+4+2+2)', meta: 'várias equipas' },
          { name: '15–16. SPs sub-agentes + 21 skills', desc: '20 sub-agentes autónomos · skills por área', meta: 'FC + Claude' },
          { name: '17. quality_kb (~4K chunks)', desc: 'Sónia Casimiro · 4 locais SharePoint', meta: 'FC + JP' },
          { name: '18–23. APIs (Primavera, ProdTrack, VNNOX, Meta, Google, fal.ai)', desc: 'Integrações em produção', meta: 'JP + Bruno Rosa + F.Silva' },
        ] },
        { title: 'P4 · PILOTOS · ITERAÇÃO', kind: 'rows', items: [
          { name: '28. Teste end-to-end WhatsApp', desc: 'Cenário completo aquisição → serviço → crescimento', meta: 'FC + JP' },
          { name: '29–32. Pilotos', desc: '2-3 comerciais · 2-3 técnicos SAT · AllDecor · Pipeline 3 Decal/BIOND', meta: 'FC + P.Neto + Cláudia' },
          { name: '33. Feedback → iterar', desc: 'Captura uso real → ajusta SPs/FRAMEs/skills', meta: 'FC + Claude' },
        ] },
      ]),
  };

  const renderSub = () => {
    if (sub === 'inicio') return <DevInicio user={user} onNavigate={setSub} onOpenChat={onOpenChat} />;
    if (stubs[sub]) return stubs[sub]();
    if (Comp) return <Comp onOpenChat={onOpenChat} variation={variation} />;
    return <DevInicio user={user} onNavigate={setSub} onOpenChat={onOpenChat} />;
  };

  return (
    <div style={{ display: 'flex', background: 'var(--bg)', height: '100%', minHeight: 0, overflow: 'hidden' }}>
      <div style={{ flex: 1, minWidth: 0, minHeight: 0, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {renderSub()}
      </div>
    </div>
  );
};

window.DevScreen = DevScreen;