// Wave 4c — Suporte (2 telas): Tickets, Base de Conhecimento

// =============================================================
// 9. Tickets
// =============================================================
const TICKETS = [
  { id: 'SUP-2841', assunto: 'Pedido #8821 não chegou · entrega agendada para ontem', cliente: 'Ana Carolina Silva', canal: 'whatsapp', prioridade: 'alta', sla: 'vermelho', slaMin: -45, status: 'aberto', agente: 'Patrícia', criado: 'há 2h', ultima: 'há 14 min', msgs: 8, anexos: 2 },
  { id: 'SUP-2840', assunto: 'Como altero os dados de cobrança do cartão?', cliente: 'Bruno Oliveira Lopes', canal: 'email', prioridade: 'media', sla: 'verde', slaMin: 180, status: 'em-andamento', agente: 'João', criado: 'há 4h', ultima: 'há 42 min', msgs: 3, anexos: 0 },
  { id: 'SUP-2839', assunto: 'Dúvida sobre taxa de entrega para bairro Sion', cliente: 'Carolina Mendes', canal: 'web', prioridade: 'baixa', sla: 'verde', slaMin: 420, status: 'em-andamento', agente: 'João', criado: 'há 6h', ultima: 'há 2h', msgs: 2, anexos: 0 },
  { id: 'SUP-2838', assunto: 'Cancelar assinatura Kit Mensal a partir do próximo mês', cliente: 'Diego Ferreira', canal: 'email', prioridade: 'media', sla: 'amarelo', slaMin: 20, status: 'aberto', agente: null, criado: 'há 8h', ultima: 'há 8h', msgs: 1, anexos: 0 },
  { id: 'SUP-2837', assunto: 'Erro ao aplicar cupom BLACKFRIDAY no checkout', cliente: 'Eduardo Santos', canal: 'whatsapp', prioridade: 'alta', sla: 'amarelo', slaMin: 8, status: 'em-andamento', agente: 'Patrícia', criado: 'há 10h', ultima: 'há 20 min', msgs: 6, anexos: 1 },
  { id: 'SUP-2836', assunto: 'Solicitação NF-e pedido #8815', cliente: 'Fernanda Costa', canal: 'email', prioridade: 'baixa', sla: 'verde', slaMin: 320, status: 'em-andamento', agente: 'João', criado: 'há 12h', ultima: 'há 4h', msgs: 4, anexos: 1 },
  { id: 'SUP-2835', assunto: 'Colomba chegou quebrada — solicito troca', cliente: 'Gabriel Almeida', canal: 'whatsapp', prioridade: 'alta', sla: 'verde', slaMin: 160, status: 'em-andamento', agente: 'Patrícia', criado: 'ontem', ultima: 'há 1h', msgs: 7, anexos: 3 },
  { id: 'SUP-2834', assunto: 'Parceria: quer vender produtos da padaria no restaurante', cliente: 'Heloísa Martins', canal: 'email', prioridade: 'baixa', sla: 'verde', slaMin: 2880, status: 'em-andamento', agente: 'Ana', criado: 'ontem', ultima: 'há 6h', msgs: 2, anexos: 0 },
  { id: 'SUP-2833', assunto: 'Alterar endereço de entrega para próximos pedidos', cliente: 'Igor Ferreira', canal: 'web', prioridade: 'baixa', sla: 'verde', slaMin: 240, status: 'resolvido', agente: 'João', criado: 'ontem', ultima: 'ontem', msgs: 3, anexos: 0 },
  { id: 'SUP-2832', assunto: 'Pão integral com recheio estranho · qualidade', cliente: 'Juliana Batista', canal: 'whatsapp', prioridade: 'alta', sla: 'verde', slaMin: 90, status: 'resolvido', agente: 'Patrícia', criado: '2 dias atrás', ultima: '2h atrás', msgs: 5, anexos: 2 },
];

