// Workspace v2 — incorpora descobertas da reunião com Ana (28/04/2026)
// Mudanças: tabela de permanência mês a mês, alug vs aquis, peric/insal por obra,
// escalonamento de indiretos (0.30), rentabilidade por frente/obra/projeto,
// timeline com movimentação de frentes, alerta de impacto de preço,
// reajuste programado, versionamento, glossário do domínio.

const { useState: useS2, useMemo: useM2 } = React;

function fmt2(v, d=0) { return v == null || isNaN(v) ? '—' : Number(v).toLocaleString('pt-BR', {minimumFractionDigits:d, maximumFractionDigits:d}); }
function brl2(v) { return 'R$ ' + fmt2(v); }
function brl2k(v) {
  if (Math.abs(v) >= 1_000_000) return 'R$ ' + (v/1_000_000).toLocaleString('pt-BR',{maximumFractionDigits:2}) + ' M';
  if (Math.abs(v) >= 1_000) return 'R$ ' + (v/1_000).toLocaleString('pt-BR',{maximumFractionDigits:0}) + ' k';
  return brl2(v);
}

// Mapa de meses (8 = agosto, etc) — referência da Ana
const MESES = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

// Cronograma exemplo da reunião: Obra1 ago→mai, Obra2 ago→nov, Obra3 dez→abr (deslocada da O2), Obra4 a partir da O4
const CRONOGRAMA_DEMO = {
  obras: [
    { id: 'O-1', nome: 'Cais Norte', inicio: 7, fim: 12, frentes: [
      { id: 'F-1', nome: 'Frente A · Cais Norte', inicio: 7, fim: 12, color: '#22A94A' },
      { id: 'F-2', nome: 'Frente B · Cais Norte', inicio: 7, fim: 12, color: '#1a8a3c' },
    ]},
    { id: 'O-2', nome: 'Cais Sul (extensão)', inicio: 7, fim: 10, frentes: [
      { id: 'F-3', nome: 'Frente C · Cais Sul → Atracadouro', inicio: 7, fim: 15, color: '#0E2A47', desloca: true },
    ]},
    { id: 'O-3', nome: 'Atracadouro PR-3', inicio: 11, fim: 15, frentes: [
      { id: 'F-3', nome: '(continuação Frente C)', inicio: 11, fim: 15, color: '#0E2A47', virtual: true },
    ]},
    { id: 'O-4', nome: 'Píer Sul (mar)', inicio: 11, fim: 17, frentes: [
      { id: 'F-4', nome: 'Frente D · Píer (embarcada)', inicio: 11, fim: 17, color: '#d97706' },
    ]},
  ],
  meses: [{m:7,y:26},{m:8,y:26},{m:9,y:26},{m:10,y:26},{m:11,y:26},{m:12,y:26},{m:1,y:27},{m:2,y:27},{m:3,y:27},{m:4,y:27},{m:5,y:27}],
};

function WorkspaceV2({ initialTela = 'frente' }) {
  const [tela, setTela] = useS2(initialTela); // frente | margem | timeline | base | versoes
  return (
    <div data-screen-label="Workspace v2" style={{ display: 'flex', height: '100%', minHeight: 800, background: 'var(--d-bg)' }}>
      <SideV2 tela={tela} setTela={setTela}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <TopV2 tela={tela}/>
        <div style={{ flex: 1, overflow: 'auto', padding: 22 }} className="scroll">
          {tela === 'frente' && <EditorFrenteV2/>}
          {tela === 'margem' && <MargemValorVenda/>}
          {tela === 'timeline' && <TimelineGantt/>}
          {tela === 'base' && <BaseConhecimentoV2/>}
          {tela === 'versoes' && <VersoesMultiusuario/>}
          {tela === 'glossario' && <Glossario/>}
        </div>
      </div>
    </div>
  );
}

