// Wave 5c — Operacional B (5 telas): Mensagens, Comunicados, Notas, Tarefas, Lembretes

// =============================================================
// 7. Mensagens — chat interno Slack-style
// =============================================================
const CANAIS = [
  { id: 'geral', n: 'geral', tipo: 'canal', nao: 0, ativo: false },
  { id: 'anuncios', n: 'anúncios', tipo: 'canal', nao: 2, ativo: false },
  { id: 'comercial', n: 'comercial', tipo: 'canal', nao: 0, ativo: false },
  { id: 'produto', n: 'produto', tipo: 'canal', nao: 8, ativo: true },
  { id: 'financeiro', n: 'financeiro', tipo: 'canal', nao: 0, ativo: false },
  { id: 'random', n: 'random', tipo: 'canal', nao: 12, ativo: false },
];
const DMS = [
  { id: 'ana', n: 'Ana Carolina Silva', status: 'online', nao: 3 },
  { id: 'bruno', n: 'Bruno Oliveira', status: 'ausente', nao: 0 },
  { id: 'carol', n: 'Carolina Mendes', status: 'online', nao: 1 },
  { id: 'diego', n: 'Diego Ferreira', status: 'offline', nao: 0 },
];
const MENSAGENS = [
  { a: 'Ana', cor: '#a78bfa', h: '09:12', t: 'Galera, subi a v4.2 do fluxo de conciliação OFX em staging. Podem testar?' },
  { a: 'Bruno', cor: '#60a5fa', h: '09:15', t: 'Fechou! Já estou rodando a massa de testes com OFX do Bradesco e Itaú.' },
  { a: 'Bruno', cor: '#60a5fa', h: '09:22', t: 'Achei um edge case com lançamentos de taxa < R$ 1,00. O matcher ignora. @Ana consegue olhar?', reacoes: [{ e: '👀', n: 2 }, { e: '🔥', n: 1 }] },
  { a: 'Ana', cor: '#a78bfa', h: '09:24', t: 'Boa pegada. Abri ticket DEV-1284. Vou corrigir hoje ainda.' },
  { a: 'Carolina', cor: '#f472b6', h: '09:41', t: 'Pessoal, follow-up rápido sobre a demo de amanhã com o Pão Dourado · quem vai comigo?' },
  { a: 'Diego', cor: '#fcd34d', h: '10:03', t: 'Vou sim, Carol. Posso cuidar da parte de NF-e e integração SEFAZ.', thread: 4 },
  { a: 'Ana', cor: '#a78bfa', h: '11:15', t: 'Commit enviado em staging. Testem de novo quando puderem 🙏' },
  { a: 'Bruno', cor: '#60a5fa', h: '11:32', t: 'Rodou limpo agora. Matchou as 3 taxas que estavam pendentes 🎉', reacoes: [{ e: '🎉', n: 4 }, { e: '🚀', n: 2 }] },
];