const PageTickets = ({ onNavigate }) => {
  const [status, setStatus] = React.useState('ativos');
  const [selected, setSelected] = React.useState(TICKETS[0]);
  const canalMeta = {
    web: { l: 'Web', c: '#93c5fd', i: 'grid' },
    email: { l: 'E-mail', c: '#c4b5fd', i: 'mail' },
    whatsapp: { l: 'WhatsApp', c: '#86efac', i: 'whatsapp' },
  };
  const slaColor = { vermelho: '#fca5a5', amarelo: '#fcd34d', verde: '#86efac' };
  const prioMeta = { alta: { c: '#fca5a5', l: 'Alta' }, media: { c: '#fcd34d', l: 'Média' }, baixa: { c: 'var(--text-3)', l: 'Baixa' } };
  const filtered = TICKETS.filter(t => status === 'ativos' ? t.status !== 'resolvido' : status === 'resolvidos' ? t.status === 'resolvido' : true);

  return (
    <AppShell current="tickets" onNavigate={onNavigate}>
      <PageContainer
        title="Tickets de suporte"
        subtitle="Atendimento multicanal · WhatsApp, e-mail e chat web unificados."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="bar-chart" size={13}/> Relatórios</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo ticket</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="help" label="Abertos agora" value={TICKETS.filter(t => t.status === 'aberto').length} sub={`${TICKETS.filter(t => t.status === 'em-andamento').length} em andamento`}/>
          <Tile icon="clock" label="SLA em risco" value={TICKETS.filter(t => t.sla !== 'verde' && t.status !== 'resolvido').length} delta="+1" deltaDir="down" sub="requer atenção"/>
          <Tile icon="trending-up" label="Tempo médio 1ª resposta" value="12 min" delta="-3 min" sub="meta: &lt; 15 min"/>
          <Tile icon="star" label="CSAT (30 dias)" value="4,7/5" sub="89% respondidos · 420 avaliações"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1.4fr', gap: 14, minHeight: 560 }} className="ticketsGrid">
          <style>{`@media (max-width:1200px){.ticketsGrid{grid-template-columns:1fr !important}}`}</style>

          {/* Ticket list */}
          <div className="tile" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-1)', display: 'flex', gap: 6 }}>
              <div style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 9, padding: 3 }}>
                {['ativos', 'resolvidos', 'todos'].map(s => (
                  <button key={s} onClick={() => setStatus(s)} style={{
                    padding: '5px 12px', borderRadius: 6, fontSize: 11.5, fontWeight: 500, textTransform: 'capitalize',
                    background: status === s ? 'var(--bg-3)' : 'transparent',
                    color: status === s ? 'var(--text-0)' : 'var(--text-3)',
                  }}>{s}</button>
                ))}
              </div>
              <span style={{ flex: 1 }}/>
              <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="filter" size={11}/></button>
            </div>
            <div style={{ flex: 1, overflowY: 'auto' }}>
              {filtered.map(t => {
                const sel = selected?.id === t.id;
                const cm = canalMeta[t.canal];
                return (
                  <div key={t.id} onClick={() => setSelected(t)} style={{
                    padding: '14px 16px', cursor: 'pointer',
                    borderBottom: '1px solid var(--line-1)',
                    borderLeft: `3px solid ${sel ? 'var(--accent-1)' : 'transparent'}`,
                    background: sel ? 'var(--accent-soft-10)' : 'transparent',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      <span style={{ fontSize: 10.5, color: cm.c, background: cm.c + '22', padding: '2px 6px', borderRadius: 4, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                        <Icon name={cm.i} size={10}/> {cm.l}
                      </span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-3)' }}>{t.id}</span>
                      <span style={{ flex: 1 }}/>
                      <span style={{
                        width: 8, height: 8, borderRadius: '50%', background: slaColor[t.sla],
                        boxShadow: `0 0 8px ${slaColor[t.sla]}80`,
                      }} title={`SLA ${t.sla}`}/>
                      {t.sla !== 'verde' && <span style={{ fontSize: 10, color: slaColor[t.sla], fontWeight: 600, fontVariantNumeric: 'tabular-nums', fontFamily: 'var(--font-mono)' }}>
                        {t.slaMin < 0 ? `${Math.abs(t.slaMin)}min atrás` : `${t.slaMin}min`}
                      </span>}
                    </div>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-0)', marginBottom: 4, lineHeight: 1.35, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{t.assunto}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--text-3)' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><Avatar name={t.cliente} size={18}/>{t.cliente.split(' ')[0]}</div>
                      <span>·</span>
                      <span style={{ color: prioMeta[t.prioridade].c, fontWeight: 600 }}>{prioMeta[t.prioridade].l}</span>
                      <span style={{ flex: 1 }}/>
                      <span>{t.msgs} msg{t.anexos > 0 ? ` · 📎${t.anexos}` : ''}</span>
                      <span style={{ color: 'var(--text-4)' }}>{t.ultima}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Conversation detail */}
          {selected && <TicketDetail ticket={selected} canalMeta={canalMeta} slaColor={slaColor}/>}
        </div>
      </PageContainer>
    </AppShell>
  );
};

const TicketDetail = ({ ticket, canalMeta, slaColor }) => {
  const cm = canalMeta[ticket.canal];
  const conv = [
    { role: 'customer', autor: ticket.cliente, quando: 'há 2h', canal: ticket.canal, msg: 'Oi, meu pedido #8821 estava agendado para chegar ontem às 18h mas até agora nada! Já paguei e preciso saber o que aconteceu urgente porque era para um jantar.', anexos: [] },
    { role: 'system', msg: 'Ticket aberto · prioridade alta detectada pela IA (palavras: "urgente", "não chegou") · roteado para Patrícia.', quando: 'há 2h' },
    { role: 'agent', autor: 'Patrícia Lima', quando: 'há 1h 40min', msg: 'Oi Ana, sou a Patrícia do suporte! Sinto muito pelo inconveniente — já estou verificando aqui no sistema o que aconteceu. Só um momento.', anexos: [] },
    { role: 'agent', autor: 'Patrícia Lima', quando: 'há 1h 30min', msg: 'Ana, vi aqui que houve um problema com a rota do nosso entregador e a entrega foi remarcada sem avisar você (desculpa por isso!). Vou fazer o seguinte:\n\n1️⃣ Entrego HOJE entre 17h e 19h sem custo adicional\n2️⃣ Dou um cupom de R$ 30 para sua próxima compra como desculpa\n\nTopa?', anexos: [] },
    { role: 'customer', autor: ticket.cliente, quando: 'há 40min', msg: 'Pode ser sim, Patrícia! Obrigada por resolver. Só uma coisa: posso pedir para entregar depois das 18h? Tô chegando do trabalho nesse horário.', anexos: [] },
    { role: 'agent', autor: 'Patrícia Lima', quando: 'há 14min', msg: 'Perfeito Ana! Já reagendei para 18h30-19h30. Você vai receber uma confirmação no WhatsApp quando o entregador sair da loja. 💛', anexos: [] },
  ];

  return (
    <div className="tile" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line-1)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-3)' }}>{ticket.id}</span>
          <span style={{ color: 'var(--text-4)' }}>·</span>
          <span style={{ fontSize: 10.5, color: cm.c, background: cm.c + '22', padding: '2px 8px', borderRadius: 4, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <Icon name={cm.i} size={10}/> {cm.l}
          </span>
          <span style={{ flex: 1 }}/>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-2)' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: slaColor[ticket.sla], boxShadow: `0 0 8px ${slaColor[ticket.sla]}80` }}/>
            SLA {ticket.sla}
          </span>
        </div>
        <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: 'var(--text-0)', lineHeight: 1.35 }}>{ticket.assunto}</h2>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 10, fontSize: 11.5, color: 'var(--text-3)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Avatar name={ticket.cliente} size={22}/>
            <span style={{ color: 'var(--text-1)' }}>{ticket.cliente}</span>
          </div>
          <span>·</span>
          <span>Agente: <b style={{ color: 'var(--text-1)' }}>{ticket.agente || 'não atribuído'}</b></span>
          <span>·</span>
          <span>Aberto {ticket.criado}</span>
          <span style={{ flex: 1 }}/>
          <button className="btn btn-outline btn-sm" style={{ padding: '4px 8px' }}><Icon name="dots" size={11}/></button>
        </div>
      </div>

      {/* Conversation */}
      <div style={{ flex: 1, overflowY: 'auto', padding: 18, background: 'var(--bg-base)', display: 'flex', flexDirection: 'column', gap: 14, maxHeight: 440 }}>
        {conv.map((c, i) => {
          if (c.role === 'system') return (
            <div key={i} style={{ textAlign: 'center', padding: '6px 14px', fontSize: 10.5, color: 'var(--text-3)' }}>
              <Icon name="cpu" size={10} style={{ verticalAlign: 'middle' }}/> {c.msg} <span style={{ color: 'var(--text-4)' }}>· {c.quando}</span>
            </div>
          );
          const me = c.role === 'agent';
          return (
            <div key={i} style={{ display: 'flex', gap: 10, flexDirection: me ? 'row-reverse' : 'row' }}>
              <Avatar name={c.autor} size={30}/>
              <div style={{ maxWidth: '75%', display: 'flex', flexDirection: 'column', alignItems: me ? 'flex-end' : 'flex-start' }}>
                <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginBottom: 4 }}>
                  <b style={{ color: 'var(--text-1)' }}>{c.autor}</b> · {c.quando}
                </div>
                <div style={{
                  padding: '10px 14px',
                  background: me ? 'var(--accent-soft-14)' : 'var(--bg-2)',
                  border: `1px solid ${me ? 'var(--accent-soft-40)' : 'var(--line-1)'}`,
                  borderRadius: me ? '14px 14px 2px 14px' : '14px 14px 14px 2px',
                  fontSize: 13, color: 'var(--text-0)', lineHeight: 1.55, whiteSpace: 'pre-wrap',
                }}>{c.msg}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* AI suggestion */}
      <div style={{ padding: '10px 16px', background: 'var(--accent-soft-10)', borderTop: '1px solid var(--line-1)', display: 'flex', gap: 10, alignItems: 'start' }}>
        <div style={{ width: 28, height: 28, borderRadius: 7, background: 'var(--brand-gradient)', color: 'white', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="sparkle" size={13}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginBottom: 3, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>Sugestão de resposta · IA</div>
          <div style={{ fontSize: 12, color: 'var(--text-1)', lineHeight: 1.5 }}>"Ana, acabei de confirmar com o entregador João e ele sai daqui às 18h em ponto. Vou te mandar o rastreio assim que ele subir na moto. Qualquer coisa me chama por aqui! 💛"</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <button className="btn btn-primary btn-sm" style={{ fontSize: 11, padding: '4px 10px' }}><Icon name="check" size={11}/> Usar</button>
            <button className="btn btn-outline btn-sm" style={{ fontSize: 11, padding: '4px 10px' }}><Icon name="repeat" size={11}/> Outra</button>
            <button className="btn btn-outline btn-sm" style={{ fontSize: 11, padding: '4px 10px' }}><Icon name="edit" size={11}/> Editar</button>
          </div>
        </div>
      </div>

      {/* Composer */}
      <div style={{ padding: 12, borderTop: '1px solid var(--line-1)' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'end' }}>
          <textarea placeholder="Digite sua resposta... / para macros · @ para mencionar agente" rows="2" style={{
            flex: 1, padding: 10, borderRadius: 9, fontSize: 13,
            background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)', resize: 'none',
          }}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }} title="Anexar"><Icon name="upload" size={12}/></button>
            <button className="btn btn-primary btn-sm" style={{ padding: '8px 12px' }}><Icon name="arrowRight" size={13}/></button>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 8, fontSize: 10.5, color: 'var(--text-3)' }}>
          <span>Resposta via <b style={{ color: cm.c }}>{cm.l}</b></span>
          <span>·</span>
          <button style={{ color: 'var(--accent-text)', fontWeight: 500 }}>Nota interna</button>
          <span style={{ flex: 1 }}/>
          <button style={{ color: 'var(--text-2)' }}>Fechar & resolver</button>
        </div>
      </div>
    </div>
  );
};

