{{--
    Répondre EN PARLANT (v2.1 §5).

    Pour une bonne part du public, c'est le mode principal — pas un dépannage. Le bouton est
    rouge, rond, et fait la moitié de l'écran : appuyer, parler, arrêter.

    ⚠️ L'enregistrement est CONSERVÉ, toujours, à côté du texte. La transcription peut se tromper,
    le formateur peut la corriger ; ce qui a été dit, lui, ne se perd pas. C'est la seule preuve
    de ce que le bénéficiaire a réellement voulu dire.
--}}
<div class="mt-4" data-dictaphone>

    <p class="text-center text-base text-encre-doux">{{ __('formation.appuie_et_parle') }}</p>

    <div class="mt-3 flex flex-col items-center gap-3">
        <button type="button" data-dictaphone-demarrer
                class="cible-tactile grid h-32 w-32 place-items-center rounded-full bg-corail text-navy shadow-lg active:scale-95">
            <svg class="h-14 w-14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <rect x="9" y="2" width="6" height="12" rx="3"/>
                <path d="M5 11a7 7 0 0014 0M12 18v4" stroke-linecap="round"/>
            </svg>
            <span class="sr-only">{{ __('formation.enregistrer') }}</span>
        </button>

        <button type="button" data-dictaphone-arreter
                class="cible-tactile hidden grid h-32 w-32 place-items-center rounded-full bg-corail text-navy shadow-lg active:scale-95">
            <svg class="h-12 w-12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <rect x="6" y="6" width="12" height="12" rx="2"/>
            </svg>
            <span class="sr-only">{{ __('formation.arreter') }}</span>
        </button>

        <p class="text-2xl font-black tabular-nums" data-dictaphone-chrono>00:00</p>
    </div>

    <p data-dictaphone-erreur class="mt-3 hidden rounded-2xl border-2 border-corail bg-corail/15 p-3 text-center text-base">
        {{ __('formation.micro_refuse') }}
    </p>

    {{-- Le fichier passe par le même champ qu'un dépôt manuel : une seule route, une seule
         validation côté serveur. --}}
    <input type="file" accept="audio/*" wire:model="audio" class="sr-only">

    <div wire:loading wire:target="audio" class="mt-3 text-center text-base text-encre-doux">
        {{ __('formation.envoi_en_cours') }}
    </div>

    {{-- ⚠️ Pas de `temporaryUrl()` ici. Livewire ne sait la produire que pour les IMAGES ; sur un
         fichier audio, elle retombe sur le disque local, qui ne sait pas fabriquer d'URL
         temporaire — et l'écran tombait en erreur au lieu d'afficher l'enregistrement. Le
         dictaphone pose lui-même la source depuis le blob local du navigateur : c'est instantané,
         et ça ne demande rien au serveur. --}}
    <div @class(['carte mt-3', 'hidden' => ! $audio])>
        <p class="text-base font-bold">{{ __('formation.enregistrement_pret') }}</p>
        <audio controls data-dictaphone-lecture class="mt-2 w-full"></audio>
    </div>

    @error('audio')
        <p class="mt-3 rounded-2xl border-2 border-corail bg-corail/15 p-3 text-base">{{ $message }}</p>
    @enderror
</div>