@extends('app.layout-auth')

@section('title', 'Inscription — Babi Meet')

@section('auth_image', asset('images/onboarding/handsome-boy-young-girl-posing-together.jpg'))
@section('auth_headline', 'Rejoignez Babi Meet')
@section('auth_tagline', 'Créez votre profil en quelques minutes et commencez à rencontrer des personnes près de chez vous.')

@section('content')
    <div class="auth-card" id="step-phone">
        <h1>Créer un compte</h1>
        <p class="auth-sub">Rejoignez Babi Meet et commencez à rencontrer des personnes près de chez vous.</p>
        @if(config('services.orange.web_skip_sms'))
            <p class="dev-hint">SMS temporairement désactivé — inscription directe par numéro.</p>
        @endif
        <label class="field-label" for="phone">Numéro de téléphone</label>
        <div class="phone-intl-wrap">
            <input type="tel" id="phone" class="field-input phone-intl" placeholder="07 00 00 00 00" autocomplete="tel">
        </div>
        <p class="auth-legal">En continuant, vous acceptez nos <a href="{{ route('terms') }}" target="_blank">conditions</a> et notre <a href="{{ route('privacy') }}" target="_blank">politique de confidentialité</a>.</p>
        <button type="button" class="btn btn-primary btn-block" id="btn-send-code">Continuer</button>
        <p class="auth-switch">Déjà inscrit ? <a href="{{ route('web.login') }}">Se connecter</a></p>
    </div>

    <div class="auth-card" id="step-code" hidden>
        <h1>Vérification</h1>
        <p class="auth-sub">Code envoyé au <strong id="phone-display"></strong></p>
        <div id="dev-code-hint" class="dev-hint" hidden></div>
        <label class="field-label" for="code">Code à 6 chiffres</label>
        <input type="text" id="code" class="field-input code-input" maxlength="6" inputmode="numeric" placeholder="000000">
        <button type="button" class="btn btn-primary btn-block" id="btn-verify">Créer mon compte</button>
        <button type="button" class="btn btn-text" id="btn-back">Changer de numéro</button>
    </div>
@endsection

@push('scripts')
<script type="module">
    import { initAuthPage } from '{{ asset('js/app/auth.js') }}?v=5';
    initAuthPage({ mode: 'signup' });
</script>
@endpush