// =============================================================
// 10. Base de Conhecimento
// =============================================================
const KB_CATEGORIES = [
  { id: 'pedidos', label: 'Pedidos & entregas', icon: 'receipt', count: 24, open: true, articles: [
    { id: 1, titulo: 'Como rastrear meu pedido', visibility: 'publico', views: 8420, updated: '12/04/2026', autor: 'Ana', selected: true },
    { id: 2, titulo: 'Prazos e horários de entrega', visibility: 'publico', views: 4210, updated: '10/04/2026', autor: 'Patrícia' },
    { id: 3, titulo: 'Regiões atendidas em Belo Horizonte', visibility: 'publico', views: 2840, updated: '08/04/2026', autor: 'Ana' },
    { id: 4, titulo: 'O que fazer se o pedido não chegou', visibility: 'publico', views: 1820, updated: '05/04/2026', autor: 'Patrícia' },
    { id: 5, titulo: 'Alterar endereço após fazer pedido', visibility: 'publico', views: 920, updated: '02/04/2026', autor: 'João' },
    { id: 6, titulo: 'Protocolo · pedido atrasado (interno)', visibility: 'interno', views: 184, updated: '12/04/2026', autor: 'Patrícia' },
  ]},
  { id: 'pagamento', label: 'Pagamentos & cobrança', icon: 'wallet', count: 14, open: false },
  { id: 'assinatura', label: 'Assinaturas', icon: 'repeat', count: 8, open: false },
  { id: 'produtos', label: 'Produtos & ingredientes', icon: 'file', count: 18, open: false },
  { id: 'devolucao', label: 'Trocas & devoluções', icon: 'sync', count: 6, open: false },
  { id: 'conta', label: 'Conta & cadastro', icon: 'user', count: 10, open: false },
  { id: 'interno', label: 'Políticas internas', icon: 'lock', count: 12, open: false },
];

