@extends('layouts.guest')

@section('title', 'Entrar — ImóvelZapAi')

@section('content')
    <div class="flex flex-1 items-center justify-center px-4 py-12">
        <div class="w-full max-w-md">
            <div class="mb-8 text-center">
                <h1 class="text-2xl font-semibold text-white">ImóvelZapAi</h1>
                <p class="mt-2 text-sm text-slate-400">Acesse sua conta</p>
            </div>

            <div class="rounded-2xl border border-slate-800 bg-slate-900 p-8 shadow-xl">
                <h2 class="mb-6 text-lg font-medium text-white">Login</h2>

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

                <form method="POST" action="{{ route('login') }}" class="space-y-5">
                    @csrf

                    <div>
                        <label for="email" class="mb-1.5 block text-sm font-medium text-slate-300">
                            E-mail
                        </label>
                        <input
                            id="email"
                            name="email"
                            type="email"
                            value="{{ old('email') }}"
                            required
                            autocomplete="email"
                            class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white placeholder-slate-500 focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
                            placeholder="voce@email.com"
                        >
                    </div>

                    <div>
                        <label for="password" class="mb-1.5 block text-sm font-medium text-slate-300">
                            Senha
                        </label>
                        <input
                            id="password"
                            name="password"
                            type="password"
                            required
                            autocomplete="current-password"
                            class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white placeholder-slate-500 focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
                        >
                    </div>

                    <label class="flex items-center gap-2 text-sm text-slate-400">
                        <input
                            type="checkbox"
                            name="remember"
                            value="1"
                            class="rounded border-slate-600 bg-slate-950 text-emerald-600 focus:ring-emerald-500"
                            @checked(old('remember'))
                        >
                        Lembrar de mim
                    </label>

                    <button
                        type="submit"
                        class="w-full rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-slate-900"
                    >
                        Entrar
                    </button>
                </form>

                <p class="mt-6 text-center text-sm text-slate-400">
                    Ainda não tem conta?
                    <a href="{{ route('register') }}" class="font-medium text-emerald-400 hover:text-emerald-300">Cadastre-se</a>
                </p>
            </div>
        </div>
    </div>
@endsection
