// Wave 3a — RH (5 telas): Funcionários, Horários, Ponto, Folha CLT, Ajustes Salariais

// Shared employee data
const EMPLOYEES = [
  { id: 1, nome: 'Ana Paula Mendes', cargo: 'Gerente Geral', depto: 'Administrativo', admissao: '12/03/2019', salario: 7800, status: 'ativo', cpf: '128.472.930-18', pis: '120.48291.82-4', tipo: 'CLT', centro: 'Matriz', email: 'ana.mendes@padaria.com.br', tel: '(31) 98472-1829' },
  { id: 2, nome: 'Bruno Tavares Silva', cargo: 'Vendedor Sênior', depto: 'Comercial', admissao: '05/06/2020', salario: 3800, status: 'ativo', cpf: '091.283.472-91', pis: '201.84729.10-3', tipo: 'CLT', centro: 'Matriz', email: 'bruno.tavares@padaria.com.br', tel: '(31) 99128-4720' },
  { id: 3, nome: 'Carolina Ferreira', cargo: 'Confeiteira Chefe', depto: 'Produção', admissao: '22/01/2021', salario: 4200, status: 'ativo', cpf: '204.918.374-02', pis: '304.92018.43-7', tipo: 'CLT', centro: 'Matriz', email: 'carol.ferreira@padaria.com.br', tel: '(31) 98210-3849' },
  { id: 4, nome: 'Diego Almeida', cargo: 'Atendente', depto: 'Vendas', admissao: '14/08/2022', salario: 1980, status: 'ativo', cpf: '371.029.482-56', pis: '208.10928.74-1', tipo: 'CLT', centro: 'Filial Savassi', email: 'diego.almeida@padaria.com.br', tel: '(31) 97482-0192' },
  { id: 5, nome: 'Eduarda Lopes', cargo: 'Auxiliar de Produção', depto: 'Produção', admissao: '03/11/2023', salario: 1680, status: 'ativo', cpf: '482.019.273-04', pis: '102.93847.20-8', tipo: 'CLT', centro: 'Matriz', email: 'eduarda.lopes@padaria.com.br', tel: '(31) 98901-2837' },
  { id: 6, nome: 'Felipe Rocha Santos', cargo: 'Padeiro', depto: 'Produção', admissao: '18/04/2022', salario: 2800, status: 'ativo', cpf: '590.382.471-82', pis: '401.28937.41-2', tipo: 'CLT', centro: 'Matriz', email: 'felipe.rocha@padaria.com.br', tel: '(31) 99302-8471' },
  { id: 7, nome: 'Gabriela Costa', cargo: 'Caixa', depto: 'Vendas', admissao: '27/02/2024', salario: 1820, status: 'férias', cpf: '619.482.039-15', pis: '502.10283.94-5', tipo: 'CLT', centro: 'Filial Savassi', email: 'gabi.costa@padaria.com.br', tel: '(31) 98120-4782' },
  { id: 8, nome: 'Henrique Batista', cargo: 'Auxiliar Administrativo', depto: 'Administrativo', admissao: '09/07/2023', salario: 2400, status: 'ativo', cpf: '728.193.047-28', pis: '603.92017.48-1', tipo: 'CLT', centro: 'Matriz', email: 'henrique.batista@padaria.com.br', tel: '(31) 97201-9384' },
  { id: 9, nome: 'Isabela Nunes', cargo: 'Vendedora', depto: 'Comercial', admissao: '15/09/2024', salario: 2200, status: 'ativo', cpf: '837.294.018-46', pis: '704.10293.82-4', tipo: 'CLT', centro: 'Matriz', email: 'isabela.nunes@padaria.com.br', tel: '(31) 99182-0473' },
  { id: 10, nome: 'João Vitor Dias', cargo: 'Motorista Entregador', depto: 'Logística', admissao: '01/10/2022', salario: 2600, status: 'ativo', cpf: '948.102.394-73', pis: '805.29384.71-0', tipo: 'CLT', centro: 'Matriz', email: 'joao.dias@padaria.com.br', tel: '(31) 98472-1038' },
  { id: 11, nome: 'Karina Oliveira', cargo: 'Confeiteira', depto: 'Produção', admissao: '12/05/2023', salario: 2900, status: 'licença', cpf: '057.291.483-62', pis: '906.38471.29-3', tipo: 'CLT', centro: 'Matriz', email: 'karina.oliveira@padaria.com.br', tel: '(31) 97109-2847' },
  { id: 12, nome: 'Lucas Pereira', cargo: 'Padeiro', depto: 'Produção', admissao: '23/06/2021', salario: 2800, status: 'ativo', cpf: '168.309.472-59', pis: '107.29384.71-5', tipo: 'CLT', centro: 'Matriz', email: 'lucas.pereira@padaria.com.br', tel: '(31) 98203-9471' },
  { id: 13, nome: 'Mariana Souza', cargo: 'Supervisora de Loja', depto: 'Vendas', admissao: '07/01/2020', salario: 4600, status: 'ativo', cpf: '279.418.302-71', pis: '208.38471.29-8', tipo: 'CLT', centro: 'Filial Savassi', email: 'mariana.souza@padaria.com.br', tel: '(31) 99472-1083' },
  { id: 14, nome: 'Nathalia Ramos', cargo: 'Atendente', depto: 'Vendas', admissao: '19/03/2025', salario: 1820, status: 'experiência', cpf: '390.284.017-48', pis: '309.47128.30-2', tipo: 'CLT', centro: 'Filial Savassi', email: 'nath.ramos@padaria.com.br', tel: '(31) 98120-4739' },
  { id: 15, nome: 'Otávio Lima', cargo: 'Auxiliar de Cozinha', depto: 'Produção', admissao: '24/11/2023', salario: 1740, status: 'ativo', cpf: '401.293.847-18', pis: '410.29384.71-7', tipo: 'CLT', centro: 'Matriz', email: 'otavio.lima@padaria.com.br', tel: '(31) 97283-0419' },
  { id: 16, nome: 'Patrícia Gomes', cargo: 'Assistente de RH', depto: 'Administrativo', admissao: '08/04/2024', salario: 3100, status: 'ativo', cpf: '512.038.472-09', pis: '511.38492.71-4', tipo: 'CLT', centro: 'Matriz', email: 'patricia.gomes@padaria.com.br', tel: '(31) 98910-2374' },
  { id: 17, nome: 'Rafael Cardoso', cargo: 'Diretor Comercial', depto: 'Diretoria', admissao: '01/02/2018', salario: 9200, status: 'ativo', cpf: '623.149.028-36', pis: '612.29384.71-9', tipo: 'PJ', centro: 'Matriz', email: 'rafael.cardoso@padaria.com.br', tel: '(31) 99102-8473' },
];

