@extends('layouts.auth')
@section('title', 'Create Account — Salihiya World Cargo')

@section('content')
<h1 class="form-title">Create account</h1>
<p class="form-subtitle">
    Use the phone number your cargo was booked with — it links your history automatically.
</p>

<form method="POST" action="{{ route('register') }}">
    @csrf

    <div class="field-group">
        <label class="field-label">Full Name</label>
        <input type="text" name="name" value="{{ old('name') }}"
            class="field-input {{ $errors->has('name') ? 'error' : '' }}"
            placeholder="John Doe" autofocus>
        @error('name')<p class="field-error">{{ $message }}</p>@enderror
    </div>

    <div class="field-group">
        <label class="field-label">
            Phone Number
            <span style="font-weight:400;color:var(--brand-gold-dark);"> — must match booking number</span>
        </label>
        <input type="tel" name="phone" value="{{ old('phone') }}"
            class="field-input {{ $errors->has('phone') ? 'error' : '' }}"
            placeholder="0722123456">
        @error('phone')<p class="field-error">{{ $message }}</p>@enderror
    </div>

    <div class="field-group">
        <label class="field-label">
            Email
            <span style="font-weight:400;color:#aaa8c0;"> — optional</span>
        </label>
        <input type="email" name="email" value="{{ old('email') }}"
            class="field-input {{ $errors->has('email') ? 'error' : '' }}"
            placeholder="email@example.com">
        @error('email')<p class="field-error">{{ $message }}</p>@enderror
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;">
        <div>
            <label class="field-label">Password</label>
            <input type="password" name="password"
                class="field-input {{ $errors->has('password') ? 'error' : '' }}"
                placeholder="••••••••">
            @error('password')<p class="field-error">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="field-label">Confirm</label>
            <input type="password" name="password_confirmation"
                class="field-input"
                placeholder="••••••••">
        </div>
    </div>

    <button type="submit" class="btn-primary">Create Account →</button>
</form>

<p style="text-align:center;font-size:13px;color:#8b87a8;margin-top:24px;">
    Already have an account?
    <a href="{{ route('login') }}" class="form-link">Sign in</a>
</p>
@endsection