@extends('layouts.guest')

@section('title', 'Crear cuenta')

@section('content')
    <h2 class="mb-1 text-xl font-semibold text-gray-900 dark:text-white">Crear una cuenta</h2>
    <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Completa tus datos para registrarte.</p>

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

        <div>
            <x-label for="name">Nombre completo</x-label>
            <x-input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus autocomplete="name" placeholder="Juan Pérez" />
            <x-error for="name" />
        </div>

        <div>
            <x-label for="email">Correo electrónico</x-label>
            <x-input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="username" placeholder="tu@correo.com" />
            <x-error for="email" />
        </div>

        <div>
            <x-label for="password">Contraseña</x-label>
            <x-input id="password" type="password" name="password" required autocomplete="new-password" placeholder="Mínimo 8 caracteres" />
            <x-error for="password" />
        </div>

        <div>
            <x-label for="password_confirmation">Confirmar contraseña</x-label>
            <x-input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password" placeholder="Repite la contraseña" />
        </div>

        <x-button type="submit" class="w-full">
            <i class="fa-solid fa-user-plus"></i> Registrarme
        </x-button>
    </form>

    <p class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
        ¿Ya tienes cuenta?
        <a href="{{ route('login') }}" class="font-medium text-primary hover:text-primary-dark">Inicia sesión</a>
    </p>
@endsection