const statusChipRH = (s) => ({
  ativo: { bg: 'rgba(34,197,94,.14)', c: '#86efac', l: 'Ativo' },
  'férias': { bg: 'rgba(245,158,11,.14)', c: '#fcd34d', l: 'Em férias' },
  'licença': { bg: 'rgba(59,130,246,.14)', c: '#93c5fd', l: 'Licença' },
  'experiência': { bg: 'rgba(139,92,246,.14)', c: '#c4b5fd', l: 'Experiência' },
  desligado: { bg: 'rgba(239,68,68,.14)', c: '#fca5a5', l: 'Desligado' },
})[s];

const deptColors = {
  'Administrativo': '#3b82f6', 'Comercial': '#8b5cf6', 'Produção': '#f59e0b',
  'Vendas': '#22c55e', 'Logística': '#06b6d4', 'Diretoria': '#ec4899',
};
const rhSelectStyle = { padding: '7px 12px', borderRadius: 8, fontSize: 12.5, background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-1)' };

// =============================================================
// 1. Funcionários
// =============================================================
const PageFuncionarios = ({ onNavigate }) => {
  const [search, setSearch] = React.useState('');
  const [filterDept, setFilterDept] = React.useState('todos');
  const [selected, setSelected] = React.useState(null);

  const filtered = EMPLOYEES.filter(e =>
    (filterDept === 'todos' || e.depto === filterDept) &&
    (!search || e.nome.toLowerCase().includes(search.toLowerCase()) || e.cargo.toLowerCase().includes(search.toLowerCase()))
  );

  const totalSalarios = EMPLOYEES.filter(e => e.status !== 'desligado').reduce((t, e) => t + e.salario, 0);
  const depts = [...new Set(EMPLOYEES.map(e => e.depto))];

  return (
    <AppShell current="funcionarios" onNavigate={onNavigate}>
      <PageContainer
        title="Funcionários"
        subtitle="Gestão completa do quadro de colaboradores · CLT, PJ e contratos temporários."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Admitir funcionário</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="users" label="Headcount ativo" value={EMPLOYEES.filter(e => e.status === 'ativo').length} sub={`${EMPLOYEES.length} totais · 2 novos mês`}/>
          <Tile icon="wallet" label="Folha total" value={BRL(totalSalarios)} delta="+R$ 4.200" sub="vs. mês anterior"/>
          <Tile icon="trending-up" label="Turnover 12m" value="8,4%" delta="-1,2pp" deltaDir="down"/>
          <Tile icon="award" label="Tempo médio de casa" value="2,7 anos" sub="mediana: 2,1"/>
        </div>

        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          <div style={{ position: 'relative', flex: 1, maxWidth: 320 }}>
            <Icon name="search" size={13} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)' }}/>
            <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Buscar por nome, cargo, CPF..." style={{
              width: '100%', padding: '8px 12px 8px 32px', borderRadius: 8, fontSize: 12.5,
              background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-1)',
            }}/>
          </div>
          <select value={filterDept} onChange={(e) => setFilterDept(e.target.value)} style={rhSelectStyle}>
            <option value="todos">Todos departamentos ({EMPLOYEES.length})</option>
            {depts.map(d => <option key={d} value={d}>{d} ({EMPLOYEES.filter(e => e.depto === d).length})</option>)}
          </select>
          <select style={rhSelectStyle}><option>Todos status</option></select>
          <select style={rhSelectStyle}><option>Todos centros de custo</option></select>
          <span style={{ flex: 1 }}/>
          <div style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 8, padding: 3 }}>
            <button style={{ padding: '6px 10px', borderRadius: 6, background: 'var(--bg-3)', color: 'var(--text-0)' }}><Icon name="menu" size={13}/></button>
            <button style={{ padding: '6px 10px', borderRadius: 6, color: 'var(--text-3)' }}><Icon name="grid" size={13}/></button>
          </div>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Funcionário</th>
                <th>Cargo</th>
                <th>Departamento</th>
                <th>Admissão</th>
                <th style={{ textAlign: 'right' }}>Salário</th>
                <th>Status</th>
                <th>Tipo</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(e => {
                const st = statusChipRH(e.status);
                return (
                  <tr key={e.id} onClick={() => setSelected(e)} style={{ cursor: 'pointer' }}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <Avatar name={e.nome} size={32}/>
                        <div>
                          <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 500 }}>{e.nome}</div>
                          <div style={{ fontSize: 11, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{e.cpf}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ color: 'var(--text-1)', fontSize: 12.5 }}>{e.cargo}</td>
                    <td>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-1)' }}>
                        <span className="dot" style={{ background: deptColors[e.depto], width: 8, height: 8 }}/>{e.depto}
                      </span>
                    </td>
                    <td style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--text-2)', fontSize: 12 }}>{e.admissao}</td>
                    <td style={{ textAlign: 'right', color: 'var(--text-0)', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{BRL(e.salario)}</td>
                    <td><span className="chip" style={{ background: st.bg, color: st.c, fontSize: 10.5, fontWeight: 600 }}>{st.l}</span></td>
                    <td><span className="chip" style={{ fontSize: 10.5, background: e.tipo === 'CLT' ? 'rgba(139,92,246,.12)' : 'rgba(6,182,212,.12)', color: e.tipo === 'CLT' ? '#c4b5fd' : '#67e8f9' }}>{e.tipo}</span></td>
                    <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="edit" size={11}/></button>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }}><Icon name="dots" size={11}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {selected && <FuncionarioDrawer emp={selected} onClose={() => setSelected(null)}/>}
      </PageContainer>
    </AppShell>
  );
};

