@extends('layouts.public')

@section('content')
    <div class="mx-auto max-w-6xl px-4 py-14">
        <div class="mx-auto max-w-lg rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
            <h1 class="text-2xl font-semibold">Create Account</h1>
            <p class="mt-2 text-sm text-slate-600">Register to access courses and track your progress.</p>

            @if ($errors->any())
                <div class="mt-6 rounded-xl border border-rose-400/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
                    {{ $errors->first() }}
                </div>
            @endif

            <form class="mt-6 space-y-4" method="POST" action="{{ route('register.submit') }}">
                @csrf

                <div>
                    <label class="text-sm text-slate-700">Full Name</label>
                    <input name="name" type="text" value="{{ old('name') }}" required class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none ring-0 focus:border-emerald-400/60">
                </div>

                <div>
                    <label class="text-sm text-slate-700">Email</label>
                    <input name="email" type="email" value="{{ old('email') }}" required class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none ring-0 focus:border-emerald-400/60">
                </div>

                <div>
                    <label class="text-sm text-slate-700">Password</label>
                    <input name="password" type="password" required class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none ring-0 focus:border-emerald-400/60">
                </div>

                <div>
                    <label class="text-sm text-slate-700">Confirm Password</label>
                    <input name="password_confirmation" type="password" required class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none ring-0 focus:border-emerald-400/60">
                </div>

                <button class="w-full rounded-xl bg-slate-900 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800">
                    Create Account
                </button>

                <div class="text-center text-sm text-slate-600">
                    Already have an account?
                    <a href="{{ route('login') }}" class="font-semibold text-emerald-700 hover:text-emerald-800">Login</a>
                </div>
            </form>
        </div>
    </div>
@endsection