@extends('layouts.app')

@section('title', 'Register | Fashion Mitra')

@section('content')
<div class="max-w-xl mx-auto space-y-8">
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <h1 class="text-3xl font-semibold">Create your account</h1>
        <p class="mt-3 text-slate-600">Register now to save wishlist items and manage orders.</p>
        <form action="{{ route('register.post') }}" method="POST" class="mt-8 space-y-5">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700">Full name</label>
                <input type="text" name="name" value="{{ old('name') }}" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Email address</label>
                <input type="email" name="email" value="{{ old('email') }}" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Password</label>
                <input type="password" name="password" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Confirm password</label>
                <input type="password" name="password_confirmation" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <button type="submit" class="w-full rounded-3xl bg-slate-900 px-6 py-3 text-white font-semibold hover:bg-slate-800">Register</button>
        </form>
    </div>
    <div class="rounded-3xl bg-white p-8 shadow-sm text-center">
        <p class="text-slate-700">Already have an account?</p>
        <a href="{{ route('login') }}" class="mt-4 inline-flex rounded-full bg-slate-100 px-6 py-3 text-slate-900 font-semibold hover:bg-slate-200">Login</a>
    </div>
</div>
@endsection