const PageMensagens = ({ onNavigate }) => {
  const [canal, setCanal] = React.useState('produto');
  return (
    <AppShell current="mensagens" onNavigate={onNavigate}>
      <PageContainer
        title="Mensagens"
        subtitle="Chat interno da equipe · canais, DMs, threads e menções."
        maxWidth={1720}
        actions={<button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo canal</button>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr 280px', gap: 14, height: 720 }} className="msgGrid">
          <style>{`@media (max-width:1200px){.msgGrid{grid-template-columns:220px 1fr !important} .msgGrid>div:last-child{display:none}}`}</style>

          <div className="tile" style={{ padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
            <div style={{ padding: 14, borderBottom: '1px solid var(--line-1)' }}>
              <input placeholder="Buscar…" style={{ width: '100%', padding: '7px 10px', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 7, color: 'var(--text-1)', fontSize: 12 }}/>
            </div>
            <div style={{ flex: 1, overflowY: 'auto', padding: '10px 0' }}>
              <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-4)', padding: '6px 14px', fontWeight: 700 }}>Canais</div>
              {CANAIS.map(c => (
                <button key={c.id} onClick={() => setCanal(c.id)} style={{
                  width: '100%', textAlign: 'left', padding: '7px 14px', fontSize: 13,
                  background: canal === c.id ? 'var(--accent-soft-14)' : 'transparent',
                  color: canal === c.id ? 'var(--accent-text)' : 'var(--text-2)',
                  fontWeight: canal === c.id ? 600 : 400,
                  display: 'flex', alignItems: 'center', gap: 8,
                  borderLeft: canal === c.id ? '3px solid var(--accent-1)' : '3px solid transparent',
                }}>
                  <span style={{ color: 'var(--text-4)', fontSize: 15 }}>#</span>{c.n}
                  {c.nao > 0 && <span style={{ marginLeft: 'auto', fontSize: 10, padding: '2px 6px', borderRadius: 10, background: 'var(--accent-1)', color: '#fff', fontWeight: 700 }}>{c.nao}</span>}
                </button>
              ))}
              <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-4)', padding: '14px 14px 6px', fontWeight: 700 }}>Mensagens diretas</div>
              {DMS.map(d => {
                const statusColor = { online: '#22c55e', ausente: '#fcd34d', offline: 'var(--text-4)' };
                return (
                  <button key={d.id} style={{ width: '100%', textAlign: 'left', padding: '7px 14px', fontSize: 13, color: 'var(--text-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ position: 'relative', width: 20, height: 20, borderRadius: '50%', background: 'linear-gradient(135deg, #8b5cf6, #3b82f6)', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, color: '#fff' }}>
                      {d.n.split(' ').map(s => s[0]).slice(0, 2).join('')}
                      <span style={{ position: 'absolute', bottom: -1, right: -1, width: 8, height: 8, borderRadius: '50%', background: statusColor[d.status], border: '2px solid var(--bg-1)' }}/>
                    </span>
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.n}</span>
                    {d.nao > 0 && <span style={{ marginLeft: 'auto', fontSize: 10, padding: '1px 6px', borderRadius: 10, background: 'var(--accent-1)', color: '#fff', fontWeight: 700 }}>{d.nao}</span>}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Chat central */}
          <div className="tile" style={{ padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 18, color: 'var(--text-4)' }}>#</span>
                  <h3 style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-0)' }}>produto</h3>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 2 }}>12 membros · Tópicos sobre roadmap, bugs e releases.</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn btn-outline btn-sm"><Icon name="bell" size={12}/></button>
                <button className="btn btn-outline btn-sm"><Icon name="star" size={12}/></button>
                <button className="btn btn-outline btn-sm"><Icon name="users" size={12}/> 12</button>
              </div>
            </div>
            <div style={{ flex: 1, overflowY: 'auto', padding: '14px 20px' }}>
              <div style={{ textAlign: 'center', fontSize: 10.5, color: 'var(--text-4)', padding: '6px 0 18px', textTransform: 'uppercase', letterSpacing: '.08em' }}>── hoje ──</div>
              {MENSAGENS.map((m, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 18 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 9, background: `linear-gradient(135deg, ${m.cor}, var(--accent-2))`, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, color: '#fff', flexShrink: 0 }}>{m.a.slice(0, 2)}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                      <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-0)' }}>{m.a}</span>
                      <span style={{ fontSize: 10.5, color: 'var(--text-4)', fontFamily: 'JetBrains Mono, monospace' }}>{m.h}</span>
                    </div>
                    <div style={{ fontSize: 13.5, color: 'var(--text-1)', marginTop: 3, lineHeight: 1.55 }}>{m.t}</div>
                    {m.reacoes && (
                      <div style={{ display: 'flex', gap: 5, marginTop: 6 }}>
                        {m.reacoes.map((r, j) => (
                          <span key={j} style={{ padding: '2px 8px', background: 'var(--accent-soft-14)', border: '1px solid var(--accent-soft-30)', borderRadius: 12, fontSize: 11, color: 'var(--text-1)', fontWeight: 500 }}>{r.e} {r.n}</span>
                        ))}
                      </div>
                    )}
                    {m.thread && (
                      <div style={{ marginTop: 6, padding: '5px 10px', borderRadius: 6, background: 'var(--bg-2)', fontSize: 11.5, color: 'var(--accent-text)', display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
                        <Icon name="message" size={11}/> {m.thread} respostas · última há 12 min
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ padding: 14, borderTop: '1px solid var(--line-1)' }}>
              <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 10, padding: 10 }}>
                <input placeholder="Mensagem para #produto…" style={{ width: '100%', background: 'transparent', color: 'var(--text-0)', fontSize: 13.5, border: 'none', outline: 'none', padding: '4px 0 8px' }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div style={{ display: 'flex', gap: 6, color: 'var(--text-4)' }}>
                    {['bold', 'italic', 'paperclip', 'smile', 'at-sign'].map(i => (
                      <button key={i} style={{ width: 26, height: 26, display: 'grid', placeItems: 'center', borderRadius: 5 }}><Icon name={i} size={13}/></button>
                    ))}
                  </div>
                  <button className="btn btn-primary btn-sm"><Icon name="send" size={12}/> Enviar</button>
                </div>
              </div>
            </div>
          </div>

          {/* Detalhes / membros */}
          <div className="tile" style={{ padding: 18, overflowY: 'auto' }}>
            <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 700, marginBottom: 10 }}>Sobre o canal</h4>
            <div style={{ fontSize: 12.5, color: 'var(--text-1)', lineHeight: 1.6, marginBottom: 18 }}>Discussões sobre o roadmap de produto, reports de bugs e planejamento de releases.</div>

            <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 700, marginBottom: 10 }}>Membros · 12</h4>
            {[
              { n: 'Ana Carolina Silva', r: 'Admin', s: 'online' },
              { n: 'Bruno Oliveira', r: 'Dev Sr', s: 'online' },
              { n: 'Carolina Mendes', r: 'PM', s: 'ausente' },
              { n: 'Diego Ferreira', r: 'Dev Pl', s: 'online' },
              { n: 'Eduardo Santos', r: 'Designer', s: 'offline' },
              { n: 'Fernanda Costa', r: 'QA', s: 'online' },
            ].map((m, i) => {
              const statusColor = { online: '#22c55e', ausente: '#fcd34d', offline: 'var(--text-4)' };
              return (
                <div key={m.n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0' }}>
                  <span style={{ position: 'relative', width: 30, height: 30, borderRadius: '50%', background: `linear-gradient(135deg, hsl(${i * 50 + 220},60%,55%), hsl(${i * 50 + 280},60%,45%))`, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700, color: '#fff' }}>
                    {m.n.split(' ').map(s => s[0]).slice(0, 2).join('')}
                    <span style={{ position: 'absolute', bottom: 0, right: 0, width: 8, height: 8, borderRadius: '50%', background: statusColor[m.s], border: '2px solid var(--bg-1)' }}/>
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{m.n}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-4)' }}>{m.r}</div>
                  </div>
                </div>
              );
            })}

            <h4 style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 700, marginTop: 20, marginBottom: 10 }}>Arquivos compartilhados</h4>
            {['spec-v4.2.pdf', 'mockup-fluxo.fig', 'OFX-samples.zip'].map(f => (
              <div key={f} style={{ padding: 8, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 7, fontSize: 11.5, color: 'var(--text-1)', marginBottom: 5, display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="file" size={12} style={{ color: 'var(--text-4)' }}/>{f}
              </div>
            ))}
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 8. Comunicados
// =============================================================
const COMUNICADOS = [
  { id: 1, titulo: 'Novo benefício: Gympass Gold para todos os colaboradores', autor: 'Diretoria RH', dep: 'Todos', data: '18/04/2026', lida: false, destaque: true, tag: 'Benefícios', cor: '#22c55e', body: 'A partir de maio/2026, todos os colaboradores CLT terão acesso ao Gympass Gold sem custo adicional. Cadastro direto pelo app da empresa.' },
  { id: 2, titulo: 'Manutenção do sistema · sábado 20/04 entre 02h e 05h', autor: 'TI', dep: 'Todos', data: '17/04/2026', lida: true, destaque: false, tag: 'Sistema', cor: '#fcd34d', body: 'Atualização da infraestrutura · indisponibilidade programada do Automatiza neste período.' },
  { id: 3, titulo: 'Nova política de home office · 3 dias presenciais', autor: 'Diretoria', dep: 'Todos', data: '15/04/2026', lida: true, destaque: true, tag: 'Políticas', cor: '#a78bfa', body: 'A partir de maio, estrutura híbrida de 3 dias no escritório e 2 remotos.' },
  { id: 4, titulo: 'Vencedores do prêmio Pessoas · 1º trimestre', autor: 'RH', dep: 'Todos', data: '12/04/2026', lida: true, destaque: false, tag: 'Reconhecimento', cor: '#f472b6', body: 'Parabenizamos Ana Silva (Excelência) e Carlos Mendonça (Colaboração) pelos prêmios deste trimestre.' },
  { id: 5, titulo: 'Comercial · nova tabela de comissões vigente', autor: 'Comercial', dep: 'Comercial', data: '10/04/2026', lida: false, destaque: false, tag: 'Comercial', cor: '#60a5fa', body: 'Novas regras de comissionamento e aceleradores a partir do mês que vem.' },
  { id: 6, titulo: 'Fim do horário de verão · ajuste nos cards de ponto', autor: 'RH', dep: 'Todos', data: '02/04/2026', lida: true, destaque: false, tag: 'Horários', cor: 'var(--text-3)', body: 'Sem alteração nos horários de trabalho; apenas ajuste automático do sistema.' },
];

const PageComunicados = ({ onNavigate }) => {
  const [sel, setSel] = React.useState(COMUNICADOS[0]);
  const [dep, setDep] = React.useState('Todos');

  return (
    <AppShell current="comunicados" onNavigate={onNavigate}>
      <PageContainer
        title="Comunicados"
        subtitle="Anúncios oficiais da empresa · com confirmação de leitura."
        maxWidth={1520}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="filter" size={13}/> Filtrar</button>
          <button className="btn btn-primary btn-sm"><Icon name="megaphone" size={13}/> Novo comunicado</button>
        </>}
      >
        {sel?.destaque && (
          <div style={{ padding: '22px 26px', borderRadius: 16, background: `linear-gradient(135deg, ${sel.cor}22, var(--bg-2))`, border: `1px solid ${sel.cor}55`, marginBottom: 18, display: 'flex', gap: 18, alignItems: 'center' }}>
            <span style={{ width: 52, height: 52, borderRadius: 14, background: sel.cor + '33', display: 'grid', placeItems: 'center', color: sel.cor, flexShrink: 0 }}><Icon name="megaphone" size={24}/></span>
            <div style={{ flex: 1 }}>
              <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 4, background: sel.cor + '33', color: sel.cor, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em' }}>Destaque · {sel.tag}</span>
              <h2 style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-0)', marginTop: 8, lineHeight: 1.3 }}>{sel.titulo}</h2>
              <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 6 }}>Por {sel.autor} · {sel.data}</div>
            </div>
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 14 }} className="comGrid">
          <style>{`@media (max-width:1000px){.comGrid{grid-template-columns:1fr !important}}`}</style>

          <div className="tile" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-1)', display: 'flex', gap: 6 }}>
              {['Todos', 'Comercial', 'RH', 'TI', 'Diretoria'].map(d => (
                <button key={d} onClick={() => setDep(d)} style={{
                  padding: '5px 11px', borderRadius: 6, fontSize: 11.5, fontWeight: 500,
                  background: dep === d ? 'var(--bg-3)' : 'transparent',
                  color: dep === d ? 'var(--text-0)' : 'var(--text-3)',
                }}>{d}</button>
              ))}
            </div>
            {COMUNICADOS.filter(c => dep === 'Todos' || c.dep === dep).map(c => (
              <div key={c.id} onClick={() => setSel(c)} style={{
                padding: '14px 16px', borderBottom: '1px solid var(--line-1)', cursor: 'pointer',
                background: sel?.id === c.id ? 'var(--accent-soft-08)' : 'transparent',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
                  <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 4, background: c.cor + '22', color: c.cor, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em' }}>{c.tag}</span>
                  {!c.lida && <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent-1)' }}/>}
                  <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--text-4)' }}>{c.data}</span>
                </div>
                <div style={{ fontSize: 13.5, fontWeight: c.lida ? 500 : 700, color: 'var(--text-0)', lineHeight: 1.35 }}>{c.titulo}</div>
                <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 4 }}>{c.autor}</div>
              </div>
            ))}
          </div>

          {sel && (
            <div className="tile" style={{ padding: 28 }}>
              <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: sel.cor + '22', color: sel.cor, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em' }}>{sel.tag}</span>
              <h1 style={{ fontSize: 26, fontWeight: 800, color: 'var(--text-0)', lineHeight: 1.25, marginTop: 10 }}>{sel.titulo}</h1>
              <div style={{ display: 'flex', gap: 16, fontSize: 12.5, color: 'var(--text-3)', marginTop: 10, paddingBottom: 18, borderBottom: '1px solid var(--line-1)', marginBottom: 20 }}>
                <span>✍️ {sel.autor}</span><span>📅 {sel.data}</span><span>👥 {sel.dep}</span>
              </div>
              <p style={{ fontSize: 14.5, color: 'var(--text-1)', lineHeight: 1.75 }}>{sel.body}</p>
              <p style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.75, marginTop: 14 }}>Em caso de dúvidas, entre em contato com o departamento responsável. Confirme a leitura clicando no botão abaixo para que possamos acompanhar a cobertura do comunicado.</p>

              <div style={{ marginTop: 22, padding: 16, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>Confirmação de leitura</div>
                    <div style={{ fontSize: 11.5, color: 'var(--text-4)', marginTop: 2 }}>38 de 42 colaboradores confirmaram · 91%</div>
                  </div>
                  <button className="btn btn-primary btn-sm"><Icon name="check" size={12}/> Li e entendi</button>
                </div>
                <div style={{ height: 4, background: 'var(--bg-3)', borderRadius: 3, marginTop: 12, overflow: 'hidden' }}>
                  <div style={{ width: '91%', height: '100%', background: 'linear-gradient(90deg, var(--accent-1), var(--accent-3))' }}/>
                </div>
              </div>
            </div>
          )}
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 9. Notas pessoais
// =============================================================
const NOTAS = [
  { id: 1, t: 'Ideias para retenção · cohort Q2', tags: ['retenção', 'comercial'], atu: 'há 12 min', preview: 'Testar régua de recuperação 30/60/90 dias com ofertas diferentes…' },
  { id: 2, t: 'Feedback da call com Padaria Pão Dourado', tags: ['clientes'], atu: 'hoje, 10:22', preview: 'Pontos principais: 1) módulo de NF-e é prioridade, 2) querem integração…' },
  { id: 3, t: 'Checklist do lançamento v4.3', tags: ['produto', 'release'], atu: 'ontem', preview: 'Lista de bloqueadores antes de empurrar pra prod na sexta…' },
  { id: 4, t: 'Livros para ler em 2026', tags: ['pessoal'], atu: '3 dias', preview: 'Shape Up · Ryan Singer · Basecamp…' },
  { id: 5, t: 'Planejamento de férias · julho', tags: ['pessoal'], atu: '5 dias', preview: 'Bariloche, 15–25 de julho. Ver cotação de voo e hospedagem…' },
  { id: 6, t: 'Reunião 1:1 com Bruno · notas', tags: ['pessoas'], atu: '1 semana', preview: 'Bruno está interessado em ir pra liderança técnica. Plano de desenvolvimento…' },
];

