@extends('layouts.app')
@section('title', 'Sign up')

@section('content')
<div class="auth-wrap">
    <div class="auth-side">
        <a href="{{ route('home') }}" class="logo logo-img logo-auth">
            <img src="/assets/brand/logo.png" alt="Befikreyy" class="logo-img-el">
        </a>
        <div>
            <h2>Join {{ $siteName ?? 'Befikreyy' }}.</h2>
            <p style="margin-top: 14px; color: rgba(255,255,255,0.75); max-width: 360px;">One account, two worlds. Book services as a customer, or earn as a partner — same login, choose your role.</p>
        </div>
        <p style="font-size: 12.5px; color: rgba(255,255,255,0.5);">© {{ date('Y') }} Befikreyy · Noida</p>
    </div>
    <div class="auth-form-side">
        <div class="auth-card">
            <h1>Create account</h1>
            <p class="lead">Pick your role to get started.</p>
            @if($errors->any())
                <div class="alert alert-error">{{ $errors->first() }}</div>
            @endif
            <form method="POST" action="{{ route('register.attempt') }}">
                @csrf
                <div class="role-toggle">
                    <input type="radio" name="role" id="role-customer" value="customer" checked>
                    <label for="role-customer">🛒 I need a service</label>
                    <input type="radio" name="role" id="role-partner" value="partner">
                    <label for="role-partner">🔧 I want to be a partner</label>
                </div>
                <div class="field">
                    <label>Full name</label>
                    <input class="auth-input" type="text" name="name" value="{{ old('name') }}" required>
                </div>
                <div class="field">
                    <label>Email</label>
                    <input class="auth-input" type="email" name="email" value="{{ old('email') }}" required>
                </div>
                <div class="field">
                    <label>Phone</label>
                    <input class="auth-input" type="text" name="phone" value="{{ old('phone') }}" required>
                </div>
                <div class="field">
                    <label>Password</label>
                    <input class="auth-input" type="password" name="password" required>
                </div>
                <div class="field">
                    <label>Confirm password</label>
                    <input class="auth-input" type="password" name="password_confirmation" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block btn-lg">Create account</button>
            </form>
            <p class="auth-help">Already a member? <a href="{{ route('login') }}">Sign in →</a></p>
        </div>
    </div>
</div>
@endsection
