@extends('layouts.app')
@section('title','Register — Rukay\'s')
@section('content')
<style>
.auth-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:3rem 1rem; }
.auth-card { background:#fff; border-radius:1rem; border:1px solid #E8D5C4; padding:2.5rem; width:100%; max-width:440px; }
.auth-card h1 { font-size:1.9rem; color:#8B3252; text-align:center; margin-bottom:.5rem; }
.auth-card p { text-align:center; color:#7A6058; font-size:.9rem; margin-bottom:2rem; }
</style>
<div class="auth-wrap">
    <div class="auth-card">
        <h1>Create Account</h1>
        <p>Join Rukay's and enjoy seamless booking</p>
        @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
        <form method="POST" action="{{ route('register') }}">
            @csrf
            <div class="form-group"><label>Full Name</label><input type="text" name="name" required value="{{ old('name') }}" placeholder="Akosua Mensah"></div>
            <div class="form-group"><label>Email Address</label><input type="email" name="email" required value="{{ old('email') }}" placeholder="you@example.com"></div>
            <div class="form-group"><label>Phone Number</label><input type="tel" name="phone" required value="{{ old('phone') }}" placeholder="+233 244 000 000"></div>
            <div class="form-group"><label>Password</label><input type="password" name="password" required placeholder="At least 6 characters" autocomplete="new-password"></div>
            <div class="form-group"><label>Confirm Password</label><input type="password" name="password_confirmation" required placeholder="Confirm password"></div>
            <button type="submit" class="btn btn-primary" style="width:100%;padding:.75rem;">Create Account</button>
        </form>
        <div style="text-align:center;margin-top:1.25rem;font-size:.875rem;color:#7A6058;">Already have an account? <a href="{{ route('login') }}" style="color:#8B3252;font-weight:500;">Sign in</a></div>
    </div>
</div>
@endsection