@extends('app.layout-auth')

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

@section('auth_image', asset('images/onboarding/medium-shot-man-woman-hugging.jpg'))
@section('auth_headline', 'Bon retour parmi nous')
@section('auth_tagline', 'Connectez-vous pour retrouver vos matchs et reprendre la conversation.')

@section('content')
    <div class="auth-card" id="step-phone">
        <h1>Bon retour</h1>
        <p class="auth-sub">Connectez-vous avec votre numéro de téléphone pour retrouver vos matchs.</p>
        @if(config('services.orange.web_skip_sms'))
            <p class="dev-hint">SMS temporairement désactivé — connexion 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>
        <button type="button" class="btn btn-primary btn-block" id="btn-send-code">Continuer</button>
        <p class="auth-forgot-link"><a href="{{ route('web.forgot-password') }}">Mot de passe oublié ?</a></p>
        <p class="auth-switch">Pas encore de compte ? <a href="{{ route('web.register') }}">S'inscrire</a></p>
    </div>

    <div class="auth-card" id="step-code" hidden>
        <h1>Vérification</h1>
        <p class="auth-sub">Entrez le code reçu par SMS 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">Se connecter</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=6';
    initAuthPage({ mode: 'login' });
</script>
@endpush