@php $atalhos = config('demo.atalhos', []); @endphp

<x-layouts.guest title="Entrar" heading="Acesse sua conta" sub="Entre para consultar e baixar os XMLs de compra da sua empresa.">
    <form method="POST" action="{{ route('login') }}" class="space-y-5"
          x-data="{ entrarComo(email, senha) { this.$refs.email.value = email; this.$refs.senha.value = senha; this.$el.submit(); } }">
        @csrf

        @if ($errors->any())
            <div class="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                {{ $errors->first() }}
            </div>
        @endif

        <div>
            <label for="email" class="label">E-mail</label>
            <input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus
                   autocomplete="username" placeholder="voce@empresa.com.br" x-ref="email"
                   class="input @error('email') input-error @enderror">
        </div>

        <div>
            <div class="mb-1.5 flex items-baseline justify-between">
                <label for="password" class="label mb-0">Senha</label>
                <a href="{{ route('password.request') }}" class="text-xs font-medium text-brand-700 hover:text-brand-800">
                    Esqueci minha senha
                </a>
            </div>
            <input id="password" name="password" type="password" required autocomplete="current-password"
                   x-ref="senha" class="input @error('password') input-error @enderror">
        </div>

        <label class="flex cursor-pointer items-center gap-2 text-sm text-slate-600">
            <input type="checkbox" name="remember" value="1"
                   class="size-4 cursor-pointer rounded border-slate-300 text-brand-700 focus:ring-brand-500">
            Manter conectado neste dispositivo
        </label>

        <button type="submit" class="btn-primary w-full">Entrar</button>

        @if ($atalhos)
            {{-- Atalhos de desenvolvimento: só existem quando config/demo.php os habilita. --}}
            <div class="rounded-lg border border-dashed border-amber-300 bg-amber-50/60 p-4">
                <div class="flex items-center gap-2">
                    <svg class="size-4 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"/>
                    </svg>
                    <p class="text-xs font-semibold tracking-wide text-amber-800 uppercase">Acesso rápido — ambiente local</p>
                </div>

                {{-- Classes fixas: o Tailwind não detecta nome de classe montado em tempo de execução. --}}
                <div class="mt-3 grid gap-2 {{ count($atalhos) > 1 ? 'sm:grid-cols-2' : '' }}">
                    @foreach ($atalhos as $conta)
                        <button type="button"
                                @click="entrarComo(@js($conta['email']), @js($conta['senha']))"
                                class="group cursor-pointer rounded-lg border px-3 py-2.5 text-left transition
                                       {{ $conta['tom'] === 'brand'
                                           ? 'border-brand-200 bg-white hover:border-brand-400 hover:bg-brand-50'
                                           : 'border-slate-200 bg-white hover:border-slate-400 hover:bg-slate-50' }}">
                            <span class="block text-sm font-semibold text-slate-900">Entrar como {{ $conta['rotulo'] }}</span>
                            <span class="block truncate text-xs text-slate-500">{{ $conta['descricao'] }}</span>
                            <span class="mt-1 block truncate text-[11px] text-slate-400">{{ $conta['email'] }}</span>
                        </button>
                    @endforeach
                </div>

                <p class="mt-3 text-[11px] leading-relaxed text-amber-700">
                    Estes botões passam pelo login normal — mesma validação, mesmo rate limit.
                    Não aparecem em produção: <code class="rounded bg-amber-100 px-1">config/demo.php</code> devolve
                    lista vazia fora do ambiente local.
                </p>
            </div>
        @endif
    </form>

    @if ($site->bool('login_permitir_cadastro'))
        <p class="mt-8 text-center text-sm text-slate-500">
            Ainda não tem conta?
            <a href="{{ route('register') }}" class="font-semibold text-brand-700 hover:text-brand-800">Cadastre sua empresa</a>
        </p>
    @elseif ($site->get('suporte_email'))
        <p class="mt-8 text-center text-sm text-slate-500">
            Para abrir uma conta, fale com
            <a href="mailto:{{ $site->get('suporte_email') }}" class="font-semibold text-brand-700 hover:text-brand-800">{{ $site->get('suporte_email') }}</a>
        </p>
    @endif
</x-layouts.guest>
