{{-- Поля добавления и подтверждения номера. Требует Alpine-состояние:
     step, newPhone, busy, error, callNumber + методы add(), check(), cancel(). --}}
<div x-show="step === 'idle'">
    <label class="mb-1 block text-sm font-medium text-gray-700">Добавить номер</label>
    <div class="flex gap-2">
        <input type="tel" inputmode="tel" maxlength="18"
               :value="newPhone" @input="newPhone = formatPhone($event.target.value); $event.target.value = newPhone"
               @keydown.enter.prevent="add()"
               placeholder="+7 (900) 000-00-00" class="input flex-1">
        <button type="button" @click="add()" :disabled="busy" class="btn-brand shrink-0 whitespace-nowrap">
            <span x-show="!busy">Добавить</span><span x-show="busy" x-cloak>…</span>
        </button>
    </div>
    <p x-show="error" x-cloak class="mt-1 text-xs text-red-600" x-text="error"></p>
</div>

<div x-show="step === 'verify'" x-cloak class="rounded-lg bg-brand-50 p-4 text-sm">
    <p class="text-gray-800">
        Сейчас на номер <span class="font-medium" x-text="formatPhone(newPhone)"></span> поступит звонок
        с незнакомого номера и сбросится. Введите <b>последние 4 цифры</b> этого номера.
    </p>
    <div class="mt-3 flex items-center gap-2">
        <input type="text" inputmode="numeric" maxlength="4" x-model="code"
               @input="code = code.replace(/\D/g,'').slice(0,4)" @keydown.enter.prevent="check()"
               placeholder="0000" class="input w-28 text-center tracking-[0.3em]">
        <button type="button" @click="check()" :disabled="busy || code.length < 4" class="btn-brand">
            <span x-show="!busy">Подтвердить</span><span x-show="busy" x-cloak>Проверяю…</span>
        </button>
        <button type="button" @click="cancel()" class="btn-ghost px-3 py-2">Отмена</button>
    </div>
    <p x-show="error" x-cloak class="mt-2 text-xs text-red-600" x-text="error"></p>
</div>