@extends('app.layout-auth')

@section('title', 'Mot de passe oublié — Babi Meet')

@section('auth_image', asset('images/onboarding/medium-shot-cute-couple-outdoors.jpg'))
@section('auth_headline', 'Récupération de compte')
@section('auth_tagline', 'Recevez un code SMS ou un e-mail pour retrouver l\'accès à votre compte.')

@section('content')
    <div class="auth-card" id="step-request">
        <h1>Mot de passe oublié ?</h1>
        <p class="auth-sub">Entrez votre e-mail ou numéro de téléphone. Pour un numéro, nous vous enverrons un code SMS de connexion.</p>
        <label class="field-label" for="recovery">E-mail ou numéro</label>
        <input type="text" id="recovery" class="field-input" placeholder="vous@exemple.com ou 07 00 00 00 00" autocomplete="username">
        <button type="button" class="btn btn-primary btn-block" id="btn-send-recovery">Envoyer</button>
        <p class="auth-switch"><a href="{{ route('web.login') }}">Retour à la connexion</a></p>
    </div>

    <div class="auth-card" id="step-code" hidden>
        <h1>Vérification SMS</h1>
        <p class="auth-sub">Entrez le code reçu 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-recovery">Se connecter</button>
        <button type="button" class="btn btn-text" id="btn-back">Changer de numéro</button>
    </div>

    <div class="auth-card" id="step-email-sent" hidden>
        <div class="auth-success-icon"><i class="fa-solid fa-envelope-circle-check"></i></div>
        <h1>Vérifiez votre boîte</h1>
        <p class="auth-sub" id="email-sent-message">Si un compte existe pour cette adresse, vous recevrez un e-mail avec les instructions.</p>
        <a href="{{ route('web.login') }}" class="btn btn-primary btn-block">Retour à la connexion</a>
    </div>
@endsection

@push('scripts')
<script type="module">
    import { initForgotPassword } from '{{ asset('js/app/auth.js') }}?v=6';
    initForgotPassword();
</script>
@endpush