/* ===== Hoje × Com o sistema (14/11) =================================
   Pedido dele, e o mais importante da rodada:

   "Não adianta eu ficar desenvolvendo o melhor app e ele não aprovar o
    preço que vou cobrar dele para isso."

   Esta tela não é para o Paulo operar: é para ele DECIDIR. Mostra o
   processo de hoje com etapa, tempo e custo, o mesmo processo com o
   sistema, e a diferença em dinheiro por mês.

   🔴 TODO NÚMERO AQUI É HIPÓTESE e TODO CAMPO É EDITÁVEL. As etapas
   saíram da boca do Paulo na reunião de 13/11; as HORAS e o VALOR DA
   HORA não — ninguém perguntou ainda. A tela diz isso na cara.

   A conta é simples de propósito: ele tem que conseguir refazer de
   cabeça. Economia = (horas de hoje − horas depois) × valor da hora
   × dias úteis, mais as perdas que deixam de acontecer.
   ================================================================== */

const MG_DIAS_UTEIS = 21;

/* quem: 'paulo' ou 'equipe' — o valor da hora é diferente */
const MG_ETAPAS = [
  {id:'excel', quem:'paulo', t:'Montar a carga no Excel',
   d:'Dividir por região e por caminhão, compartimento a compartimento.',
   fala:'"Isso me prende muito na tela do computador."', hoje:2.0, depois:0.3,
   como:'O Quadro de espaço e o Alocador de carga montam; ele confere.'},
  {id:'remontar', quem:'paulo', t:'Refazer a carga quando entra pedido novo',
   d:'Pedido chega com os caminhões já rodando e desmancha o que estava pronto.',
   hoje:1.0, depois:0.2, como:'O Encaixe de pedido recalcula sozinho.'},
  {id:'transcrever', quem:'paulo', t:'Transcrever pedido do WhatsApp',
   d:'Ler a mensagem de cada vendedor e passar para o Excel.',
   fala:'"Tem falha humana do cara... tirando o pedido, não ouviu."', hoje:1.0, depois:0,
   como:'O vendedor lança no app; o pedido nasce pronto.'},
  {id:'preco', quem:'paulo', t:'Passar o preço do dia, um vendedor por vez',
   d:'Toda manhã, individualmente, por WhatsApp.', hoje:0.5, depois:0.1,
   como:'Ele registra dois valores e todos veem na hora.'},
  {id:'desconto', quem:'paulo', t:'Responder vendedor sobre desconto',
   d:'Cada pedido de abatimento vira uma conversa.', hoje:0.5, depois:0,
   como:'A faixa de negociação já está na tela do vendedor.'},
  {id:'rota', quem:'paulo', t:'Combinar rota com cada motorista',
   d:'Mensagem por mensagem, caminhão por caminhão.', hoje:0.5, depois:0.1,
   como:'Rota montada durante o dia e disparada no fechamento.'},
  {id:'lancar', quem:'equipe', t:'Lançar vendas no sistema de estoque',
   d:'A equipe digita o que já foi digitado uma vez no WhatsApp.', hoje:1.5, depois:0.5,
   como:'A venda já entra estruturada; sobra conferir.'},
];