const FuncionarioDrawer = ({ emp, onClose }) => {
  const [tab, setTab] = React.useState('pessoal');
  const tabs = [
    { id: 'pessoal', l: 'Pessoal', i: 'users' },
    { id: 'contrato', l: 'Contrato', i: 'doc' },
    { id: 'dependentes', l: 'Dependentes', i: 'users' },
    { id: 'banco', l: 'Banco & PIS', i: 'wallet' },
    { id: 'docs', l: 'Documentos', i: 'file' },
  ];
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.65)', zIndex: 100, backdropFilter: 'blur(4px)' }}/>
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0, width: 540, zIndex: 101,
        background: 'var(--bg-1)', borderLeft: '1px solid var(--line-2)',
        boxShadow: '-24px 0 60px rgba(0,0,0,.6)', overflowY: 'auto',
      }}>
        <div style={{ padding: 24, background: 'linear-gradient(135deg, var(--accent-soft-14), transparent)', borderBottom: '1px solid var(--line-1)' }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <Avatar name={emp.nome} size={64}/>
            <div style={{ flex: 1 }}>
              <h2 style={{ margin: 0, fontSize: 19, fontWeight: 700, color: 'var(--text-0)', letterSpacing: '-.01em' }}>{emp.nome}</h2>
              <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 2 }}>{emp.cargo} · {emp.depto}</div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>ID · {String(emp.id).padStart(4, '0')} · Admissão {emp.admissao}</div>
            </div>
            <button onClick={onClose} className="shell-top-btn" style={{ width: 32, height: 32 }}><Icon name="x" size={14}/></button>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 16 }}>
            <button className="btn btn-primary btn-sm"><Icon name="edit" size={12}/> Editar</button>
            <button className="btn btn-outline btn-sm"><Icon name="mail" size={12}/> E-mail</button>
            <button className="btn btn-outline btn-sm"><Icon name="whatsapp" size={12}/> WhatsApp</button>
            <span style={{ flex: 1 }}/>
            <button className="btn btn-outline btn-sm" style={{ color: '#fca5a5', borderColor: 'rgba(239,68,68,.3)' }}>Desligar</button>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 2, padding: '0 20px', borderBottom: '1px solid var(--line-1)', overflowX: 'auto' }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: '12px 14px', fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap',
              color: tab === t.id ? 'var(--accent-text)' : 'var(--text-3)',
              borderBottom: `2px solid ${tab === t.id ? 'var(--accent-1)' : 'transparent'}`,
            }}>
              <Icon name={t.i} size={12} style={{ marginRight: 5 }}/>{t.l}
            </button>
          ))}
        </div>

        <div style={{ padding: 24 }}>
          {tab === 'pessoal' && <DataGrid rows={[
            ['Nome completo', emp.nome],
            ['CPF', emp.cpf, 'mono'],
            ['RG', '18.472.928-X SSP/MG'],
            ['Data de nascimento', '14/03/1989 (36 anos)'],
            ['Gênero', 'Feminino'],
            ['Estado civil', 'Casada'],
            ['E-mail', emp.email],
            ['Telefone', emp.tel, 'mono'],
            ['Endereço', 'Rua das Pitangueiras, 284 · Apt 502'],
            ['CEP · Cidade', '30140-072 · Belo Horizonte/MG', 'mono'],
          ]}/>}
          {tab === 'contrato' && <>
            <DataGrid rows={[
              ['Cargo', emp.cargo],
              ['Departamento', emp.depto],
              ['Centro de custo', emp.centro],
              ['Tipo de contrato', emp.tipo],
              ['Regime', 'CLT · 44h semanais'],
              ['Jornada', 'Seg-Sex 08:00–17:00 · 1h almoço'],
              ['Data admissão', emp.admissao],
              ['Salário base', BRL(emp.salario), 'money'],
              ['Vale transporte', BRL(220), 'money'],
              ['Vale refeição', BRL(480), 'money'],
              ['Plano de saúde', 'Unimed BH · Básico'],
            ]}/>
          </>}
          {tab === 'dependentes' && <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { nome: 'Pedro Henrique Mendes', rel: 'Filho', nasc: '22/08/2012 (13 anos)', ir: true, sf: true },
              { nome: 'Sofia Mendes', rel: 'Filha', nasc: '04/05/2016 (8 anos)', ir: true, sf: true },
            ].map((d, i) => (
              <div key={i} className="tile" style={{ display: 'flex', gap: 12, padding: 14 }}>
                <Avatar name={d.nome} size={40}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>{d.nome}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{d.rel} · {d.nasc}</div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 10 }}>
                  {d.ir && <span className="chip chip-brand">Dep. IRRF</span>}
                  {d.sf && <span className="chip chip-green">Salário-família</span>}
                </div>
              </div>
            ))}
            <button className="btn btn-outline btn-sm" style={{ justifyContent: 'center', marginTop: 6 }}><Icon name="plus" size={12}/> Adicionar dependente</button>
          </div>}
          {tab === 'banco' && <DataGrid rows={[
            ['PIS/PASEP', emp.pis, 'mono'],
            ['CTPS', '8.271.948 · série 0010-0 MG', 'mono'],
            ['Banco', 'Itaú Unibanco (341)'],
            ['Agência', '0412', 'mono'],
            ['Conta corrente', '18293-4', 'mono'],
            ['Tipo', 'Corrente individual'],
            ['PIX para salário', 'CPF · ' + emp.cpf, 'mono'],
          ]}/>}
          {tab === 'docs' && <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { n: 'Contrato de trabalho assinado.pdf', sz: '412 KB', d: emp.admissao },
              { n: 'Cópia RG e CPF.pdf', sz: '284 KB', d: emp.admissao },
              { n: 'Comprovante de residência.pdf', sz: '128 KB', d: '15/03/2024' },
              { n: 'Carta de apresentação.docx', sz: '24 KB', d: emp.admissao },
              { n: 'ASO admissional.pdf', sz: '182 KB', d: emp.admissao },
              { n: 'Foto 3x4.jpg', sz: '89 KB', d: emp.admissao },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: '10px 14px', background: 'var(--bg-2)', borderRadius: 10, border: '1px solid var(--line-1)' }}>
                <Icon name="file" size={16} color="var(--accent-text)"/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, color: 'var(--text-0)' }}>{f.n}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{f.sz} · {f.d}</div>
                </div>
                <button style={{ width: 28, height: 28, borderRadius: 7, background: 'var(--bg-3)', color: 'var(--text-2)', display: 'grid', placeItems: 'center' }}><Icon name="download" size={11}/></button>
              </div>
            ))}
          </div>}
        </div>
      </div>
    </>
  );
};

const DataGrid = ({ rows }) => (
  <div style={{ display: 'flex', flexDirection: 'column' }}>
    {rows.map(([k, v, variant], i) => (
      <div key={i} style={{ display: 'grid', gridTemplateColumns: '170px 1fr', gap: 12, padding: '10px 0', borderBottom: i < rows.length - 1 ? '1px solid var(--line-1)' : 'none' }}>
        <span style={{ fontSize: 12, color: 'var(--text-3)' }}>{k}</span>
        <span style={{ fontSize: 13, color: 'var(--text-0)', fontFamily: variant === 'mono' ? 'var(--font-mono)' : 'inherit', fontVariantNumeric: 'tabular-nums', fontWeight: variant === 'money' ? 600 : 400 }}>{v}</span>
      </div>
    ))}
  </div>
);