function SideV2({ tela, setTela }) {
  return (
    <aside style={{ width: 232, background: 'white', borderRight: '1px solid var(--d-border)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '16px 14px', borderBottom: '1px solid var(--d-border)' }}>
        <DUI.Logo small/>
        <div style={{ font: '600 9.5px/1 Inter', letterSpacing: '0.1em', color: 'var(--d-text-3)', textTransform: 'uppercase', marginTop: 8, paddingTop: 8, borderTop: '1px dashed var(--d-border)' }}>v2 · pós reunião Ana</div>
      </div>
      <div style={{ padding: '14px 8px', flex: 1, overflow: 'auto' }} className="scroll">
        <div style={{ padding: '10px 10px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ font: '600 10.5px/1 Inter', letterSpacing: '0.08em', color: 'var(--d-text-3)', textTransform: 'uppercase' }}>Orçamento atual</span>
        </div>
        <div style={{ padding: '0 10px 10px', font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)' }}>
          <div className="d-mono" style={{color: 'var(--d-text-2)'}}>P-2026-014</div>
          <div style={{ font: '600 13px/1.3 Inter', color: 'var(--d-text)', marginTop: 2 }}>Terminal Portuário Sul</div>
        </div>
        <DUI.NavItem icon="pile" label="Editor de Frente" active={tela==='frente'} onClick={()=>setTela('frente')}/>
        <DUI.NavItem icon="money" label="Margem & Valor venda" active={tela==='margem'} onClick={()=>setTela('margem')}/>
        <DUI.NavItem icon="clock" label="Cronograma · Gantt" active={tela==='timeline'} onClick={()=>setTela('timeline')}/>
        <DUI.NavItem icon="layers" label="Versões / Equipe" active={tela==='versoes'} onClick={()=>setTela('versoes')}/>

        <div style={{ font: '600 10.5px/1 Inter', letterSpacing: '0.08em', color: 'var(--d-text-3)', textTransform: 'uppercase', padding: '20px 10px 8px' }}>Sistema</div>
        <DUI.NavItem icon="book" label="Base de conhecimento" active={tela==='base'} onClick={()=>setTela('base')}/>
        <DUI.NavItem icon="info" label="Glossário do domínio" active={tela==='glossario'} onClick={()=>setTela('glossario')}/>
      </div>
      <div style={{ padding: '12px 14px', borderTop: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 100, background: '#22A94A', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 12px/1 Inter' }}>AN</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ font: '600 12.5px/1.2 Inter' }}>Ana</div>
          <div style={{ font: '500 11px/1.2 Inter', color: 'var(--d-text-3)' }}>Planejamento</div>
        </div>
      </div>
    </aside>
  );
}

function TopV2({ tela }) {
  const titulos = {
    frente: ['Frente F-1 · Cravação A — Berço 12-18', 'Cais Norte · Terminal Portuário Sul'],
    margem: ['Margem & Valor de Venda', 'Rentabilidade por frente, obra e projeto'],
    timeline: ['Cronograma do projeto', 'Movimentação de frentes entre obras'],
    base: ['Base de Conhecimento', 'Cadastros, reajustes e alertas de impacto'],
    versoes: ['Versões e equipe', 'Controle de revisões e usuários'],
    glossario: ['Glossário do domínio', 'Termos validados pela Ana'],
  };
  const [t1, t2] = titulos[tela] || titulos.frente;
  return (
    <header style={{ height: 60, background: 'white', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', padding: '0 22px', gap: 14 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: '600 16px/1.1 Inter', color: 'var(--d-text)' }}>{t1}</div>
        <div style={{ font: '500 12px/1 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>{t2}</div>
      </div>
      <span className="chip chip-warn"><span style={{display:'inline-block',width:6,height:6,borderRadius:100,background:'#d97706',marginRight:4}}/>RASCUNHO · v3</span>
      <button className="btn btn-sm"><DUI.Icon name="share" size={13}/>Comentar</button>
      <button className="btn btn-sm btn-primary"><DUI.Icon name="check" size={13}/>Salvar revisão</button>
    </header>
  );
}

/* ============================ EDITOR FRENTE V2 ============================ */
function EditorFrenteV2() {
  const [estacas, setEstacas] = useS2(168);
  const [equipes, setEquipes] = useS2(2);
  const [peric, setPeric] = useS2(true);
  const [insal, setInsal] = useS2(false);
  const [embarcada, setEmbarcada] = useS2(false);
  const [forneceMaterial, setForneceMaterial] = useS2(true);
  const [meses] = useS2([
    { fase: 'MOB', label: 'Ago/26' }, { fase: 'MOB', label: 'Set/26' },
    { fase: 'EXEC', label: 'Out/26' }, { fase: 'EXEC', label: 'Nov/26' },
    { fase: 'EXEC', label: 'Dez/26' }, { fase: 'EXEC', label: 'Jan/27' },
    { fase: 'EXEC', label: 'Fev/27' }, { fase: 'DESM', label: 'Mar/27' },
  ]);

  // Tabela de permanência mensal — equipe
  const equipeBase = [
    { cargo: 'Engº Produção', tipo:'I', mensal: [0.3,0.3,0.3,0.3,0.3,0.3,0.3,0.3], salario: 14000 },
    { cargo: 'Mestre de Obra', tipo:'D', mensal: [0.5,0.5,1,1,1,1,1,0.5], salario: 12000 },
    { cargo: 'Encarregado', tipo:'D', mensal: [1,1,equipes,equipes,equipes,equipes,equipes,1], salario: 8500 },
    { cargo: 'Op. Perfuratriz', tipo:'D', mensal: [0,0,equipes,equipes,equipes,equipes,equipes,0], salario: 5500 },
    { cargo: 'Op. Guindaste', tipo:'D-loc', mensal: [0,equipes,equipes,equipes,equipes,equipes,equipes,0], salario: 0, loc: true },
    { cargo: 'Soldador', tipo:'D', mensal: [0,1,2*equipes,2*equipes,2*equipes,2*equipes,2*equipes,1], salario: 4500 },
    { cargo: 'Apontador', tipo:'D', mensal: [0,1,equipes,equipes,equipes,equipes,equipes,1], salario: 3500 },
    { cargo: 'Ajudantes A+C', tipo:'D', mensal: [0,2,5*equipes,5*equipes,5*equipes,5*equipes,5*equipes,2], salario: 2650 },
    { cargo: 'Téc. Segurança', tipo:'D', mensal: [0.5,0.5,1,1,1,1,1,0.5], salario: 5500 },
    { cargo: 'Comprador', tipo:'I', mensal: [0,0,1,1,1,1,1,0], salario: 7000, soGrandeObra: true },
  ];

  const adicionalPeric = peric ? 0.30 : 0;
  const adicionalInsal = insal ? 0.20 : 0;

  const totalMOporMes = meses.map((_,mi) => {
    return equipeBase.reduce((s, l) => {
      if (l.loc) return s; // operador locado não vira salário
      const base = l.salario * (1 + adicionalPeric + adicionalInsal);
      const comEnc = base * 2.05; // encargos + dissídio
      return s + comEnc * l.mensal[mi];
    }, 0);
  });
  const totalMO = totalMOporMes.reduce((s,v)=>s+v,0);

  // Equipamentos com modo locação/aquisição
  const equipamentos = [
    { nome: 'Guindaste 100t', modo: 'Aluguel', mensal: [0,1,1,1,1,1,1,0], custo_mes: 95000 },
    { nome: 'Perfuratriz Wirth', modo: 'Aquisição', mensal: [0,1,1,1,1,1,1,0], custo_mes: 3150, aquisicao: 145000, mesAquisicao: 0 },
    { nome: 'Martelo vibratório', modo: 'Aluguel', mensal: [0,1,1,1,1,1,1,0], custo_mes: 18500 },
    { nome: 'Máq. solda + acessórios', modo: 'Aquisição', mensal: [0,2,2,2,2,2,2,0], custo_mes: 80, aquisicao: 4000, mesAquisicao: 1 },
    embarcada && { nome: 'Apoio náutico (cliente)', modo: 'Cliente', mensal: [0,0,1,1,1,1,1,0], custo_mes: 0 },
    embarcada && { nome: 'Balsa (locada)', modo: 'Aluguel', mensal: [0,1,1,1,1,1,1,0], custo_mes: 145000 },
  ].filter(Boolean);

  const totalEqporMes = meses.map((_,mi) => equipamentos.reduce((s,e) => {
    if (e.modo === 'Aquisição' && mi === e.mesAquisicao) return s + e.aquisicao;
    if (e.modo === 'Aluguel' || e.modo === 'Aquisição') return s + e.custo_mes * (e.mensal[mi]||0);
    return s;
  }, 0));
  const totalEq = totalEqporMes.reduce((s,v)=>s+v,0);

  // Materiais — alguns zerados se cliente fornece
  const materiais = [
    { nome: 'Eletrodo (E7018)', calc: '1.5 kg/m × 168 estacas × 35m × 1.5kg/m = 13.230 kg', total: 429975, zerado: false },
    { nome: 'Tricone Ø1300 (rocha)', calc: '7 unid / 100m × (168×35m) = 412 → joga nos 2 primeiros meses', total: 7416000, zerado: false, alerta: 'comprar cedo' },
    { nome: 'Diesel S10', calc: '1.000 L/mês × 2 equipes × 6 meses', total: 77400, zerado: false },
    { nome: 'Armação pré-montada', calc: 'Cliente fornece — apenas instalação', total: 0, zerado: true, fornecedor: 'cliente' },
    { nome: 'Concreto', calc: 'Cliente fornece — instalação inclusa', total: 0, zerado: true, fornecedor: 'cliente' },
  ].filter(m => forneceMaterial ? true : !m.zerado);

  const totalMat = materiais.reduce((s,m)=>s+m.total, 0);

  return (
    <div style={{ maxWidth: 1380, display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 380px', gap: 18 }}>
      <div>
        {/* Configuração geral da frente */}
        <Card2 title="Configuração da frente" icon="pile">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 16 }}>
            <Field2 label="Tipo de estaca">
              <select className="inp"><option>metálica Ø1300</option><option>metálica Ø1900</option><option>pré-moldada Ø60</option></select>
            </Field2>
            <Field2 label="Quantidade de estacas">
              <input type="number" className="inp inp-num" value={estacas} onChange={e=>setEstacas(+e.target.value)}/>
            </Field2>
            <Field2 label="Comprimento médio (m)">
              <input type="number" className="inp inp-num" defaultValue="35"/>
            </Field2>
            <Field2 label="Equipes simultâneas">
              <input type="number" className="inp inp-num" value={equipes} onChange={e=>setEquipes(+e.target.value)}/>
            </Field2>
          </div>

          {/* Flags de adicionais — Ana ressaltou que isso não pode duplicar cargos */}
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <FlagToggle on={peric} setOn={setPeric} label="Periculosidade" desc="+30% sobre salário" hint="próximo a gás/alta tensão"/>
            <FlagToggle on={insal} setOn={setInsal} label="Insalubridade" desc="+20% sobre salário" hint="trabalho insalubre"/>
            <FlagToggle on={embarcada} setOn={setEmbarcada} label="Obra embarcada" desc="balsa + apoio náutico" hint="execução no mar"/>
            <FlagToggle on={forneceMaterial} setOn={setForneceMaterial} label="Cliente fornece material" desc="armação/concreto zerados" hint="MO de instalação se mantém" inverted/>
          </div>
        </Card2>

        {/* Tabela de permanência — Mão de obra mês a mês */}
        <Card2 title="Tabela de permanência — Mão de obra" icon="user" subtitle="Quantidade alocada em cada mês. Indiretos podem ter escalonamento (0,3 = 30% do tempo).">
          <div style={{ overflow: 'auto' }} className="scroll">
            <table className="tbl" style={{ minWidth: '100%', tableLayout: 'fixed' }}>
              <thead>
                <tr>
                  <th style={{ width: 170, position:'sticky', left:0, background:'var(--d-bg)', zIndex:2 }}>Cargo</th>
                  <th style={{ width: 38 }}>Tipo</th>
                  {meses.map((m,i) => (
                    <th key={i} className="num" style={{ width: 56, padding: '6px 4px' }}>
                      <div style={{ font: '500 9px/1 Inter', color: m.fase === 'EXEC' ? '#22A94A' : m.fase === 'MOB' ? '#d97706' : '#7c8597', marginBottom: 2 }}>{m.fase}</div>
                      <div style={{ font: '600 10.5px/1 JetBrains Mono', color: 'var(--d-text-2)' }}>{m.label}</div>
                    </th>
                  ))}
                  <th className="num" style={{ width: 90 }}>Total</th>
                </tr>
              </thead>
              <tbody>
                {equipeBase.map((l, li) => {
                  const totalLinha = l.loc ? 0 : l.mensal.reduce((s,q,i) => s + q * l.salario * (1 + adicionalPeric + adicionalInsal) * 2.05, 0);
                  return (
                    <tr key={li}>
                      <td style={{ position:'sticky', left:0, background:'white', zIndex:1, fontWeight: 500 }}>
                        {l.cargo}
                        {l.loc && <span className="chip" style={{ height: 16, fontSize: 9, marginLeft: 6, padding: '0 5px' }}>LOC</span>}
                        {l.soGrandeObra && <span className="chip chip-warn" style={{ height: 16, fontSize: 9, marginLeft: 6, padding: '0 5px' }}>OBRA GRANDE</span>}
                      </td>
                      <td><span style={{ font: '600 10px/1 JetBrains Mono', color: l.tipo.startsWith('D') ? '#1a8a3c' : '#2363b8' }}>{l.tipo}</span></td>
                      {l.mensal.map((q, mi) => {
                        // Heatmap por linha: intensidade relativa ao máximo daquela linha
                        const linhaMax = Math.max(...l.mensal, 1);
                        const intensidade = q === 0 ? 0 : Math.max(0.18, q / linhaMax);
                        const isMobDesm = mi === 0 || mi === l.mensal.length - 1;
                        // Verde para EXEC, âmbar para MOB/DESM. Alpha cresce com intensidade.
                        const bg = q === 0 ? 'transparent'
                          : isMobDesm
                            ? `rgba(217, 119, 6, ${(intensidade * 0.32).toFixed(2)})`
                            : `rgba(34, 169, 74, ${(intensidade * 0.42).toFixed(2)})`;
                        const fg = q === 0 ? 'var(--d-text-4)'
                          : intensidade >= 0.7
                            ? (isMobDesm ? '#7a3f02' : '#0f5e26')
                            : 'var(--d-text)';
                        const fw = q === 0 ? 500 : (intensidade >= 0.7 ? 700 : intensidade >= 0.4 ? 600 : 500);
                        return (
                          <td key={mi} className="num" style={{ background: bg, font: `${fw} 11.5px/1 JetBrains Mono`, color: fg }} title={q === 0 ? 'sem alocação' : `${q} ${q === 1 ? 'pessoa' : 'pessoas'} · ${(intensidade*100).toFixed(0)}% do pico`}>
                            {q === 0 ? '—' : q.toFixed(q < 1 ? 2 : (q % 1 === 0 ? 0 : 1))}
                          </td>
                        );
                      })}
                      <td className="num" style={{ fontWeight: 600 }}>{l.loc ? '—' : brl2k(totalLinha)}</td>
                    </tr>
                  );
                })}
                <tr style={{ background: 'var(--d-bg)' }}>
                  <td style={{ position:'sticky', left:0, background:'var(--d-bg-2)', zIndex:1, fontWeight: 700 }} colSpan={2}>Total mensal</td>
                  {totalMOporMes.map((v, mi) => (
                    <td key={mi} className="num" style={{ font: '700 11px/1 JetBrains Mono', color: '#0E2A47' }}>{brl2k(v)}</td>
                  ))}
                  <td className="num" style={{ font: '800 12px/1 JetBrains Mono', color: '#22A94A' }}>{brl2k(totalMO)}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: 12, alignItems: 'center', flexWrap: 'wrap', font: '500 11px/1.4 Inter', color: 'var(--d-text-3)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              MOB/DESM
              <span style={{ display: 'inline-flex', height: 12, borderRadius: 2, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
                {[0.08, 0.16, 0.24, 0.32].map((a,i) => <span key={i} style={{ width: 14, height: '100%', background: `rgba(217, 119, 6, ${a})` }}/>)}
              </span>
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              EXEC
              <span style={{ display: 'inline-flex', height: 12, borderRadius: 2, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
                {[0.10, 0.20, 0.30, 0.42].map((a,i) => <span key={i} style={{ width: 14, height: '100%', background: `rgba(34, 169, 74, ${a})` }}/>)}
              </span>
              <span style={{ font: '500 10px/1 Inter', color: 'var(--d-text-4)' }}>baixa → alta alocação</span>
            </span>
            <span><strong>D</strong> = Direto · <strong>I</strong> = Indireto · <strong>LOC</strong> = vem incluso na locação (conta no quadro p/ refeição/aloj)</span>
          </div>
        </Card2>

        {/* Equipamentos com aluguel/aquisição */}
        <Card2 title="Equipamentos — permanência e modo de aquisição" icon="truck"
          subtitle="Locação distribui pelo período de uso. Aquisição concentra no mês de compra (rateado entre obras futuras).">
          <table className="tbl">
            <thead>
              <tr>
                <th>Equipamento</th>
                <th>Modo</th>
                {meses.map((m,i) => <th key={i} className="num" style={{padding:'6px 4px'}}><div style={{font:'500 10px/1 JetBrains Mono'}}>{m.label.split('/')[0]}</div></th>)}
                <th className="num">Total</th>
              </tr>
            </thead>
            <tbody>
              {equipamentos.map((e, ei) => {
                const total = meses.reduce((s,_,mi) => {
                  if (e.modo === 'Aquisição' && mi === e.mesAquisicao) return s + e.aquisicao;
                  return s + (e.custo_mes || 0) * (e.mensal[mi]||0);
                }, 0);
                return (
                  <tr key={ei}>
                    <td style={{fontWeight: 500}}>{e.nome}</td>
                    <td><ModoChip2 modo={e.modo}/></td>
                    {e.mensal.map((q,mi) => {
                      const isAquis = e.modo === 'Aquisição' && mi === e.mesAquisicao;
                      const valor = isAquis ? e.aquisicao : (q ? e.custo_mes * q : 0);
                      return (
                        <td key={mi} className="num" style={{
                          background: isAquis ? '#fef3e6' : (q ? '#f0fbf3' : 'transparent'),
                          font: '500 10.5px/1 JetBrains Mono',
                          color: valor === 0 ? 'var(--d-text-4)' : (isAquis ? '#a46a02' : 'var(--d-text)'),
                          fontWeight: isAquis ? 700 : 500,
                        }}>
                          {valor === 0 ? '—' : brl2k(valor)}
                        </td>
                      );
                    })}
                    <td className="num" style={{fontWeight:600}}>{brl2k(total)}</td>
                  </tr>
                );
              })}
              <tr style={{ background: 'var(--d-bg)' }}>
                <td colSpan={2} style={{fontWeight:700}}>Total mensal</td>
                {totalEqporMes.map((v,mi) => (
                  <td key={mi} className="num" style={{font:'700 10.5px/1 JetBrains Mono', color: '#0E2A47'}}>{brl2k(v)}</td>
                ))}
                <td className="num" style={{font:'800 12px/1 JetBrains Mono', color:'#22A94A'}}>{brl2k(totalEq)}</td>
              </tr>
            </tbody>
          </table>
        </Card2>

        {/* Materiais com lógica de "zerado" */}
        <Card2 title="Materiais e ferramentas" icon="pkg" subtitle="Itens que o cliente fornece aparecem zerados, mas continuam visíveis para o sistema lembrar da MO de instalação.">
          <table className="tbl">
            <thead><tr><th>Material</th><th>Cálculo</th><th className="num">Total</th><th></th></tr></thead>
            <tbody>
              {materiais.map((m, mi) => (
                <tr key={mi} style={{ opacity: m.zerado ? 0.65 : 1 }}>
                  <td style={{fontWeight: 500}}>
                    {m.nome}
                    {m.alerta && <span className="chip chip-warn" style={{height:16, fontSize:9, marginLeft:6, padding:'0 5px'}}>{m.alerta}</span>}
                    {m.zerado && <span className="chip" style={{height:16, fontSize:9, marginLeft:6, padding:'0 5px', background:'#e8effa', color:'#1d4f97'}}>FORNECIDO POR {m.fornecedor.toUpperCase()}</span>}
                  </td>
                  <td className="d-mono" style={{font:'500 11px/1.4 JetBrains Mono', color:'var(--d-text-3)'}}>{m.calc}</td>
                  <td className="num" style={{fontWeight:600, color: m.zerado ? 'var(--d-text-3)' : 'var(--d-text)'}}>{brl2(m.total)}</td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>

        {/* Memória de cálculo */}
        <Card2 title="Memória de cálculo" icon="calc" subtitle="Cotações e cálculos auxiliares. Espelho da aba homônima da planilha da Ana.">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            <Field2 label="Cidade origem"><input className="inp" defaultValue="Sertãozinho / SP"/></Field2>
            <Field2 label="Cidade obra"><input className="inp" defaultValue="Santos / SP"/></Field2>
            <Field2 label="Distância (km)"><input className="inp inp-num" defaultValue="386"/></Field2>
            <Field2 label="Cotação frete (carreta seca)"><input className="inp inp-num" defaultValue="21.500"/></Field2>
            <Field2 label="Diesel R$/L (atual)" hint="puxa da Base de Conhecimento"><input className="inp inp-num" defaultValue="6,45"/></Field2>
            <Field2 label="Eletrodo R$/kg"><input className="inp inp-num" defaultValue="32,50"/></Field2>
            <Field2 label="Tricones — pedir importado?" hint="3 meses de antecipação"><select className="inp"><option>Sim — joga nos 2 primeiros meses</option><option>Não — comprar no Brasil</option></select></Field2>
            <Field2 label="Combustível — responsável"><select className="inp"><option>Destaca</option><option>Cliente fornece (zerar)</option></select></Field2>
          </div>
        </Card2>
      </div>

      {/* Painel direito */}
      <div style={{ position: 'sticky', top: 0, alignSelf: 'flex-start', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 18px', background: '#0E2A47', color: 'white' }}>
            <div style={{ font: '500 11px/1 Inter', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.6)' }}>Custo da frente</div>
            <div className="d-mono" style={{ font: '700 28px/1.05 JetBrains Mono', marginTop: 8 }}>{brl2k(totalMO + totalEq + totalMat)}</div>
            <div style={{ font: '500 11.5px/1.4 Inter', color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{meses.length} meses · ago/26 → mar/27</div>
          </div>
          <div style={{ padding: 14 }}>
            <SumLine label="Mão de obra" v={totalMO} pct={totalMO/(totalMO+totalEq+totalMat)*100} color="#0E2A47"/>
            <SumLine label="Equipamentos" v={totalEq} pct={totalEq/(totalMO+totalEq+totalMat)*100} color="#22A94A"/>
            <SumLine label="Materiais" v={totalMat} pct={totalMat/(totalMO+totalEq+totalMat)*100} color="#d97706"/>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--d-border)' }}>
              <SumLine label="Indiretos (alim+aloj+EPI)" v={420000} pct={null} color="#7c8597"/>
              <SumLine label="Mob/desmob equipamentos" v={143200} pct={null} color="#7c8597"/>
              <SumLine label="Baixada (60d)" v={28000} pct={null} color="#7c8597"/>
            </div>
          </div>
        </div>

        {/* Receita do bolo */}
        <div className="card" style={{ padding: 14, background: 'linear-gradient(135deg, #fff8e6, white)' }}>
          <div style={{ font: '600 11px/1 Inter', color: '#a46a02', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <DUI.Icon name="sparkle" size={12}/> Receita do bolo
          </div>
          <div style={{ font: '500 12.5px/1.5 Inter', color: 'var(--d-text-2)', marginBottom: 10 }}>
            Frente parecida orçada antes? Copie a estrutura.
          </div>
          {[
            { id: 'P-2025-038', nome: 'Píer Itaqui — F2', sim: 92 },
            { id: 'P-2024-021', nome: 'Cais Pecém — F1', sim: 81 },
            { id: 'P-2025-009', nome: 'Subest. Itu — F1', sim: 68 },
          ].map(r => (
            <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderTop: '1px solid rgba(0,0,0,0.05)', cursor: 'pointer' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="d-mono" style={{ font: '500 10.5px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>{r.id}</div>
                <div style={{ font: '600 12px/1.3 Inter' }}>{r.nome}</div>
              </div>
              <div style={{ font: '700 11.5px/1 Inter', color: r.sim > 85 ? '#1a8a3c' : 'var(--d-text-2)' }}>{r.sim}%<div style={{font:'500 9px/1 Inter', color:'var(--d-text-3)', marginTop:3, textAlign:'right'}}>match</div></div>
              <DUI.Icon name="chevR" size={13} style={{color: 'var(--d-text-4)'}}/>
            </div>
          ))}
        </div>

        {/* Alerta de impacto */}
        <div className="card" style={{ padding: 14, borderLeft: '3px solid #d97706' }}>
          <div style={{ font: '600 11px/1 Inter', color: '#d97706', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
            <DUI.Icon name="bell" size={12}/> Impacto detectado
          </div>
          <div style={{ font: '500 12px/1.5 Inter', color: 'var(--d-text-2)' }}>
            Diesel subiu de R$ 6,15 → <strong style={{color:'#d97706'}}>R$ 6,45</strong> em 28/04. Esta frente foi recalculada (+R$ 3.600).
          </div>
          <button className="btn btn-sm" style={{ marginTop: 8, width: '100%' }}><DUI.Icon name="eye" size={12}/>Ver outros 7 projetos afetados</button>
        </div>
      </div>
    </div>
  );
}

function FlagToggle({ on, setOn, label, desc, hint, inverted }) {
  const active = inverted ? !on : on;
  return (
    <button onClick={() => setOn(!on)} style={{
      flex: '1 1 200px', minWidth: 200, padding: '10px 12px', textAlign: 'left',
      border: '1.5px solid', borderColor: on ? '#22A94A' : 'var(--d-border)',
      borderRadius: 8, background: on ? '#f0fbf3' : 'white', cursor: 'pointer', font: 'inherit',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 28, height: 16, borderRadius: 100, background: on ? '#22A94A' : 'var(--d-border-strong)', position: 'relative', flex: 'none' }}>
          <div style={{ position: 'absolute', top: 2, left: on ? 14 : 2, width: 12, height: 12, borderRadius: 100, background: 'white', transition: 'left 0.15s' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ font: '600 12.5px/1.2 Inter', color: on ? '#1a8a3c' : 'var(--d-text)' }}>{label}</div>
          <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 2 }}>{desc}</div>
        </div>
      </div>
      <div style={{ font: '500 10.5px/1.3 Inter', color: 'var(--d-text-4)', marginTop: 6, paddingLeft: 36 }}>{hint}</div>
    </button>
  );
}

function ModoChip2({ modo }) {
  const map = {
    'Aluguel': { bg: '#e6f5ea', fg: '#1a8a3c' },
    'Aquisição': { bg: '#fef3e6', fg: '#a46a02' },
    'Cliente': { bg: '#e8effa', fg: '#1d4f97' },
  };
  const s = map[modo] || map['Aluguel'];
  return <span className="chip" style={{ background: s.bg, color: s.fg, height: 18, padding:'0 6px', fontSize:10 }}>{modo === 'Cliente' ? 'CLIENTE' : modo.toUpperCase()}</span>;
}

function Card2({ title, subtitle, icon, actions, children }) {
  return (
    <div className="card" style={{ padding: 0, marginBottom: 14 }}>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            {icon && <DUI.Icon name={icon} size={15} style={{ color: 'var(--d-text-3)' }}/>}
            <h3 style={{ margin: 0, font: '600 13.5px/1 Inter' }}>{title}</h3>
          </div>
          {subtitle && <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)', marginTop: 5 }}>{subtitle}</div>}
        </div>
        {actions && <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>{actions}</div>}
      </div>
      <div style={{ padding: 18 }}>{children}</div>
    </div>
  );
}
function Field2({ label, hint, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ font: '600 11.5px/1 Inter', color: 'var(--d-text-2)' }}>{label}</span>
      {children}
      {hint && <span style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)' }}>{hint}</span>}
    </label>
  );
}
function SumLine({ label, v, pct, color }) {
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{ font: '500 12px/1 Inter', flex: 1 }}>{label}</span>
        <span className="d-mono" style={{ font: '600 12px/1 JetBrains Mono' }}>{brl2k(v)}</span>
        {pct != null && <span style={{ font: '500 10.5px/1 Inter', color: 'var(--d-text-3)', width: 36, textAlign: 'right' }}>{pct.toFixed(1)}%</span>}
      </div>
      {pct != null && (
        <div style={{ height: 3, background: 'var(--d-bg-2)', borderRadius: 100, marginTop: 4 }}>
          <div style={{ height: '100%', width: pct + '%', background: color, borderRadius: 100 }}/>
        </div>
      )}
    </div>
  );
}

/* ============================ MARGEM & VALOR DE VENDA ============================ */
function MargemValorVenda() {
  // Risco: cliente fechar só obra menor → empresa fica deficitária
  const [margens, setMargens] = useS2({ 'F-1': 35, 'F-2': 35, 'F-3': 28, 'F-4': 45 });
  const frentes = [
    { id: 'F-1', obra: 'Cais Norte', nome: 'Cravação A — Berço 12-18', custo: 4850000 },
    { id: 'F-2', obra: 'Cais Norte', nome: 'Cravação B — Berço 19-24', custo: 3920000 },
    { id: 'F-3', obra: 'Cais Sul → Atracadouro', nome: 'Frente C (deslocada)', custo: 6240000 },
    { id: 'F-4', obra: 'Píer Sul (mar)', nome: 'Frente D — embarcada', custo: 5680000 },
  ];

  const obras = {};
  frentes.forEach(f => {
    if (!obras[f.obra]) obras[f.obra] = { custo: 0, venda: 0 };
    const venda = f.custo * (1 + margens[f.id]/100);
    obras[f.obra].custo += f.custo;
    obras[f.obra].venda += venda;
  });
  const totalCusto = frentes.reduce((s,f)=>s+f.custo,0);
  const totalVenda = frentes.reduce((s,f)=>s+f.custo*(1+margens[f.id]/100),0);
  const margemTotal = (totalVenda - totalCusto) / totalCusto * 100;

  return (
    <div style={{ maxWidth: 1280 }}>
      {/* Topo: KPIs */}
      <div className="card" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 18 }}>
        <DUI.Kpi label="Custo total" value={brl2k(totalCusto)} sub="soma das frentes"/>
        <DUI.Kpi label="Valor de venda" value={brl2k(totalVenda)} accent="#22A94A"/>
        <DUI.Kpi label="Lucro projetado" value={brl2k(totalVenda - totalCusto)} sub={`${margemTotal.toFixed(1)}% sobre custo`}/>
        <DUI.Kpi label="Risco se só F-3 fechar" value="−R$ 1,4 M" accent="#c8302a" sub="frente carregadora"/>
      </div>

      {/* Calculadora reversa */}
      <Card2 title="Calculadora reversa — atingir margem alvo" icon="calc"
        subtitle="Cliente quer rentabilidade X? Sistema calcula o valor de venda em segundos.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, alignItems: 'flex-end' }}>
          <Field2 label="Custo apurado da frente"><input className="inp inp-num" defaultValue="4.850.000" disabled style={{background:'var(--d-bg-2)'}}/></Field2>
          <Field2 label="Margem alvo (%)"><input className="inp inp-num" defaultValue="35"/></Field2>
          <div className="card" style={{ padding: '10px 14px', boxShadow: 'none', background: 'var(--d-green-soft)' }}>
            <div style={{ font: '600 11px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Valor de venda sugerido</div>
            <div className="d-mono" style={{ font: '800 22px/1 JetBrains Mono', color: '#1a8a3c', marginTop: 5 }}>R$ 6.547.500</div>
            <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>já considerando seguro 1,2% sobre venda</div>
          </div>
        </div>
      </Card2>

      {/* Tabela: Margem por frente */}
      <Card2 title="Margem por frente — protege contra glosa de obra" icon="layers"
        subtitle="A obra grande pode 'carregar' o lucro. Se o cliente fecha só a menor, lucro vai a zero. Cada frente precisa ser viável sozinha.">
        <table className="tbl">
          <thead><tr>
            <th>Frente</th>
            <th>Obra</th>
            <th className="num">Custo</th>
            <th style={{ width: 240 }}>Margem (%)</th>
            <th className="num">Valor venda</th>
            <th className="num">Lucro</th>
            <th>Status</th>
          </tr></thead>
          <tbody>
            {frentes.map(f => {
              const m = margens[f.id];
              const venda = f.custo * (1 + m/100);
              const lucro = venda - f.custo;
              const status = m < 25 ? { l: 'risco', c: '#c8302a' } : m < 35 ? { l: 'aceitável', c: '#d97706' } : { l: 'saudável', c: '#22A94A' };
              return (
                <tr key={f.id}>
                  <td>
                    <div className="d-mono" style={{ font: '500 11px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>{f.id}</div>
                    <div style={{ fontWeight: 600, marginTop: 2 }}>{f.nome}</div>
                  </td>
                  <td style={{ color: 'var(--d-text-2)' }}>{f.obra}</td>
                  <td className="num">{brl2k(f.custo)}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <input type="range" min="0" max="60" value={m} onChange={e=>setMargens({...margens, [f.id]: +e.target.value})} style={{ flex: 1, accentColor: status.c }}/>
                      <span className="d-mono" style={{ font: '700 13px/1 JetBrains Mono', color: status.c, width: 38, textAlign: 'right' }}>{m}%</span>
                    </div>
                  </td>
                  <td className="num" style={{ fontWeight: 600 }}>{brl2k(venda)}</td>
                  <td className="num" style={{ color: '#22A94A', fontWeight: 600 }}>{brl2k(lucro)}</td>
                  <td><span className="chip" style={{ background: status.c+'22', color: status.c, height: 18, fontSize: 10 }}>{status.l.toUpperCase()}</span></td>
                </tr>
              );
            })}
            <tr style={{ background: 'var(--d-bg)' }}>
              <td colSpan={2} style={{ fontWeight: 700 }}>Total do projeto</td>
              <td className="num" style={{ fontWeight: 700 }}>{brl2k(totalCusto)}</td>
              <td className="num d-mono" style={{ fontWeight: 700, color: '#22A94A' }}>{margemTotal.toFixed(1)}%</td>
              <td className="num" style={{ fontWeight: 700 }}>{brl2k(totalVenda)}</td>
              <td className="num" style={{ fontWeight: 700, color: '#22A94A' }}>{brl2k(totalVenda - totalCusto)}</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </Card2>

      {/* Análise de glosa */}
      <Card2 title="Análise de glosa — e se o cliente fechar só parte?" icon="info">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {[
            { titulo: 'Cenário A — fecha tudo', frentes: ['F-1','F-2','F-3','F-4'], cor: '#22A94A' },
            { titulo: 'Cenário B — fecha só Cais Norte', frentes: ['F-1','F-2'], cor: '#0E2A47' },
            { titulo: 'Cenário C — fecha só F-3 (deslocada)', frentes: ['F-3'], cor: '#d97706', alerta: 'frente carregadora — lucro mínimo' },
            { titulo: 'Cenário D — fecha só F-4 (embarcada)', frentes: ['F-4'], cor: '#0E2A47' },
          ].map((c, ci) => {
            const fs = frentes.filter(f => c.frentes.includes(f.id));
            const cu = fs.reduce((s,f)=>s+f.custo,0);
            const vd = fs.reduce((s,f)=>s+f.custo*(1+margens[f.id]/100),0);
            return (
              <div key={ci} className="card" style={{ padding: 14, boxShadow: 'none', borderLeft: '3px solid '+c.cor }}>
                <div style={{ font: '600 13px/1.3 Inter', marginBottom: 6 }}>{c.titulo}</div>
                <div style={{ display: 'flex', gap: 14, font: '500 11.5px/1 Inter', color: 'var(--d-text-3)' }}>
                  <span>Custo: <strong className="d-mono" style={{color:'var(--d-text)'}}>{brl2k(cu)}</strong></span>
                  <span>Venda: <strong className="d-mono" style={{color:'var(--d-text)'}}>{brl2k(vd)}</strong></span>
                  <span style={{marginLeft:'auto'}}>Margem: <strong className="d-mono" style={{color:c.cor}}>{((vd-cu)/cu*100).toFixed(1)}%</strong></span>
                </div>
                {c.alerta && <div style={{ marginTop: 8, padding: '6px 10px', background: '#fef3e6', borderRadius: 4, font: '500 11px/1.4 Inter', color: '#a46a02' }}>⚠ {c.alerta}</div>}
              </div>
            );
          })}
        </div>
      </Card2>
    </div>
  );
}

/* ============================ TIMELINE / GANTT ============================ */
function TimelineGantt() {
  const meses = ['Ago/26','Set/26','Out/26','Nov/26','Dez/26','Jan/27','Fev/27','Mar/27','Abr/27','Mai/27','Jun/27'];
  const linhas = [
    { tipo: 'obra', nome: 'Obra 1 · Cais Norte', start: 0, end: 7, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', nome: 'F-1 · Frente A', start: 0, end: 7, cor: '#22A94A', obra: 1 },
    { tipo: 'frente', nome: 'F-2 · Frente B', start: 0, end: 7, cor: '#1a8a3c', obra: 1 },
    { tipo: 'obra', nome: 'Obra 2 · Cais Sul (extensão)', start: 0, end: 4, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', nome: 'F-3 · Frente C', start: 0, end: 4, cor: '#0E2A47', obra: 2, deslocaPara: 5 },
    { tipo: 'obra', nome: 'Obra 3 · Atracadouro PR-3', start: 4, end: 10, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', nome: 'F-3 · (continuação Frente C)', start: 4, end: 10, cor: '#0E2A47', obra: 3, virtual: true },
    { tipo: 'obra', nome: 'Obra 4 · Píer Sul (embarcada)', start: 4, end: 11, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', nome: 'F-4 · Frente D', start: 4, end: 11, cor: '#d97706', obra: 4 },
  ];
  const colW = 84;
  const rowH = 38;
  const labelW = 280;

  return (
    <div style={{ maxWidth: 1380 }}>
      <Card2 title="Cronograma do projeto" icon="clock"
        subtitle="Frente C termina na Obra 2 e é deslocada para a Obra 3 — equipe completa migra. Setas tracejadas indicam movimentação.">
        {/* Header de meses */}
        <div style={{ display: 'flex', borderBottom: '1px solid var(--d-border)', position: 'sticky', top: 0, background: 'white', zIndex: 2 }}>
          <div style={{ width: labelW, padding: '8px 12px', font: '600 11px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Obra / Frente</div>
          <div style={{ flex: 1, display: 'flex' }}>
            {meses.map((m, i) => (
              <div key={i} style={{ width: colW, padding: '8px 0', textAlign: 'center', font: '600 10.5px/1 JetBrains Mono', color: 'var(--d-text-2)', borderLeft: '1px solid var(--d-border)' }}>{m}</div>
            ))}
          </div>
        </div>
        {/* Linhas */}
        <div style={{ position: 'relative' }}>
          {linhas.map((l, li) => (
            <div key={li} style={{ display: 'flex', height: rowH, borderBottom: '1px solid var(--d-border)', alignItems: 'center', background: l.tipo === 'obra' ? '#fafbfc' : 'white' }}>
              <div style={{ width: labelW, padding: '0 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
                {l.tipo === 'obra' ? <DUI.Icon name="layers" size={14} style={{color: 'var(--d-navy)'}}/> : <DUI.Icon name="pile" size={13} style={{color: 'var(--d-text-3)'}}/>}
                <span style={{ font: l.tipo === 'obra' ? '600 12.5px/1.2 Inter' : '500 12px/1.2 Inter', color: l.virtual ? 'var(--d-text-3)' : 'var(--d-text)', fontStyle: l.virtual ? 'italic' : 'normal' }}>{l.nome}</span>
              </div>
              <div style={{ flex: 1, position: 'relative', height: '100%' }}>
                {meses.map((_,i) => <div key={i} style={{ position:'absolute', left: i*colW, top: 0, bottom: 0, width: 1, background: 'var(--d-border)' }}/>)}
                <div style={{
                  position: 'absolute',
                  left: l.start * colW + 4,
                  width: (l.end - l.start) * colW - 8,
                  top: l.tipo === 'obra' ? 4 : 8,
                  height: l.tipo === 'obra' ? rowH - 8 : rowH - 16,
                  background: l.cor,
                  borderRadius: l.tipo === 'obra' ? 4 : 100,
                  border: l.virtual ? '1.5px dashed '+l.cor : 'none',
                  backgroundImage: l.virtual ? 'repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 8px)' : 'none',
                  display: 'flex', alignItems: 'center', justifyContent: l.tipo === 'frente' ? 'center' : 'flex-start',
                  paddingLeft: l.tipo === 'obra' ? 10 : 0,
                  font: '600 11px/1 Inter',
                  color: l.tipo === 'frente' ? 'white' : 'var(--d-text-2)',
                }}>
                  {l.tipo === 'obra' && <span>{l.nome.split('·')[0].trim()}</span>}
                  {l.tipo === 'frente' && !l.virtual && <span>{l.nome.split('·')[1]?.trim() || l.nome}</span>}
                  {l.virtual && <span style={{color: 'rgba(255,255,255,0.85)'}}>continuação →</span>}
                </div>
                {/* Seta de deslocamento */}
                {l.deslocaPara && (
                  <svg style={{ position: 'absolute', left: l.end*colW - 8, top: rowH - 4, width: (l.deslocaPara-l.end)*colW + 16, height: rowH*3, pointerEvents: 'none', overflow: 'visible' }}>
                    <path d={`M 0 0 Q ${(l.deslocaPara-l.end)*colW/2} 0, ${(l.deslocaPara-l.end)*colW/2} ${rowH*1.5} T ${(l.deslocaPara-l.end)*colW + 8} ${rowH*3 - 14}`} stroke="#0E2A47" strokeWidth="1.5" strokeDasharray="4 3" fill="none"/>
                    <polygon points={`${(l.deslocaPara-l.end)*colW + 4},${rowH*3 - 18} ${(l.deslocaPara-l.end)*colW + 12},${rowH*3 - 14} ${(l.deslocaPara-l.end)*colW + 4},${rowH*3 - 10}`} fill="#0E2A47"/>
                  </svg>
                )}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 18, marginTop: 14, font: '500 11px/1.4 Inter', color: 'var(--d-text-3)' }}>
          <span><span style={{display:'inline-block',width:24,height:8,background:'#22A94A',borderRadius:100,verticalAlign:'middle',marginRight:6}}/>Frente em terra</span>
          <span><span style={{display:'inline-block',width:24,height:8,background:'#d97706',borderRadius:100,verticalAlign:'middle',marginRight:6}}/>Frente embarcada</span>
          <span><span style={{display:'inline-block',width:24,height:8,backgroundImage:'repeating-linear-gradient(45deg, #0E2A47, #0E2A47 2px, transparent 2px, transparent 4px)',borderRadius:100,verticalAlign:'middle',marginRight:6}}/>Continuação (frente deslocada)</span>
          <span style={{marginLeft:'auto'}}>Setas tracejadas: equipe migra entre obras</span>
        </div>
      </Card2>
    </div>
  );
}

/* ============================ BASE V2 ============================ */
function BaseConhecimentoV2() {
  const [tab, setTab] = useS2('cargos');
  const [novoCargo, setNovoCargo] = useS2(false);
  const tabs = [
    { id: 'cargos', label: 'Cargos & Reajustes', icon: 'user' },
    { id: 'equip', label: 'Equipamentos', icon: 'truck' },
    { id: 'mat', label: 'Materiais & insumos', icon: 'pkg' },
    { id: 'alertas', label: 'Alertas de impacto', icon: 'bell' },
    { id: 'reajustes', label: 'Reajustes programados', icon: 'clock' },
  ];
  return (
    <div style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--d-border)', marginBottom: 16 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={()=>setTab(t.id)} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '10px 14px', font: '500 13px/1 Inter',
            color: tab === t.id ? 'var(--d-text)' : 'var(--d-text-3)',
            borderBottom: '2px solid', borderColor: tab === t.id ? '#22A94A' : 'transparent',
            display: 'flex', alignItems: 'center', gap: 7, marginBottom: -1,
          }}>
            <DUI.Icon name={t.icon} size={14}/>{t.label}
          </button>
        ))}
      </div>

      {tab === 'cargos' && (
        <Card2 title="Cargos · valores base + adicionais por flag de obra" icon="user"
          subtitle='Periculosidade e insalubridade são FLAGS por obra, não duplicam o cargo. "Tudo é variável" — Ana.'
          actions={<button className="btn btn-primary btn-sm" onClick={()=>setNovoCargo(true)}><DUI.Icon name="plus" size={12}/>Novo cargo</button>}>
          <table className="tbl">
            <thead><tr><th>Cargo</th><th>Tipo</th><th className="num">Salário base</th><th className="num">Encargos</th><th className="num">+Peric.</th><th className="num">+Insal.</th><th className="num">HE padrão</th><th>Próx. dissídio</th></tr></thead>
            <tbody>
              {[
                ['Engº Produção','I',14000,1.0,30,20,0,'Out/26 +5%'],
                ['Mestre de Obra','D',12000,1.0,30,20,'20h/mês','Out/26 +5%'],
                ['Op. Perfuratriz','D',5500,1.0,30,20,'40h/mês','Out/26 +5%'],
                ['Soldador','D',4500,1.0,30,20,'40h/mês','Out/26 +5%'],
                ['Ajudante A','D',2500,1.0,30,20,'40h/mês','Out/26 +5%'],
                ['Comprador','I',7000,1.0,0,0,'20h/mês','Out/26 +5%'],
              ].map((r,i) => (
                <tr key={i}>
                  <td style={{fontWeight:600}}>{r[0]}</td>
                  <td><span className="chip" style={{background: r[1]==='D'?'#e6f5ea':'#e8effa', color: r[1]==='D'?'#1a8a3c':'#1d4f97', height:18, fontSize:10}}>{r[1]==='D'?'DIRETO':'INDIRETO'}</span></td>
                  <td className="num">{brl2(r[2])}</td>
                  <td className="num">{(r[3]*100).toFixed(0)}%</td>
                  <td className="num">{r[4]>0?'+'+r[4]+'%':'—'}</td>
                  <td className="num">{r[5]>0?'+'+r[5]+'%':'—'}</td>
                  <td className="num">{r[6]||'—'}</td>
                  <td><span className="chip chip-warn" style={{height:18, fontSize:10}}>{r[7]}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>
      )}

      {tab === 'reajustes' && (
        <Card2 title="Reajustes programados" icon="clock"
          subtitle='Aplicar do mês X em diante (não retroativo). Dissídio anual em outubro é regra da categoria da Destaca.'>
          <table className="tbl">
            <thead><tr><th>Item</th><th>Valor atual</th><th>Novo valor</th><th>A partir de</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {[
                ['Salários (dissídio)','base','+5,0%','Out/26','agendado','#d97706'],
                ['Diesel S10','R$ 6,15/L','R$ 6,45/L','28/04/26','aplicado','#22A94A'],
                ['Aluguel guindaste 100t','R$ 92.000/mês','R$ 95.000/mês','01/06/26','agendado','#d97706'],
                ['Eletrodo (E7018)','R$ 32,50/kg','R$ 34,00/kg','15/05/26','agendado','#d97706'],
              ].map((r,i) => (
                <tr key={i}>
                  <td style={{fontWeight:500}}>{r[0]}</td>
                  <td className="d-mono" style={{color:'var(--d-text-3)'}}>{r[1]}</td>
                  <td className="d-mono" style={{fontWeight:700, color: '#0E2A47'}}>{r[2]}</td>
                  <td className="d-mono">{r[3]}</td>
                  <td><span className="chip" style={{background: r[5]+'22', color: r[5], height:18, fontSize:10}}>{r[4].toUpperCase()}</span></td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>
      )}

      {tab === 'alertas' && (
        <Card2 title="Alertas de impacto — quando um preço muda" icon="bell"
          subtitle='Toda mudança em cadastro consulta projetos ativos antes de propagar. Você decide se aplica.'>
          {[
            { item: 'Diesel S10', de: 'R$ 6,15/L', para: 'R$ 6,45/L', projetos: 7, impacto: 18400, dt: '28/04/26', status: 'aplicado' },
            { item: 'Aluguel Guindaste 100t', de: 'R$ 92.000', para: 'R$ 95.000', projetos: 3, impacto: 24000, dt: 'pendente', status: 'aguardando' },
            { item: 'Salário Soldador', de: 'R$ 4.500', para: 'R$ 4.725', projetos: 12, impacto: 67500, dt: 'Out/26', status: 'agendado' },
          ].map((a,i) => (
            <div key={i} className="card" style={{ padding: 14, marginBottom: 10, boxShadow: 'none', borderLeft: '3px solid '+(a.status==='aplicado'?'#22A94A':a.status==='agendado'?'#d97706':'#c8302a') }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <DUI.Icon name="bell" size={16} style={{color: 'var(--d-text-3)'}}/>
                <div style={{ flex: 1 }}>
                  <div style={{ font: '600 13px/1.2 Inter' }}>{a.item} · <span className="d-mono" style={{ color: 'var(--d-text-3)' }}>{a.de}</span> → <span className="d-mono" style={{ color: '#d97706' }}>{a.para}</span></div>
                  <div style={{ font: '500 11.5px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>
                    {a.projetos} projetos ativos afetados · impacto estimado <strong className="d-mono" style={{color:'var(--d-text-2)'}}>+{brl2k(a.impacto)}</strong>
                  </div>
                </div>
                <span className="chip" style={{ background: (a.status==='aplicado'?'#22A94A':a.status==='agendado'?'#d97706':'#c8302a')+'22', color: a.status==='aplicado'?'#1a8a3c':a.status==='agendado'?'#a46a02':'#9d2520', height: 20, fontSize: 10 }}>{a.status.toUpperCase()}</span>
                <button className="btn btn-sm">Ver afetados</button>
              </div>
            </div>
          ))}
        </Card2>
      )}

      {tab === 'equip' && (
        <Card2 title="Equipamentos · catálogo + modo padrão (alug/aquis)" icon="truck"
          subtitle='Aluguel distribui custo no período de uso. Aquisição concentra no mês de compra e é rateada entre obras futuras.'>
          <table className="tbl">
            <thead><tr><th>Equipamento</th><th>Modo padrão</th><th className="num">Aquisição</th><th className="num">Deprec./mês</th><th className="num">Aluguel/mês</th><th className="num">Manut./mês</th><th className="num">Diesel L/h</th><th></th></tr></thead>
            <tbody>
              {(window.DESTACA_DATA?.equipamentos || []).map(e => (
                <tr key={e.id}>
                  <td style={{fontWeight:600}}>{e.nome}</td>
                  <td><span className="chip" style={{background: e.modo === 'aluguel' ? '#fef3e6' : '#e6f5ea', color: e.modo === 'aluguel' ? '#a46a02' : '#1a8a3c', height:18, fontSize:10}}>{(e.modo||'aquis').toUpperCase()}</span></td>
                  <td className="num d-mono">{brl2(e.valor)}</td>
                  <td className="num d-mono">{brl2(e.deprec_mes)}</td>
                  <td className="num d-mono">{e.aluguel_mes ? brl2(e.aluguel_mes) : '—'}</td>
                  <td className="num d-mono">{brl2(e.manut_mes)}</td>
                  <td className="num d-mono">{e.diesel_lh > 0 ? e.diesel_lh + ' L/h' : '—'}</td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>
      )}

      {tab === 'mat' && (
        <>
          <Card2 title="Materiais & insumos" icon="pkg"
            subtitle='Cliente pode fornecer parte (armação/concreto). Mesmo zerado, MO de instalação é mantida.'>
            <table className="tbl">
              <thead><tr><th>Material</th><th>Unidade</th><th className="num">Custo unitário</th><th>Var. 12m</th><th></th></tr></thead>
              <tbody>
                {(window.DESTACA_DATA?.materiais || []).map((m,i) => {
                  const vars12m = ['+10,8%', '+14,4%', '+23,6%', '+10,6%', '+8,2%', '+5,1%'];
                  const variacao = vars12m[i % vars12m.length];
                  const cor = parseFloat(variacao) > 15 ? '#c8302a' : parseFloat(variacao) > 10 ? '#d97706' : '#22A94A';
                  return (
                    <tr key={m.id}>
                      <td style={{fontWeight:600}}>{m.nome}</td>
                      <td>{m.unid}</td>
                      <td className="num d-mono">{brl2(m.custo)}</td>
                      <td className="num"><span style={{color:cor, fontWeight:600, font:'600 11.5px/1 JetBrains Mono'}}>{variacao}</span></td>
                      <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Card2>

          <Card2 title="Despesas indiretas" icon="money"
            subtitle='Custos por critério (por funcionário/dia, por obra/mês, etc).'>
            <table className="tbl">
              <thead><tr><th>Despesa</th><th>Critério</th><th className="num">Valor</th><th></th></tr></thead>
              <tbody>
                {(window.DESTACA_DATA?.despesas || []).map(d => (
                  <tr key={d.id}>
                    <td style={{fontWeight:600}}>{d.nome}</td>
                    <td style={{color:'var(--d-text-2)'}}>{d.unid}</td>
                    <td className="num d-mono">{brl2(d.valor)}</td>
                    <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card2>

          <Card2 title="Tipos de solo & produtividade" icon="layers"
            subtitle='Estacas/dia por equipe. Fator de dificuldade ajusta cronograma e consumo de diesel.'>
            <table className="tbl">
              <thead><tr><th>Solo</th><th className="num">Estacas/dia (frente)</th><th className="num">Fator dificuldade</th><th></th></tr></thead>
              <tbody>
                {(window.DESTACA_DATA?.solos || []).map(s => (
                  <tr key={s.id}>
                    <td style={{fontWeight:600}}>{s.nome}</td>
                    <td className="num d-mono">{s.estacas_dia}</td>
                    <td className="num d-mono">×{s.fator}</td>
                    <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card2>

          <Card2 title="BDI / Margens — composição padrão" icon="calc"
            subtitle='Aplicado por padrão. Cada projeto pode sobrescrever.'>
            <div style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, maxWidth: 600 }}>
              {[
                ['Lucro', '12,00'],
                ['Impostos (PIS/COFINS/ISS)', '8,65'],
                ['Despesas indiretas', '4,50'],
                ['Riscos / contingência', '2,00'],
              ].map((r,i) => (
                <label key={i} style={{display:'flex', flexDirection:'column', gap:5}}>
                  <span style={{font:'500 11.5px/1 Inter', color:'var(--d-text-3)'}}>{r[0]}</span>
                  <div style={{ position: 'relative' }}>
                    <input className="inp" defaultValue={r[1]} style={{ paddingRight: 24, textAlign: 'right', fontFamily: 'JetBrains Mono' }}/>
                    <span style={{ position: 'absolute', right: 9, top: 8, font: '500 12px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>%</span>
                  </div>
                </label>
              ))}
            </div>
            <div style={{ margin: '4px 16px 16px', padding: 14, background: 'var(--d-green-soft)', borderRadius: 6, display: 'flex', alignItems: 'baseline', gap: 14 }}>
              <span style={{font:'600 11px/1 Inter', color:'#1a8a3c', textTransform:'uppercase', letterSpacing:'0.06em'}}>BDI total</span>
              <span className="d-mono" style={{ font: '800 22px/1 JetBrains Mono', color: '#1a8a3c' }}>27,15%</span>
              <span style={{font:'500 11.5px/1.4 Inter', color:'#1a8a3c', marginLeft:'auto'}}>fator multiplicador <strong className="d-mono">1,2715</strong></span>
            </div>
          </Card2>
        </>
      )}
      {novoCargo && <ModalNovoCargo onClose={()=>setNovoCargo(false)}/>}
    </div>
  );
}

/* ============================ MODAL NOVO CARGO ============================ */
function ModalNovoCargo({ onClose }) {
  const [salario, setSalario] = useS2(5500);
  const [encargos, setEncargos] = useS2(100);
  const [tipo, setTipo] = useS2('D');
  const [peric, setPeric] = useS2(30);
  const [insal, setInsal] = useS2(20);
  const [he, setHe] = useS2(40);

  const custoMes = salario * (1 + encargos/100);
  const custoHora = custoMes / 220;
  const custoComPeric = salario * (1 + peric/100) * (1 + encargos/100);
  const custoComAmbos = salario * (1 + (peric+insal)/100) * (1 + encargos/100);

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(14, 42, 71, 0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 20 }}>
      <div onClick={e=>e.stopPropagation()} className="card" style={{ width: '100%', maxWidth: 720, maxHeight: '90vh', overflow: 'auto', padding: 0 }} className_="scroll">
        {/* header */}
        <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 34, height: 34, borderRadius: 8, background: 'var(--d-green-soft)', color: '#1a8a3c', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <DUI.Icon name="user" size={16}/>
          </div>
          <div style={{ flex: 1 }}>
            <h2 style={{ margin: 0, font: '700 17px/1.15 Inter' }}>Novo cargo</h2>
            <div style={{ font: '500 12px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>Cadastrar cargo na base de conhecimento. Disponível para todos os orçamentos futuros.</div>
          </div>
          <button className="btn btn-ghost" onClick={onClose}><DUI.Icon name="x" size={14}/></button>
        </div>

        <div style={{ padding: 24 }}>
          {/* identificação */}
          <SecaoForm titulo="Identificação">
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
              <CampoForm label="Nome do cargo" hint="Ex: Operador de Perfuratriz">
                <input className="inp" placeholder="Nome do cargo" autoFocus/>
              </CampoForm>
              <CampoForm label="Categoria">
                <select className="inp"><option>Operacional</option><option>Técnica</option><option>Administrativa</option><option>Liderança</option></select>
              </CampoForm>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 12 }}>
              <CampoForm label="Tipo" hint="Direto entra na frente de obra · Indireto pode escalonar (0,3 = 30% do tempo)">
                <div style={{ display: 'flex', gap: 6 }}>
                  {[['D','Direto'],['I','Indireto'],['D-loc','Direto (vem na locação)']].map(t => (
                    <button key={t[0]} type="button" onClick={()=>setTipo(t[0])} className="btn btn-sm" style={{
                      flex: 1, background: tipo === t[0] ? '#0E2A47' : 'white',
                      color: tipo === t[0] ? 'white' : 'var(--d-text-2)', borderColor: tipo === t[0] ? '#0E2A47' : 'var(--d-border)',
                    }}>{t[1]}</button>
                  ))}
                </div>
              </CampoForm>
              <CampoForm label="CBO (opcional)" hint="Classificação Brasileira de Ocupações">
                <input className="inp" placeholder="0000-00"/>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* remuneração */}
          <SecaoForm titulo="Remuneração base">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <CampoForm label="Salário base mensal" hint="Sem encargos, adicionais ou HE">
                <div style={{ position:'relative' }}>
                  <span style={{ position:'absolute', left:10, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>R$</span>
                  <input className="inp" type="number" value={salario} onChange={e=>setSalario(+e.target.value||0)} style={{ paddingLeft: 36, fontFamily:'JetBrains Mono' }}/>
                </div>
              </CampoForm>
              <CampoForm label="Encargos" hint="INSS + FGTS + 13º + férias + provisões. Padrão Destaca: ~100%.">
                <div style={{ position:'relative' }}>
                  <input className="inp" type="number" value={encargos} onChange={e=>setEncargos(+e.target.value||0)} style={{ paddingRight:24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
              <CampoForm label="HE padrão (h/mês)" hint="Aplicada inevitavelmente para a maioria dos cargos">
                <input className="inp" type="number" value={he} onChange={e=>setHe(+e.target.value||0)} style={{ fontFamily:'JetBrains Mono' }}/>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* adicionais */}
          <SecaoForm titulo="Adicionais (aplicados via flag de obra)">
            <div style={{ font: '500 11.5px/1.5 Inter', color: 'var(--d-text-3)', background: 'var(--d-bg)', padding: 10, borderRadius: 6, marginBottom: 12 }}>
              <DUI.Icon name="info" size={12} style={{ marginRight: 4 }}/>
              Não duplicam o cargo na base. Quando a flag está ativa numa obra, todos os cargos diretos recebem o adicional.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <CampoForm label="Periculosidade" hint="Próximo a gás, alta tensão, mar, etc.">
                <div style={{ position:'relative' }}>
                  <input className="inp" type="number" value={peric} onChange={e=>setPeric(+e.target.value||0)} style={{ paddingRight: 24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
              <CampoForm label="Insalubridade" hint="Ambiente insalubre conforme NR-15.">
                <div style={{ position:'relative' }}>
                  <input className="inp" type="number" value={insal} onChange={e=>setInsal(+e.target.value||0)} style={{ paddingRight: 24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* benefícios */}
          <SecaoForm titulo="Benefícios padrão (não rateáveis)">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[['Almoço','35','/dia'],['Transporte','12','/dia'],['EPI','450','/mês'],['Plano saúde','280','/mês']].map((b,i) => (
                <div key={i} style={{ background: 'var(--d-bg)', padding: 10, borderRadius: 6 }}>
                  <div style={{ font: '500 11px/1 Inter', color: 'var(--d-text-3)', marginBottom: 4 }}>{b[0]}</div>
                  <div style={{ display:'flex', alignItems:'baseline', gap:4 }}>
                    <span style={{font:'500 11px/1 JetBrains Mono', color:'var(--d-text-3)'}}>R$</span>
                    <input className="inp" defaultValue={b[1]} style={{ height: 26, padding: '0 6px', fontFamily:'JetBrains Mono', fontWeight:600 }}/>
                    <span style={{font:'500 10px/1 Inter', color:'var(--d-text-4)'}}>{b[2]}</span>
                  </div>
                </div>
              ))}
            </div>
          </SecaoForm>

          {/* dissídio */}
          <SecaoForm titulo="Reajuste programado">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <CampoForm label="Mês do dissídio">
                <select className="inp" defaultValue="10"><option value="1">Janeiro</option><option value="5">Maio</option><option value="10">Outubro</option><option value="0">Sem dissídio</option></select>
              </CampoForm>
              <CampoForm label="Reajuste estimado">
                <div style={{ position:'relative' }}>
                  <input className="inp" defaultValue="5,0" style={{ paddingRight: 24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
              <CampoForm label="Sindicato/categoria">
                <input className="inp" placeholder="SINTICOM-SP"/>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* preview de custo — vivo */}
          <div style={{ background: 'var(--d-green-soft)', borderRadius: 8, padding: 16, marginTop: 6 }}>
            <div style={{ font: '600 11px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>
              Pré-visualização do custo · recalcula em tempo real
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              {[
                ['Custo/mês (base)', custoMes, false],
                ['Custo/hora', custoHora, false],
                ['Com periculosidade', custoComPeric, true],
                ['Peric. + Insal.', custoComAmbos, true],
              ].map((p,i) => (
                <div key={i}>
                  <div style={{ font: '500 10.5px/1 Inter', color: '#1a8a3c' }}>{p[0]}</div>
                  <div className="d-mono" style={{ font: '700 16px/1.1 JetBrains Mono', color: '#0f5e26', marginTop: 6 }}>
                    R$ {Number(p[1]).toLocaleString('pt-BR', {maximumFractionDigits: p[2] ? 0 : 2})}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* footer */}
        <div style={{ padding: '14px 24px', borderTop: '1px solid var(--d-border)', background: 'var(--d-bg)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)', flex: 1 }}>
            <DUI.Icon name="info" size={11}/> O cargo entra na base imediatamente. Orçamentos existentes não são alterados.
          </div>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn">Salvar como rascunho</button>
          <button className="btn btn-primary" onClick={onClose}><DUI.Icon name="check" size={13}/>Cadastrar cargo</button>
        </div>
      </div>
    </div>
  );
}
function SecaoForm({ titulo, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ font: '600 11px/1 Inter', color: 'var(--d-text-2)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10, paddingBottom: 6, borderBottom: '1px solid var(--d-border)' }}>{titulo}</div>
      {children}
    </div>
  );
}
function CampoForm({ label, hint, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ font: '600 11.5px/1 Inter', color: 'var(--d-text-2)' }}>{label}</span>
      {children}
      {hint && <span style={{ font: '500 10.5px/1.4 Inter', color: 'var(--d-text-4)' }}>{hint}</span>}
    </label>
  );
}
function VersoesMultiusuario() {
  return (
    <div style={{ maxWidth: 1100, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 18 }}>
      <Card2 title="Histórico de revisões deste orçamento" icon="layers"
        subtitle='Versões nomeadas — Ana hoje cria revisões manualmente. Sistema preserva todas, com diff.'>
        {[
          { v: 'v3', label: 'Após reunião alinhamento 04/05', auto: 'Ana', dt: '06/05/26 09:14', cur: true, mudancas: '+ adicionou Frente D embarcada · BDI 27% → 30%' },
          { v: 'v2', label: 'Diesel atualizado (28/04)', auto: 'Sistema', dt: '28/04/26 16:02', mudancas: 'Diesel R$ 6,15 → R$ 6,45 · impacto +R$ 3.6k' },
          { v: 'v1.1', label: 'Ajuste comprador grande obra', auto: 'Ana', dt: '24/04/26 11:30', mudancas: '+ comprador 1.0 nos meses EXEC' },
          { v: 'v1', label: 'Versão inicial', auto: 'Ana', dt: '22/04/26 14:50', mudancas: 'Criação · 4 obras, 4 frentes' },
        ].map((r, i) => (
          <div key={i} style={{ padding: '14px 0', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <div style={{ width: 50, font: '700 14px/1 JetBrains Mono', color: r.cur ? '#22A94A' : 'var(--d-text-3)' }}>{r.v}</div>
            <div style={{ flex: 1 }}>
              <div style={{ font: '600 13px/1.3 Inter', display: 'flex', alignItems: 'center', gap: 8 }}>
                {r.label}
                {r.cur && <span className="chip chip-green" style={{height:18, fontSize:10}}>ATUAL</span>}
              </div>
              <div style={{ font: '500 11.5px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>
                por {r.auto} · {r.dt}
              </div>
              <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-2)', marginTop: 6 }}>{r.mudancas}</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn btn-sm">Diff</button>
              {!r.cur && <button className="btn btn-sm">Restaurar</button>}
            </div>
          </div>
        ))}
      </Card2>

      <div>
        <Card2 title="Equipe & papéis" icon="user">
          {[
            { nome: 'Ana', papel: 'Planejamento', acesso: 'orçar + aprovar', cor: '#22A94A', online: true },
            { nome: 'Carla', papel: 'Compras', acesso: 'cotar preços de equipamentos', cor: '#0E2A47', online: true },
            { nome: 'Marcos', papel: 'Compras', acesso: 'cotar materiais', cor: '#0E2A47', online: false },
            { nome: 'Wanderlei', papel: 'Diretoria', acesso: 'aprovar valor de venda', cor: '#d97706', online: false },
            { nome: 'Décio', papel: 'Diretoria', acesso: 'aprovar valor de venda', cor: '#d97706', online: false },
          ].map((u,i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--d-border)' }}>
              <div style={{ position: 'relative' }}>
                <div style={{ width: 28, height: 28, borderRadius: 100, background: u.cor, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 11px/1 Inter' }}>{u.nome[0]}</div>
                {u.online && <div style={{ position: 'absolute', bottom: -1, right: -1, width: 9, height: 9, borderRadius: 100, background: '#22A94A', border: '2px solid white' }}/>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: '600 12.5px/1.2 Inter' }}>{u.nome}</div>
                <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)' }}>{u.papel} · {u.acesso}</div>
              </div>
            </div>
          ))}
        </Card2>
      </div>
    </div>
  );
}

/* ============================ GLOSSÁRIO ============================ */
function Glossario() {
  const termos = [
    ['Projeto/Contrato', 'Vínculo comercial com o cliente. Contém uma ou mais obras.'],
    ['Obra', 'Estrutura física específica em local próprio. Várias obras de um mesmo projeto podem estar em locais diferentes.'],
    ['Frente de trabalho', 'Equipe completa autossuficiente alocada a uma obra. Pode ser deslocada entre obras.'],
    ['Cravação', 'Processo de instalar a estaca no solo.'],
    ['Estaca pré-moldada / metálica', 'Tipos de estaca; afetam consumo de eletrodo (1 kg/m vs 1,5–2 kg/m).'],
    ['Tricone', 'Ferramenta de perfuração em rocha. 7 unid/100m (Ø1,30m) ou 9-10/100m (Ø1,90m).'],
    ['Eletrodo', 'Material de soldagem de estacas.'],
    ['Gabarito de cravação', 'Ferramenta que alinha a estaca; necessária na maioria das obras.'],
    ['Memória de cálculo', 'Aba auxiliar com cotações, distâncias e cálculos de apoio.'],
    ['CPU', 'Composição de Custo Unitário.'],
    ['BDI', 'Benefício e Despesas Indiretas.'],
    ['MO direta', 'Operadores, ajudantes, soldadores, mestre de obra.'],
    ['MO indireta', 'Gerente de contrato, gestor de meio ambiente, comprador.'],
    ['Dissídio', 'Reajuste anual de salário (categoria Destaca: outubro).'],
    ['Periculosidade', 'Adicional de 30% para trabalho de risco (gás, alta tensão).'],
    ['Insalubridade', 'Adicional de 20% para trabalho insalubre.'],
    ['Hora extra', 'Aplicada inevitavelmente para a maioria dos cargos.'],
    ['Encargos', 'Custos sociais sobre salário (~100%).'],
    ['Baixada', 'Mandar pessoal de volta para casa (a cada 60 ou 90 dias).'],
    ['Obra embarcada', 'Realizada no mar, sobre balsa.'],
    ['Apoio náutico', 'Equipamentos de suporte em obras embarcadas.'],
    ['EPI', 'Equipamento de proteção individual.'],
    ['Ensaio', 'Teste técnico em estaca (terceirizado).'],
    ['Rentabilidade', 'Lucro percentual sobre o custo da obra.'],
    ['Valor de venda', 'Preço final cobrado do cliente.'],
    ['Custo da obra', 'Soma de todos os custos antes da margem.'],
    ['Administração central', 'Custo overhead da empresa, rateado por obra.'],
    ['Receita do bolo', 'Orçamentos passados que viram base para os próximos.'],
  ];
  return (
    <div style={{ maxWidth: 900 }}>
      <Card2 title="Termos do domínio" subtitle="Validados na reunião com Ana (28/04/2026). Use para alinhamento entre dev e operação." icon="book">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 0 }}>
          {termos.map(([t,d], i) => (
            <React.Fragment key={i}>
              <div style={{ padding: '10px 14px 10px 0', borderTop: i > 0 ? '1px solid var(--d-border)' : 'none', font: '600 13px/1.4 Inter' }}>{t}</div>
              <div style={{ padding: '10px 0 10px 14px', borderTop: i > 0 ? '1px solid var(--d-border)' : 'none', font: '500 13px/1.5 Inter', color: 'var(--d-text-2)' }}>{d}</div>
            </React.Fragment>
          ))}
        </div>
      </Card2>
    </div>
  );
}

window.WorkspaceV2 = WorkspaceV2;
Object.assign(window, { EditorFrenteV2, MargemValorVenda, TimelineGantt, BaseConhecimentoV2, VersoesMultiusuario, Glossario });