// Desktop screens for DashM Advogados — rendered inside <ChromeWindow>
// Shared sidebar + content for: Dashboard, CRM/Leads + Lead Detail, Editor Petição, Acervo IA

function DesktopShell({ active, children, search = true, w = 1200 }) {
  const t = useTheme();
  const nav = useNav();
  return <div style={{ width: w, height: '100%', background: t.bg, color: t.text, display: 'flex', fontFamily: 'Inter, system-ui' }}>
    {/* Sidebar */}
    <div style={{
      width: 220, background: t.surface, borderRight: `1px solid ${t.border}`,
      display: 'flex', flexDirection: 'column', padding: '14px 12px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '4px 6px 16px' }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8, background: t.accent, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: '"Playfair Display", serif', fontWeight: 700, fontSize: 17,
        }}>D</div>
        <div>
          <div style={{ fontFamily: '"Playfair Display", serif', fontWeight: 700, fontSize: 14, color: t.text, letterSpacing: -0.2 }}>DashM Advogados</div>
          <div style={{ fontSize: 9.5, color: t.muted, letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600 }}>Mendes & Partners</div>
        </div>
      </div>

      {[
        { g: 'Capa',       items: [
          { id: 'home', icon: 'home', l: 'Dashboard' },
          { id: 'crm',  icon: 'users', l: 'CRM · Leads', tag: '9' },
        ]},
        { g: 'Jurídico',   items: [
          { id: 'proc', icon: 'gavel',    l: 'Processos', tag: '147' },
          { id: 'pet',  icon: 'feather',  l: 'Petições & Recursos' },
          { id: 'cont', icon: 'doc',      l: 'Contratos' },
          { id: 'acv',  icon: 'search',   l: 'Acervo · IA' },
          { id: 'bib',  icon: 'book',     l: 'Biblioteca' },
        ]},
        { g: 'Patrimônio', items: [
          { id: 'fin',  icon: 'wallet',   l: 'Financeiro' },
          { id: 'inv',  icon: 'trend',    l: 'Investimentos' },
          { id: 'fis',  icon: 'shield',   l: 'Fiscal' },
        ]},
        { g: 'Pessoal',    items: [
          { id: 'agd',  icon: 'calendar', l: 'Agenda' },
          { id: 'est',  icon: 'feather',  l: 'Estudo' },
        ]},
      ].map(grp => <div key={grp.g} style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 9.5, color: t.muted, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: 700, padding: '0 6px 4px' }}>{grp.g}</div>
        {grp.items.map(it => {
          const isActive = it.id === active;
          return <div key={it.id} onClick={() => nav.go(it.id)} style={{
            display: 'flex', alignItems: 'center', gap: 9,
            padding: '6px 8px', borderRadius: 7,
            background: isActive ? t.chipBg : 'transparent',
            color: isActive ? t.chipText : t.textDim, cursor: 'pointer',
            fontWeight: isActive ? 700 : 500, fontSize: 12.5, marginBottom: 1,
          }}>
            <Icon name={it.icon} size={15}/>
            <span style={{ flex: 1 }}>{it.l}</span>
            {it.tag && <span style={{ fontSize: 9.5, color: t.muted, fontWeight: 600 }}>{it.tag}</span>}
          </div>;
        })}
      </div>)}

      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 9, padding: '8px 6px', borderTop: `1px solid ${t.borderSoft}` }}>
        <Avatar name="Augusto Mendes" size={30} tone={t.accent}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: t.text }}>Dr. Augusto Mendes</div>
          <div style={{ fontSize: 10, color: t.muted }}>Sócio</div>
        </div>
        <Icon name="dots" size={14} color={t.muted}/>
      </div>
    </div>

    {/* Main */}
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
      {search && <div style={{
        padding: '12px 22px', display: 'flex', alignItems: 'center', gap: 12,
        borderBottom: `1px solid ${t.borderSoft}`,
      }}>
        <div style={{
          flex: 1, maxWidth: 480, display: 'flex', alignItems: 'center', gap: 8,
          background: t.elevated, border: `1px solid ${t.border}`, borderRadius: 10,
          padding: '7px 11px',
        }}>
          <Icon name="search" size={14} color={t.muted}/>
          <span style={{ fontSize: 12, color: t.muted, flex: 1 }}>Pesquisar processos, clientes, jurisprudência…</span>
          <span style={{ fontSize: 10, color: t.muted, padding: '2px 6px', border: `1px solid ${t.border}`, borderRadius: 4 }}>⌘K</span>
        </div>
        <div style={{ flex: 1 }}/>
        <Btn size="sm" variant="soft" icon="spark">Copiloto</Btn>
        <IconBtn name="bell"/>
        <IconBtn name="calendar"/>
      </div>}
      <div style={{ flex: 1, overflow: 'hidden' }}>{children}</div>
    </div>
  </div>;
}

