/* ===== Porta de entrada: login + apresentação, antes do sistema =====
   Quem abre o link cai aqui. Duas formas de entrar:
   · e-mail e senha  → entra na operação (demonstração: ainda não há autenticação de verdade);
   · visitante       → entra em modo somente leitura, com dados simulados, sem alterar nada.
   Nada nesta tela identifica empresa, pessoa ou operação real. */

const enModulos=[
  {id:'espaco',titulo:'Quadro de espaço',dor:'“Quanto ainda cabe no caminhão que já está na rua?”',
   txt:'Cada caminhão em um cartão: o que leva, para onde vai e quanto sobra. Quando chega um pedido, o sistema compara as saídas possíveis — usar um caminhão já carregado, aumentar a carga de quem ainda não saiu, mandar um caminhão novo ou trocar uma entrega — com km, custo e horário de cada uma.'},
  {id:'logistica',titulo:'Pedidos e viagens',dor:'“Qual caminhão mando para este pedido?”',
   txt:'A central de programação compara a frota inteira com todas as bases de carregamento e explica a recomendação: km a mais, custo estimado, hora de chegada, aproveitamento do tanque e situação de manutenção.'},
  {id:'clientes',titulo:'Carteira de clientes',dor:'“Quem compra mais é o melhor cliente?”',
   txt:'Nem sempre. A carteira classifica cada cliente pelo resultado depois de pagar a entrega — volume, margem, distância, tamanho da carga e pontualidade no pagamento.'},
  {id:'frota',titulo:'Frota e manutenção',dor:'“O caminhão quebrou e parou a entrega.”',
   txt:'KM, revisão e vida dos pneus de cada veículo, com aviso antes de virar problema, e lançamento de quilometragem direto na tela.'},
  {id:'rastreamento',titulo:'Rastreamento',dor:'“Onde está o caminhão agora?”',
   txt:'Frota no mapa, com parada fora do previsto, excesso de velocidade e comparação entre rota com e sem pedágio. Nesta demonstração as posições são simuladas; na versão real vêm do rastreador que o caminhão já tem.'},
  {id:'mercado',titulo:'Mercado e cotações',dor:'“A que preço eu compro hoje?”',
   txt:'Petróleo, diesel e gasolina no mercado internacional e dólar, atualizados a cada minuto, com conversão para reais por litro.'},
  {id:'relatorios',titulo:'Relatórios',dor:'“Fechei o mês, e daí?”',
   txt:'Resultado do mês, volume e custo logístico por semana, desempenho de cada vendedor contra a meta, mix de produtos, clientes em alerta e entregas no prazo.'},
];

const enPassos=[
  {n:1,t:'O vendedor manda o pedido',d:'Pelo celular, em cinco campos. O pedido entra na fila de quem programa, sem WhatsApp e sem replanilhar.'},
  {n:2,t:'O sistema mostra as saídas',d:'Encaixar na viagem que já vai sair, mandar um caminhão novo ou remanejar uma entrega — com custo e horário lado a lado.'},
  {n:3,t:'Quem decide continua sendo a pessoa',d:'O sistema avisa, nunca bloqueia. Quando a decisão passa por cima de um aviso, o motivo fica registrado.'},
];

const enLimites=[
  'Cenário inteiramente simulado: caminhões, postos, cidades, litros, preços e posições são exemplos criados para a demonstração. Nenhum dado vem de uma empresa real.',
  'Sem login e sem banco de dados: o que você alterar fica só no seu navegador e volta ao normal quando recarregar a página.',
  'Rastreamento simulado: a integração com o rastreador de verdade é um passo seguinte, não está ligada aqui.',
  'Distâncias aproximadas: a versão real usa um roteirizador com estradas, pedágio e trânsito.',
];

const enPerfis=[
  {id:'P-DONO',nome:'Dono / Logística',txt:'Operação completa: espaço nos caminhões, programação de viagens, frota, rastreamento, carteira com margem e relatórios. Pode alterar.'},
  {id:'V-01',nome:'Vendedor',txt:'Só a carteira dele, em litros. Não vê faturamento, margem, custo de entrega nem os clientes dos outros vendedores.'},
  {id:'VISIT',nome:'Visitante',txt:'Vê todas as telas para conhecer o sistema, com dados simulados. Não entra em cadastros e não altera nada.'},
];