// =============================================================
// 2. Horários
// =============================================================
const PageHorarios = ({ onNavigate }) => {
  const dias = ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'];
  const funcs = EMPLOYEES.slice(0, 10);
  // Turnos: 0 = folga, 'm' = manhã 6-14, 't' = tarde 14-22, 'n' = noite 22-06, 'c' = comercial 8-17
  const scale = {
    1: ['c', 'c', 'c', 'c', 'c', 0, 0],
    2: ['c', 'c', 'c', 'c', 'c', 'c', 0],
    3: ['m', 'm', 'm', 'm', 'm', 'm', 0],
    4: ['t', 't', 't', 't', 't', 't', 0],
    5: ['m', 'm', 'm', 0, 'm', 'm', 'm'],
    6: ['m', 'm', 'm', 'm', 'm', 0, 0],
    9: [0, 't', 't', 't', 't', 't', 't'],
    10: ['c', 'c', 'c', 'c', 'c', 0, 0],
    12: ['m', 'm', 'm', 'm', 'm', 'm', 0],
    13: ['c', 'c', 'c', 'c', 'c', 'c', 0],
  };
  const turnoMeta = {
    m: { l: 'Manhã', h: '06:00 – 14:00', bg: 'rgba(245,158,11,.16)', c: '#fcd34d', border: 'rgba(245,158,11,.3)' },
    t: { l: 'Tarde', h: '14:00 – 22:00', bg: 'rgba(139,92,246,.16)', c: '#c4b5fd', border: 'rgba(139,92,246,.3)' },
    n: { l: 'Noite', h: '22:00 – 06:00', bg: 'rgba(59,130,246,.16)', c: '#93c5fd', border: 'rgba(59,130,246,.3)' },
    c: { l: 'Comercial', h: '08:00 – 17:00', bg: 'rgba(34,197,94,.14)', c: '#86efac', border: 'rgba(34,197,94,.3)' },
  };

  return (
    <AppShell current="horarios" onNavigate={onNavigate}>
      <PageContainer
        title="Horários & Escalas"
        subtitle="Semana de 14/04 a 20/04/2026 · arraste turnos para ajustar."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="calendar" size={13}/> Semana anterior</button>
          <button className="btn btn-outline btn-sm"><Icon name="calendar" size={13}/> Próxima semana</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova escala</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="clock" label="Carga horária total" value="680 h" sub="semana 14–20/abr"/>
          <Tile icon="trending-up" label="Horas extras" value="24,5 h" delta="+R$ 1.280" sub="8 funcionários"/>
          <Tile icon="wallet" label="Banco de horas" value="+142 h" sub="Crédito médio por pessoa" accent="rgba(34,197,94,.2)"/>
          <Tile icon="alert" label="Faltas da semana" value="2" sub="1 justificada" accent="rgba(245,158,11,.2)"/>
        </div>

        <div className="tile" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 14 }}>
            <div className="sect-title">Escala semanal</div>
            <span className="grow"/>
            {Object.entries(turnoMeta).map(([k, m]) => (
              <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-2)' }}>
                <span style={{ width: 12, height: 12, borderRadius: 3, background: m.bg, border: `1px solid ${m.border}` }}/>
                {m.l} <span style={{ color: 'var(--text-4)', fontFamily: 'var(--font-mono)' }}>{m.h}</span>
              </span>
            ))}
          </div>
          <div style={{ overflowX: 'auto' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '220px repeat(7, 1fr)', minWidth: 1100 }}>
              {/* Header */}
              <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-3)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--text-3)', fontWeight: 600 }}>Funcionário</div>
              {dias.map((d, i) => (
                <div key={d} style={{ padding: '12px 10px', borderBottom: '1px solid var(--line-1)', borderLeft: '1px solid var(--line-1)', background: 'var(--bg-3)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.06em', color: i >= 5 ? 'var(--accent-text)' : 'var(--text-3)', fontWeight: 600, textAlign: 'center' }}>
                  {d}<br/><span style={{ fontSize: 14, color: 'var(--text-0)', fontWeight: 700 }}>{14 + i}</span>
                </div>
              ))}
              {/* Rows */}
              {funcs.map((emp, ri) => {
                const row = scale[emp.id] || ['c','c','c','c','c',0,0];
                const totalH = row.reduce((t, s) => t + (s === 0 ? 0 : 8), 0);
                return (
                  <React.Fragment key={emp.id}>
                    <div style={{ padding: '14px 16px', borderBottom: ri < funcs.length - 1 ? '1px solid var(--line-1)' : 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={emp.nome} size={30}/>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{emp.nome.split(' ').slice(0, 2).join(' ')}</div>
                        <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{totalH}h semana</div>
                      </div>
                    </div>
                    {row.map((s, ci) => {
                      if (s === 0) return (
                        <div key={ci} style={{ padding: 6, borderBottom: ri < funcs.length - 1 ? '1px solid var(--line-1)' : 'none', borderLeft: '1px solid var(--line-1)', display: 'grid', placeItems: 'center' }}>
                          <span style={{ fontSize: 10, color: 'var(--text-4)', padding: '14px 0', display: 'block' }}>—</span>
                        </div>
                      );
                      const m = turnoMeta[s];
                      return (
                        <div key={ci} style={{ padding: 6, borderBottom: ri < funcs.length - 1 ? '1px solid var(--line-1)' : 'none', borderLeft: '1px solid var(--line-1)' }}>
                          <div style={{
                            padding: '8px 10px', borderRadius: 6, background: m.bg,
                            border: `1px solid ${m.border}`, cursor: 'grab',
                            fontSize: 10.5, color: m.c, fontWeight: 600,
                          }}>
                            {m.l}
                            <div style={{ fontSize: 9.5, color: m.c, opacity: .8, fontFamily: 'var(--font-mono)', fontWeight: 400, marginTop: 2 }}>{m.h}</div>
                          </div>
                        </div>
                      );
                    })}
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 3. Ponto Eletrônico
// =============================================================
const PagePonto = ({ onNavigate }) => {
  const [view, setView] = React.useState('hoje');
  const batidas = [
    { tipo: 'entrada', hora: '07:58', loc: 'Matriz · Av. Cristiano Machado', status: 'ok', foto: true },
    { tipo: 'almoco-saida', hora: '12:02', loc: 'Matriz · Av. Cristiano Machado', status: 'ok', foto: true },
    { tipo: 'almoco-volta', hora: '13:04', loc: 'Matriz · Av. Cristiano Machado', status: 'ok', foto: true },
    { tipo: 'saida', hora: '17:12', loc: 'Matriz · Av. Cristiano Machado', status: 'extra', foto: true },
  ];
  const espelho = Array.from({ length: 14 }, (_, i) => {
    const dia = i + 1;
    const isWknd = (dia % 7 === 5 || dia % 7 === 6);
    if (isWknd && dia !== 12) return { dia, dow: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'][new Date(2026, 3, dia).getDay()], entrada: '—', almoco: '—', saida: '—', total: '—', extra: '—', tipo: 'folga' };
    const variant = [dia === 3, dia === 7, dia === 10, dia === 12][Math.min(3, dia % 4)];
    if (dia === 3) return { dia, dow: 'Sex', entrada: '08:12', almoco: '12:00/13:00', saida: '17:04', total: '07:52', extra: '—', tipo: 'atraso' };
    if (dia === 7) return { dia, dow: 'Ter', entrada: '—', almoco: '—', saida: '—', total: '—', extra: '—', tipo: 'falta' };
    if (dia === 10) return { dia, dow: 'Sex', entrada: '07:55', almoco: '12:01/13:03', saida: '18:24', total: '09:25', extra: '+01:25', tipo: 'extra' };
    return { dia, dow: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'][new Date(2026, 3, dia).getDay()], entrada: '07:58', almoco: '12:00/13:00', saida: '17:02', total: '08:04', extra: '—', tipo: 'ok' };
  });
  const typeStyle = {
    ok: { c: 'var(--text-1)', bg: 'transparent' },
    atraso: { c: '#fcd34d', bg: 'rgba(245,158,11,.06)' },
    falta: { c: '#fca5a5', bg: 'rgba(239,68,68,.08)' },
    extra: { c: '#86efac', bg: 'rgba(34,197,94,.06)' },
    folga: { c: 'var(--text-4)', bg: 'var(--bg-base)' },
  };

  return (
    <AppShell current="ponto" onNavigate={onNavigate}>
      <PageContainer
        title="Ponto Eletrônico"
        subtitle="Registros via app mobile com GPS · portaria 671/2021 MTE."
        actions={<>
          <select style={rhSelectStyle}>
            <option>Diego Almeida</option>
            {EMPLOYEES.slice(0, 10).map(e => <option key={e.id}>{e.nome}</option>)}
          </select>
          <select style={rhSelectStyle}><option>Abril/2026</option></select>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Espelho PDF</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="check" label="Dias trabalhados" value="10" sub="de 12 úteis"/>
          <Tile icon="clock" label="Horas no mês" value="80:45" delta="+1:25 extras" accent="rgba(139,92,246,.2)"/>
          <Tile icon="alert" label="Divergências" value="3" sub="1 atraso · 1 falta · 1 extra" accent="rgba(245,158,11,.2)"/>
          <Tile icon="wallet" label="Banco de horas" value="+04:12" sub="saldo acumulado"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 16, marginBottom: 18 }} className="gridE">
          <style>{`@media (max-width: 1100px) { .gridE { grid-template-columns: 1fr !important; } }`}</style>

          {/* Live batidas - card */}
          <div className="tile" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: '#22c55e', boxShadow: '0 0 0 4px rgba(34,197,94,.2)' }}/>
              <div className="sect-title">Batidas de hoje · 17/abr/2026</div>
              <span className="grow"/>
              <span className="chip chip-green">Ao vivo</span>
            </div>

            {/* Mini map with pin */}
            <div style={{ height: 160, background: '#0a0c18', position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--line-1)' }}>
              <svg viewBox="0 0 400 160" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: .6 }}>
                {[...Array(10)].map((_, i) => <line key={`h${i}`} x1="0" y1={i * 16} x2="400" y2={i * 16} stroke="#1a1f3a" strokeWidth=".5"/>)}
                {[...Array(25)].map((_, i) => <line key={`v${i}`} x1={i * 16} y1="0" x2={i * 16} y2="160" stroke="#1a1f3a" strokeWidth=".5"/>)}
                <path d="M 0,90 Q 100,70 180,80 T 400,70" fill="none" stroke="#334155" strokeWidth="10" opacity=".4"/>
                <path d="M 0,90 Q 100,70 180,80 T 400,70" fill="none" stroke="#475569" strokeWidth="1"/>
                <circle cx="200" cy="80" r="8" fill="var(--accent-1)" opacity=".3">
                  <animate attributeName="r" values="8;20;8" dur="2s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values=".3;0;.3" dur="2s" repeatCount="indefinite"/>
                </circle>
                <circle cx="200" cy="80" r="6" fill="var(--accent-1)"/>
                <text x="200" y="100" textAnchor="middle" fill="var(--text-1)" fontSize="9" fontFamily="var(--font-mono)">-19.9167, -43.9345</text>
              </svg>
              <div style={{ position: 'absolute', top: 10, left: 12, padding: '4px 8px', background: 'rgba(0,0,0,.5)', backdropFilter: 'blur(8px)', borderRadius: 6, fontSize: 10, color: 'var(--text-1)', fontFamily: 'var(--font-mono)' }}>
                📍 Matriz · 12m de precisão
              </div>
            </div>

            <div style={{ padding: 16 }}>
              {batidas.map((b, i) => {
                const labels = { entrada: 'Entrada', 'almoco-saida': 'Saída p/ almoço', 'almoco-volta': 'Retorno', saida: 'Saída' };
                const icons = { entrada: 'arrowDown', 'almoco-saida': 'arrowUp', 'almoco-volta': 'arrowDown', saida: 'arrowUp' };
                return (
                  <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: i < batidas.length - 1 ? '1px solid var(--line-1)' : 'none', alignItems: 'center' }}>
                    <span style={{ width: 34, height: 34, borderRadius: 9, background: b.status === 'extra' ? 'rgba(245,158,11,.16)' : 'rgba(34,197,94,.14)', color: b.status === 'extra' ? '#fcd34d' : '#86efac', display: 'grid', placeItems: 'center' }}>
                      <Icon name={icons[b.tipo]} size={14}/>
                    </span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{labels[b.tipo]}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{b.loc}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums', fontFamily: 'var(--font-mono)' }}>{b.hora}</div>
                      {b.foto && <span style={{ fontSize: 10, color: 'var(--accent-text)' }}><Icon name="check" size={9}/> Foto OK</span>}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Espelho table */}
          <div className="table-wrap">
            <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="sect-title">Espelho de ponto · abril/2026</div>
              <span className="grow"/>
              <span className="chip" style={{ fontSize: 11 }}>Dias 1–14</span>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Dia</th>
                  <th>Entrada</th>
                  <th>Almoço</th>
                  <th>Saída</th>
                  <th style={{ textAlign: 'right' }}>Total</th>
                  <th style={{ textAlign: 'right' }}>Extras</th>
                </tr>
              </thead>
              <tbody>
                {espelho.map(e => {
                  const ts = typeStyle[e.tipo];
                  return (
                    <tr key={e.dia} style={{ background: ts.bg }}>
                      <td style={{ fontVariantNumeric: 'tabular-nums' }}>
                        <b style={{ color: 'var(--text-0)' }}>{String(e.dia).padStart(2, '0')}</b>
                        <span style={{ color: 'var(--text-3)', fontSize: 11, marginLeft: 6 }}>{e.dow}</span>
                      </td>
                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: ts.c }}>{e.entrada}</td>
                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: ts.c }}>{e.almoco}</td>
                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: ts.c }}>{e.saida}</td>
                      <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: ts.c }}>{e.total}</td>
                      <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: e.extra === '—' ? 'var(--text-4)' : '#86efac' }}>{e.extra}</td>
                    </tr>
                  );
                })}
              </tbody>
              <tfoot>
                <tr style={{ background: 'var(--bg-3)', borderTop: '2px solid var(--line-2)' }}>
                  <td colSpan="4" style={{ fontWeight: 700, color: 'var(--text-0)' }}>TOTAL ABRIL</td>
                  <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>80:45</td>
                  <td style={{ textAlign: 'right', fontWeight: 700, color: '#86efac', fontVariantNumeric: 'tabular-nums' }}>+01:25</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 4. Folha CLT