// ─── Desktop Dashboard ───────────────────────────────────
function DDashboard() {
  const t = useTheme();
  return <DesktopShell active="home">
    <div style={{ padding: 22, height: '100%', boxSizing: 'border-box', overflow: 'auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, color: t.muted, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>Visão geral · sexta, 5 jun 2026</div>
          <h1 style={{ fontFamily: '"Playfair Display", serif', fontSize: 30, fontWeight: 600, margin: '4px 0 0', color: t.text, letterSpacing: -0.5 }}>Bom dia, Dr. Augusto</h1>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn size="md" variant="ghost" icon="plus">Lead</Btn>
          <Btn size="md" variant="primary" icon="feather">Nova peça</Btn>
        </div>
      </div>

      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 16 }}>
        {[
          { l: 'Receita maio',     v: 'R$ 487k',  h: '+18,2%',   tone: 'positive', spark: [42, 51, 38, 60, 47, 72, 65, 81] },
          { l: 'Processos ativos', v: '147',      h: '+3 esta semana', spark: [120, 125, 130, 132, 138, 142, 145, 147] },
          { l: 'Leads quentes',    v: '9',        h: 'R$ 1,2M pipeline', spark: [4, 5, 5, 6, 7, 7, 8, 9] },
          { l: 'Audiências semana',v: '12',       h: '4 hoje',    tone: 'danger', spark: [8, 9, 10, 11, 12, 12, 12, 12] },
        ].map(k => <Card key={k.l} pad={16}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Stat label={k.l} value={k.v} hint={k.h} tone={k.tone || 'accent'}/>
            <MiniSpark data={k.spark}/>
          </div>
        </Card>)}
      </div>

      {/* Two-col */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
        {/* Receita chart */}
        <Card pad={18}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Receita mensal</div>
              <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 24, fontWeight: 600, color: t.text, marginTop: 4 }}>R$ 4,8M <span style={{ fontSize: 12, color: t.positive, fontWeight: 600 }}>· +22% YTD</span></div>
            </div>
            <Tabs compact value="12m" onChange={()=>{}} items={[{id:'30d',label:'30d'},{id:'90d',label:'90d'},{id:'12m',label:'12m'}]}/>
          </div>
          <Bars data={[42, 51, 38, 60, 47, 72, 65, 81, 70, 88, 96, 110]} height={120} accent={t.accent}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 10, color: t.muted }}>
            {['Jun','Jul','Ago','Set','Out','Nov','Dez','Jan','Fev','Mar','Abr','Mai'].map(m => <span key={m}>{m}</span>)}
          </div>
        </Card>

        {/* IA copiloto card */}
        <Card pad={18} style={{ background: t.raised, borderColor: t.border }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 9, background: t.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="spark" size={16}/></div>
            <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Copiloto · briefing</div>
          </div>
          <div style={{ fontSize: 13, color: t.text, lineHeight: 1.55 }}>
            <p style={{ margin: '0 0 9px' }}><b>3 prioridades</b> para hoje:</p>
            <ul style={{ paddingLeft: 16, margin: 0, color: t.textDim }}>
              <li style={{ marginBottom: 6 }}>Audiência <b style={{ color: t.text }}>Vellozo S/A</b> às 9:30 — minuta de acordo pronta</li>
              <li style={{ marginBottom: 6 }}>Prazo contestação <b style={{ color: t.text }}>Construtora Rocha</b> em 2 dias</li>
              <li>Honorários de <b style={{ color: t.text }}>R$ 48k</b> para conferir em conta</li>
            </ul>
          </div>
          <Btn size="sm" variant="primary" style={{ marginTop: 14 }} icon="spark">Abrir copiloto</Btn>
        </Card>
      </div>

      {/* Audiências table */}
      <Card pad={0} style={{ marginTop: 14 }}>
        <div style={{ padding: '14px 18px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${t.borderSoft}` }}>
          <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 16, fontWeight: 600, margin: 0, color: t.text }}>Agenda · próximos 7 dias</h3>
          <a style={{ fontSize: 12, color: t.accent, fontWeight: 600 }}>Ver agenda completa →</a>
        </div>
        <div>
          {[
            { d: 'Hoje 09:30', t: 'Audiência conciliação', c: 'Vellozo S/A', a: 'Cível', l: 'TJSP · 4ª Vara', tag: 'Hoje', tone: 'danger' },
            { d: 'Hoje 15:00', t: 'Reunião — proposta',    c: 'Inova Tech Ltda', a: 'Contratual', l: 'Sala 2', tag: 'Hoje', tone: 'danger' },
            { d: 'Sáb 10:00',  t: 'Mentoria — equipe',     c: 'Interno',          a: 'Treino', l: 'Online', tag: '+1d', tone: 'warn' },
            { d: 'Seg 14:00',  t: 'Prazo contestação',     c: 'Construtora Rocha', a: 'Tributário', l: 'TRF3', tag: '+3d', tone: 'warn' },
            { d: 'Ter 11:00',  t: 'Reunião — Vellozo M&A', c: 'Vellozo S/A',       a: 'M&A', l: 'Sala 1', tag: '+4d', tone: 'neutral' },
          ].map((r, i, a) => <div key={i} style={{
            padding: '11px 18px', display: 'grid',
            gridTemplateColumns: '120px 1fr 1fr 1fr 80px',
            gap: 12, alignItems: 'center',
            borderBottom: i < a.length - 1 ? `1px solid ${t.borderSoft}` : 'none',
            fontSize: 12.5,
          }}>
            <div style={{ color: t.subtext, fontWeight: 600 }}>{r.d}</div>
            <div style={{ color: t.text, fontWeight: 600 }}>{r.t}</div>
            <div style={{ color: t.textDim }}>{r.c}</div>
            <div style={{ color: t.subtext }}>{r.l}</div>
            <Pill tone={r.tone}>{r.tag}</Pill>
          </div>)}
        </div>
      </Card>
    </div>
  </DesktopShell>;
}

