// Variação 1 — Workspace (sidebar + tabs + formulários tradicionais)
// Estilo Linear/Notion mas denso. Foco: técnico, eficiente.
// Expõe window.WorkspaceApp

const { useState, useMemo } = React;

function fmt(v, dig = 0) {
  if (v == null || isNaN(v)) return '—';
  return Number(v).toLocaleString('pt-BR', { minimumFractionDigits: dig, maximumFractionDigits: dig });
}
function fmtBRL(v) { return 'R$ ' + fmt(v, 0); }

function WorkspaceApp() {
  const data = window.DESTACA_DATA;
  const [tela, setTela] = useState('projetos'); // dashboard | projetos | projeto | obra | frente | base | resumo
  const [projetoId, setProjetoId] = useState('P-2026-014');
  const [obraId, setObraId] = useState('O-1');
  const [frenteId, setFrenteId] = useState('F-1');

  const projeto = data.projetos.find(p => p.id === projetoId) || data.projetos[0];
  const obra = projeto?.obras.find(o => o.id === obraId) || projeto?.obras[0];
  const frente = obra?.frentes.find(f => f.id === frenteId) || obra?.frentes?.[0];

  const navTo = (t, ids = {}) => {
    setTela(t);
    if (ids.projeto) setProjetoId(ids.projeto);
    if (ids.obra) setObraId(ids.obra);
    if (ids.frente) setFrenteId(ids.frente);
  };

  return (
    <div data-screen-label="Workspace" style={{ display: 'flex', height: '100%', minHeight: 800, background: 'var(--d-bg)' }}>
      <Sidebar tela={tela} navTo={navTo} projeto={projeto}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar projeto={projeto} obra={obra} frente={frente} tela={tela} navTo={navTo}/>
        <div style={{ flex: 1, overflow: 'auto', padding: 24 }} className="scroll">
          {tela === 'dashboard' && <Dashboard navTo={navTo} data={data}/>}
          {tela === 'projetos' && <ListaProjetos navTo={navTo} data={data}/>}
          {tela === 'projeto' && <DetalheProjeto projeto={projeto} navTo={navTo}/>}
          {tela === 'obra' && <DetalheObra projeto={projeto} obra={obra} navTo={navTo}/>}
          {tela === 'frente' && <EditorFrente projeto={projeto} obra={obra} frente={frente}/>}
          {tela === 'base' && <BaseConhecimento data={data}/>}
          {tela === 'resumo' && <ResumoCliente projeto={projeto}/>}
        </div>
      </div>
    </div>
  );
}

function Sidebar({ tela, navTo, projeto }) {
  return (
    <aside style={{
      width: 232, flexShrink: 0,
      background: 'var(--d-surface)',
      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>
      <div style={{ padding: '14px 8px', flex: 1, overflow: 'auto' }} className="scroll">
        <div style={{ font: '600 10.5px/1 Inter', letterSpacing: '0.08em', color: 'var(--d-text-3)', textTransform: 'uppercase', padding: '4px 10px 8px' }}>Geral</div>
        <DUI.NavItem icon="chart" label="Dashboard" active={tela==='dashboard'} onClick={()=>navTo('dashboard')}/>
        <DUI.NavItem icon="folder" label="Orçamentos" badge="14" active={tela==='projetos'||tela==='projeto'||tela==='obra'||tela==='frente'} onClick={()=>navTo('projetos')}/>
        <DUI.NavItem icon="book" label="Base de conhecimento" active={tela==='base'} onClick={()=>navTo('base')}/>

        <div style={{ font: '600 10.5px/1 Inter', letterSpacing: '0.08em', color: 'var(--d-text-3)', textTransform: 'uppercase', padding: '20px 10px 8px' }}>Recentes</div>
        {window.DESTACA_DATA.projetos.slice(0, 4).map(p => (
          <DUI.NavItem key={p.id} icon="dot" label={p.nome.length > 28 ? p.nome.slice(0,28)+'…' : p.nome} active={tela==='projeto' && projeto?.id===p.id} onClick={()=>navTo('projeto', {projeto: p.id})}/>
        ))}
      </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: '#0E2A47', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 12px/1 Inter' }}>RV</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ font: '600 12.5px/1.2 Inter', color: 'var(--d-text)' }}>Renata Vilar</div>
          <div style={{ font: '500 11px/1.2 Inter', color: 'var(--d-text-3)' }}>Orçamentista</div>
        </div>
        <DUI.Icon name="set" size={15} style={{ color: 'var(--d-text-3)' }}/>
      </div>
    </aside>
  );
}

function Topbar({ projeto, obra, frente, tela, navTo }) {
  const crumbs = [];
  if (tela === 'dashboard') crumbs.push({ label: 'Dashboard' });
  else if (tela === 'projetos') crumbs.push({ label: 'Orçamentos' });
  else if (tela === 'base') crumbs.push({ label: 'Base de conhecimento' });
  else if (tela === 'resumo') crumbs.push({ label: 'Orçamentos', go: ()=>navTo('projetos') }, { label: projeto?.nome }, { label: 'Resumo do cliente' });
  else {
    crumbs.push({ label: 'Orçamentos', go: ()=>navTo('projetos') });
    if (projeto) crumbs.push({ label: projeto.nome, go: tela!=='projeto' ? ()=>navTo('projeto', {projeto: projeto.id}) : null });
    if (tela === 'obra' && obra) crumbs.push({ label: obra.nome });
    if (tela === 'frente' && obra) crumbs.push({ label: obra.nome, go: ()=>navTo('obra', {obra: obra.id}) });
    if (tela === 'frente' && frente) crumbs.push({ label: frente.nome });
  }

  return (
    <header style={{ height: 52, background: 'var(--d-surface)', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', padding: '0 18px', gap: 16 }}>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, font: '500 13px/1 Inter', color: 'var(--d-text-2)', minWidth: 0, overflow: 'hidden' }}>
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <DUI.Icon name="chevR" size={13} style={{ color: 'var(--d-text-4)' }}/>}
            <span onClick={c.go} style={{ cursor: c.go ? 'pointer' : 'default', color: i === crumbs.length-1 ? 'var(--d-text)' : 'var(--d-text-2)', fontWeight: i === crumbs.length-1 ? 600 : 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.label}</span>
          </React.Fragment>
        ))}
      </div>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ position: 'relative' }}>
          <DUI.Icon name="search" size={14} style={{ position: 'absolute', left: 10, top: 9, color: 'var(--d-text-3)' }}/>
          <input className="inp" style={{ width: 240, paddingLeft: 30, height: 30 }} placeholder="Buscar orçamento…"/>
          <span style={{ position: 'absolute', right: 8, top: 7, font: '500 10.5px/1 JetBrains Mono', color: 'var(--d-text-4)', background: 'var(--d-bg-2)', padding: '3px 5px', borderRadius: 3 }}>⌘K</span>
        </div>
        <button className="btn btn-ghost"><DUI.Icon name="bell" size={15}/></button>
      </div>
    </header>
  );
}

