@extends('layouts.app')
@section('title', 'Create account')
@section('content')
<div class="min-h-screen flex flex-col justify-center px-6 py-12">
    <h1 class="text-2xl font-extrabold mb-1">Create your account</h1>
    <p class="text-neutral-400 text-sm mb-8">Start trading crypto in Naira, in minutes.</p>

    @if ($errors->any())
        <div class="mb-4 text-sm text-red-400 space-y-1">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('register') }}" class="space-y-4">
        @csrf
        <div>
            <label class="text-xs text-neutral-400">Full name</label>
            <input type="text" name="full_name" value="{{ old('full_name') }}" required
                   class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 text-white focus:outline-none focus:border-orange-500">
        </div>
        <div>
            <label class="text-xs text-neutral-400">Email</label>
            <input type="email" name="email" value="{{ old('email') }}" required
                   class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 text-white focus:outline-none focus:border-orange-500">
        </div>
        <div>
            <label class="text-xs text-neutral-400">Phone number</label>
            <input type="text" name="phone" value="{{ old('phone') }}" placeholder="080########" required
                   class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 text-white focus:outline-none focus:border-orange-500">
        </div>
        <div>
            <label class="text-xs text-neutral-400">Password</label>
            <input type="password" name="password" required
                   class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 text-white focus:outline-none focus:border-orange-500">
        </div>
        <div>
            <label class="text-xs text-neutral-400">Confirm password</label>
            <input type="password" name="password_confirmation" required
                   class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3 text-white focus:outline-none focus:border-orange-500">
        </div>
        <button type="submit" class="btn-deposit w-full text-white font-bold py-4 rounded-full mt-4">Create Account</button>
    </form>

    <p class="text-center text-sm text-neutral-400 mt-6">
        Already have an account? <a href="{{ route('login') }}" class="text-orange-400 font-semibold">Log in</a>
    </p>
</div>
@endsection