/* screen_marketing_clipping.jsx
   Marketing · Clipping — em desenvolvimento.
   Monitorização de menções, cobertura mediática e social listening
   de todas as marcas Digidelta na web, imprensa e redes sociais.
   Expõe window.MktClippingScreen.
*/

const MktClippingScreen = ({ 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 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 MARCAS = [
    { nome: 'Mimaki',    cor: '#e60012' },
    { nome: 'BIOND',     cor: '#00a86b' },
    { nome: 'Decal',     cor: '#f59e0b' },
    { nome: 'Sensek',    cor: '#8B2DE8' },
    { nome: 'AllDecor',  cor: '#ec4899' },
    { nome: 'NetScreen', cor: '#F97316' },
  ];

  const FONTES = [
    { label: 'Web & Imprensa',    icon: '🌐', desc: 'Artigos, reviews, menções em media digital e imprensa especializada (sign industry, graphic arts, sustainability)' },
    { label: 'Redes Sociais',     icon: '📱', desc: 'Mentions, hashtags, comentários e partilhas no Instagram, Facebook, LinkedIn, X e TikTok por marca' },
    { label: 'Fóruns & Comunidades', icon: '💬', desc: 'Discussões em fóruns técnicos, grupos LinkedIn, Reddit e comunidades de impressão digital' },
    { label: 'Concorrência',      icon: '🎯', desc: 'Publicações e comunicação dos concorrentes relevantes por marca e mercado' },
    { label: 'PR & Earned Media', icon: '📰', desc: 'Cobertura editorial, artigos publicados, backlinks de media especializada e geral' },
    { label: 'Google & SEO',      icon: '🔍', desc: 'Posicionamento orgânico, queries de brand, backlinks e Share of Voice em search' },
  ];

  const O_QUE_GANHAMOS = [
    'Visão 360° da presença das marcas fora dos canais próprios — o que o mercado diz sobre nós',
    'Detecção precoce de crises de reputação ou menções negativas com alerta em tempo real',
    'Análise de sentimento por marca e por mercado geográfico (PT, ES, FR, UK, DE)',
    'Share of Voice vs concorrência — saber onde estamos a ganhar e a perder presença',
    'Identificação de oportunidades editoriais e conteúdo gerado por terceiros para amplificar',
    'Alimentação do módulo de PR com dados reais de cobertura mediática',
    'Contexto para a Digi AI — campanhas de clipping como input para estratégia e conceito',
  ];

  const SKILLS_TOOLS = [
    { cat: 'Social Listening', items: ['Mention.com ou Brand24 — alertas em tempo real', 'Meta Business Suite — menções orgânicas FB+IG', 'LinkedIn Analytics — menções e tags'] },
    { cat: 'Web Monitoring', items: ['Google Alerts — menções por marca e keyword', 'Google Search Console — queries de brand + backlinks', 'Ahrefs / SEMrush — Share of Voice e cobertura'] },
    { cat: 'PR & Media', items: ['LFR — monitorização imprensa especializada', 'Meltwater ou Cision (futuro)', 'RSS feeds de media sign industry + sustainability'] },
    { cat: 'Analytics', items: ['Dashboard de sentimento por marca', 'Volume de menções no tempo (trend)', 'Top fontes e influenciadores por mercado'] },
    { cat: 'Sub-agente PR (a criar)', items: ['Agregação automática de menções por marca', 'Classificação sentimento com AI', 'Alertas para FC quando menção crítica', 'Relatório semanal automático de clipping'] },
  ];

  const BD_ITEMS = [
    { label: 'clipping_mencoes', desc: 'Menções por marca, canal, fonte, data e sentimento' },
    { label: 'clipping_alertas', desc: 'Alertas activos por keyword e marca com threshold' },
    { label: 'clipping_relatorios', desc: 'Relatórios semanais de cobertura por marca e mercado' },
    { label: 'clipping_concorrencia', desc: 'Tracking de publicações dos concorrentes por marca' },
  ];

  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 · CLIPPING
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Clipping
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Menções · Social Listening · Share of Voice · Concorrência · PR
          <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 }}>
          Observatório de presença externa das marcas Digidelta — o que o mercado, a imprensa e as redes sociais dizem sobre a Mimaki, BIOND, Decal, Sensek, AllDecor e NetScreen. Monitorização de menções, análise de sentimento, Share of Voice vs concorrência e alertas em tempo real.
        </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 }}>

          {/* Marcas monitorizadas */}
          <div>
            <div style={sectionLabel}>MARCAS MONITORIZADAS</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {MARCAS.map(m => (
                <div key={m.nome} style={{
                  display: 'flex', alignItems: 'center', gap: 7,
                  padding: '6px 12px', borderRadius: 8,
                  background: m.cor + '10', border: `1px solid ${m.cor}30`,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: m.cor, flexShrink: 0 }} />
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text)' }}>{m.nome}</span>
                  <span style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>— A monitorizar</span>
                </div>
              ))}
            </div>
          </div>

          {/* Fontes de monitorização */}
          <div>
            <div style={sectionLabel}>FONTES E CANAIS DE MONITORIZAÇÃO</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {FONTES.map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 16 }}>{f.icon}</span>
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{f.label}</span>
                    <span style={{
                      fontSize: 9, fontFamily: 'var(--font-mono)', padding: '1px 6px', borderRadius: 3,
                      background: 'color-mix(in oklch, var(--warning) 10%, transparent)',
                      color: 'var(--warning)',
                      border: '1px solid color-mix(in oklch, var(--warning) 25%, transparent)',
                    }}>A integrar</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6, paddingLeft: 24 }}>
                    {f.desc}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Dashboard previsto */}
          <div>
            <div style={sectionLabel}>DASHBOARD — O QUE ESTARÁ DISPONÍVEL</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { label: 'Feed de Menções', desc: 'Todas as menções em tempo real, filtráveis por marca, canal e sentimento', icon: '📡' },
                { label: 'Volume no Tempo', desc: 'Gráfico de menções por semana — tendência e picos por marca', icon: '📈' },
                { label: 'Análise de Sentimento', desc: 'Positivo / Neutro / Negativo por marca e por mercado geográfico', icon: '🎭' },
                { label: 'Share of Voice', desc: 'Presença das marcas vs concorrência em volume de menções por canal', icon: '🥧' },
                { label: 'Top Fontes', desc: 'Websites e contas que mais mencionam as marcas — oportunidades de amplificação', icon: '🔗' },
                { label: 'Alertas Activos', desc: 'Notificações em tempo real quando menção crítica ou pico de volume', icon: '🔔' },
              ].map((item, i) => (
                <div key={i} style={cardStyle}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontSize: 14 }}>{item.icon}</span>
                    <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text)' }}>{item.label}</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.55 }}>{item.desc}</div>
                </div>
              ))}
            </div>
          </div>

        </div>

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

          {/* O que ganhamos */}
          <div style={{ background: 'var(--bg-sunken)', borderRadius: 10, padding: '14px 16px', border: '1px solid var(--border)' }}>
            <div style={subLabel}>
              <span style={dot('var(--success, #16a34a)')} />
              O que ganhamos
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {O_QUE_GANHAMOS.map((item, i) => (
                <div key={i} style={{ fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.6, display: 'flex', gap: 6 }}>
                  <span style={{ color: 'var(--success, #16a34a)', flexShrink: 0, marginTop: 1 }}>✓</span>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Skills e Tools */}
          <div style={{ background: 'var(--bg-sunken)', borderRadius: 10, padding: '14px 16px', border: '1px solid var(--border)' }}>
            <div style={subLabel}>
              <span style={dot('#8b5cf6')} />
              Skills e Tools
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {SKILLS_TOOLS.map((cat, i) => (
                <div key={i}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginBottom: 4 }}>
                    {cat.cat.toUpperCase()}
                  </div>
                  {cat.items.map((item, j) => (
                    <div key={j} style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.6, paddingLeft: 8, borderLeft: '2px solid #8b5cf633', marginBottom: 2 }}>
                      {item}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>

          {/* BD */}
          <div style={{ background: 'var(--bg-sunken)', borderRadius: 10, padding: '14px 16px', border: '1px solid var(--border)' }}>
            <div style={subLabel}>
              <span style={dot('#f59e0b')} />
              Base de Dados
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {BD_ITEMS.map((item, i) => (
                <div key={i}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text)', fontFamily: 'var(--font-mono)', marginBottom: 1 }}>
                    {item.label}
                  </div>
                  <div style={{ fontSize: 10.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>
                    {item.desc}
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

window.MktClippingScreen = MktClippingScreen;