@extends('admin.layout')

@section('guest')
<div class="min-h-screen bg-gradient-to-br from-imoza-blue-dark to-imoza-dark flex items-center justify-center px-4">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <div class="w-16 h-16 rounded-xl bg-imoza-blue-bright flex items-center justify-center mx-auto mb-4 shadow-lg">
                <span class="text-white font-extrabold text-xl">MZ</span>
            </div>
            <h1 class="text-3xl font-extrabold text-white">IMOZA</h1>
            <p class="text-gray-300 text-sm mt-2">Sistema de Gestión</p>
        </div>

        <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
            <div class="flex">
                <a href="{{ route('admin.login') }}" class="flex-1 py-4 text-sm font-bold text-center bg-gray-50 text-gray-500 hover:bg-gray-100 transition-colors">Iniciar Sesión</a>
                <a href="{{ route('admin.register') }}" class="flex-1 py-4 text-sm font-bold text-center bg-imoza-blue-dark text-white">Registrarse</a>
            </div>

            <div class="p-8">
                @if($errors->any())
                <div class="bg-red-50 text-red-600 text-sm font-semibold px-4 py-3 rounded-xl mb-6 text-center">
                    {{ $errors->first() }}
                </div>
                @endif

                <form method="POST" action="{{ route('admin.register') }}" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Nombre completo</label>
                        <input type="text" name="name" value="{{ old('name') }}" placeholder="Tu nombre"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright focus:ring-2 focus:ring-imoza-blue-bright/20 outline-none transition-all" autofocus required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Usuario</label>
                        <input type="text" name="username" value="{{ old('username') }}" placeholder="Nombre de usuario"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright focus:ring-2 focus:ring-imoza-blue-bright/20 outline-none transition-all" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="tu@email.com"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright focus:ring-2 focus:ring-imoza-blue-bright/20 outline-none transition-all" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Contraseña</label>
                        <input type="password" name="password" placeholder="Mínimo 8 caracteres"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright focus:ring-2 focus:ring-imoza-blue-bright/20 outline-none transition-all" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Confirmar contraseña</label>
                        <input type="password" name="password_confirmation" placeholder="Repite la contraseña"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright focus:ring-2 focus:ring-imoza-blue-bright/20 outline-none transition-all" required>
                    </div>
                    <button type="submit" class="w-full bg-imoza-blue-dark hover:bg-imoza-blue-bright text-white font-bold py-3 rounded-xl transition-colors">
                        Crear Cuenta
                    </button>
                </form>
            </div>
        </div>

        <div class="text-center mt-6">
            <a href="/tienda" class="block text-gray-300 text-sm hover:text-white transition-colors">Ir a la Tienda →</a>
        </div>
    </div>
</div>
@endsection