@extends('layouts.app')

@section('content')
<div class="fixed inset-0 z-50 bg-gray-50 flex flex-col justify-center items-center px-6 overflow-y-auto">
    <!-- Logotipo ou Nome do Banco -->
    <div class="mb-8 text-center">
        <h1 class="text-4xl font-bold text-nubank tracking-tighter">FlowUp</h1>
        <!-- <p class="text-gray-500 font-medium">Faça login para acessar sua conta</p> -->
    </div>

    <!-- Card de Login -->
    <div class="bg-white w-full max-w-md p-10 rounded-[32px] shadow-xl border border-gray-100">
        <form action="{{ route('login') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Campo E-mail -->
            <div>
                <label class="block text-sm font-semibold text-gray-600 mb-2">Seu e-mail</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                        <i data-lucide="mail" class="w-5 h-5"></i>
                    </span>
                    <input type="email" name="email" 
                        class="w-full pl-12 pr-4 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition" 
                        placeholder="nome@exemplo.com" required autofocus>
                </div>
            </div>

            <!-- Campo Senha -->
            <div x-data="{ show: false }">
                <label class="block text-sm font-semibold text-gray-600 mb-2">Sua senha</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                        <i data-lucide="lock" class="w-5 h-5"></i>
                    </span>
                    <input :type="show ? 'text' : 'password'" name="password" 
                        class="w-full pl-12 pr-12 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-purple-500 outline-none transition" 
                        placeholder="••••••••" required>
                    
                    <!-- Botão Mostrar Senha -->
                    <button type="button" @click="show = !show" class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-nubank transition">
                        <i :data-lucide="show ? 'eye-off' : 'eye'" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>

            <!-- Esqueci minha senha -->
            <div class="flex justify-end">
                <a href="#" class="text-sm font-semibold text-nubank hover:underline">Esqueci minha senha</a>
            </div>

            <!-- Botão Entrar -->
            <button type="submit" class="w-full bg-nubank text-white font-bold py-4 rounded-2xl hover:bg-purple-800 transition-all shadow-lg shadow-purple-200 flex justify-center items-center gap-2">
                Entrar <i data-lucide="arrow-right" class="w-5 h-5"></i>
            </button>
        </form>

        <!-- Rodapé do Card -->
        <div class="mt-8 pt-6 border-t border-gray-100 text-center">
            <p class="text-gray-500 text-sm">
                Ainda não tem conta? 
                <a href="{{ route('pessoas.create') }}" class="text-nubank font-bold hover:underline">Criar conta</a>
            </p>
        </div>
    </div>
    
    <p class="mt-8 text-gray-400 text-xs text-center px-4">
        Ao continuar, você concorda com nossos<br /> Termos de Serviço e Política de Privacidade.
    </p>
</div>
@endsection