@extends('layouts.public')
@section('title', 'Verificação MFA · Cavendral Beta')
@section('content')
<div class="bg-[#161b22] border border-[#30363d] rounded-md p-8 shadow-2xl">
    <div class="text-center mb-6">
        <div class="inline-flex items-center gap-2 font-mono text-lg">
            <span class="px-2 py-1 rounded bg-[#1f6c92]/20 text-[#80b9d5]">[B]</span>
            <span class="font-bold">CAVENDRAL BETA</span>
        </div>
        <p class="text-xs text-[#7d8590] mt-2 font-mono">VERIFICAÇÃO DE IDENTIDADE</p>
    </div>

    <p class="text-sm text-[#7d8590] mb-6 text-center">
        Digite o código TOTP de 6 dígitos do seu app autenticador.
    </p>

    <form method="POST" action="{{ route('mfa.verify') }}" class="space-y-4">
        @csrf
        <div>
            <label for="code" class="block text-xs font-bold text-[#7d8590] mb-1">CÓDIGO TOTP</label>
            <input type="text" id="code" name="code" required inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
                   class="w-full px-3 py-2 bg-[#21262d] border border-[#30363d] rounded text-2xl font-mono text-center tracking-widest focus:border-[#1f6c92] focus:ring-2 focus:ring-[#80b9d5]/40 outline-none"
                   placeholder="000000" autocomplete="one-time-code" autofocus>
            @error('code') <p class="text-xs text-[#f85149] text-center mt-1">{{ $message }}</p> @enderror
        </div>

        <button type="submit" class="w-full bg-[#1f6c92] hover:bg-[#80b9d5] text-white font-bold py-2 rounded transition-colors">
            VERIFICAR
        </button>
    </form>

    <div class="mt-6 border-t border-[#30363d] pt-4 text-center text-xs text-[#6e7681]">
        <p>Não tem mais acesso ao dispositivo?</p>
        <a href="#" class="text-[#80b9d5] hover:underline">Use um código de backup</a>
        <span class="mx-2">·</span>
        <a href="#" class="text-[#80b9d5] hover:underline">Solicitar reset MFA</a>
    </div>
</div>
@endsection