{{--
    La porte d'entrée (v2.0.1 §3).

    C'est le premier écran de la quasi-totalité des bénéficiaires, et il est le visage de la
    plateforme. Il ne montre donc rien d'autre que : le logo, la langue, une phrase, un champ,
    un bouton. Le lien vers l'autre mode de saisie est en dessous, en petit — il ne doit pas
    peser autant que le chemin principal.

    Le champ ouvre le clavier NUMÉRIQUE par défaut : taper un numéro sur un clavier de texte,
    à une main, dans un champ qu'on ne voit pas bien, est le genre de détail qui fait abandonner.
--}}
@php
    $estEmail = ($type ?? 'telephone') === 'email';
    $consigne = $estEmail ? __('formation.porte_consigne_email') : __('formation.porte_consigne');
@endphp

<x-formation.page-publique :titre="__('formation.porte_titre')">

    <h1 class="text-center text-2xl font-extrabold leading-snug">{{ __('formation.porte_titre') }}</h1>

    <div class="mt-3 flex items-start justify-center gap-3">
        <p class="max-w-xs text-center text-lg leading-relaxed text-encre-doux">{{ $consigne }}</p>
        <x-formation.ecouter :texte="$consigne" class="shrink-0" />
    </div>

    @if (session('formation_message'))
        <p class="mt-6 rounded-2xl border-2 border-coaching/40 bg-coaching/10 p-4 text-center text-base font-bold text-encre">
            {{ session('formation_message') }}
        </p>
    @endif

    <form method="POST" action="{{ route('formation.porte.demande') }}" class="mt-8">
        @csrf

        <label for="identifiant" class="sr-only">{{ $consigne }}</label>

        @if ($estEmail)
            <input id="identifiant" name="identifiant" type="email" inputmode="email"
                   autocomplete="email" required autofocus dir="ltr"
                   value="{{ old('identifiant') }}"
                   class="w-full rounded-2xl border-2 border-bordure bg-surface-haute px-4 py-5 text-center text-xl font-bold text-encre focus:border-primaire focus:outline-none"
                   placeholder="nom@exemple.ma">
        @else
            {{-- inputmode="tel" : le téléphone ouvre son pavé numérique, en grand. --}}
            <input id="identifiant" name="identifiant" type="tel" inputmode="tel"
                   autocomplete="tel" required autofocus dir="ltr"
                   value="{{ old('identifiant') }}"
                   class="w-full rounded-2xl border-2 border-bordure bg-surface-haute px-4 py-5 text-center text-2xl font-extrabold tracking-wider text-encre focus:border-primaire focus:outline-none"
                   placeholder="06 12 34 56 78">
        @endif

        @error('identifiant')
            <p class="mt-3 rounded-2xl border-2 border-terrain/50 bg-terrain/10 p-3 text-center text-base font-bold">
                {{ $message }}
            </p>
        @enderror

        <button type="submit" class="bouton-principal mt-6">
            {{ __('formation.continuer') }}
            <svg class="h-6 w-6 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
                <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
    </form>

    {{-- L'autre mode de saisie : présent, mais discret. --}}
    <p class="mt-5 text-center">
        <a href="{{ route('formation.porte', $estEmail ? [] : ['type' => 'email']) }}"
           class="cible-tactile inline-flex items-center px-3 text-sm text-encre-doux underline decoration-dotted underline-offset-4">
            {{ $estEmail ? __('formation.porte_bascule_telephone') : __('formation.porte_bascule_email') }}
        </a>
    </p>

    {{-- Sans code, « demande le code à ton formateur » enverrait attendre quelque chose qui
         n'existe plus. Le seul secours qui vaille alors est de vérifier son propre numéro. --}}
    <p class="mt-8 text-center text-sm leading-relaxed text-encre-doux">
        {{ $numeroSeul ? __('formation.porte_aide_numero') : __('formation.porte_aide') }}
    </p>
</x-formation.page-publique>