function Entrada({onEntrar}) {
  const [mail,setMail]=useState(''); const [pass,setPass]=useState('');
  return <div className="en-wrap">
    <header className="en-top">
      <div className="en-brand"><span className="brand-mark">V</span><div><strong>VIAFLUX</strong><small>Distribuição de combustíveis</small></div></div>
      <span className="en-tag">Demonstração</span>
    </header>

    <div className="en-hero">
      <div className="en-hero-txt">
        <p className="en-eyebrow">DO PEDIDO DO VENDEDOR À ENTREGA</p>
        <h1>A operação de uma distribuidora de combustíveis em um lugar só</h1>
        <p className="en-lead">Quem programa as viagens decide o dia inteiro: em qual caminhão cabe este pedido, se mando um caminhão novo, se troco uma entrega de lugar. O ViaFlux põe esses números na frente de quem decide — sem tirar a decisão dele.</p>
      </div>
      <section className="en-login">
        <h2>Entrar</h2>
        <label>E-mail<input id="lg-mail" type="email" value={mail} onChange={e=>setMail(e.target.value)} placeholder="voce@suaempresa.com.br" autoComplete="username"/></label>
        <label>Senha<input id="lg-pass" type="password" value={pass} onChange={e=>setPass(e.target.value)} placeholder="••••••••" autoComplete="current-password"/></label>
        <button className="primary" onClick={()=>onEntrar('P-DONO')}>Entrar</button>
        <div className="en-ou"><span>ou</span></div>
        <button className="en-visit" onClick={()=>onEntrar('VISIT')}>Entrar como visitante (demonstração)</button>
        <p className="en-login-nota">O visitante vê todas as telas com <b>dados simulados</b> e <b>não altera nada</b>. O acesso por e-mail e senha ainda não tem autenticação de verdade: nesta demonstração qualquer dado entra na operação completa.</p>
      </section>
    </div>

    <section className="en-cenario">
      <p className="en-label">O cenário simulado desta demonstração</p>
      <div className="en-nums">
        <article><strong>12</strong><span>caminhões de 30.000 e 45.000 L</span></article>
        <article><strong>10</strong><span>postos e redes clientes</span></article>
        <article><strong>4</strong><span>bases: própria, terminal e usinas</span></article>
        <article><strong>6,3 mi L</strong><span>volume do mês na carteira</span></article>
      </div>
      <p className="en-mini">Uma distribuidora de médio porte, com vendedores na rua, frota própria e carregamento em mais de uma base. Os nomes de postos, motoristas e cidades são inventados para o exemplo.</p>
    </section>

    <section className="en-caso">
      <p className="en-label">Um exemplo do que o sistema faz</p>
      <h2>Chega um pedido de 8.000 L de diesel para um posto a 50 km</h2>
      <div className="en-caso-body">
        <div className="en-op best"><b>Aumentar a carga de um caminhão que ainda não saiu</b><small>Ele já vai para aquela cidade hoje</small><p><span>0 km a mais</span><span>R$ 0</span><span>chega 16:27</span></p></div>
        <div className="en-vs">contra</div>
        <div className="en-op"><b>Mandar um caminhão novo carregar</b><small>Sai da garagem só para este pedido</small><p><span>104 km a mais</span><span>R$ 749</span><span>chega 14:44</span></p></div>
      </div>
      <p className="en-verdito">O sistema recomenda o primeiro e explica por quê — mas deixa o segundo a um clique. Se o posto tiver pressa, quem decide é quem está lá.</p>
      <button className="primary" onClick={()=>onEntrar('VISIT')}>Ver esse teste rodando →</button>
    </section>

    <section className="en-mods">
      <p className="en-label">O que tem dentro</p>
      <div className="en-grid">{enModulos.map(m=><article key={m.id} className="en-card">
        <h3>{m.titulo}</h3>
        <p className="en-dor">{m.dor}</p>
        <p className="en-txt">{m.txt}</p>
      </article>)}</div>
    </section>

    <div className="en-duo">
      <section className="en-box">
        <h2>Como funciona na prática</h2>
        <ol className="en-passos">{enPassos.map(p=><li key={p.n}><i>{p.n}</i><div><b>{p.t}</b><small>{p.d}</small></div></li>)}</ol>
      </section>
      <section className="en-box">
        <h2>Cada um vê o que é dele</h2>
        <p className="en-sub">Escolha por qual perfil quer entrar</p>
        <div className="en-perfis">{enPerfis.map(p=><button key={p.id} onClick={()=>onEntrar(p.id)}>
          <b>{p.nome}</b><small>{p.txt}</small><em>Entrar assim →</em>
        </button>)}</div>
        <p className="en-mini">O caminhoneiro é o próximo perfil, ainda em desenho: status da entrega, quilometragem e comprovante pelo celular. Quem entra por e-mail e senha pode trocar de perfil dentro do sistema; o visitante fica no modo somente leitura.</p>
      </section>
    </div>

    <section className="en-box en-limites">
      <h2>O que esta demonstração ainda não é</h2>
      <p className="en-sub">Para ninguém confundir protótipo com sistema em produção</p>
      <ul>{enLimites.map((l,i)=><li key={i}>{l}</li>)}</ul>
    </section>

    <section className="en-cta">
      <div><b>Quer ver isso na sua operação?</b><p>O sistema é adaptado à realidade de cada empresa: suas cidades, sua frota, seus produtos, suas bases e suas regras. O caminho normal é começar pela tela que resolve a dor mais cara — em geral a programação de viagens — e crescer a partir dela.</p></div>
      <button className="primary" onClick={()=>onEntrar('VISIT')}>Entrar como visitante</button>
    </section>

    <footer className="en-foot">ViaFlux · demonstração com dados simulados · {new Date().getFullYear()}</footer>
  </div>;
}