/* ============================ DASHBOARD ============================ */
function Dashboard({ navTo, data }) {
  const totalOpen = data.projetos.filter(p => p.status !== 'aprovado' && p.status !== 'perdido').reduce((s,p)=>s+p.valor, 0);
  return (
    <div style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
        <div>
          <div style={{ font: '500 12.5px/1 Inter', color: 'var(--d-text-3)', marginBottom: 6 }}>Quarta, 6 de maio de 2026</div>
          <h1 style={{ margin: 0, font: '700 24px/1.1 Inter', letterSpacing: '-0.01em' }}>Bem-vinda, Renata.</h1>
        </div>
        <button className="btn btn-primary"><DUI.Icon name="plus" size={14}/>Novo orçamento</button>
      </div>

      <div className="card" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 20 }}>
        <DUI.Kpi label="Em aberto" value={'R$ ' + (totalOpen/1_000_000).toFixed(1) + ' M'} sub="3 orçamentos"/>
        <DUI.Kpi label="Taxa de conversão" value="42%" sub="↑ 6 p.p. vs. trimestre"/>
        <DUI.Kpi label="Ticket médio" value="R$ 8,7 M" sub="últimos 12 meses"/>
        <DUI.Kpi label="Aguardando revisão" value="2" sub="P-2026-014, P-2026-012"/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 18 }}>
        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'center' }}>
            <h3 style={{ margin: 0, font: '600 14px/1 Inter' }}>Pipeline de orçamentos</h3>
            <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}>Ver todos →</button>
          </div>
          <table className="tbl">
            <thead><tr>
              <th>ID / Projeto</th><th>Cliente</th><th>Status</th><th className="num">Estacas</th><th className="num">Valor</th>
            </tr></thead>
            <tbody>
              {data.projetos.slice(0,5).map(p => {
                const totalEstacas = p.obras.reduce((s,o)=>s+o.estacas,0);
                return (
                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={()=>navTo('projeto', {projeto: p.id})}>
                    <td>
                      <div style={{ font: '500 11.5px/1 JetBrains Mono', color: 'var(--d-text-3)', marginBottom: 3 }}>{p.id}</div>
                      <div style={{ font: '600 13px/1.3 Inter', color: 'var(--d-text)' }}>{p.nome}</div>
                    </td>
                    <td style={{ color: 'var(--d-text-2)' }}>{p.cliente}<div style={{ font: '500 11.5px/1.3 Inter', color: 'var(--d-text-3)' }}>{p.local}</div></td>
                    <td><DUI.StatusPill status={p.status}/></td>
                    <td className="num">{fmt(totalEstacas)}</td>
                    <td className="num" style={{ fontWeight: 600 }}>{fmtBRL(p.valor)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div className="card" style={{ padding: 18 }}>
          <h3 style={{ margin: 0, font: '600 14px/1 Inter', marginBottom: 14 }}>Atividade recente</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              { who: 'Carlos', act: 'aprovou o orçamento', proj: 'Ponte Rio Pardo', t: '2h', icon: 'check', color: '#22A94A' },
              { who: 'Você', act: 'editou a Frente F-1 em', proj: 'Cais Norte', t: '4h', icon: 'edit', color: '#2363b8' },
              { who: 'Sistema', act: 'recalculou BDI para', proj: 'Galpão Logus', t: 'ontem', icon: 'calc', color: '#7c8597' },
              { who: 'Júlia', act: 'enviou para o cliente', proj: 'Subestação CTEEP', t: 'ontem', icon: 'share', color: '#0E2A47' },
            ].map((a,i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <div style={{ width: 28, height: 28, borderRadius: 100, background: 'var(--d-bg-2)', color: a.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                  <DUI.Icon name={a.icon} size={14}/>
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ font: '500 12.5px/1.4 Inter', color: 'var(--d-text-2)' }}>
                    <span style={{ fontWeight: 600, color: 'var(--d-text)' }}>{a.who}</span> {a.act} <span style={{ fontWeight: 600, color: 'var(--d-text)' }}>{a.proj}</span>
                  </div>
                  <div style={{ font: '500 11.5px/1 Inter', color: 'var(--d-text-4)', marginTop: 3 }}>{a.t} atrás</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================ LISTA PROJETOS ============================ */
function ListaProjetos({ navTo, data }) {
  return (
    <div style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: 18 }}>
        <div>
          <h1 style={{ margin: 0, font: '700 22px/1.1 Inter', letterSpacing: '-0.01em' }}>Orçamentos</h1>
          <div style={{ font: '500 12.5px/1.2 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>{data.projetos.length} orçamentos · 3 em aberto</div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn"><DUI.Icon name="filter" size={13}/>Filtros</button>
          <button className="btn btn-primary"><DUI.Icon name="plus" size={14}/>Novo orçamento</button>
        </div>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <table className="tbl">
          <thead><tr>
            <th style={{width: 110}}>ID</th>
            <th>Projeto / Cliente</th>
            <th style={{width: 130}}>Local</th>
            <th style={{width: 130}}>Status</th>
            <th style={{width: 100}}>Responsável</th>
            <th className="num" style={{width: 80}}>Obras</th>
            <th className="num" style={{width: 100}}>Estacas</th>
            <th className="num" style={{width: 130}}>Valor</th>
            <th style={{width: 100}}>Atualizado</th>
          </tr></thead>
          <tbody>
            {data.projetos.map(p => {
              const totalEstacas = p.obras.reduce((s,o)=>s+o.estacas,0);
              return (
                <tr key={p.id} style={{ cursor: 'pointer' }} onClick={()=>navTo('projeto', {projeto: p.id})}>
                  <td className="d-mono" style={{ color: 'var(--d-text-3)', fontSize: 12 }}>{p.id}</td>
                  <td>
                    <div style={{ font: '600 13px/1.3 Inter' }}>{p.nome}</div>
                    <div style={{ font: '500 12px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 2 }}>{p.cliente}</div>
                  </td>
                  <td style={{ color: 'var(--d-text-2)' }}>{p.local}</td>
                  <td><DUI.StatusPill status={p.status}/></td>
                  <td style={{ color: 'var(--d-text-2)' }}>{p.responsavel.split(' ')[0]}</td>
                  <td className="num">{p.obras.length}</td>
                  <td className="num">{fmt(totalEstacas)}</td>
                  <td className="num" style={{ fontWeight: 600 }}>{fmtBRL(p.valor)}</td>
                  <td className="d-mono" style={{ color: 'var(--d-text-3)', fontSize: 12 }}>{p.atualizado}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============================ DETALHE PROJETO ============================ */
function DetalheProjeto({ projeto, navTo }) {
  if (!projeto) return null;
  const totalEstacas = projeto.obras.reduce((s,o)=>s+o.estacas,0);
  const totalFrentes = projeto.obras.reduce((s,o)=>s+o.frentes.length,0);
  const valorPorEstaca = projeto.valor / Math.max(totalEstacas, 1);

  return (
    <div style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 18, gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <span className="d-mono" style={{ color: 'var(--d-text-3)', fontSize: 12 }}>{projeto.id}</span>
            <DUI.StatusPill status={projeto.status}/>
          </div>
          <h1 style={{ margin: 0, font: '700 24px/1.15 Inter', letterSpacing: '-0.01em' }}>{projeto.nome}</h1>
          <div style={{ display: 'flex', gap: 18, marginTop: 8, font: '500 13px/1 Inter', color: 'var(--d-text-2)' }}>
            <span><DUI.Icon name="user" size={13}/> {projeto.cliente}</span>
            <span><DUI.Icon name="pin" size={13}/> {projeto.local}</span>
            <span><DUI.Icon name="clock" size={13}/> Atualizado {projeto.atualizado}</span>
          </div>
        </div>
        <button className="btn"><DUI.Icon name="excel" size={14}/>Exportar planilha</button>
        <button className="btn"><DUI.Icon name="download" size={14}/>PDF</button>
        <button className="btn btn-navy" onClick={()=>navTo('resumo')}><DUI.Icon name="eye" size={14}/>Visão do cliente</button>
      </div>

      <div className="card" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', marginBottom: 22 }}>
        <DUI.Kpi label="Valor total" value={'R$ ' + (projeto.valor/1_000_000).toFixed(2) + ' M'} accent="#22A94A"/>
        <DUI.Kpi label="Estacas" value={fmt(totalEstacas)} sub={totalFrentes + ' frentes'}/>
        <DUI.Kpi label="Obras" value={projeto.obras.length}/>
        <DUI.Kpi label="R$ / estaca" value={fmtBRL(valorPorEstaca)}/>
        <DUI.Kpi label="Prazo estimado" value="9 meses" sub="incl. mob/desmob"/>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
        <h2 style={{ margin: 0, font: '600 16px/1 Inter' }}>Obras</h2>
        <div style={{ font: '500 12px/1 Inter', color: 'var(--d-text-3)', marginLeft: 10 }}>· {projeto.obras.length}</div>
        <button className="btn btn-sm" style={{ marginLeft: 'auto' }}><DUI.Icon name="plus" size={12}/>Nova obra</button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {projeto.obras.map((o, i) => {
          const valorObra = projeto.valor * (o.estacas / Math.max(totalEstacas, 1));
          return (
            <div key={o.id} className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, background: 'var(--d-bg)', borderBottom: '1px solid var(--d-border)' }}>
                <div style={{ width: 32, height: 32, borderRadius: 6, background: 'rgba(14,42,71,0.08)', color: 'var(--d-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <DUI.Icon name="layers" size={16}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="d-mono" style={{ color: 'var(--d-text-3)', fontSize: 11.5 }}>OBRA {String(i+1).padStart(2,'0')}</span>
                  </div>
                  <h3 style={{ margin: '2px 0 0', font: '600 15px/1.2 Inter' }}>{o.nome}</h3>
                </div>
                <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ font: '600 10.5px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Estacas</div>
                    <div className="d-mono" style={{ font: '700 16px/1 JetBrains Mono', marginTop: 4 }}>{fmt(o.estacas)}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ font: '600 10.5px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Frentes</div>
                    <div className="d-mono" style={{ font: '700 16px/1 JetBrains Mono', marginTop: 4 }}>{o.frentes.length}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ font: '600 10.5px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Valor</div>
                    <div className="d-mono" style={{ font: '700 16px/1 JetBrains Mono', marginTop: 4, color: '#22A94A' }}>{'R$ ' + (valorObra/1_000_000).toFixed(2) + ' M'}</div>
                  </div>
                  <button className="btn btn-sm" onClick={()=>navTo('obra', {obra: o.id})}>Abrir<DUI.Icon name="chevR" size={12}/></button>
                </div>
              </div>
              <div>
                {o.frentes.map((f, fi) => {
                  const est = window.DESTACA_CALC.estimarFrente(f);
                  const solo = window.DESTACA_DATA.solos.find(s=>s.id===f.soloId);
                  return (
                    <div key={f.id} style={{ padding: '12px 18px', borderTop: fi > 0 ? '1px solid var(--d-border)' : 'none', display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }} onClick={()=>navTo('frente', {obra: o.id, frente: f.id})}>
                      <div style={{ width: 24, height: 24, borderRadius: 6, background: 'rgba(34,169,74,0.12)', color: '#1a8a3c', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                        <DUI.Icon name="pile" size={13}/>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ font: '600 13.5px/1.2 Inter' }}>{f.nome}</div>
                        <div style={{ font: '500 12px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>
                          {f.tipoEstaca} · {f.comprimento}m · solo {solo?.nome.toLowerCase()} · {f.equipes} equipe{f.equipes>1?'s':''}
                        </div>
                      </div>
                      <span className="chip chip-navy">{f.modo === 'performance' ? 'PERFORMANCE' : 'PRAZO FIXO'}</span>
                      <div className="d-mono" style={{ width: 80, textAlign: 'right', font: '600 13px/1 JetBrains Mono' }}>{fmt(f.estacas)}<div style={{ font: '500 10px/1 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>estacas</div></div>
                      <div className="d-mono" style={{ width: 90, textAlign: 'right', font: '600 13px/1 JetBrains Mono' }}>{est.mesesNecessarios.toFixed(1)}<div style={{ font: '500 10px/1 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>meses</div></div>
                      <div className="d-mono" style={{ width: 110, textAlign: 'right', font: '700 14px/1 JetBrains Mono', color: '#0E2A47' }}>{fmtBRL(est.total)}</div>
                      <DUI.Icon name="chevR" size={14} style={{ color: 'var(--d-text-4)' }}/>
                    </div>
                  );
                })}
                {o.frentes.length === 0 && (
                  <div style={{ padding: 24, textAlign: 'center', color: 'var(--d-text-3)' }}>
                    Sem frentes. <button className="btn btn-sm btn-primary" style={{ marginLeft: 8 }}><DUI.Icon name="plus" size={12}/>Criar frente</button>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ============================ DETALHE OBRA ============================ */
function DetalheObra({ projeto, obra, navTo }) {
  if (!obra) return null;
  return (
    <div style={{ maxWidth: 1100 }}>
      <h1 style={{ margin: '0 0 8px', font: '700 22px/1.1 Inter' }}>{obra.nome}</h1>
      <div style={{ font: '500 13px/1.4 Inter', color: 'var(--d-text-3)', marginBottom: 20 }}>
        Parte de <span style={{ color: 'var(--d-text-2)' }}>{projeto.nome}</span> · {obra.estacas} estacas no total
      </div>
      <div className="card" style={{ padding: 18, marginBottom: 18 }}>
        <h3 style={{ margin: '0 0 12px', font: '600 14px/1 Inter' }}>Configuração da obra</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          <Field label="Nome"><input className="inp" defaultValue={obra.nome}/></Field>
          <Field label="Endereço da obra"><input className="inp" defaultValue="Av. dos Portuários, 4500 — Santos"/></Field>
          <Field label="Distância da base"><input className="inp" defaultValue="386 km (Sertãozinho)"/></Field>
          <Field label="Acesso"><select className="inp"><option>Pavimentado</option><option>Misto</option><option>Terra</option></select></Field>
          <Field label="Disponibilidade do terreno"><input className="inp" defaultValue="01/06/2026"/></Field>
          <Field label="Sondagem disponível"><input className="inp" defaultValue="SPT + CPT"/></Field>
        </div>
      </div>
      <h3 style={{ margin: '0 0 10px', font: '600 14px/1 Inter' }}>Frentes desta obra</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {obra.frentes.map(f => (
          <div key={f.id} className="card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }} onClick={()=>navTo('frente', {frente: f.id})}>
            <DUI.Icon name="pile" size={18} style={{ color: '#22A94A' }}/>
            <div style={{ flex: 1 }}>
              <div style={{ font: '600 14px/1.2 Inter' }}>{f.nome}</div>
              <div style={{ font: '500 12px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>{f.estacas} estacas · {f.tipoEstaca} · {f.comprimento}m</div>
            </div>
            <DUI.Icon name="chevR" size={14} style={{ color: 'var(--d-text-4)' }}/>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================ EDITOR FRENTE ============================ */
function EditorFrente({ projeto, obra, frente }) {
  const data = window.DESTACA_DATA;
  const [estacas, setEstacas] = useState(frente?.estacas || 168);
  const [comprimento, setComprimento] = useState(frente?.comprimento || 35);
  const [soloId, setSoloId] = useState(frente?.soloId || 'rocha-alt');
  const [equipes, setEquipes] = useState(frente?.equipes || 2);
  const [modo, setModo] = useState(frente?.modo || 'performance');
  const [prazoMeses, setPrazoMeses] = useState(frente?.prazoMeses || 8);
  const [estacasMes, setEstacasMes] = useState(40);
  const [tipoEstaca, setTipoEstaca] = useState(frente?.tipoEstaca || 'metálica Ø1300');

  const frenteCalc = { ...frente, estacas, comprimento, soloId, equipes, modo, prazoMeses };
  const est = useMemo(() => window.DESTACA_CALC.estimarFrente(frenteCalc), [estacas, comprimento, soloId, equipes, modo, prazoMeses]);
  const solo = data.solos.find(s => s.id === soloId);

  const breakdown = [
    { label: 'Mão de obra direta', val: est.custoMO, color: '#0E2A47', desc: `${est.colabsTotal} colaboradores · ${est.mesesNecessarios.toFixed(1)} meses` },
    { label: 'Equipamentos', val: est.custoEquip, color: '#22A94A', desc: 'Guindaste, perfuratriz, martelos, solda' },
    { label: 'Combustível', val: est.custoDiesel, color: '#d97706', desc: 'Diesel S10 — 1.000 L/mês por equipe' },
    { label: 'Eletrodos', val: est.custoEletrodos, color: '#2363b8', desc: '1,9 kg/m · 32,50 R$/kg' },
    { label: 'Tricones', val: est.custoTricones, color: '#7c8597', desc: 'Reposição a cada 100m' },
    { label: 'Estacas (material)', val: est.custoEstaca, color: '#0E2A47', desc: 'Pré-moldadas Ø60' },
    { label: 'Alimentação', val: est.custoAlim, color: '#22A94A', desc: 'Café + almoço + jantar' },
    { label: 'Alojamento', val: est.custoAloj, color: '#7c8597', desc: 'Aluguel casa operacional + encarregados' },
    { label: 'Mobilização', val: est.mob, color: '#d97706', desc: 'Carretas (ida e volta)' },
  ].filter(b => b.val > 0);

  const maxVal = Math.max(...breakdown.map(b => b.val));

  return (
    <div style={{ maxWidth: 1380, display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 420px', gap: 18 }}>
      <div>
        <div style={{ marginBottom: 18 }}>
          <div style={{ font: '500 12px/1 Inter', color: 'var(--d-text-3)', marginBottom: 4 }}>FRENTE · {obra?.nome}</div>
          <h1 style={{ margin: 0, font: '700 22px/1.1 Inter' }}>{frente?.nome || 'Nova frente'}</h1>
        </div>

        {/* Grupo: parâmetros da frente */}
        <Section title="Parâmetros da frente" icon="pile">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            <Field label="Tipo de estaca">
              <select className="inp" value={tipoEstaca} onChange={e=>setTipoEstaca(e.target.value)}>
                <option>metálica Ø1300</option>
                <option>pré-moldada Ø60</option>
                <option>pré-moldada Ø40</option>
                <option>estaca raiz Ø60</option>
                <option>hélice contínua Ø80</option>
              </select>
            </Field>
            <Field label="Quantidade de estacas">
              <input className="inp inp-num" type="number" value={estacas} onChange={e=>setEstacas(+e.target.value)}/>
            </Field>
            <Field label="Comprimento médio (m)">
              <input className="inp inp-num" type="number" value={comprimento} onChange={e=>setComprimento(+e.target.value)}/>
            </Field>
            <Field label="Tipo de solo">
              <select className="inp" value={soloId} onChange={e=>setSoloId(e.target.value)}>
                {data.solos.map(s => <option key={s.id} value={s.id}>{s.nome} ({s.estacas_dia}/dia)</option>)}
              </select>
            </Field>
            <Field label="Equipes simultâneas" hint={`${(solo.estacas_dia * equipes).toFixed(2)} estacas/dia totais`}>
              <input className="inp inp-num" type="number" min="1" max="6" value={equipes} onChange={e=>setEquipes(+e.target.value)}/>
            </Field>
            <Field label="Local"><input className="inp" defaultValue="Santos / SP — Berço 12-18"/></Field>
          </div>
        </Section>

        {/* Modo de prazo */}
        <Section title="Modo de cálculo de prazo" icon="clock">
          <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
            <ModoChip active={modo==='performance'} onClick={()=>setModo('performance')}
              label="Por performance" desc="Defino estacas/mês e o sistema calcula o prazo."/>
            <ModoChip active={modo==='prazo'} onClick={()=>setModo('prazo')}
              label="Por prazo fixo" desc="Defino o prazo e o sistema dimensiona equipes."/>
          </div>
          {modo === 'performance' ? (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              <Field label="Estacas / mês"><input className="inp inp-num" type="number" value={estacasMes} onChange={e=>setEstacasMes(+e.target.value)}/></Field>
              <Field label="Prazo calculado" hint="resultado">
                <div className="inp d-mono" style={{ background: 'var(--d-green-soft)', color: '#1a8a3c', fontWeight: 700, display: 'flex', alignItems: 'center' }}>{est.mesesNecessarios.toFixed(1)} meses</div>
              </Field>
              <Field label="Equipes necessárias" hint="resultado">
                <div className="inp d-mono" style={{ background: 'var(--d-bg-2)', display: 'flex', alignItems: 'center' }}>{equipes} equipe{equipes>1?'s':''}</div>
              </Field>
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              <Field label="Prazo de entrega (meses)"><input className="inp inp-num" type="number" value={prazoMeses} onChange={e=>setPrazoMeses(+e.target.value)}/></Field>
              <Field label="Estacas / mês exigida" hint="resultado">
                <div className="inp d-mono" style={{ background: 'var(--d-bg-2)', display: 'flex', alignItems: 'center' }}>{Math.ceil(estacas / prazoMeses)}</div>
              </Field>
              <Field label="Equipes necessárias" hint="dimensionamento">
                <div className="inp d-mono" style={{ background: 'var(--d-green-soft)', color: '#1a8a3c', fontWeight: 700, display: 'flex', alignItems: 'center' }}>{Math.max(1, Math.ceil(estacas/(prazoMeses*26*solo.estacas_dia)))} equipes</div>
              </Field>
            </div>
          )}
        </Section>

        {/* Equipe */}
        <Section title="Equipe alocada (composição padrão)" icon="user" actions={<button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={12}/>Editar composição</button>}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[
              ['Mestre de obra', 0.25*equipes],
              ['Encarregado', equipes],
              ['Operador perfuratriz', equipes],
              ['Op. martelo', 0.5*equipes],
              ['Op. guindaste', equipes],
              ['Soldador', 2*equipes],
              ['Apontador', equipes],
              ['Ajudantes A+C', 5*equipes],
              ['Rigger', 0.5*equipes],
              ['Mecânico', 0.25*equipes],
              ['Téc. segurança', 0.5*equipes],
              ['Almoxarife', 0.25*equipes],
            ].map(([nome, qtd]) => (
              <div key={nome} style={{ padding: '8px 10px', background: 'var(--d-bg)', borderRadius: 6, border: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ font: '500 12px/1.2 Inter', flex: 1, color: 'var(--d-text-2)' }}>{nome}</span>
                <span className="d-mono" style={{ font: '700 12.5px/1 JetBrains Mono', color: 'var(--d-text)' }}>{qtd.toFixed(qtd<1?2:1)}</span>
              </div>
            ))}
          </div>
        </Section>

        {/* Equipamentos */}
        <Section title="Equipamentos" icon="truck" actions={<button className="btn btn-sm btn-ghost"><DUI.Icon name="plus" size={12}/>Adicionar</button>}>
          <table className="tbl">
            <thead><tr><th>Equipamento</th><th className="num">Qtd</th><th className="num">Depreciação/mês</th><th className="num">Manutenção/mês</th><th className="num">Total ({est.mesesNecessarios.toFixed(1)}m)</th></tr></thead>
            <tbody>
              {['guind-100','perf-wirth','mart-vibr','maq-solda'].map(eid => {
                const eq = data.equipamentos.find(e=>e.id===eid);
                const tot = (eq.deprec_mes + eq.manut_mes) * est.mesesNecessarios;
                return (
                  <tr key={eq.id}>
                    <td>{eq.nome}</td>
                    <td className="num">{equipes}</td>
                    <td className="num">{fmtBRL(eq.deprec_mes)}</td>
                    <td className="num">{fmtBRL(eq.manut_mes)}</td>
                    <td className="num" style={{fontWeight:600}}>{fmtBRL(tot)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Section>
      </div>

      {/* Painel direito — cálculo em tempo real */}
      <div style={{ position: 'sticky', top: 24, alignSelf: 'flex-start', height: 'fit-content' }}>
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 18px', background: '#0E2A47', color: 'white' }}>
            <div style={{ font: '500 11px/1 Inter', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', display: 'flex', alignItems: 'center', gap: 6 }}>
              <DUI.Icon name="calc" size={12}/> Cálculo em tempo real
            </div>
            <div className="d-mono" style={{ font: '700 30px/1.1 JetBrains Mono', marginTop: 8 }}>
              {fmtBRL(est.total)}
            </div>
            <div style={{ font: '500 12px/1.4 Inter', color: 'rgba(255,255,255,0.75)', marginTop: 4 }}>
              {fmtBRL(est.precoEstaca)} por estaca · {est.mesesNecessarios.toFixed(1)} meses
            </div>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ font: '600 11px/1 Inter', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--d-text-3)', marginBottom: 10 }}>Composição</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {breakdown.map(b => (
                <div key={b.label}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                    <span style={{ font: '500 12.5px/1 Inter', flex: 1 }}>{b.label}</span>
                    <span className="d-mono" style={{ font: '600 12.5px/1 JetBrains Mono' }}>{fmtBRL(b.val)}</span>
                    <span style={{ font: '500 11px/1 Inter', color: 'var(--d-text-3)', width: 40, textAlign: 'right' }}>{(b.val/est.subtotal*100).toFixed(1)}%</span>
                  </div>
                  <div style={{ height: 4, background: 'var(--d-bg-2)', borderRadius: 100, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: (b.val/maxVal*100)+'%', background: b.color, borderRadius: 100, transition: 'width 0.3s' }}/>
                  </div>
                  <div style={{ font: '500 10.5px/1.3 Inter', color: 'var(--d-text-4)', marginTop: 3 }}>{b.desc}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--d-border)', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <Row label="Subtotal (custo)" value={fmtBRL(est.subtotal)}/>
              <Row label={`BDI (${(est.bdiPct*100).toFixed(1)}%)`} value={fmtBRL(est.bdi)}/>
              <Row label="Total" value={fmtBRL(est.total)} strong/>
            </div>
            <div style={{ marginTop: 14, padding: 12, background: 'var(--d-green-soft)', borderRadius: 8 }}>
              <div style={{ font: '600 11px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
                <DUI.Icon name="sparkle" size={12}/> Simular cenário
              </div>
              <div style={{ font: '500 11.5px/1.4 Inter', color: '#1a8a3c' }}>
                Adicionar 1 equipe reduziria o prazo para <span style={{fontWeight:700}}>{(est.mesesNecessarios * equipes / (equipes+1)).toFixed(1)} meses</span> e o custo total para <span style={{fontWeight:700}}>{fmtBRL(est.total * 0.92)}</span>.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Section({ title, 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: '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>
        {actions && <div style={{ marginLeft: 'auto' }}>{actions}</div>}
      </div>
      <div style={{ padding: 18 }}>{children}</div>
    </div>
  );
}
function Field({ 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)', letterSpacing: '0.01em' }}>{label}</span>
      {children}
      {hint && <span style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)' }}>{hint}</span>}
    </label>
  );
}
function ModoChip({ active, label, desc, onClick }) {
  return (
    <button onClick={onClick} style={{
      flex: 1, padding: '12px 14px', textAlign: 'left',
      border: '1.5px solid', borderColor: active ? '#22A94A' : 'var(--d-border)',
      background: active ? 'var(--d-green-soft)' : 'var(--d-surface)',
      borderRadius: 8, cursor: 'pointer', font: 'inherit',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
        <div style={{ width: 14, height: 14, borderRadius: 100, border: '1.5px solid', borderColor: active ? '#22A94A' : 'var(--d-border-strong)', background: active ? '#22A94A' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {active && <div style={{width: 5, height: 5, borderRadius: 100, background: 'white'}}/>}
        </div>
        <span style={{ font: '600 13px/1 Inter', color: active ? '#1a8a3c' : 'var(--d-text)' }}>{label}</span>
      </div>
      <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)', paddingLeft: 22 }}>{desc}</div>
    </button>
  );
}
function Row({ label, value, strong }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
      <span style={{ font: strong ? '700 14px/1 Inter' : '500 12.5px/1 Inter', color: strong ? 'var(--d-text)' : 'var(--d-text-2)', flex: 1 }}>{label}</span>
      <span className="d-mono" style={{ font: strong ? '800 16px/1 JetBrains Mono' : '600 13px/1 JetBrains Mono', color: strong ? '#22A94A' : 'var(--d-text)' }}>{value}</span>
    </div>
  );
}

/* ============================ BASE DE CONHECIMENTO ============================ */
function BaseConhecimento({ data }) {
  const [tab, setTab] = useState('cargos');
  const tabs = [
    { id: 'cargos', label: 'Cargos', count: data.cargos.length, icon: 'user' },
    { id: 'equip', label: 'Equipamentos', count: data.equipamentos.length, icon: 'truck' },
    { id: 'mat', label: 'Materiais', count: data.materiais.length, icon: 'pkg' },
    { id: 'desp', label: 'Despesas', count: data.despesas.length, icon: 'money' },
    { id: 'solo', label: 'Solos', count: data.solos.length, icon: 'layers' },
    { id: 'bdi', label: 'BDI / Margens', icon: 'calc' },
  ];
  return (
    <div style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: 18 }}>
        <div>
          <h1 style={{ margin: 0, font: '700 22px/1.1 Inter' }}>Base de conhecimento</h1>
          <div style={{ font: '500 12.5px/1.4 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>Catálogo de custos, equipes e parâmetros usados no cálculo dos orçamentos</div>
        </div>
        <button className="btn btn-primary" style={{ marginLeft: 'auto' }}><DUI.Icon name="plus" size={14}/>Novo registro</button>
      </div>
      <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}
            {t.count != null && <span style={{ font: '600 11px/1 JetBrains Mono', color: 'var(--d-text-4)' }}>{t.count}</span>}
          </button>
        ))}
      </div>

      {tab === 'cargos' && (
        <div className="card">
          <table className="tbl">
            <thead><tr><th>Cargo</th><th>Tipo</th><th className="num">Salário</th><th className="num">HN</th><th className="num">HE</th><th className="num">Encargos</th><th className="num">Custo real/mês</th><th></th></tr></thead>
            <tbody>
              {data.cargos.map(c => (
                <tr key={c.id}>
                  <td style={{fontWeight:600}}>{c.nome}</td>
                  <td>{c.tipo === 'direto' ? <span className="chip chip-green">DIRETO</span> : <span className="chip chip-navy">INDIRETO</span>}</td>
                  <td className="num">{fmtBRL(c.salario)}</td>
                  <td className="num">{c.hn}h</td>
                  <td className="num">{c.he}h</td>
                  <td className="num">{(c.encargos*100).toFixed(0)}%</td>
                  <td className="num" style={{fontWeight:700, color: '#22A94A'}}>{fmtBRL(window.DESTACA_CALC.custoMensalCargo(c))}</td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={12}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'equip' && (
        <div className="card">
          <table className="tbl">
            <thead><tr><th>Equipamento</th><th className="num">Aquisição</th><th className="num">Depreciação/mês</th><th className="num">Manutenção/mês</th><th className="num">Diesel L/h</th><th></th></tr></thead>
            <tbody>{data.equipamentos.map(e => (
              <tr key={e.id}>
                <td style={{fontWeight:600}}>{e.nome}</td>
                <td className="num">{fmtBRL(e.valor)}</td>
                <td className="num">{fmtBRL(e.deprec_mes)}</td>
                <td className="num">{fmtBRL(e.manut_mes)}</td>
                <td className="num">{e.diesel_lh > 0 ? e.diesel_lh + ' L/h' : '—'}</td>
                <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={12}/></button></td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      )}

      {tab === 'mat' && (
        <div className="card">
          <table className="tbl"><thead><tr><th>Material</th><th>Unidade</th><th className="num">Custo</th><th></th></tr></thead>
            <tbody>{data.materiais.map(m => (
              <tr key={m.id}><td style={{fontWeight:600}}>{m.nome}</td><td>{m.unid}</td><td className="num">{fmtBRL(m.custo)}</td><td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={12}/></button></td></tr>
            ))}</tbody>
          </table>
        </div>
      )}

      {tab === 'desp' && (
        <div className="card"><table className="tbl"><thead><tr><th>Despesa</th><th>Critério</th><th className="num">Valor</th><th></th></tr></thead>
          <tbody>{data.despesas.map(d => (
            <tr key={d.id}><td style={{fontWeight:600}}>{d.nome}</td><td>{d.unid}</td><td className="num">{fmtBRL(d.valor)}</td><td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={12}/></button></td></tr>
          ))}</tbody>
        </table></div>
      )}

      {tab === 'solo' && (
        <div className="card"><table className="tbl"><thead><tr><th>Tipo de solo</th><th className="num">Estacas/dia (frente)</th><th className="num">Fator dificuldade</th><th></th></tr></thead>
          <tbody>{data.solos.map(s => (
            <tr key={s.id}><td style={{fontWeight:600}}>{s.nome}</td><td className="num">{s.estacas_dia}</td><td className="num">×{s.fator}</td><td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={12}/></button></td></tr>
          ))}</tbody>
        </table></div>
      )}

      {tab === 'bdi' && (
        <div className="card" style={{padding: 22}}>
          <h3 style={{margin: '0 0 16px', font: '600 15px/1 Inter'}}>Composição do BDI</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, maxWidth: 600 }}>
            <Field label="Lucro"><input className="inp inp-num" defaultValue="12,00" /></Field>
            <Field label="Impostos (PIS/COFINS/ISS)"><input className="inp inp-num" defaultValue="8,65"/></Field>
            <Field label="Despesas indiretas"><input className="inp inp-num" defaultValue="4,50"/></Field>
            <Field label="Riscos / contingência"><input className="inp inp-num" defaultValue="2,00"/></Field>
          </div>
          <div style={{ marginTop: 22, padding: 16, background: 'var(--d-green-soft)', borderRadius: 8, display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span style={{font:'600 12px/1 Inter', color:'#1a8a3c', textTransform:'uppercase', letterSpacing:'0.05em'}}>BDI total</span>
            <span className="d-mono" style={{ font: '800 24px/1 JetBrains Mono', color: '#1a8a3c' }}>27,15%</span>
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================ RESUMO CLIENTE ============================ */
function ResumoCliente({ projeto }) {
  if (!projeto) return null;
  const totalEstacas = projeto.obras.reduce((s,o)=>s+o.estacas,0);
  const totalFrentes = projeto.obras.reduce((s,o)=>s+o.frentes.length,0);
  return (
    <div style={{ maxWidth: 880, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 18, gap: 8, font: '500 12px/1 Inter', color: 'var(--d-text-3)' }}>
        <DUI.Icon name="eye" size={14}/> Pré-visualização — versão do cliente
        <button className="btn btn-sm" style={{ marginLeft: 'auto' }}><DUI.Icon name="share" size={12}/>Gerar link</button>
        <button className="btn btn-sm btn-primary"><DUI.Icon name="download" size={12}/>Baixar PDF</button>
      </div>
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '32px 36px 28px', background: '#0E2A47', color: 'white', position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 24 }}>
            <DUI.Mark size={42}/>
            <div>
              <div style={{ font: '800 18px/1 Inter', letterSpacing: '0.02em' }}>DESTACA</div>
              <div style={{ font: '500 9px/1 Inter', letterSpacing: '0.18em', color: '#22A94A', marginTop: 5 }}>ENGENHARIA DE FUNDAÇÕES</div>
            </div>
            <div style={{ marginLeft: 'auto', textAlign: 'right', font: '500 11px/1.5 Inter', color: 'rgba(255,255,255,0.7)' }}>
              Proposta comercial<br/>
              <span className="d-mono" style={{color: 'white', fontWeight: 600}}>{projeto.id}</span>
            </div>
          </div>
          <h1 style={{ margin: 0, font: '700 26px/1.2 Inter', maxWidth: '70%' }}>{projeto.nome}</h1>
          <div style={{ font: '500 13px/1.6 Inter', color: 'rgba(255,255,255,0.75)', marginTop: 14 }}>
            <strong style={{color:'white'}}>{projeto.cliente}</strong> · {projeto.local} · Emitido em 06/05/2026
          </div>
        </div>

        <div style={{ padding: '28px 36px' }}>
          <h2 style={{ margin: '0 0 6px', font: '600 16px/1 Inter' }}>Escopo dos serviços</h2>
          <p style={{ margin: '0 0 18px', font: '400 13.5px/1.6 Inter', color: 'var(--d-text-2)' }}>
            Execução de fundações em estacas conforme especificações do projeto, contemplando mobilização de equipamentos, mão de obra, equipamentos, materiais e gestão técnica até a entrega final.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
            {[
              {l:'Estacas totais', v: fmt(totalEstacas), s:'unidades'},
              {l:'Obras', v: projeto.obras.length, s:'localidades'},
              {l:'Frentes', v: totalFrentes, s:'simultâneas'},
              {l:'Prazo', v: '9 meses', s:'incl. mob. e desmob.'},
            ].map(k => (
              <div key={k.l} className="card" style={{ padding: 14, boxShadow: 'none' }}>
                <div style={{ font: '600 10.5px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{k.l}</div>
                <div className="d-mono" style={{ font: '700 22px/1 JetBrains Mono', marginTop: 6, color: '#0E2A47' }}>{k.v}</div>
                <div style={{ font: '500 11.5px/1 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>{k.s}</div>
              </div>
            ))}
          </div>

          <h3 style={{ margin: '0 0 10px', font: '600 14px/1 Inter' }}>Detalhamento por obra</h3>
          <table className="tbl" style={{ borderTop: '1px solid var(--d-border)' }}>
            <thead><tr><th>Obra</th><th className="num">Estacas</th><th className="num">Frentes</th><th className="num">Prazo</th><th className="num">Valor</th></tr></thead>
            <tbody>
              {projeto.obras.map(o => {
                const v = projeto.valor * (o.estacas / Math.max(totalEstacas,1));
                return (
                  <tr key={o.id}>
                    <td style={{fontWeight:600}}>{o.nome}</td>
                    <td className="num">{fmt(o.estacas)}</td>
                    <td className="num">{o.frentes.length}</td>
                    <td className="num">{(o.estacas/40).toFixed(0)} meses</td>
                    <td className="num" style={{fontWeight:600}}>{fmtBRL(v)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>

          <div style={{ marginTop: 28, padding: '20px 22px', background: 'linear-gradient(135deg, #0E2A47, #1a3e63)', borderRadius: 12, color: 'white', display: 'flex', alignItems: 'flex-end' }}>
            <div style={{ flex: 1 }}>
              <div style={{ font: '500 11px/1 Inter', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>Investimento total</div>
              <div className="d-mono" style={{ font: '800 36px/1.05 JetBrains Mono', marginTop: 8 }}>{fmtBRL(projeto.valor)}</div>
              <div style={{ font: '500 12.5px/1 Inter', color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>{fmtBRL(projeto.valor/totalEstacas)} por estaca executada</div>
            </div>
            <div style={{ font: '500 11.5px/1.5 Inter', color: 'rgba(255,255,255,0.7)', textAlign: 'right' }}>
              Validade: 30 dias<br/>
              Pagamento: medição mensal<br/>
              Reajuste: INCC anual
            </div>
          </div>

          <div style={{ marginTop: 24, font: '500 11.5px/1.6 Inter', color: 'var(--d-text-3)' }}>
            Esta proposta inclui mão de obra, equipamentos, materiais (eletrodos, tricones, estacas), combustível, alimentação, alojamento, mobilização e desmobilização, BDI (lucro, impostos, despesas indiretas) e gestão técnica completa do contrato.
          </div>
        </div>
      </div>
    </div>
  );
}

window.WorkspaceApp = WorkspaceApp;
Object.assign(window, { ListaProjetos, DetalheProjeto, DetalheObra, EditorFrente, BaseConhecimento, ResumoCliente });