/* screen_marketing_marcas.jsx
   Marketing · Marcas e Estratégia — em desenvolvimento.
   Expõe window.MktMarcasScreen.
*/

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

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

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

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

      {/* Page header */}
      <div style={{ padding: '28px 32px 0', flexShrink: 0 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
          MARKETING · MARCAS E ESTRATÉGIA
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Marcas e Estratégia
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Base estratégica por marca · ICP + personas · Tom de voz · Análise de concorrentes
          <span style={{
            fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.09em', fontWeight: 600,
            padding: '2px 7px', borderRadius: 4,
            background: 'color-mix(in oklch, var(--warning) 12%, transparent)',
            color: 'var(--warning)',
            border: '1px solid color-mix(in oklch, var(--warning) 28%, transparent)',
          }}>EM DESENVOLVIMENTO</span>
        </div>

        <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', marginBottom: 6, letterSpacing: '-0.02em' }}>
          {saudacao}, {firstName}.
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.65, maxWidth: 700, marginBottom: 28 }}>
          Módulo fundacional do Marketing — define, por marca, o ICP, as personas, o tom de voz, as restrições e a análise de concorrentes. É a camada de base que alimenta o Plano de Comunicação, os Briefings, os Objectivos e todas as decisões de conteúdo. Origem: KB/BD e visão do Rui Leitão + CEO.
        </div>
      </div>

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

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

          {/* Origem de dados */}
          <div>
            <div style={sectionLabel}>O QUE ESTARÁ AQUI</div>
            <div style={{ ...subLabel }}><span style={dot('#3859D0')} />Origem de Dados</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'KB por marca', d: 'Base de conhecimento consolidada por marca (Mimaki / BIOND / Decal / Sensek / AllDecor) — inputs oficiais, materiais técnicos, comunicação anterior.' },
                { t: 'Rui Leitão · CEO', d: 'Visão estratégica de topo — inputs de posicionamento, prioridades de mercado, direcção editorial. Aprovação obrigatória no gate RL.' },
                { t: 'BD brands ✅', d: 'Tabela existente com marcas, mercados, product lines. Cruzada com marcas_estrategia (a criar) para a camada estratégica.' },
                { t: 'Sub-agentes de marca (VPS)', d: 'Mimaki, BIOND, Decal e Sensek já correm com contexto próprio na VPS — servem de fonte para tom de voz e restrições.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* CRUD por marca */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />CRUD por Marca</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Criar / editar estratégia', d: 'Uma entrada estratégica por marca — versionada, com histórico de aprovações RL → FC.' },
                { t: 'Duplicar como ponto de partida', d: 'Clonar estratégia de uma marca para outra e editar apenas os deltas — acelera onboarding de novas marcas.' },
                { t: 'Arquivar versões antigas', d: 'Estratégias substituídas ficam arquivadas com data de vigência — auditoria e rollback disponíveis.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Geração AI de ICP + personas */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Geração AI · ICP + Personas</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'ICP (Ideal Customer Profile)', d: 'Geração automática a partir da KB da marca — sector, dimensão, geografia, dores primárias, triggers de compra, decisor.' },
                { t: 'Personas detalhadas', d: 'Perfis narrativos por decisor típico (ex: Owner PME impressão digital PT · CMO cadeia sinalética ES) — motivações, objecções, canais preferidos.' },
                { t: 'Mapeamento decisor × influenciador', d: 'Distingue quem decide, quem influencia e quem opera — orienta a linguagem por canal e por momento do funil.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Tom de voz + restrições */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#8b5cf6')} />Tom de Voz · Restrições</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Tom de voz por marca', d: 'Directrizes editoriais — registo, pronomes, exemplos de frases boas/más, glossário técnico. Passa para copy dos briefings automaticamente.' },
                { t: 'Restrições e no-go', d: 'Termos proibidos, comparações vetadas, dados confidenciais, mercados excluídos, tópicos sensíveis. Guardrail para todos os geradores de conteúdo.' },
                { t: 'Compliance de mensagem', d: 'Regras de disclaimers obrigatórios (RGPD, AI Act, certificações Mimaki/BIOND). Aplicadas na produção de conteúdo.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Análise concorrentes */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Análise de Concorrentes</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Mapa competitivo por mercado', d: 'Concorrentes directos e indirectos por marca × mercado (PT / ES / Export), com posicionamento, preço, gama e canais.' },
                { t: 'Web search + gap analysis', d: 'Recolha automática via web_search de posicionamento actual, mensagens-chave e ausências temáticas nos concorrentes — content-gap-analysis feita pelo Claude.' },
                { t: 'Oportunidades de diferenciação', d: 'Sugestões AI de ângulos não ocupados pelos concorrentes e áreas onde a Digidelta tem prova a comunicar.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Base estratégica → Plano de Comunicação */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#ef4444')} />Base Estratégica → Plano de Comunicação</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Ponto único de verdade da marca', d: 'ICP + personas + tom + restrições ficam disponíveis para todos os módulos downstream — Briefings, Produção, Campanhas, Digi AI.' },
                { t: 'Alimenta o Plano de Comunicação', d: 'A estratégia aprovada gera automaticamente os pilares editoriais e o esqueleto do plano de comunicação anual/trimestral.' },
                { t: 'Sincroniza sub-agentes de marca', d: 'Sub-agentes VPS (Mimaki / BIOND / Decal / Sensek) puxam tom de voz e restrições daqui — coerência garantida em todas as respostas ao cliente.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Ligações ao sistema */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#ec4899')} />Ligações ao Sistema Existente</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 2, color: 'var(--text)' }}>
              <div>KB por marca + Rui / CEO → <span style={{ color: 'var(--ai-500)' }}>Marcas e Estratégia</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Base estratégica aprovada (gate RL → FC)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Plano de Comunicação (pilares)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Briefings (tom + restrições + ICP)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Produção de conteúdos (guardrails)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── Sub-agentes de marca (VPS) — sync</div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Coerência de marca em todos os canais → <span style={{ color: 'var(--ai-500)' }}>Digi AI · Campanhas · Resultados</span></div>
            </div>
          </div>

          {/* Nota técnica */}
          <div style={{
            padding: '14px 16px', borderRadius: 8,
            background: 'color-mix(in oklch, var(--warning) 6%, transparent)',
            border: '1px solid color-mix(in oklch, var(--warning) 25%, transparent)',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--warning)', fontFamily: 'var(--font-mono)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Consideração técnica</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.65 }}>
              Existe uma versão anterior deste módulo com blocos B1-B5 (identidade / ICP / personas / tom / concorrentes) que não está alinhada com a arquitectura pretendida. Para reconstruir de forma correcta é necessário:
              <br /><br />
              1. Consolidar tabela <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>marcas_estrategia</span> com ICP · personas · tom · restrições · concorrentes por brand_id, versionada.
              <br />
              2. Skill <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>content-strategy</span> + <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>content-gap-analysis</span> ligadas à KB por marca (RAG) e a <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>web_search</span> para monitorização de concorrentes.
              <br />
              3. Sync bidireccional com sub-agentes de marca na VPS (Mimaki / BIOND / Decal / Sensek) para propagar tom e restrições.
              <br />
              4. Gate de aprovação RL → FC mantido, com histórico versionado e rollback.
            </div>
          </div>
        </div>

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

          {/* Skills e Tools */}
          <div>
            <div style={sectionLabel}>SKILLS E TOOLS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                <div style={tableHeader}>Skill / Tool</div>
                <div style={tableHeader}>O que faz</div>
              </div>
              {[
                ['content-strategy',        'Gera ICP + personas + tom de voz por marca'],
                ['content-gap-analysis',    'Detecta ângulos não ocupados pelos concorrentes'],
                ['RAG KB por marca',        'Recupera contexto da KB específica de cada marca'],
                ['web_search',              'Monitoriza concorrentes online (posicionamento, mensagens)'],
                ['Sub-agentes marca VPS',   'Mimaki / BIOND / Decal / Sensek — já activos ✅'],
                ['Extended thinking Opus',  'Raciocínio profundo para estratégias complexas'],
                ['Aprovação RL → FC',       'Gate de dois níveis com histórico versionado'],
              ].map(([skill, desc], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                  <div style={{ ...tableCell, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ai-500)' }}>{skill}</div>
                  <div style={tableCellMuted}>{desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* O que ganhamos */}
          <div>
            <div style={sectionLabel}>O QUE GANHAMOS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                <div style={{ ...tableHeader, color: 'var(--danger)' }}>Antes</div>
                <div style={{ ...tableHeader, color: 'var(--success)' }}>Depois</div>
              </div>
              {[
                ['Estratégia dispersa por decks',        'Base estratégica única e versionada'],
                ['ICP intuitivo, não documentado',       'ICP + personas gerados AI e aprovados'],
                ['Tom de voz inconsistente por canal',   'Guardrails aplicados em toda a produção'],
                ['Concorrência analisada ad-hoc',        'Web search + gap analysis contínua'],
                ['Restrições sabidas na cabeça de FC',   'Regras explícitas partilhadas com AI'],
                ['Sub-agentes desalinhados da marca',    'Sync automático de tom e restrições'],
              ].map(([before, after], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{before}</div>
                  <div style={{ ...tableCell, fontSize: 11 }}>{after}</div>
                </div>
              ))}
            </div>
          </div>

          {/* BD */}
          <div>
            <div style={sectionLabel}>BD</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.8, color: 'var(--text-muted)' }}>
              <div><span style={{ color: 'var(--success)' }}>brands</span> — marcas, mercados, product lines ✅</div>
              <div><span style={{ color: 'var(--ai-500)' }}>marcas_estrategia</span> [criar] — ICP · personas · tom · restrições · concorrentes</div>
              <div style={{ marginTop: 6, fontStyle: 'italic', color: 'var(--text-dim)' }}>Versionada por brand_id + gate RL/FC</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktMarcasScreen = MktMarcasScreen;