// ─── Desktop CRM Kanban + Lead Detail ───────────────────
function DCRM() {
  const t = useTheme();
  const stages = [
    { id: 'novo',  l: 'Novo · 38',       cor: t.muted, vlr: 'R$ 412k' },
    { id: 'reu',   l: 'Em reunião · 52', cor: t.accent2, vlr: 'R$ 891k' },
    { id: 'prop',  l: 'Proposta · 33',   cor: t.accent, vlr: 'R$ 1,2M' },
    { id: 'fech',  l: 'Fechado · 20',    cor: t.positive, vlr: 'R$ 642k' },
  ];
  const cards = {
    novo: [
      { n: 'Otávio Bernardes', c: 'Família · divórcio',     v: 'R$ 24k', src: 'Google',     t: '2d' },
      { n: 'Padaria Aurora',   c: 'Tributário · execução',  v: 'R$ 36k', src: 'Indicação',  t: '4d' },
    ],
    reu: [
      { n: 'M. Quintanilha',   c: 'Trabalhista',             v: 'R$ 12k', src: 'LinkedIn',  t: '5h' },
      { n: 'Inova Tech Ltda',  c: 'Cível · contratual',      v: 'R$ 86k', src: 'Site',      t: '3d' },
      { n: 'Helena Munhoz',    c: 'Sucessório',              v: 'R$ 142k',src: 'Indicação', t: '6d' },
    ],
    prop: [
      { n: 'Vellozo S/A',      c: 'M&A · operação 18M',      v: 'R$ 240k', src: 'Indicação', t: '2h', sel: true },
      { n: 'Construtora Rocha',c: 'Tributário · execução',   v: 'R$ 480k', src: 'Site',      t: '1d' },
    ],
    fech: [
      { n: 'Café Marajá Ltda', c: 'Empresarial',             v: 'R$ 92k',  src: 'Indicação', t: '1d' },
    ],
  };

  return <DesktopShell active="crm">
    <div style={{ padding: 22, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, color: t.muted, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>Captação · funil</div>
          <h1 style={{ fontFamily: '"Playfair Display", serif', fontSize: 28, fontWeight: 600, margin: '4px 0 0', color: t.text }}>CRM Jurídico</h1>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn size="md" variant="ghost" icon="filter">Filtros</Btn>
          <Btn size="md" variant="primary" icon="plus">Novo lead</Btn>
        </div>
      </div>

      {/* Two-col: kanban + detail */}
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14, minHeight: 0 }}>
        {/* Kanban */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, minHeight: 0 }}>
          {stages.map(s => <div key={s.id} style={{
            background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12,
            padding: 10, display: 'flex', flexDirection: 'column', minHeight: 0,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 9 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 7, height: 7, borderRadius: 2, background: s.cor }}/>
                <span style={{ fontSize: 11, fontWeight: 700, color: t.text }}>{s.l}</span>
              </div>
              <span style={{ fontSize: 10, color: t.muted, fontFamily: '"Playfair Display"', fontWeight: 600 }}>{s.vlr}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 7, overflow: 'auto', flex: 1 }}>
              {(cards[s.id] || []).map((c, i) => <div key={i} style={{
                background: c.sel ? t.raised : t.elevated,
                border: `1px solid ${c.sel ? t.accent : t.borderSoft}`, borderRadius: 9,
                padding: 10,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: t.text }}>{c.n}</div>
                  <div style={{ fontSize: 9.5, color: t.muted }}>{c.t}</div>
                </div>
                <div style={{ fontSize: 10.5, color: t.subtext, marginBottom: 6 }}>{c.c}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Pill tone="neutral">{c.src}</Pill>
                  <div style={{ fontFamily: '"Playfair Display"', fontSize: 12.5, fontWeight: 700, color: t.text }}>{c.v}</div>
                </div>
              </div>)}
            </div>
          </div>)}
        </div>

        {/* Lead detail */}
        <div style={{
          background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12,
          padding: 16, display: 'flex', flexDirection: 'column', overflow: 'auto',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 11 }}>
            <Avatar name="Vellozo S/A" size={40} tone={t.accent}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: '"Playfair Display"', fontSize: 16, fontWeight: 700, color: t.text }}>Vellozo S/A</div>
              <div style={{ fontSize: 10.5, color: t.subtext }}>CNPJ 12.345.678/0001-90</div>
            </div>
            <IconBtn name="dots"/>
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
            <Pill tone="accent">Proposta</Pill>
            <Pill tone="neutral">M&A</Pill>
            <Pill tone="neutral">Premium</Pill>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, marginBottom: 12 }}>
            <div><div style={{ fontSize: 9.5, color: t.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Valor</div><div style={{ fontSize: 16, fontFamily: '"Playfair Display"', fontWeight: 700, color: t.text }}>R$ 240k</div></div>
            <div><div style={{ fontSize: 9.5, color: t.muted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Probab.</div><div style={{ fontSize: 16, fontFamily: '"Playfair Display"', fontWeight: 700, color: t.positive }}>78%</div></div>
          </div>

          {/* IA: gera contrato */}
          <div style={{
            background: t.raised, border: `1px dashed ${t.accent}`, borderRadius: 10,
            padding: 11, marginBottom: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 5 }}>
              <Icon name="spark" size={13} color={t.accent}/>
              <span style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>Contrato automático</span>
            </div>
            <div style={{ fontSize: 11.5, color: t.text, lineHeight: 1.45, marginBottom: 8 }}>
              <b>Contrato de honorários</b> gerado a partir do template padrão · 4 cláusulas pré-preenchidas
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <Btn size="sm" variant="primary">Revisar</Btn>
              <Btn size="sm" variant="ghost">Enviar p/ assinatura</Btn>
            </div>
          </div>

          {/* Timeline */}
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>Atividade</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            {[
              { d: '2h',     a: 'IA gerou contrato de honorários' },
              { d: '5h',     a: 'Proposta enviada por e-mail' },
              { d: 'ontem',  a: 'Reunião com Hélio Vellozo · CEO' },
              { d: '2d',     a: 'Lead atualizado para Proposta' },
              { d: '5d',     a: 'Captado via indicação de Dr. Ronaldo Sá' },
            ].map((a, i) => <div key={i} style={{ display: 'flex', gap: 9 }}>
              <div style={{ width: 7, height: 7, borderRadius: '50%', background: t.accent, marginTop: 5, flexShrink: 0 }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11.5, color: t.text }}>{a.a}</div>
                <div style={{ fontSize: 10, color: t.muted, marginTop: 1 }}>{a.d}</div>
              </div>
            </div>)}
          </div>
        </div>
      </div>
    </div>
  </DesktopShell>;
}

// ─── Desktop Editor de petição com IA copilot ─────────
function DEditor() {
  const t = useTheme();
  return <DesktopShell active="pet">
    <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '1fr 340px', minHeight: 0 }}>
      {/* Editor */}
      <div style={{ padding: '20px 28px', background: t.bg, display: 'flex', flexDirection: 'column', overflow: 'hidden', borderRight: `1px solid ${t.border}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Recurso de Apelação · v3 · salvando…</div>
            <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 18, fontWeight: 600, color: t.text }}>Vellozo S/A vs Construtora Bahia</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn size="sm" variant="ghost" icon="share">Exportar</Btn>
            <Btn size="sm" variant="primary" icon="check">Salvar versão</Btn>
          </div>
        </div>

        {/* Toolbar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '7px 0', borderTop: `1px solid ${t.borderSoft}`, borderBottom: `1px solid ${t.borderSoft}`, marginBottom: 14 }}>
          {['B','I','U'].map(s => <button key={s} style={{ width: 28, height: 26, background: t.elevated, border: `1px solid ${t.border}`, borderRadius: 6, color: t.text, fontWeight: 700, fontSize: 11, fontStyle: s === 'I' ? 'italic' : 'normal', textDecoration: s === 'U' ? 'underline' : 'none' }}>{s}</button>)}
          <div style={{ width: 1, height: 18, background: t.border, margin: '0 4px' }}/>
          <Btn size="sm" variant="ghost">Heading</Btn>
          <Btn size="sm" variant="ghost">Citação</Btn>
          <div style={{ flex: 1 }}/>
          <span style={{ fontSize: 11, color: t.muted }}>14 pgs · 4.821 palavras</span>
        </div>

        {/* Document */}
        <div style={{
          flex: 1, background: t.surface, borderRadius: 4,
          padding: '32px 56px', overflow: 'auto',
          fontFamily: 'Georgia, "Playfair Display", serif',
          fontSize: 13, color: t.text, lineHeight: 1.75,
          boxShadow: 'inset 0 0 0 1px ' + t.borderSoft,
        }}>
          <div style={{ textAlign: 'center', fontWeight: 700, marginBottom: 22, textTransform: 'uppercase', letterSpacing: 0.5 }}>EXCELENTÍSSIMO SENHOR DESEMBARGADOR RELATOR</div>
          <p style={{ margin: '0 0 12px' }}>Autos nº <b>0023421-12.2025.8.26.0100</b></p>
          <p style={{ margin: '0 0 12px' }}><b>VELLOZO S/A</b>, já qualificada nos autos do processo em epígrafe, vem, respeitosamente, por seus advogados que esta subscrevem, com fundamento no art. 1.009 do CPC, interpor o presente</p>
          <p style={{ textAlign: 'center', margin: '16px 0', fontWeight: 700 }}>RECURSO DE APELAÇÃO</p>
          <p style={{ margin: '0 0 12px' }}>em face da r. sentença de fls. 412/427, requerendo o seu recebimento e regular processamento, conforme razões anexas.</p>

          <p style={{ fontWeight: 700, fontSize: 14, margin: '20px 0 10px' }}>I. DOS FATOS</p>
          <p style={{ margin: '0 0 12px' }}>Trata-se de ação de rescisão contratual cumulada com indenização por perdas e danos, ajuizada em face da Construtora Bahia Ltda, em razão do <span style={{ background: t.chipBg, color: t.chipText, padding: '1px 4px', borderRadius: 3, fontFamily: 'Inter' }}>descumprimento essencial</span> das cláusulas 4ª e 7ª do contrato de M&A celebrado em 14 de março de 2024.</p>

          <p style={{ fontWeight: 700, fontSize: 14, margin: '20px 0 10px' }}>II. DAS RAZÕES DE REFORMA</p>
          <p style={{ margin: '0 0 12px' }}>A r. sentença recorrida merece reforma porquanto, ao adotar a Teoria do Adimplemento Substancial sem o devido escrutínio do impacto econômico do inadimplemento, afastou-se da orientação consolidada pelo Egrégio Superior Tribunal de Justiça…</p>

          <div contentEditable={false} style={{
            margin: '14px -16px', padding: '12px 16px',
            background: t.raised, border: `1px solid ${t.accent}`, borderRadius: 10,
            fontFamily: 'Inter, system-ui', fontSize: 12, lineHeight: 1.5,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
              <Icon name="spark" size={13} color={t.accent}/>
              <span style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Inserir aqui · sugestão IA</span>
            </div>
            <div style={{ color: t.text }}>"…conforme reiteradamente decidido pelo C. STJ no <b>REsp 1.987.443/SP</b>, Rel. Min. Nancy Andrighi, 3ª Turma, j. 14.11.2024…"</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
              <Btn size="sm" variant="primary">Inserir trecho</Btn>
              <Btn size="sm" variant="ghost">Por quê?</Btn>
              <Btn size="sm" variant="ghost">Variações</Btn>
            </div>
          </div>
        </div>
      </div>

      {/* Copilot */}
      <div style={{ background: t.surface, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ padding: '14px 16px', borderBottom: `1px solid ${t.borderSoft}`, display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: t.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="spark" size={14}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>Copiloto jurídico</div>
            <div style={{ fontSize: 10, color: t.muted }}>Estilo · escritório Mendes</div>
          </div>
          <IconBtn name="dots"/>
        </div>

        <div style={{ flex: 1, padding: '14px 16px', overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 11 }}>
          {/* Bot message */}
          <div style={{ background: t.elevated, borderRadius: 12, padding: '10px 12px', fontSize: 12, color: t.text, lineHeight: 1.55 }}>
            Analisei a peça. Encontrei <b>3 jurisprudências do STJ</b> que reforçam sua tese. Quer que eu insira a fundamentação no item II?
          </div>

          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <Btn size="sm" variant="soft">Inserir todas</Btn>
            <Btn size="sm" variant="ghost">Mostrar uma a uma</Btn>
          </div>

          {/* User message */}
          <div style={{ alignSelf: 'flex-end', background: t.accent, color: '#fff', borderRadius: 12, padding: '8px 11px', fontSize: 12, maxWidth: '85%' }}>
            Mostre uma a uma e cite o autor base
          </div>

          {/* Citation cards */}
          {[
            { id: 'REsp 1.987.443/SP', a: '"Pontes de Miranda · Tratado XXI"', t: 'Aplica o conceito de inadimplemento essencial à hipótese.' },
            { id: 'REsp 1.755.911/RS', a: '"Comparato · Poder de Controle"',     t: 'Adoção da Teoria do Adimplemento Substancial.' },
          ].map(c => <div key={c.id} style={{ background: t.elevated, borderRadius: 11, padding: 11, border: `1px solid ${t.borderSoft}` }}>
            <div style={{ fontFamily: '"Playfair Display"', fontSize: 12.5, fontWeight: 700, color: t.text, marginBottom: 4 }}>{c.id}</div>
            <div style={{ fontSize: 11, color: t.subtext, marginBottom: 5 }}>Autor de referência: {c.a}</div>
            <div style={{ fontSize: 11.5, color: t.textDim, lineHeight: 1.45 }}>{c.t}</div>
            <div style={{ display: 'flex', gap: 5, marginTop: 8 }}>
              <Btn size="sm" variant="primary">Inserir</Btn>
              <Btn size="sm" variant="ghost">Por quê?</Btn>
            </div>
          </div>)}
        </div>

        <div style={{ padding: '10px 14px 14px', borderTop: `1px solid ${t.borderSoft}` }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 7,
            background: t.elevated, border: `1px solid ${t.border}`,
            borderRadius: 12, padding: '7px 10px',
          }}>
            <input placeholder="Pergunte ou peça uma revisão…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: t.text, fontSize: 12, fontFamily: 'inherit' }}/>
            <button style={{ background: t.accent, color: '#fff', border: 'none', borderRadius: 8, width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><Icon name="send" size={12}/></button>
          </div>
        </div>
      </div>
    </div>
  </DesktopShell>;
}

Object.assign(window, { DesktopShell, DDashboard, DCRM, DEditor });