// =============================================================
const PageFolha = ({ onNavigate }) => {
  const [step, setStep] = React.useState(3);
  const steps = [
    { id: 1, l: 'Período', i: 'calendar' },
    { id: 2, l: 'Funcionários', i: 'users' },
    { id: 3, l: 'Eventos', i: 'edit' },
    { id: 4, l: 'Conferência', i: 'check' },
    { id: 5, l: 'Fechamento', i: 'lock' },
  ];

  // Payroll calc: INSS progressive, IRRF simplified
  const calcINSS = (b) => {
    if (b <= 1412) return b * 0.075;
    if (b <= 2666.68) return 1412 * 0.075 + (b - 1412) * 0.09;
    if (b <= 4000.03) return 1412 * 0.075 + (2666.68 - 1412) * 0.09 + (b - 2666.68) * 0.12;
    if (b <= 7786.02) return 1412 * 0.075 + (2666.68 - 1412) * 0.09 + (4000.03 - 2666.68) * 0.12 + (b - 4000.03) * 0.14;
    return 908.86;
  };
  const calcIRRF = (b, inss, dep = 0) => {
    const base = b - inss - dep * 189.59;
    if (base <= 2259.20) return 0;
    if (base <= 2826.65) return base * 0.075 - 169.44;
    if (base <= 3751.05) return base * 0.15 - 381.44;
    if (base <= 4664.68) return base * 0.225 - 662.77;
    return base * 0.275 - 896.00;
  };

  const rows = EMPLOYEES.slice(0, 10).map(e => {
    const horasExtras = [0, 0, 0, 85, 0, 160, 0, 0, 120, 0][e.id % 10] || 0;
    const comissao = e.depto === 'Comercial' ? e.salario * 0.12 : 0;
    const proventos = e.salario + horasExtras + comissao;
    const inss = calcINSS(proventos);
    const irrf = Math.max(0, calcIRRF(proventos, inss, e.id === 1 ? 2 : 0));
    const fgts = proventos * 0.08;
    const vt = 220;
    const liquido = proventos - inss - irrf - vt;
    return { ...e, horasExtras, comissao, proventos, inss, irrf, fgts, vt, liquido };
  });

  const totais = rows.reduce((t, r) => ({
    proventos: t.proventos + r.proventos,
    inss: t.inss + r.inss,
    irrf: t.irrf + r.irrf,
    fgts: t.fgts + r.fgts,
    liquido: t.liquido + r.liquido,
  }), { proventos: 0, inss: 0, irrf: 0, fgts: 0, liquido: 0 });

  return (
    <AppShell current="folha" onNavigate={onNavigate}>
      <PageContainer
        title="Folha de Pagamento CLT"
        subtitle="Processamento mensal · competência abril/2026 · 17 funcionários CLT."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar holerites</button>
          <button className="btn btn-outline btn-sm"><Icon name="file" size={13}/> eSocial</button>
          <button className="btn btn-primary btn-sm"><Icon name="check" size={13}/> Aprovar folha</button>
        </>}
      >
        {/* Wizard stepper */}
        <div className="tile" style={{ marginBottom: 18, padding: '18px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
            {steps.map((s, i) => {
              const active = step === s.id;
              const done = step > s.id;
              return (
                <React.Fragment key={s.id}>
                  <button onClick={() => setStep(s.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderRadius: 10,
                    background: active ? 'var(--accent-soft-14)' : 'transparent',
                    border: active ? '1px solid var(--accent-soft-40)' : '1px solid transparent',
                  }}>
                    <span style={{
                      width: 32, height: 32, borderRadius: 8,
                      background: done ? 'var(--brand-gradient)' : active ? 'var(--accent-soft-20)' : 'var(--bg-3)',
                      color: done || active ? 'white' : 'var(--text-3)',
                      display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700,
                    }}>{done ? <Icon name="check" size={14}/> : s.id}</span>
                    <div style={{ textAlign: 'left' }}>
                      <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Etapa {s.id}</div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: active ? 'var(--text-0)' : done ? 'var(--text-1)' : 'var(--text-3)' }}>{s.l}</div>
                    </div>
                  </button>
                  {i < steps.length - 1 && <div style={{ flex: 1, height: 2, background: done ? 'var(--brand-gradient)' : 'var(--line-2)', margin: '0 4px' }}/>}
                </React.Fragment>
              );
            })}
          </div>
        </div>

        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="users" label="Funcionários" value="17" sub="17 CLT · 0 PJ na folha"/>
          <Tile icon="trending-up" label="Total proventos" value={BRL(totais.proventos)} delta="+R$ 4.820" sub="vs. março"/>
          <Tile icon="minus-circle" label="Total descontos" value={BRL(totais.inss + totais.irrf)} sub="INSS + IRRF"/>
          <Tile icon="wallet" label="Líquido a pagar" value={BRL(totais.liquido)} sub={`FGTS (8%): ${BRL(totais.fgts)}`} accent="rgba(34,197,94,.2)"/>
        </div>

        <div className="table-wrap">
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div className="sect-title">Folha detalhada · abril/2026</div>
            <span className="grow"/>
            <span className="chip chip-brand" style={{ fontSize: 11 }}>Pagamento: 05/05/2026</span>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Funcionário</th>
                <th style={{ textAlign: 'right' }}>Salário</th>
                <th style={{ textAlign: 'right' }}>H. Extras</th>
                <th style={{ textAlign: 'right' }}>Comissão</th>
                <th style={{ textAlign: 'right', color: '#86efac' }}>PROVENTOS</th>
                <th style={{ textAlign: 'right' }}>INSS</th>
                <th style={{ textAlign: 'right' }}>IRRF</th>
                <th style={{ textAlign: 'right' }}>VT</th>
                <th style={{ textAlign: 'right', color: '#fca5a5' }}>DESC.</th>
                <th style={{ textAlign: 'right' }}>FGTS</th>
                <th style={{ textAlign: 'right' }}>LÍQUIDO</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(r => (
                <tr key={r.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={r.nome} size={28}/>
                      <div>
                        <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{r.nome.split(' ').slice(0, 2).join(' ')}</div>
                        <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{r.cargo}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-1)' }}>{BRL(r.salario)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: r.horasExtras > 0 ? 'var(--text-1)' : 'var(--text-4)' }}>{r.horasExtras > 0 ? BRL(r.horasExtras) : '—'}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: r.comissao > 0 ? 'var(--text-1)' : 'var(--text-4)' }}>{r.comissao > 0 ? BRL(r.comissao) : '—'}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: '#86efac', fontWeight: 600 }}>{BRL(r.proventos)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: '#fca5a5' }}>-{BRL(r.inss)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: r.irrf > 0 ? '#fca5a5' : 'var(--text-4)' }}>{r.irrf > 0 ? '-' + BRL(r.irrf) : '—'}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: '#fca5a5' }}>-{BRL(r.vt)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: '#fca5a5', fontWeight: 600 }}>-{BRL(r.inss + r.irrf + r.vt)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-3)', fontSize: 11.5 }}>{BRL(r.fgts)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-0)', fontWeight: 700 }}>{BRL(r.liquido)}</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr style={{ background: 'var(--bg-3)', borderTop: '2px solid var(--line-2)' }}>
                <td style={{ fontWeight: 700, color: 'var(--text-0)' }}>TOTAIS</td>
                <td colSpan="3"/>
                <td style={{ textAlign: 'right', fontWeight: 700, color: '#86efac', fontVariantNumeric: 'tabular-nums' }}>{BRL(totais.proventos)}</td>
                <td style={{ textAlign: 'right', fontWeight: 700, color: '#fca5a5', fontVariantNumeric: 'tabular-nums' }}>-{BRL(totais.inss)}</td>
                <td style={{ textAlign: 'right', fontWeight: 700, color: '#fca5a5', fontVariantNumeric: 'tabular-nums' }}>-{BRL(totais.irrf)}</td>
                <td/>
                <td/>
                <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--text-1)', fontVariantNumeric: 'tabular-nums' }}>{BRL(totais.fgts)}</td>
                <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums', fontSize: 14 }}>{BRL(totais.liquido)}</td>
              </tr>
            </tfoot>
          </table>
        </div>

        <div style={{ display: 'flex', gap: 10, marginTop: 18, justifyContent: 'flex-end' }}>
          <button className="btn btn-outline">Voltar</button>
          <button className="btn btn-primary" onClick={() => setStep(Math.min(5, step + 1))}><Icon name="arrowRight" size={13}/> Avançar para Conferência</button>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 5. Ajustes Salariais
// =============================================================
const PageAjustes = ({ onNavigate }) => {
  const [selected, setSelected] = React.useState(EMPLOYEES[1]); // Bruno Tavares
  const hist = {
    1: [
      { data: '12/03/2019', tipo: 'admissao', de: 0, para: 3500, motivo: 'Admissão', por: 'Rafael Cardoso' },
      { data: '01/03/2020', tipo: 'dissidio', de: 3500, para: 3640, motivo: 'Dissídio coletivo 4%', por: 'Sistema' },
      { data: '15/07/2021', tipo: 'promocao', de: 3640, para: 5200, motivo: 'Promoção → Coordenadora', por: 'Rafael Cardoso' },
      { data: '01/03/2022', tipo: 'dissidio', de: 5200, para: 5512, motivo: 'Dissídio coletivo 6%', por: 'Sistema' },
      { data: '20/01/2023', tipo: 'merito', de: 5512, para: 6200, motivo: 'Mérito · avaliação excelente', por: 'Patrícia Gomes' },
      { data: '01/03/2023', tipo: 'dissidio', de: 6200, para: 6572, motivo: 'Dissídio coletivo 6%', por: 'Sistema' },
      { data: '08/08/2023', tipo: 'promocao', de: 6572, para: 7400, motivo: 'Promoção → Gerente Geral', por: 'Rafael Cardoso' },
      { data: '01/03/2024', tipo: 'dissidio', de: 7400, para: 7696, motivo: 'Dissídio coletivo 4%', por: 'Sistema' },
      { data: '01/01/2026', tipo: 'merito', de: 7696, para: 7800, motivo: 'Ajuste de mercado', por: 'Patrícia Gomes' },
    ],
    2: [
      { data: '05/06/2020', tipo: 'admissao', de: 0, para: 2200, motivo: 'Admissão', por: 'Rafael Cardoso' },
      { data: '01/03/2021', tipo: 'dissidio', de: 2200, para: 2310, motivo: 'Dissídio coletivo 5%', por: 'Sistema' },
      { data: '15/11/2021', tipo: 'merito', de: 2310, para: 2600, motivo: 'Mérito anual', por: 'Rafael Cardoso' },
      { data: '01/03/2022', tipo: 'dissidio', de: 2600, para: 2756, motivo: 'Dissídio coletivo 6%', por: 'Sistema' },
      { data: '22/06/2023', tipo: 'promocao', de: 2756, para: 3400, motivo: 'Promoção → Vendedor Sênior', por: 'Rafael Cardoso' },
      { data: '01/03/2024', tipo: 'dissidio', de: 3400, para: 3536, motivo: 'Dissídio coletivo 4%', por: 'Sistema' },
      { data: '12/10/2025', tipo: 'merito', de: 3536, para: 3800, motivo: 'Mérito · superou metas Q3', por: 'Patrícia Gomes' },
    ],
  };
  const changes = hist[selected.id] || [];
  const tipoStyle = {
    admissao: { l: 'Admissão', bg: 'rgba(59,130,246,.14)', c: '#93c5fd', i: 'user' },
    merito: { l: 'Mérito', bg: 'rgba(139,92,246,.14)', c: '#c4b5fd', i: 'award' },
    promocao: { l: 'Promoção', bg: 'rgba(34,197,94,.14)', c: '#86efac', i: 'trending-up' },
    dissidio: { l: 'Dissídio', bg: 'rgba(245,158,11,.14)', c: '#fcd34d', i: 'sync' },
  };

  return (
    <AppShell current="ajustes" onNavigate={onNavigate}>
      <PageContainer
        title="Ajustes Salariais"
        subtitle="Histórico completo de alterações · mérito, promoção, dissídio coletivo."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Novo ajuste</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="trending-up" label="Ajustes em 2026" value="14" sub="12 dissídios · 2 méritos"/>
          <Tile icon="award" label="Promoções 12m" value="3" sub="Mariana · Bruno · Ana"/>
          <Tile icon="wallet" label="Impacto 2026 na folha" value={BRL(4280)} delta="+4,8%" sub="vs. dez/2025"/>
          <Tile icon="calendar" label="Próximo dissídio" value="01/mar/2027" sub="em 10 meses"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 16 }} className="gridF">
          <style>{`@media (max-width: 1100px) { .gridF { grid-template-columns: 1fr !important; } }`}</style>
          {/* Employee list */}
          <div className="tile" style={{ padding: 0 }}>
            <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line-1)' }}>
              <div className="sect-title">Funcionários</div>
            </div>
            <div style={{ maxHeight: 600, overflowY: 'auto' }}>
              {EMPLOYEES.slice(0, 10).map(e => (
                <button key={e.id} onClick={() => setSelected(e)} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', width: '100%', textAlign: 'left',
                  background: selected.id === e.id ? 'var(--accent-soft-10)' : 'transparent',
                  borderLeft: `3px solid ${selected.id === e.id ? 'var(--accent-1)' : 'transparent'}`,
                  borderBottom: '1px solid var(--line-1)',
                }}>
                  <Avatar name={e.nome} size={30}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{e.nome.split(' ').slice(0, 2).join(' ')}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums' }}>{BRL(e.salario)}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Detail + chart */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="tile">
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
                <Avatar name={selected.nome} size={52}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-0)', letterSpacing: '-.01em' }}>{selected.nome}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--text-3)' }}>{selected.cargo} · admitido em {selected.admissao}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 10.5, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Salário atual</div>
                  <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-.01em' }}>{BRL(selected.salario)}</div>
                  {changes.length > 1 && (
                    <div style={{ fontSize: 11, color: '#86efac', fontWeight: 600 }}>
                      +{(((selected.salario - changes[0].para) / changes[0].para) * 100).toFixed(0)}% desde admissão
                    </div>
                  )}
                </div>
              </div>

              {/* Evolution chart */}
              <div style={{ height: 200, position: 'relative', background: 'var(--bg-1)', borderRadius: 10, padding: 16 }}>
                <svg viewBox="0 0 800 170" style={{ width: '100%', height: '100%' }} preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="salGrad" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="var(--accent-1)" stopOpacity=".3"/>
                      <stop offset="1" stopColor="var(--accent-1)" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  {(() => {
                    const vals = changes.slice(1).map(c => c.para);
                    const max = Math.max(...vals) * 1.1, min = Math.min(...vals) * 0.9;
                    const pts = vals.map((v, i) => [40 + i * ((720) / (vals.length - 1)), 150 - ((v - min) / (max - min)) * 130]);
                    const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
                    return <>
                      <path d={`${path} L${pts[pts.length-1][0]},150 L${pts[0][0]},150 Z`} fill="url(#salGrad)"/>
                      <path d={path} fill="none" stroke="var(--accent-1)" strokeWidth="2.5"/>
                      {pts.map((p, i) => {
                        const ch = changes[i + 1];
                        const ts = tipoStyle[ch.tipo];
                        return <g key={i}>
                          <circle cx={p[0]} cy={p[1]} r="5" fill="#0c0b1a" stroke={ts.c} strokeWidth="2"/>
                          <text x={p[0]} y={p[1] - 10} textAnchor="middle" fill="var(--text-1)" fontSize="9" fontFamily="var(--font-mono)">{BRLShort(ch.para).replace('R$ ', '')}</text>
                        </g>;
                      })}
                    </>;
                  })()}
                </svg>
              </div>
            </div>

            {/* Timeline */}
            <div className="tile">
              <div className="tile-head"><div className="sect-title">Histórico de alterações</div><span className="grow"/><span className="chip">{changes.length} registros</span></div>
              <div style={{ position: 'relative', paddingLeft: 32 }}>
                <div style={{ position: 'absolute', left: 14, top: 8, bottom: 8, width: 2, background: 'var(--line-2)' }}/>
                {[...changes].reverse().map((c, i) => {
                  const ts = tipoStyle[c.tipo];
                  const pct = c.de === 0 ? 100 : ((c.para - c.de) / c.de) * 100;
                  return (
                    <div key={i} style={{ position: 'relative', padding: '10px 0 14px 18px' }}>
                      <span style={{ position: 'absolute', left: -24, top: 10, width: 28, height: 28, borderRadius: 8, background: ts.bg, color: ts.c, display: 'grid', placeItems: 'center', border: '2px solid var(--bg-2)' }}>
                        <Icon name={ts.i} size={13}/>
                      </span>
                      <div style={{ display: 'flex', gap: 10, alignItems: 'start' }}>
                        <div style={{ flex: 1 }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                            <span className="chip" style={{ background: ts.bg, color: ts.c, fontSize: 10.5, fontWeight: 600 }}>{ts.l}</span>
                            <span style={{ fontSize: 11.5, color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums' }}>{c.data}</span>
                          </div>
                          <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 500, marginBottom: 2 }}>{c.motivo}</div>
                          <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Por {c.por}</div>
                        </div>
                        <div style={{ textAlign: 'right' }}>
                          {c.de > 0 && <div style={{ fontSize: 11, color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums', textDecoration: 'line-through' }}>{BRL(c.de)}</div>}
                          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{BRL(c.para)}</div>
                          {c.de > 0 && <div style={{ fontSize: 11, color: '#86efac', fontWeight: 600 }}>+{pct.toFixed(1)}%</div>}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

Object.assign(window, { EMPLOYEES, statusChipRH, deptColors, rhSelectStyle, PageFuncionarios, PageHorarios, PagePonto, PageFolha, PageAjustes });