const KB_ARTICLE_MD = `# Como rastrear meu pedido

Existem **três formas** de acompanhar o status de um pedido na Padaria Automatiza. Todas são gratuitas e atualizadas em tempo real.

## 1. Pelo link enviado no WhatsApp

Quando seu pedido é confirmado, enviamos automaticamente um link de rastreio personalizado. Basta clicar no link e você verá:

- Status atual (em preparo, a caminho, entregue)
- Nome do entregador e foto
- Tempo estimado até a entrega
- Localização em tempo real no mapa

## 2. Pelo site

Acesse [padariaautomatiza.com.br/meus-pedidos](#) e faça login com seu e-mail. Você verá a lista completa de pedidos recentes.

## 3. Pelo app mobile

Abra o app e toque em **Meus pedidos** na tela inicial. Disponível para iOS e Android.

---

> 💡 **Dica:** ative as notificações push no app para receber alertas automáticos quando seu pedido mudar de status.

### Se o rastreio não aparecer
- Confira se você usou o mesmo e-mail do cadastro
- Pedidos feitos pelo WhatsApp aparecem após 10 minutos
- Em caso de erro, contate nosso suporte pelo chat
`;

const PageKbSuporte = ({ onNavigate }) => {
  const [selectedArticle, setSelectedArticle] = React.useState(KB_CATEGORIES[0].articles[0]);
  const [mode, setMode] = React.useState('preview');
  const [categories, setCategories] = React.useState(KB_CATEGORIES);
  const toggleCat = (id) => setCategories(categories.map(c => c.id === id ? { ...c, open: !c.open } : c));
  const [search, setSearch] = React.useState('');

  return (
    <AppShell current="kb-suporte" onNavigate={onNavigate}>
      <div style={{ padding: '14px 20px 20px', maxWidth: 1700, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'start', marginBottom: 12 }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: 'var(--text-0)', letterSpacing: '-.01em' }}>Base de conhecimento</h1>
            <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--text-3)' }}>92 artigos · busca inteligente para clientes e equipe.</p>
          </div>
          <span style={{ flex: 1 }}/>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-outline btn-sm"><Icon name="bar-chart" size={13}/> Analytics</button>
            <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo artigo</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '260px 340px 1fr', gap: 14, height: 'calc(100vh - 170px)', minHeight: 520 }} className="kbGrid">
          <style>{`@media (max-width:1200px){.kbGrid{grid-template-columns:260px 1fr !important; height: auto !important}}`}</style>

          {/* Categories tree */}
          <div className="tile" style={{ padding: 12, overflowY: 'auto' }}>
            <div style={{ position: 'relative', marginBottom: 12 }}>
              <Icon name="search" size={13} color="var(--text-3)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }}/>
              <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Buscar artigo..." style={{
                width: '100%', padding: '8px 10px 8px 32px', borderRadius: 8, fontSize: 12,
                background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)',
              }}/>
            </div>
            <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, padding: '8px 10px 4px' }}>Categorias</div>
            {categories.map(c => (
              <div key={c.id}>
                <button onClick={() => toggleCat(c.id)} style={{
                  width: '100%', padding: '9px 10px', borderRadius: 7, display: 'flex', alignItems: 'center', gap: 10,
                  background: c.open ? 'var(--accent-soft-10)' : 'transparent',
                  color: c.open ? 'var(--text-0)' : 'var(--text-1)',
                  fontSize: 12.5, fontWeight: 500, textAlign: 'left',
                }}>
                  <Icon name="chevron" size={10} style={{ transform: c.open ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }}/>
                  <Icon name={c.icon} size={13} color="var(--text-3)"/>
                  <span style={{ flex: 1 }}>{c.label}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--text-3)', background: 'var(--bg-3)', padding: '1px 7px', borderRadius: 999 }}>{c.count}</span>
                </button>
                {c.open && c.articles && <div style={{ paddingLeft: 28, marginBottom: 4 }}>
                  {c.articles.map(a => (
                    <button key={a.id} onClick={() => setSelectedArticle(a)} style={{
                      display: 'block', width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11.5,
                      background: selectedArticle?.id === a.id ? 'var(--accent-soft-14)' : 'transparent',
                      color: selectedArticle?.id === a.id ? 'var(--text-0)' : 'var(--text-2)',
                      textAlign: 'left', lineHeight: 1.4,
                    }}>{a.titulo}</button>
                  ))}
                </div>}
              </div>
            ))}
          </div>

          {/* Article list */}
          <div className="tile" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="sect-title">Pedidos & entregas</div>
              <span className="grow"/>
              <span style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{KB_CATEGORIES[0].articles.length} artigos</span>
            </div>
            <div style={{ flex: 1, overflowY: 'auto' }}>
              {KB_CATEGORIES[0].articles.map(a => {
                const sel = selectedArticle?.id === a.id;
                return (
                  <div key={a.id} onClick={() => setSelectedArticle(a)} style={{
                    padding: '14px 16px', cursor: 'pointer', borderBottom: '1px solid var(--line-1)',
                    background: sel ? 'var(--accent-soft-10)' : 'transparent',
                    borderLeft: `3px solid ${sel ? 'var(--accent-1)' : 'transparent'}`,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                      <span className="chip" style={{
                        fontSize: 9.5, padding: '1px 6px',
                        background: a.visibility === 'publico' ? 'rgba(34,197,94,.14)' : 'rgba(245,158,11,.14)',
                        color: a.visibility === 'publico' ? '#86efac' : '#fcd34d',
                        fontWeight: 600, textTransform: 'uppercase',
                      }}>
                        {a.visibility === 'publico' ? '🌐 público' : '🔒 interno'}
                      </span>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', marginBottom: 6, lineHeight: 1.35 }}>{a.titulo}</div>
                    <div style={{ display: 'flex', gap: 10, fontSize: 10.5, color: 'var(--text-3)' }}>
                      <span>👁 {a.views.toLocaleString('pt-BR')}</span>
                      <span>·</span>
                      <span>atualizado {a.updated}</span>
                      <span>·</span>
                      <span>{a.autor}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Editor */}
          <div className="tile" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 8, padding: 3 }}>
                {[{ id: 'edit', l: 'Editor', i: 'edit' }, { id: 'preview', l: 'Preview', i: 'grid' }, { id: 'split', l: 'Dividido', i: 'menu' }].map(m => (
                  <button key={m.id} onClick={() => setMode(m.id)} style={{
                    padding: '5px 10px', borderRadius: 6, fontSize: 11.5, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 5,
                    background: mode === m.id ? 'var(--bg-3)' : 'transparent',
                    color: mode === m.id ? 'var(--text-0)' : 'var(--text-3)',
                  }}><Icon name={m.i} size={11}/>{m.l}</button>
                ))}
              </div>
              <span style={{ flex: 1 }}/>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5, color: 'var(--text-2)', padding: '4px 10px', background: 'var(--bg-2)', borderRadius: 8, border: '1px solid var(--line-2)' }}>
                <input type="checkbox" defaultChecked/>
                <span>🌐 Público</span>
              </label>
              <button className="btn btn-outline btn-sm" style={{ fontSize: 11 }}><Icon name="download" size={11}/> Salvar rascunho</button>
              <button className="btn btn-primary btn-sm" style={{ fontSize: 11 }}><Icon name="check" size={11}/> Publicar</button>
            </div>

            <div style={{ display: mode === 'split' ? 'grid' : 'block', gridTemplateColumns: mode === 'split' ? '1fr 1fr' : 'none', flex: 1, overflow: 'hidden' }}>
              {(mode === 'edit' || mode === 'split') && (
                <div style={{ padding: 20, overflowY: 'auto', borderRight: mode === 'split' ? '1px solid var(--line-1)' : 'none', background: 'var(--bg-base)', fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-1)', lineHeight: 1.65, whiteSpace: 'pre-wrap' }}>
                  {KB_ARTICLE_MD}
                </div>
              )}
              {(mode === 'preview' || mode === 'split') && (
                <div style={{ padding: '24px 36px', overflowY: 'auto', background: 'var(--bg-1)' }}>
                  <div style={{ maxWidth: 680, margin: '0 auto' }}>
                    <div style={{ display: 'flex', gap: 10, fontSize: 10.5, color: 'var(--text-3)', marginBottom: 10 }}>
                      <span>Pedidos & entregas</span>
                      <span>›</span>
                      <span>Rastreamento</span>
                    </div>
                    <h1 style={{ margin: '0 0 12px', fontSize: 28, fontWeight: 800, color: 'var(--text-0)', letterSpacing: '-.02em', lineHeight: 1.15 }}>Como rastrear meu pedido</h1>
                    <div style={{ display: 'flex', gap: 14, padding: '10px 0', borderBottom: '1px solid var(--line-1)', marginBottom: 20, fontSize: 11.5, color: 'var(--text-3)' }}>
                      <span>Atualizado em 12/04/2026</span>
                      <span>·</span>
                      <span>👁 8.420 visualizações</span>
                      <span>·</span>
                      <span>👍 98% acharam útil</span>
                    </div>

                    <p style={{ fontSize: 15, color: 'var(--text-1)', lineHeight: 1.65, marginTop: 0 }}>Existem <b style={{ color: 'var(--text-0)' }}>três formas</b> de acompanhar o status de um pedido na Padaria Automatiza. Todas são gratuitas e atualizadas em tempo real.</p>

                    <h2 style={{ fontSize: 19, fontWeight: 700, color: 'var(--text-0)', marginTop: 28, marginBottom: 10 }}>1. Pelo link enviado no WhatsApp</h2>
                    <p style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.65 }}>Quando seu pedido é confirmado, enviamos automaticamente um link de rastreio personalizado. Basta clicar no link e você verá:</p>
                    <ul style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.8, paddingLeft: 22 }}>
                      <li>Status atual (em preparo, a caminho, entregue)</li>
                      <li>Nome do entregador e foto</li>
                      <li>Tempo estimado até a entrega</li>
                      <li>Localização em tempo real no mapa</li>
                    </ul>

                    <h2 style={{ fontSize: 19, fontWeight: 700, color: 'var(--text-0)', marginTop: 28, marginBottom: 10 }}>2. Pelo site</h2>
                    <p style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.65 }}>Acesse <a href="#" style={{ color: 'var(--accent-text)' }}>padariaautomatiza.com.br/meus-pedidos</a> e faça login com seu e-mail. Você verá a lista completa de pedidos recentes.</p>

                    <h2 style={{ fontSize: 19, fontWeight: 700, color: 'var(--text-0)', marginTop: 28, marginBottom: 10 }}>3. Pelo app mobile</h2>
                    <p style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.65 }}>Abra o app e toque em <b>Meus pedidos</b> na tela inicial. Disponível para iOS e Android.</p>

                    <div style={{ padding: 16, background: 'var(--accent-soft-10)', border: '1px solid var(--accent-soft-40)', borderRadius: 10, margin: '22px 0', fontSize: 13.5, color: 'var(--text-1)', lineHeight: 1.6 }}>
                      💡 <b style={{ color: 'var(--text-0)' }}>Dica:</b> ative as notificações push no app para receber alertas automáticos quando seu pedido mudar de status.
                    </div>

                    <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-0)', marginTop: 24, marginBottom: 10 }}>Se o rastreio não aparecer</h3>
                    <ul style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.8, paddingLeft: 22 }}>
                      <li>Confira se você usou o mesmo e-mail do cadastro</li>
                      <li>Pedidos feitos pelo WhatsApp aparecem após 10 minutos</li>
                      <li>Em caso de erro, contate nosso suporte pelo chat</li>
                    </ul>

                    <div style={{ marginTop: 40, padding: 18, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 14 }}>
                      <span style={{ fontSize: 13.5, color: 'var(--text-1)', flex: 1 }}>Este artigo foi útil?</span>
                      <button className="btn btn-outline btn-sm">👍 Sim (412)</button>
                      <button className="btn btn-outline btn-sm">👎 Não (8)</button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </AppShell>
  );
};

Object.assign(window, { TICKETS, PageTickets, PageKbSuporte });
