/* screen_marketing_plano_comunicacao.jsx
   Marketing · Plano de Comunicação — em desenvolvimento.
   Expõe window.MktPlanoComunicacaoScreen.
*/

const _PLANO_FEATURES = [
  { title: 'Calendário editorial trimestral',   desc: 'Vista de calendário com todos os conteúdos planeados por marca, canal e semana — gerado automaticamente a partir da informação de Marcas e Estratégia.' },
  { title: 'Plano por canal',                   desc: 'Detalhe de publicações previstas por canal (LinkedIn, Instagram, Facebook, Email, Muppi LED) — frequência, formato e data.' },
  { title: 'Estado de cada item do plano',      desc: 'Semáforo por item: planeado → em produção → aprovado → publicado. Ligação directa ao canvas de Produção de Conteúdos.' },
  { title: 'Geração automática pela Digi AI',   desc: 'A partir da informação de Marcas e Estratégia e dos insights retirados dos Objectivos, a Digi AI propõe o plano de comunicação completo para o período definido.' },
  { title: 'Aprovação e ajuste pelo Strategist', desc: 'O AI Strategist revê, ajusta datas e canais e aprova o plano antes de avançar para produção — fluxo de validação integrado.' },
];

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

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

      {/* ── Page header ── */}
      <div style={{ padding: '28px 32px 0', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
            MARKETING · PLANO DE COMUNICAÇÃO
          </div>
          <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
            Plano de Comunicação
          </h1>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
            Calendário editorial · todas as marcas
            <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>

        {/* ── Greeting ── */}
        <div style={{ flexShrink: 0, padding: '10px 0 18px' }}>
          <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: 600 }}>
            Calendário editorial gerado pela Digi AI a partir da informação de Marcas e Estratégia — canal por canal,
            semana a semana, com estado de produção em tempo real.
          </div>
        </div>
      </div>

      {/* ── Feature cards ── */}
      <div style={{ padding: '0 32px 32px', display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 700 }}>
        <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', color: 'var(--text-dim)', marginBottom: 8 }}>
          O QUE ESTARÁ AQUI
        </div>
        {_PLANO_FEATURES.map((f, i) => (
          <div key={i} style={{
            display: 'flex', gap: 14, alignItems: 'flex-start',
            padding: '14px 16px', borderRadius: 10,
            background: 'var(--bg-sunken)', border: '1px solid var(--border)',
          }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 3 }}>{f.title}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 }}>{f.desc}</div>
            </div>
          </div>
        ))}

        {/* BD note */}
        <div style={{
          marginTop: 8, padding: '12px 16px', borderRadius: 8,
          background: 'color-mix(in oklch, var(--accent) 6%, transparent)',
          border: '1px solid color-mix(in oklch, var(--accent) 20%, transparent)',
          fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.6,
        }}>
          <span style={{ color: 'var(--accent)', fontWeight: 600, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em' }}>BD · </span>
          Lê de{' '}
          {['comm_plan_items', 'strategy_proposals', 'briefings', 'conteudo_campanhas', 'content_jobs'].map((t, i, arr) => (
            <span key={t}><code style={{ fontSize: 10.5, background: 'var(--bg-surface)', padding: '1px 5px', borderRadius: 3 }}>{t}</code>{i < arr.length - 1 ? ', ' : '.'}</span>
          ))}
        </div>
      </div>
    </div>
  );
};

window.MktPlanoComunicacaoScreen = MktPlanoComunicacaoScreen;