/* screen_marketing_resultados.jsx
   Marketing · Resultados — em desenvolvimento.
   Expõe window.MktPerformance360Screen.
*/

const MktPerformance360Screen = ({ onOpenChat, 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 · RESULTADOS
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Resultados
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Performance 360 · Closed-loop · Todos os canais dos Briefings
          <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 }}>
          Vista consolidada de performance por canal — mesmos canais dos Briefings.
          Closed-loop entre Meta Ads, LinkedIn, Google Ads/Analytics 4, Email (Brevo), WhatsApp e Gestor CRM —
          do investimento à receita fechada. Cruzamento com Objectivos para saber, em tempo real, se o BP está a ser cumprido.
        </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 — mesmos canais dos Briefings</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Meta Ads (Facebook + Instagram) — Performance', d: 'Impressões, cliques, CPL, CPM, CTR, spend — por campanha, ad set e criativo. API Meta Marketing Insights.' },
                { t: 'Social Media Orgânico (Facebook + Instagram)', d: 'Alcance, engagement, seguidores, saves, shares — publicações orgânicas não patrocinadas. Meta Graph API insights.' },
                { t: 'LinkedIn Ads — Performance B2B', d: 'Sponsored content, message ads, dynamic ads. Impressões, clicks, leads, CPL. LinkedIn Marketing API.' },
                { t: 'LinkedIn Orgânico — Company Page', d: 'Alcance de posts, engagement rate, novos seguidores, share of voice. LinkedIn Pages API.' },
                { t: 'Google Ads (Search + Display + PMax + YouTube)', d: 'Search, Display, Performance Max e YouTube. Impressões, cliques, CPL, CPA, conversões. Google Ads API.' },
                { t: 'Google Analytics 4 — Website', d: 'Visitas ao site, taxa de conversão, funis, atribuição multi-touch, comportamento por sessão. GA4 Data API.' },
                { t: 'Email Marketing (Brevo)', d: 'Envios, taxa abertura, click rate, unsubscribes, respostas. Cruzamento com leads do Gestor por campanha.' },
                { t: 'WhatsApp (Meta Business API)', d: 'Templates enviados, entregues, lidos, respondidos. Métricas de campanha por segmentação.' },
                { t: 'Gestor CRM (FileMaker)', d: 'Leads, oportunidades e fechos por campanha de origem — permite closed-loop entre marketing e vendas.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Performance 360 */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />Performance 360 · Closed-loop</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Funil marketing → vendas completo', d: 'Impressões → cliques → leads → MQL → SQL → propostas → fechos. Identifica onde há perda e onde optimizar.' },
                { t: 'ROI por campanha (custo × receita)', d: 'Cruzamento entre spend Meta/Google + custo de produção com receita gerada no Gestor pelas leads atribuídas.' },
                { t: 'Real vs Objectivo (semáforo)', d: 'Cruzamento directo com módulo Objectivos — verde/amarelo/vermelho por marca × mercado × KPI.' },
                { t: 'Atribuição multi-touch', d: 'GA4 + Meta CAPI para atribuir cada fecho aos touchpoints marketing que contribuíram — não só o último clique.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Resultados de campanhas */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Resultados de Campanhas + Plano de Comunicação</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Performance por campanha activa', d: 'Métricas em tempo real de cada campanha em curso — leads, CPL, taxa de conversão, receita atribuída.' },
                { t: 'Comparativo com plano de comunicação', d: 'Confronta resultados reais com o plano definido no briefing — canais, cadência, orçamento previsto vs consumido.' },
                { t: 'Análise por canal', d: 'Detalhe de performance por canal (Meta, Google, LinkedIn, Email, WhatsApp) para reafectar budget entre canais.' },
                { t: 'Benchmark entre campanhas', d: 'Comparação lado-a-lado entre campanhas históricas da mesma marca — o que funcionou melhor e porquê.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Relatórios automáticos AI */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Relatórios Automáticos AI</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Relatório semanal executivo', d: 'Gerado pela Digi AI (sub-agente ANALYTICS) e enviado por email — análise de resultados, desvios e recomendações de ajuste.' },
                { t: 'Alertas em tempo real', d: 'Detecta anomalias (queda súbita de CTR, CPL disparado, campanha sem tráfego) e notifica marketing + comercial responsável.' },
                { t: 'Sugestões de optimização', d: 'Recomenda pausas, ajustes de budget, alterações criativas com base em performance histórica e benchmarks da indústria.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Auto-Optimização por Canal */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#ef4444')} />Auto-Optimização por Canal · Skill "Auto Improve Campaign"</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.65, marginBottom: 10 }}>
              A skill "Auto Improve Campaign" detecta sinais de degradação de performance, diagnostica a causa,
              gera variantes criativas ou de copy, e cria briefings automáticos para aprovação humana antes de publicar.
              O valor da intervenção AI varia por canal — abaixo o ranking:
            </div>

            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--success)', marginBottom: 6, marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Alto valor · ciclo curto + AI gera bem</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
              {[
                { t: '🟢 Meta Ads (Facebook + Instagram)', d: 'Volume alto → sinais claros (CTR/CPL/CVR por criativo). Ciclo teste 24-48h. AI gera novo copy + prompt visual (Flux/Magnific). Swap de vencedor sem republicar campanha.' },
                { t: '🟢 Google Ads Search (RSA)', d: '15 headlines rotativos + CTR por combinação. Digi AI gera novas headlines quando CTR desce. Swap directo do pior performer.' },
                { t: '🟢 Email (Brevo)', d: 'Open + click rate baixos → subject / CTA fracos. Ciclo 24h. AI compõe variante subject + preheader + CTA para próximo envio.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>

            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--warning)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Médio valor · volume ou velocidade limitada</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
              {[
                { t: '🟡 LinkedIn Ads', d: 'B2B high-value mas volume baixo — sinais precisam mais tempo para significância estatística. Análise semanal + variante criativa.' },
                { t: '🟡 Social Orgânico (FB + IG)', d: 'Engagement rate, alcance orgânico, saves. AI sugere ajuste de tom, hashtags, formato (post/reel/carrossel). Publicação requer aprovação humana.' },
                { t: '🟡 LinkedIn Orgânico', d: 'Company page engagement, reach de posts, share of voice. AI compõe variantes de copy para próximos posts orgânicos.' },
                { t: '🟡 Landing pages (site)', d: 'Taxa de conversão + heatmap GA4. AI sugere alterações via briefing → módulo Briefings, não altera página directo.' },
                { t: '🟡 Google Performance Max', d: 'Asset refresh já é nativo da Google. AI reforça com criativos alternativos alimentados ao pool.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>

            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--danger)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Baixo valor · ciclo lento ou não iterável em tempo real</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: '🔴 WhatsApp Templates (Meta)', d: 'Aprovação Meta: 24-48h mata velocidade. AI gera variantes para próxima campanha, não para a em curso.' },
                { t: '🔴 Blog / SEO', d: 'Ciclo Google index é dias/semanas. Análise estratégica > iteração rápida. AI cria briefings de conteúdo, não iterações táticas.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Fluxo Auto Improve Campaign */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#a855f7')} />Fluxo "Auto Improve Campaign" — 5 Steps</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { n: '1', t: 'Detect signal (Alert Composer)', d: 'Cache diária Meta/Google/GA4/Brevo → dispara alerta se: queda CTR >30% vs baseline, CPL >150% target, CVR <50% média histórica.' },
                { n: '2', t: 'Analyse root cause', d: 'RAG na KB da marca + histórico de campanhas + Extended thinking Opus. Diagnostica: criativo saturado / público wrong / copy fraco / landing rota.' },
                { n: '3', t: 'Generate variant', d: 'Se hipótese = criativo → invoca ad-creative + Magnific/Flux. Se copy → copywriting + hook-writing. Se landing → briefing módulo Briefings.' },
                { n: '4', t: 'Criar briefing/campanha AI', d: 'Sinaliza módulo Briefings com contexto (campanha origem + sinal + hipótese + variantes). Estado "AI proposed — aguarda aprovação".' },
                { n: '5', t: 'Guardrail: aprovação humana', d: 'Marketing lead aprova antes de publicar. Auto-publish só em swaps de baixo risco (ex: 1 headline Google RSA). Publicar via API do canal.' },
              ].map((f, i) => (
                <div key={i} style={{ ...cardStyle, flexDirection: 'row', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'color-mix(in oklch, var(--ai-500) 15%, transparent)', color: 'var(--ai-500)', fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>{f.n}</div>
                  <div>
                    <div style={titleStyle}>{f.t}</div>
                    <div style={descStyle}>{f.d}</div>
                  </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>Campanhas → produção → activação → <span style={{ color: 'var(--ai-500)' }}>Resultados Module</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Agregação de dados externos</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Meta Ads + Social Orgânico → paid + organic FB/IG</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── LinkedIn Ads + Orgânico → B2B paid + company page</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Google Ads → Search, Display, PMax, YouTube</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Google Analytics 4 → website + atribuição</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Brevo → email marketing</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Meta WhatsApp Business → templates envios</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── Gestor CRM → leads + fechos por campanha</div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Cruzamento com <span style={{ color: 'var(--ai-500)' }}>Objectivos</span> → semáforo BP</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 }}>
              Actualmente sem dados em produção. Para ficar funcional é necessário:
              <br /><br />
              1. Criar tabela <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>resultados_cache</span> — snapshots diários das APIs externas para não fazer chamadas em cada render.
              <br />
              2. Integração Meta Marketing API — access token via System User + long-lived token. Rate limits a monitorizar.
              <br />
              3. Integração Google Ads API + GA4 Data API — service account + credenciais em vault.
              <br />
              4. Integração LinkedIn Marketing API + LinkedIn Pages API — access token OAuth.
              <br />
              5. Integração Brevo API para métricas email (opens, clicks, unsubscribes).
              <br />
              6. Sub-agente ANALYTICS + FRAME-KPI para relatórios automáticos e alertas — por criar.
              <br />
              7. Skill "Auto Improve Campaign" (canais 🟢 alto valor) — por criar. Integrações Meta/Google/Brevo com auto-swap.
            </div>
          </div>

          {/* Guardrails AI */}
          <div style={{
            padding: '14px 16px', borderRadius: 8,
            background: 'color-mix(in oklch, var(--danger) 5%, transparent)',
            border: '1px solid color-mix(in oklch, var(--danger) 22%, transparent)',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--danger)', fontFamily: 'var(--font-mono)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Guardrails · Aprovação humana</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.65 }}>
              A skill "Auto Improve Campaign" NUNCA publica variantes AI sem aprovação humana explícita. Fluxo padrão:
              <br /><br />
              <strong style={{ color: 'var(--text)' }}>AI proposed → Marketing lead review → Approve → Publish via API</strong>
              <br /><br />
              Excepção — auto-publish permitido apenas em swaps de baixo risco pré-autorizados (ex: substituir 1 headline Google RSA por outra do pool aprovado). Nunca auto-publish de criativos visuais novos ou copy de landing pages.
            </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>
              {[
                ['Sub-agente ANALYTICS',   'Análise autónoma de performance e geração de relatórios (por criar)'],
                ['Auto Improve Campaign',  'Detecta sinais, gera variantes, cria briefings AI (por criar)'],
                ['FRAME-KPI',              'Framework de análise KPIs cruzado BP vs actuals (por criar)'],
                ['Alert Composer',         'Detecta anomalias e envia alertas em tempo real'],
                ['Meta Marketing API',     'Ads Insights + gestão de criativos (paid FB/IG) + Graph API (orgânico)'],
                ['LinkedIn Marketing API', 'Ads Insights + Pages API (orgânico)'],
                ['Google Ads API',         'Métricas Search, Display, YouTube, Performance Max + RSA swap'],
                ['GA4 Data API',           'Website analytics · atribuição multi-touch · funis · comportamento'],
                ['Brevo API',              'Métricas email + gestão de variantes subject/CTA'],
                ['Meta WhatsApp API',      'Métricas de templates envios + respostas'],
                ['Gestor CRM API',         'Leads + fechos atribuídos por campanha'],
                ['ad-creative',            'Geração de novos criativos (copy)'],
                ['copywriting + hook-writing', 'Geração de variantes de copy/headlines'],
                ['Magnific / Flux',        'Geração de novos assets visuais para A/B'],
              ].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>
              {[
                ['Dashboards separados por canal',        'Vista 360 consolidada'],
                ['Sem closed-loop marketing → vendas',    'Cada fecho atribuído à campanha de origem'],
                ['Social orgânico sem métricas cruzadas', 'FB/IG/LinkedIn orgânico integrado com CRM'],
                ['Relatórios semanais manuais',           'Relatório AI enviado por email'],
                ['ROI estimado em fim de mês',            'ROI em tempo real por campanha'],
                ['Anomalias detectadas tarde',            'Alertas em tempo real ao responsável'],
              ].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 por criar */}
          <div>
            <div style={sectionLabel}>BD (POR CRIAR)</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.8, color: 'var(--text-muted)' }}>
              <div><span style={{ color: 'var(--ai-500)' }}>resultados_cache</span> — snapshots diários das APIs</div>
              <div style={{ marginTop: 6, fontStyle: 'italic', color: 'var(--text-dim)' }}>Dados via API externa (Meta / Google / Branddigital)</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktPerformance360Screen = MktPerformance360Screen;