const PageNotas = ({ onNavigate }) => {
  const [sel, setSel] = React.useState(NOTAS[0]);
  return (
    <AppShell current="notas" onNavigate={onNavigate}>
      <PageContainer
        title="Notas pessoais"
        subtitle="Bloco de notas privado · sincroniza entre seus dispositivos."
        maxWidth={1520}
        actions={<button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova nota</button>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 14, height: 700 }} className="notasGrid">
          <style>{`@media (max-width:900px){.notasGrid{grid-template-columns:1fr !important}}`}</style>

          <div className="tile" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: 14, borderBottom: '1px solid var(--line-1)' }}>
              <input placeholder="Buscar nas suas notas…" style={{ width: '100%', padding: '8px 10px', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 7, color: 'var(--text-1)', fontSize: 12.5 }}/>
            </div>
            <div style={{ flex: 1, overflowY: 'auto' }}>
              {NOTAS.map(n => (
                <div key={n.id} onClick={() => setSel(n)} style={{
                  padding: '14px 16px', borderBottom: '1px solid var(--line-1)', cursor: 'pointer',
                  background: sel.id === n.id ? 'var(--accent-soft-08)' : 'transparent',
                  borderLeft: sel.id === n.id ? '3px solid var(--accent-1)' : '3px solid transparent',
                }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', lineHeight: 1.3, marginBottom: 5 }}>{n.t}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginBottom: 7, lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{n.preview}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10 }}>
                    {n.tags.map(t => (
                      <span key={t} style={{ padding: '2px 7px', borderRadius: 10, background: 'var(--bg-3)', color: 'var(--text-3)' }}>#{t}</span>
                    ))}
                    <span style={{ marginLeft: 'auto', color: 'var(--text-4)' }}>{n.atu}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="tile" style={{ padding: 32, overflowY: 'auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <div style={{ flex: 1 }}>
                <h1 contentEditable suppressContentEditableWarning style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-0)', lineHeight: 1.25, outline: 'none' }}>{sel.t}</h1>
                <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                  {sel.tags.map(t => (
                    <span key={t} style={{ padding: '3px 9px', borderRadius: 12, background: 'var(--accent-soft-14)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 500 }}>#{t}</span>
                  ))}
                  <button style={{ padding: '3px 9px', borderRadius: 12, background: 'var(--bg-2)', color: 'var(--text-3)', fontSize: 11, border: '1px dashed var(--line-2)' }}>+ tag</button>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn btn-outline btn-sm"><Icon name="share" size={12}/></button>
                <button className="btn btn-outline btn-sm"><Icon name="trash" size={12}/></button>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 4, padding: 6, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 8, marginBottom: 16 }}>
              {['bold', 'italic', 'underline', 'list', 'code', 'link', 'image'].map(i => (
                <button key={i} style={{ width: 28, height: 28, borderRadius: 5, color: 'var(--text-3)', display: 'grid', placeItems: 'center' }}><Icon name={i} size={13}/></button>
              ))}
            </div>

            <div contentEditable suppressContentEditableWarning style={{ fontSize: 14.5, color: 'var(--text-1)', lineHeight: 1.7, minHeight: 400, outline: 'none' }}>
              <p>{sel.preview}</p>
              <p>Ideias principais para discutir no planning:</p>
              <ul style={{ paddingLeft: 22 }}>
                <li>Régua de recuperação com ofertas progressivas (30/60/90 dias)</li>
                <li>A/B test com variação de desconto e comunicação personalizada</li>
                <li>Monitorar CAC x LTV por cohort mensal</li>
                <li>Follow-up proativo via WhatsApp quando uso cair &lt; 30%</li>
              </ul>
              <p>Próximos passos: validar orçamento com Carol e agendar kickoff para quinta.</p>
            </div>

            <div style={{ marginTop: 24, paddingTop: 14, borderTop: '1px solid var(--line-1)', fontSize: 11, color: 'var(--text-4)', display: 'flex', justifyContent: 'space-between' }}>
              <span>Atualizada {sel.atu}</span>
              <span>142 palavras · salvando automaticamente</span>
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 10. Tarefas pessoais
// =============================================================
const TAREFAS_P = [
  { id: 1, t: 'Responder e-mail do cliente Bighorse sobre a proposta v3', pri: 'alta', prazo: 'hoje, 17:00', projeto: 'PRJ-042', done: false, quando: 'hoje' },
  { id: 2, t: 'Preparar apresentação da reunião com diretoria', pri: 'alta', prazo: 'hoje, 16:00', projeto: null, done: false, quando: 'hoje' },
  { id: 3, t: 'Revisar PR do Bruno sobre OFX matcher', pri: 'media', prazo: 'hoje, 18:00', projeto: 'DEV-1284', done: true, quando: 'hoje' },
  { id: 4, t: 'Ligar para Carolina Mendes · confirmar kickoff', pri: 'media', prazo: 'hoje', projeto: null, done: false, quando: 'hoje' },
  { id: 5, t: 'Atualizar o pipeline do Q2 com novos leads', pri: 'baixa', prazo: 'amanhã', projeto: null, done: false, quando: 'semana' },
  { id: 6, t: 'Enviar proposta comercial · Café Savassi', pri: 'alta', prazo: '21/04', projeto: null, done: false, quando: 'semana' },
  { id: 7, t: '1:1 com Ana · planejamento de carreira', pri: 'media', prazo: '22/04', projeto: null, done: false, quando: 'semana' },
  { id: 8, t: 'Entregar DRE fechado de março à contabilidade', pri: 'alta', prazo: '23/04', projeto: null, done: false, quando: 'semana' },
  { id: 9, t: 'Estudar material do curso de liderança', pri: 'baixa', prazo: 'próxima semana', projeto: null, done: false, quando: 'proximas' },
  { id: 10, t: 'Planejar offsite da equipe · Q3', pri: 'baixa', prazo: 'mai/2026', projeto: null, done: false, quando: 'proximas' },
];

const PageTarefas = ({ onNavigate }) => {
  const [view, setView] = React.useState('hoje');
  const filtered = TAREFAS_P.filter(t => t.quando === view);
  const priCor = { alta: '#fca5a5', media: '#fcd34d', baixa: 'var(--text-3)' };

  return (
    <AppShell current="tarefas" onNavigate={onNavigate}>
      <PageContainer
        title="Minhas tarefas"
        subtitle="Checklist pessoal · organize seu dia por prioridade e prazo."
        maxWidth={1280}
        actions={<button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova tarefa</button>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="calendar" label="Hoje" value={TAREFAS_P.filter(t => t.quando === 'hoje' && !t.done).length} sub={`${TAREFAS_P.filter(t => t.quando === 'hoje' && t.done).length} concluídas`}/>
          <Tile icon="clock" label="Esta semana" value={TAREFAS_P.filter(t => t.quando === 'semana').length} sub="pendentes"/>
          <Tile icon="layers" label="Próximas" value={TAREFAS_P.filter(t => t.quando === 'proximas').length} sub="agendadas"/>
          <Tile icon="check" label="Concluídas hoje" value={TAREFAS_P.filter(t => t.quando === 'hoje' && t.done).length} sub="boa produtividade!"/>
        </div>

        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          {[['hoje', 'Hoje'], ['semana', 'Esta semana'], ['proximas', 'Próximas']].map(([v, l]) => (
            <button key={v} onClick={() => setView(v)} style={{
              padding: '8px 16px', borderRadius: 9, fontSize: 13, fontWeight: 500,
              background: view === v ? 'var(--brand-gradient)' : 'var(--bg-2)',
              color: view === v ? '#fff' : 'var(--text-2)',
              border: view === v ? 'none' : '1px solid var(--line-2)',
            }}>{l}</button>
          ))}
        </div>

        <div className="tile" style={{ padding: 0, overflow: 'hidden' }}>
          {filtered.map(t => (
            <div key={t.id} style={{
              display: 'flex', alignItems: 'center', gap: 14, padding: '14px 20px',
              borderBottom: '1px solid var(--line-1)',
              opacity: t.done ? .55 : 1,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 6,
                border: `1.5px solid ${t.done ? '#22c55e' : 'var(--line-2)'}`,
                background: t.done ? '#22c55e' : 'transparent',
                display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0,
              }}>{t.done && <Icon name="check" size={13} style={{ color: '#fff' }}/>}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, color: 'var(--text-0)', fontWeight: 500, textDecoration: t.done ? 'line-through' : 'none', lineHeight: 1.4 }}>{t.t}</div>
                <div style={{ display: 'flex', gap: 10, fontSize: 11.5, color: 'var(--text-4)', marginTop: 4 }}>
                  <span><Icon name="calendar" size={11}/> {t.prazo}</span>
                  {t.projeto && <span style={{ color: 'var(--accent-text)', fontFamily: 'JetBrains Mono, monospace' }}>· {t.projeto}</span>}
                </div>
              </div>
              <span style={{
                fontSize: 10, padding: '3px 8px', borderRadius: 4,
                background: priCor[t.pri] + '22', color: priCor[t.pri], fontWeight: 700,
                textTransform: 'uppercase', letterSpacing: '.05em',
              }}>{t.pri}</span>
            </div>
          ))}
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 11. Lembretes
// =============================================================
const LEMBRETES = [
  { id: 1, t: 'Enviar relatório mensal à contabilidade', hora: 'Hoje · 17:00', canal: ['email'], recor: 'Mensal · dia 19', status: 'proximo' },
  { id: 2, t: 'Tomar água · pausa consciente', hora: 'Hoje · a cada 2h', canal: ['push'], recor: 'Todos os dias úteis', status: 'ativo' },
  { id: 3, t: 'Ligar para fornecedor · embalagens', hora: 'Hoje · 15:00', canal: ['push', 'email'], recor: 'Único', status: 'proximo' },
  { id: 4, t: 'Reunião 1:1 com Bruno', hora: 'Amanhã · 10:00', canal: ['push', 'whatsapp'], recor: 'Semanal · segundas', status: 'agendado' },
  { id: 5, t: 'Pagar DAS · Simples Nacional', hora: '22/04 · 09:00', canal: ['email'], recor: 'Mensal · dia 22', status: 'agendado' },
  { id: 6, t: 'Aniversário de casamento 🎉', hora: '28/04 · manhã', canal: ['push'], recor: 'Anual', status: 'agendado' },
  { id: 7, t: 'Revisão anual do plano de saúde', hora: '01/05 · 10:00', canal: ['email'], recor: 'Anual', status: 'agendado' },
];

const PageLembretes = ({ onNavigate }) => {
  const canalIcon = { email: 'mail', push: 'bell', whatsapp: 'whatsapp' };
  const statusCor = { proximo: '#fcd34d', ativo: '#86efac', agendado: 'var(--text-3)' };

  return (
    <AppShell current="lembretes" onNavigate={onNavigate}>
      <PageContainer
        title="Lembretes"
        subtitle="Nunca mais esqueça de nada · notificações por push, e-mail ou WhatsApp."
        maxWidth={1220}
        actions={<button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo lembrete</button>}
      >
        <div style={{ position: 'relative', paddingLeft: 22 }}>
          <div style={{ position: 'absolute', left: 9, top: 10, bottom: 10, width: 2, background: 'linear-gradient(180deg, var(--accent-1), var(--accent-3), transparent)' }}/>
          {LEMBRETES.map((l, i) => (
            <div key={l.id} style={{ position: 'relative', marginBottom: 14 }}>
              <span style={{
                position: 'absolute', left: -22, top: 14, width: 20, height: 20, borderRadius: '50%',
                background: l.status === 'proximo' ? 'var(--accent-1)' : l.status === 'ativo' ? '#22c55e' : 'var(--bg-3)',
                border: '3px solid var(--bg-base)', display: 'grid', placeItems: 'center',
                boxShadow: l.status === 'proximo' ? '0 0 16px var(--accent-soft-55)' : 'none',
              }}><Icon name="bell" size={9} style={{ color: '#fff' }}/></span>
              <div className="tile" style={{ padding: 16, marginLeft: 10 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 4, background: statusCor[l.status] + '22', color: statusCor[l.status], fontWeight: 700, textTransform: 'uppercase' }}>{l.status}</span>
                      <span style={{ fontSize: 11.5, color: 'var(--text-3)', fontFamily: 'JetBrains Mono, monospace' }}>{l.hora}</span>
                    </div>
                    <div style={{ fontSize: 14, color: 'var(--text-0)', fontWeight: 600, lineHeight: 1.4 }}>{l.t}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--text-4)', marginTop: 6 }}>🔁 {l.recor}</div>
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {l.canal.map(c => (
                      <span key={c} style={{ width: 30, height: 30, borderRadius: 7, background: 'var(--bg-2)', display: 'grid', placeItems: 'center', color: 'var(--accent-text)' }}><Icon name={canalIcon[c]} size={13}/></span>
                    ))}
                    <button className="btn btn-outline btn-sm" style={{ marginLeft: 6 }}><Icon name="edit" size={11}/></button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, padding: 18, background: 'var(--accent-soft-08)', border: '1px solid var(--accent-soft-30)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--brand-gradient)', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="sparkle" size={18}/></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>Sugestão da IA</div>
            <div style={{ fontSize: 12.5, color: 'var(--text-2)', marginTop: 3 }}>Você tem 3 clientes com contratos vencendo em maio. Quer criar lembretes automáticos 30 dias antes?</div>
          </div>
          <button className="btn btn-primary btn-sm">Criar</button>
        </div>
      </PageContainer>
    </AppShell>
  );
};

Object.assign(window, { CANAIS, DMS, MENSAGENS, COMUNICADOS, NOTAS, TAREFAS_P, LEMBRETES, PageMensagens, PageComunicados, PageNotas, PageTarefas, PageLembretes });