<%# app/views/consolidacao_mailer/pagamento_efetuado.html.erb %>
<div style="font-family: Arial, sans-serif; max-width: 520px; margin: 0 auto; background: #0a0a0a; border-radius: 12px; overflow: hidden;">

  <div style="background: #0a0a0a; padding: 24px; border-left: 6px solid #f97316;">
    <h1 style="color: #ffffff; margin: 0; font-size: 20px;">REEM TRANSPORTE</h1>
    <p style="color: #f97316; margin: 4px 0 0; font-size: 13px;">Sistema de Logística</p>
  </div>

  <div style="background: #ffffff; padding: 28px;">
    <h2 style="color: #0a0a0a; margin-top: 0;">Olá, <%= @user.nome.split.first %>!</h2>

    <p style="color: #374151; font-size: 15px; line-height: 1.6;">
      Seu pagamento de entregas foi <strong>efetuado</strong> pela empresa.
    </p>

    <table style="width: 100%; margin: 20px 0; border-collapse: collapse;">
      <tr>
        <td style="background: #f3f4f6; padding: 10px 14px; font-weight: bold; color: #374151;">Período</td>
        <td style="padding: 10px 14px; color: #0a0a0a;"><%= @consolidacao.nome %></td>
      </tr>
      <% if @forma.present? %>
        <tr>
          <td style="background: #f3f4f6; padding: 10px 14px; font-weight: bold; color: #374151;">Forma</td>
          <td style="padding: 10px 14px; color: #0a0a0a;"><%= @forma.to_s.humanize %></td>
        </tr>
      <% end %>
    </table>

    <div style="background: #22c55e; border-radius: 10px; padding: 20px; text-align: center; margin: 20px 0;">
      <p style="color: rgba(0,0,0,0.6); margin: 0; font-size: 12px; font-weight: bold;">VALOR PAGO</p>
      <p style="color: #0a0a0a; margin: 6px 0 0; font-size: 32px; font-weight: 900;">
        R$ <%= format('%.2f', @valor).gsub('.', ',') %>
      </p>
    </div>

    <p style="text-align: center; margin: 24px 0;">
      <a href="<%= @link_painel %>"
         style="background: #0a0a0a; color: #f97316; text-decoration: none; padding: 14px 28px; border-radius: 8px; font-weight: bold; display: inline-block;">
        Ver meu painel e baixar extrato →
      </a>
    </p>

    <p style="color: #9ca3af; font-size: 12px; text-align: center;">
      Entre com seu PIN de 4 números ou escaneie o QR Code do seu extrato.
    </p>
  </div>
</div>
