<x-layout title="Register - Lauck">

<div class="justify-center">
    <x-section-header 
        subtitle="Crear una cuenta" 
        title="Bicicletería " 
        highlight="Lauck" 
    />
</div>

<div class="flex flex-col items-center space-y-6 w-full max-w-lg p-6">
    <div class="bg-zinc-900 p-8 rounded-xl shadow-lg w-full max-w-md border-2 border-gray-500">

        <form action="{{ route('register.store') }}" method="POST" class="space-y-5">
            @csrf

            {{-- Bloque de errores --}}
            @if ($errors->any())
                <div class="bg-red-900 border border-red-700 text-white p-3 rounded-md">
                    <p class="text-sm font-medium">
                        {{ $errors->first() }}
                    </p>
                </div>
            @endif

                <div>
                    <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
                        Nombre completo
                    </x-forms.label>
                    <x-forms.input 
                        type="text"
                        value="{{ old('name') }}" 
                        name="name" 
                        required
                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
                    />
                </div>

            <div>
                <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
                    Correo electrónico
                </x-forms.label>
                <x-forms.input 
                    type="email"
                    value="{{ old('email') }}"  
                    name="email" 
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
                />
            </div>

            <div>
                <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
                    Contraseña
                </x-forms.label>
                <x-forms.input 
                    type="password" 
                    name="password" 
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
                />
            </div>

            <div>
                <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
                    Confirmar contraseña
                </x-forms.label>
                <x-forms.input 
                    type="password" 
                    name="password_confirmation" 
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
                />
            </div>

            <div>
                <input 
                    type="submit" 
                    value="Registrarse"
                    class="w-full bg-lime-400 font-bold text-white py-2 rounded-md hover:bg-lime-500 transition-colors"
                >
            </div>

            <p class="text-center text-sm text-gray-600">
                ¿Ya tenés una cuenta?
                <a href="{{ route('login') }}" class="text-blue-600 hover:underline">
                    Iniciá sesión acá
                </a>.
            </p>
        </form>

    </div>
</div>

</x-layout>