/* perdas que não são tempo: dinheiro que escapa hoje */
const MG_PERDAS = [
  {id:'contrato', t:'Contrato de compra perdido no prazo',
   d:'Comprou barato, não conseguiu carregar até a data, o contrato devolveu o dinheiro.',
   fala:'"Tinha data para tirar... se eu não carregar, o contrato devolve o dinheiro."',
   valor:10000, base:'20 centavos abaixo do mercado × 50.000 L = R$ 10 mil num caminhão',
   como:'Alerta de contrato vencendo, com dias restantes.'},
  {id:'abaixo', t:'Venda abaixo do preço, sem critério',
   d:'Desconto dado no susto, sem olhar estoque nem histórico do cliente.',
   valor:4500, base:'3 pedidos de 30.000 L com 5 centavos a mais de desconto',
   como:'A faixa de negociação define até onde dá, cliente por cliente.'},
  {id:'frete', t:'Entrega que não cobre o próprio frete',
   d:'Cliente longe com carga pequena, vendido pelo preço de entrega padrão.',
   valor:3000, base:'estimativa: 4 entregas/mês no vermelho',
   como:'O piso por cliente barra a venda antes de acontecer.'},

  /* 14/11, pedido dele: a frota tem que aparecer aqui. "Acredito que ele
     não tenha essa noção do quanto gasta, do quanto poderia economizar." */
  {id:'parado', t:'Caminhão parado por manutenção não planejada',
   d:'Quebrou ou venceu a revisão no meio da operação. Não roda, não entrega, e a oficina de urgência custa mais.',
   valor:6000, base:'o número bom sai da tela Manutenção, que já calcula serviço por serviço com preço de fonte publicada — aqui entra só o que o caminhão DEIXA DE RENDER nos dias parado, que ninguém mediu ainda',
   como:'Revisão, pneu e freio planejados pelo KM real de cada caminhão, com aviso antes de vencer e histórico do que já foi feito.'},
  {id:'consumo', t:'Consumo pior do que poderia',
   d:'Hoje o km/L de cada caminhão é gerado, não medido. Ninguém sabe qual veículo está bebendo mais do que deveria.',
   valor:3200, base:'cerca de 42.000 km/mês na frota, 3% de ganho de consumo, diesel a R$ 6,00',
   como:'Consumo real por caminhão e por motorista, viagem a viagem. Queda de consumo vira sintoma antes de virar quebra.'},
  {id:'pneu', t:'Pneu trocado na hora errada',
   d:'Cedo demais joga borracha boa fora; tarde demais vira risco na estrada e quebra.',
   valor:2500, base:'um jogo de 22 pneus custa cerca de R$ 47 mil e dura de 100 a 150 mil km; recapar custa menos de metade. Trocar cedo ou tarde demais joga dinheiro fora nessa ordem de grandeza',
   como:'Desgaste contado por km rodado, com recapagem e troca no catálogo da tela Manutenção.'},
];

function MgLinha({v, onChange, sufixo, largura}){
  return <input className="mg-in" style={largura?{width:largura}:null} inputMode="decimal"
    value={v==null?'':String(v).replace('.',',')}
    onChange={e=>{ const n=parseFloat(String(e.target.value).replace(',','.'));
      onChange(isNaN(n)?0:n); }} aria-label={sufixo||'valor'}/>;
}

