<%# app/views/devise/passwords/new.html.erb — Esqueci a senha (estilizada) %>
<% content_for :title, 'Recuperar senha' %>

<div class="min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm">

    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-[#f97316] rounded-2xl flex items-center justify-center mx-auto mb-3">
        <%= icone :chave, cor: 'text-black', tamanho: 'w-8 h-8', espaco: false %>
      </div>
      <h1 class="text-white font-bold text-2xl">Recuperar senha</h1>
      <p class="text-gray-400 text-sm mt-1">Informe seu e-mail para receber as instruções</p>
    </div>

    <div class="bg-[#111111] border border-white/10 rounded-2xl p-8">
      <%= form_with(url: user_password_path, scope: :user, method: :post, data: { turbo: false }) do |f| %>
        <div class="space-y-5">
          <div>
            <%= f.label :email, 'E-mail', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
            <%= f.email_field :email,
                  autofocus: true, autocomplete: 'email',
                  class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
                          placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
                          focus:ring-[#f97316] transition-colors text-base',
                  placeholder: 'seu@email.com' %>
          </div>

          <%= f.submit 'Enviar instruções',
                class: 'w-full py-3.5 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
                        rounded-xl transition-colors cursor-pointer text-base min-h-[48px]' %>
        </div>
      <% end %>

      <p class="text-center mt-6">
        <%= link_to '← Voltar para o login', new_user_session_path,
            class: 'text-sm text-[#f97316] hover:text-orange-400 transition-colors' %>
      </p>
    </div>

    <p class="text-gray-600 text-xs text-center mt-6">
      <%= icone :alerta, cor: 'text-amber-400' %> O envio de e-mail depende da configuração SMTP no servidor.<br>
      Sem SMTP, peça ao administrador para redefinir sua senha.
    </p>

    <p class="text-gray-500 text-xs text-center mt-4">Reem Transporte © <%= Date.today.year %></p>
  </div>
</div>
