<x-guest-layout>

    <!-- Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-bold text-slate-900 mb-1">Create your account</h2>
        <p class="text-slate-500 text-sm">Join the GARI platform — submit papers, register for conferences, and more.</p>
    </div>

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

        <!-- Name -->
        <div>
            <label for="name" class="auth-label">Full Name</label>
            <input id="name" type="text" name="name" value="{{ old('name') }}"
                   class="auth-input @error('name') !border-red-400 !bg-red-50 @enderror"
                   placeholder="Dr. John Smith" required autofocus autocomplete="name">
            @error('name')
                <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
                    <i class="fas fa-circle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Email -->
        <div>
            <label for="email" class="auth-label">Email Address</label>
            <input id="email" type="email" name="email" value="{{ old('email') }}"
                   class="auth-input @error('email') !border-red-400 !bg-red-50 @enderror"
                   placeholder="you@university.edu" required autocomplete="username">
            @error('email')
                <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
                    <i class="fas fa-circle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Password -->
        <div>
            <label for="password" class="auth-label">Password</label>
            <input id="password" type="password" name="password"
                   class="auth-input @error('password') !border-red-400 !bg-red-50 @enderror"
                   placeholder="Minimum 8 characters" required autocomplete="new-password">
            @error('password')
                <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
                    <i class="fas fa-circle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Confirm Password -->
        <div>
            <label for="password_confirmation" class="auth-label">Confirm Password</label>
            <input id="password_confirmation" type="password" name="password_confirmation"
                   class="auth-input @error('password_confirmation') !border-red-400 !bg-red-50 @enderror"
                   placeholder="Re-enter your password" required autocomplete="new-password">
            @error('password_confirmation')
                <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
                    <i class="fas fa-circle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Terms note -->
        <p class="text-[11px] text-slate-400 leading-relaxed">
            By creating an account, you agree to GARI's
            <a href="#" class="text-brand-600 font-medium hover:underline">Terms of Service</a> and
            <a href="#" class="text-brand-600 font-medium hover:underline">Privacy Policy</a>.
        </p>

        <!-- Submit -->
        <button type="submit"
                class="w-full bg-slate-900 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm tracking-wide transition-colors shadow-sm flex items-center justify-center gap-2">
            Create Account <i class="fas fa-arrow-right text-xs"></i>
        </button>

        <!-- Divider -->
        <div class="flex items-center gap-3 my-2">
            <div class="flex-grow h-px bg-slate-100"></div>
            <span class="text-xs text-slate-400 font-medium">Already have an account?</span>
            <div class="flex-grow h-px bg-slate-100"></div>
        </div>

        <!-- Login link -->
        <a href="{{ route('login') }}"
           class="w-full block text-center bg-white border border-slate-200 hover:border-slate-300 text-slate-700 font-semibold py-3 rounded-xl text-sm transition-colors">
            Sign In Instead
        </a>

    </form>
</x-guest-layout>