function MapaGanho(){
  const [vh, setVh] = usePersist('ganho-hora', {paulo:180, equipe:45});
  /* O precedente que ele mesmo viveu: saiu de uma função, foi vender,
     e o faturamento quase dobrou. Não é estimativa nossa — é a
     experiência dele.
     14/11: confirmado que 8 e 15 são MILHÕES DE REAIS DE VENDA por mês,
     não litros. Por isso a margem aqui é percentual sobre a venda.
     A margem em si ele não soube dizer: depende de o cliente retirar
     (margem do litro) ou de a Iunes entregar (margem do litro mais o
     frete próprio). Campo editável, começa em branco de propósito. */
  const [cr, setCr] = usePersist('ganho-crescimento', {antes:8000000, depois:15000000, margemPc:null, repete:20});
  const [et, setEt] = usePersist('ganho-etapas', {});
  const [pd, setPd] = usePersist('ganho-perdas', {});
  const [dias, setDias] = usePersist('ganho-dias', MG_DIAS_UTEIS);

  const hojeDe = (e)=> et[e.id] && et[e.id].hoje!=null ? et[e.id].hoje : e.hoje;
  const depoisDe = (e)=> et[e.id] && et[e.id].depois!=null ? et[e.id].depois : e.depois;
  const perdaDe = (p)=> pd[p.id]!=null ? pd[p.id] : p.valor;
  const mudarEt = (id,campo,v)=> setEt(c=>({...c, [id]:{...(c[id]||{}), [campo]:v}}));

  const linhas = MG_ETAPAS.map(e=>{
    const h=hojeDe(e), d=depoisDe(e), ganhoH=Math.max(0,h-d);
    const hora = vh[e.quem]||0;
    return {e, h, d, ganhoH, mes: ganhoH*dias*hora};
  });
  const hHoje = linhas.reduce((s,l)=>s+l.h,0);
  const hDepois = linhas.reduce((s,l)=>s+l.d,0);
  const custoHoje = linhas.reduce((s,l)=>s+l.h*dias*(vh[l.e.quem]||0),0);
  const custoDepois = linhas.reduce((s,l)=>s+l.d*dias*(vh[l.e.quem]||0),0);
  const ganhoTempo = custoHoje-custoDepois;
  const ganhoPerdas = MG_PERDAS.reduce((s,p)=>s+perdaDe(p),0);
  const total = ganhoTempo+ganhoPerdas;

  /* alavanca de venda: o que ele faria com o tempo de volta */
  const saltoVenda = Math.max(0,(cr.depois||0)-(cr.antes||0));
  const temMargem = cr.margemPc!=null && cr.margemPc>0;
  const saltoRS = temMargem ? saltoVenda*(cr.margemPc/100) : null;
  const destrava = saltoRS!=null ? saltoRS*((cr.repete||0)/100) : null;

  const hPaulo = linhas.filter(l=>l.e.quem==='paulo');
  const horasPauloHoje = hPaulo.reduce((s,l)=>s+l.h,0);
  const horasPauloDepois = hPaulo.reduce((s,l)=>s+l.d,0);

  return <div>
    <section className="ai-tip mg-aviso">
      <span>!</span>
      <div>
        <strong>As etapas são do Paulo. As horas e o valor da hora, não.</strong>
        <p>As etapas saíram da reunião de 13/11, com as palavras dele. Quanto tempo cada uma consome e quanto vale a hora dele
          <b> ninguém perguntou ainda</b> — os números abaixo são hipótese e todo campo é editável. Preencha junto com ele.</p>
      </div>
    </section>

    <section className="panel mg-topo">
      <div className="mg-kpis">
        <div><span>Horas do Paulo por dia</span><b>{hojeFmt(horasPauloHoje)} → {hojeFmt(horasPauloDepois)}</b>
          <small>devolve {hojeFmt(horasPauloHoje-horasPauloDepois)} por dia</small></div>
        <div><span>Custo do processo por mês</span><b>{brl(Math.round(custoHoje))} → {brl(Math.round(custoDepois))}</b>
          <small>só o tempo das pessoas</small></div>
        <div className="hl"><span>O sistema devolve</span><b>{brl(Math.round(total))}</b>
          <small>por mês · tempo {brl(Math.round(ganhoTempo))} + perdas {brl(Math.round(ganhoPerdas))}</small></div>
        <div className="hl2"><span>E pode destravar</span><b>{destrava!=null?brl(Math.round(destrava)):'falta a margem'}</b>
          <small>{destrava!=null?'por mês · parte do salto que ele já fez uma vez':'preencha a margem sobre a venda abaixo'}</small></div>
      </div>
      <div className="mg-param">
        <label className="field"><span>Hora do Paulo</span><MgLinha v={vh.paulo} onChange={n=>setVh({...vh,paulo:n})}/></label>
        <label className="field"><span>Hora da equipe</span><MgLinha v={vh.equipe} onChange={n=>setVh({...vh,equipe:n})}/></label>
        <label className="field"><span>Dias úteis no mês</span><MgLinha v={dias} onChange={n=>setDias(n)}/></label>
      </div>
    </section>

    <section className="panel mg-tab">
      <div className="panel-title"><div><h2>O tempo das pessoas</h2>
        <p>Horas por dia em cada etapa, hoje e com o sistema. Clique nos números para corrigir.</p></div></div>
      <div className="table-wrap"><table>
        <thead><tr><th>Etapa</th><th>Quem</th><th className="num">Hoje h/dia</th><th className="num">Depois h/dia</th><th className="num">Devolve</th><th className="num">R$/mês</th></tr></thead>
        <tbody>{linhas.map(l=><tr key={l.e.id}>
          <td><b className="strong">{l.e.t}</b><small className="cell-sub">{l.e.d}</small>
            {l.e.fala&&<small className="cell-sub mg-fala">{l.e.fala}</small>}
            <small className="cell-sub mg-como">Com o sistema: {l.e.como}</small></td>
          <td>{l.e.quem==='paulo'?'Paulo':'Equipe'}</td>
          <td className="num"><MgLinha v={l.h} onChange={n=>mudarEt(l.e.id,'hoje',n)} largura="62px"/></td>
          <td className="num"><MgLinha v={l.d} onChange={n=>mudarEt(l.e.id,'depois',n)} largura="62px"/></td>
          <td className="num">{hojeFmt(l.ganhoH)} h</td>
          <td className="num strong">{brl(Math.round(l.mes))}</td>
        </tr>)}
        <tr className="mg-soma"><td colSpan="2"><b>Somando</b></td>
          <td className="num"><b>{hojeFmt(hHoje)} h</b></td>
          <td className="num"><b>{hojeFmt(hDepois)} h</b></td>
          <td className="num"><b>{hojeFmt(hHoje-hDepois)} h</b></td>
          <td className="num"><b>{brl(Math.round(ganhoTempo))}</b></td></tr>
        </tbody>
      </table></div>
    </section>

    <section className="panel mg-tab">
      <div className="panel-title"><div><h2>O dinheiro que escapa hoje</h2>
        <p>Não é tempo: é prejuízo que o processo atual deixa passar. Valores por mês, editáveis.</p></div></div>
      <div className="table-wrap"><table>
        <thead><tr><th>O que acontece</th><th className="num">R$/mês</th></tr></thead>
        <tbody>{MG_PERDAS.map(p=><tr key={p.id}>
          <td><b className="strong">{p.t}</b><small className="cell-sub">{p.d}</small>
            {p.fala&&<small className="cell-sub mg-fala">{p.fala}</small>}
            <small className="cell-sub">Base do número: {p.base}</small>
            <small className="cell-sub mg-como">Com o sistema: {p.como}</small></td>
          <td className="num"><MgLinha v={perdaDe(p)} onChange={n=>setPd(c=>({...c,[p.id]:n}))} largura="92px"/></td>
        </tr>)}
        <tr className="mg-soma"><td><b>Somando</b></td><td className="num"><b>{brl(Math.round(ganhoPerdas))}</b></td></tr>
        </tbody>
      </table></div>
    </section>

    <section className="panel mg-salto">
      <div className="panel-title"><div><h2>O tempo dele não vale o custo da hora. Vale o que ele vende com ela.</h2>
        <p>Isto não é estimativa nossa: é o que já aconteceu na empresa dele.</p></div></div>
      <p className="mg-sa-caso">Ele saiu de uma função específica dentro da empresa e passou a se dedicar às vendas.
        A venda foi de <b>{brl(cr.antes||0)}</b> para <b>{brl(cr.depois||0)}</b> por mês. <b>Quase dobrou</b> — só por trocar onde o tempo dele estava.</p>
      <div className="mg-sa-campos">
        <label className="field"><span>Vendia antes (R$/mês)</span><MgLinha v={cr.antes} onChange={n=>setCr({...cr,antes:n})} largura="124px"/></label>
        <label className="field"><span>Passou a vender (R$/mês)</span><MgLinha v={cr.depois} onChange={n=>setCr({...cr,depois:n})} largura="124px"/></label>
        <label className="field"><span>Margem sobre a venda (%)</span><MgLinha v={cr.margemPc} onChange={n=>setCr({...cr,margemPc:n})} largura="92px"/></label>
        <label className="field"><span>Quanto o sistema reproduz (%)</span><MgLinha v={cr.repete} onChange={n=>setCr({...cr,repete:n})} largura="92px"/></label>
      </div>

      <p className="mg-sa-conta">O salto foi de <b>{brl(saltoVenda)}</b> por mês a mais de venda.
        {temMargem
          ? <> A <b>{hojeFmt(cr.margemPc)}%</b> de margem, isso é <b>{brl(Math.round(saltoRS))}</b> por mês.
              Com o sistema reproduzindo <b>{Math.round(cr.repete||0)}%</b> daquele efeito, são <b>{brl(Math.round(destrava))}</b> por mês —
              <b> {hojeFmt(destrava/Math.max(1,total))} vezes</b> tudo o que o sistema economiza em tempo e perdas somados.</>
          : <> <b>Falta a margem</b> para transformar isso em dinheiro. É a pergunta do roteiro.</>}</p>

      <div className="mg-sa-notas">
        <p><b>"Quanto o sistema reproduz" quer dizer o quê?</b> Ele conseguiu aquele salto largando uma função inteira.
          O sistema não larga uma função: devolve horas. Então a conta usa só <b>uma parte</b> daquele efeito.
          Em 20% já dá um número grande; é escolha conservadora, para não virar promessa.</p>
        <p><b>A margem depende de quem leva.</b> Cliente que <b>retira</b>: entra só a margem do litro.
          Cliente que <b>recebe</b>: entra a margem do litro <b>mais o frete próprio</b>, que também é receita da Iunes.
          Ele não soube dizer nenhuma das duas — por isso o campo nasce vazio em vez de com um chute meu.</p>
      </div>
    </section>

    <section className="panel mg-vida">
      <div className="panel-title"><div><h2>O que não vira número</h2>
        <p>E que pode ser o que mais pesa na decisão dele.</p></div></div>
      <p className="mg-sa-caso">Na reunião ele falou de <b>qualidade de vida e tempo</b>: não tem tempo para nada,
        é muita mensagem, muita coisa para resolver.</p>
      <ul className="mg-vi-lista">
        <li><b>{hojeFmt(horasPauloHoje-horasPauloDepois)} horas por dia</b> de volta para ele — <em>{hojeFmt((horasPauloHoje-horasPauloDepois)*5)} h por semana</em></li>
        <li><b>Menos mensagem</b> — preço, desconto e rota deixam de ser conversa um a um</li>
        <li><b>Menos decisão repetida</b> — a regra resolve o comum, ele só vê a exceção</li>
      </ul>
      <p className="calc-note">Não entra na conta de cima de propósito: ninguém compra qualidade de vida numa planilha.
        Mas é o que ele citou sem ser perguntado, e costuma ser o que decide.</p>
    </section>

    <section className="panel mg-fecho">
      <p className="mg-fe-rot">A conta que interessa</p>
      <p className="mg-fe-l">Pelo que está preenchido aqui, o processo de hoje custa <b>{brl(Math.round(total))} por mês</b> entre
        tempo das pessoas e prejuízo que escapa. Esse é o teto conservador: <b>abaixo disso, o sistema se paga só com o que devolve</b>,
        sem contar um litro a mais de venda.</p>
      {destrava!=null
        ? <p className="mg-fe-l mg-fe-2">Contando a alavanca de venda — o precedente dele — o número vai para
            <b> {brl(Math.round(total+destrava))} por mês</b>. Mas esse segundo número depende dele repetir o que já fez,
            e por isso não serve para prometer: serve para mostrar o tamanho do jogo.</p>
        : <p className="mg-fe-l mg-fe-2">Falta a <b>margem sobre a venda</b> para somar a alavanca aqui.
            Com ela, este número cresce bastante — é a pergunta que mais muda esta tela.</p>}
      <div className="mg-fe-escada">
        <div><span>Se custar</span><b>{brl(Math.round(total*0.2))}/mês</b><small>paga-se em 6 dias de operação</small></div>
        <div><span>Se custar</span><b>{brl(Math.round(total*0.35))}/mês</b><small>paga-se em 11 dias</small></div>
        <div><span>Se custar</span><b>{brl(Math.round(total*0.5))}/mês</b><small>paga-se na metade do mês</small></div>
      </div>
      <p className="calc-note">Os três degraus são só leitura da mesma conta, não proposta comercial.
        Enquanto as horas não forem confirmadas com o Paulo, este número serve para conversar — não para colocar em contrato.</p>
    </section>
  </div>;
}

/* horas com uma casa, vírgula, sem zero à toa */
function hojeFmt(h){ return (Math.round(h*10)/10).toFixed(1).replace('.',','); }

MM_OPER.push({
  id:'mapa-ganho',
  aba:'Hoje × Depois',
  titulo:'O processo de hoje, e o mesmo processo com o sistema',
  nota:'Etapa, tempo e custo dos dois lados — e a diferença por mês.',
  fonte:'Etapas da reunião de 13/11/2026 · horas e valores a confirmar',
  render: () => <MapaGanho/>,
});