@extends('layouts.guest')

@section('title', 'Iniciar Sesión')

@section('content')
    <div class="w-full max-w-md"> <!-- Clean container -->
        <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="bg-berry-red p-8 text-center">
                <h1 class="text-3xl font-bold text-white mb-2">JoinTrust</h1>
                <p class="text-red-100">Acceso a Plataforma</p>
            </div>

            <form action="{{ route('login') }}" method="POST" class="p-8 space-y-6">
                @csrf

                @if($errors->any())
                    <div class="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
                        {{ $errors->first() }}
                    </div>
                @endif

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico</label>
                    <input type="email" name="email" required value="{{ old('email') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-berry-red focus:border-berry-red outline-none transition">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
                    <input type="password" name="password" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-berry-red focus:border-berry-red outline-none transition">
                </div>

                <button type="submit"
                    class="w-full bg-berry-red hover:bg-red-700 text-white font-bold py-3 rounded-xl shadow-lg transition transform active:scale-95">
                    Ingresar
                </button> <!-- Fixed closing tag -->
            </form>
        </div>
    </div>
@endsection