@section('title', 'Login - ZEINER ')
<div>
    
   <div class="min-h-screen bg-[#0d1526] flex items-center justify-center p-6">

    <div class="w-full max-w-7xl bg-cover bg-center  overflow-hidden relative" style="background-image: url('{{ asset('imgs/datacenter-bg.jpg') }}');">
        

        <div class="">

          <div class="flex flex-wrap min-h-screen">

    <!-- LADO ESQUERDO -->
    <div class="w-[500px] bg-white px-12 py-16 ">

        <div>
         <a class="flex items-center mb-[40px] space-x-1 flex-shrink-0" href="{{ route('home') }}">
                <img width="60" src="{{ asset('imgs/logo-black.png') }}" alt="Logo">
                <h1 class="text-3xl font-bold text-gray-800">ZEINER</h1>
         </a>
        </div>

        <h3 class="text-gray-700 text-lg font-semibold pb-1 border-b-[4px] border-red-400 inline-block">
            Anúncios Recentes
        </h3>

        <div class="flex items-center gap-2 text-gray-500 text-sm mt-6">
            <i class="fa fa-regular fa-calendar"></i>
            <span>18th Nov 2025</span>
        </div>

        <h1 class="text-3xl font-bold text-gray-900 mt-4 leading-snug">
            Mantenha o seu site<br>seguro e protegido
        </h1>

        <p class="text-gray-600 mt-4 text-base leading-relaxed max-w-md">
            A segurança do site é um dos aspectos mais importantes da execução de uma
            presença online. Um site hackeado pode levar a inúmeras horas de depuração
            e danos à reputação.
        </p>

    </div>

        <!-- ==== LADO DIREITO COM A IMAGEM + OVERLAY + BLUR ==== -->
    <div class="flex-1 relative flex items-center justify-center py-16">

        <!-- Imagem de fundo -->
        <div class="absolute inset-0 bg-cover bg-center"
            style="background-image: url('/mnt/data/Screenshot 2025-11-20 124039.png');">
        </div>

        <!-- Overlay escuro transparente -->
        <div class="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>

        <!-- CARD DE LOGIN (fica na frente) -->
        <div class="relative w-full max-w-sm bg-white shadow-xl px-10 py-10 rounded-[3px] backdrop-blur-md">

            <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                <i class="fa fa-solid fa-key text-gray-700"></i>
                ÁREA DO CLIENTE
            </h2>

            <p class="text-gray-600 mt-1 mb-6">Faça o login para entrar.</p>

             @if (session()->has('account_created'))
            <div class="w-6xl mx-4 my-3 text-black cursor-pointer py-5 flex items-center justify-between rounded bg-green-200 ">
            <span class="text-sm text-center">{{ session()->get('account_created') }}</span>
            <span wire:click='close' class="px-2 text-3xl mt-[-1rem] cursor-pointer">&times;</span>
           </div>
           @endif

            <form wire:submit='authenticate' class="space-y-5">
                <div>
                    <label class="text-gray-700 text-sm font-medium">E-mail</label>
                    <input 
                        wire:model='email'
                        type="email"
                        class="mt-1 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-700
                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                         required 
                    />
                     @error('email') <span class="text-red-400">{{$message}}</span> @enderror
                </div>

                <div>
                    <div class="flex justify-between">
                        <label class="text-gray-700 text-sm font-medium">Senha</label>
                        <a href="#" class="text-sm text-gray-500 hover:text-blue-600">
                            Não se lembra da senha?
                        </a>
                    </div>

                    <div class="relative">
                        <input type="password"
                            wire:model='password'
                            class="mt-1 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-700
                            focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" required>
                        <i class="fa fa-regular fa-eye absolute right-4 top-4 text-gray-500"></i>
                    </div>
                    @error('password') <span class="text-red-400">{{$message}}</span> @enderror  
                </div>

                <label class="flex items-center gap-2 text-gray-700 text-sm cursor-pointer">
                    <input type="checkbox" class="w-4 h-4 border-gray-400">
                    Lembrar
                </label>

                <button class="w-full bg-[#0b5ce7] hover:bg-[#084aba] text-white text-lg font-semibold py-3 rounded-lg transition">
                    Login
                </button>

                <p class="text-center text-gray-600 text-sm mt-4">
                    Não está registrado?
                    <a href="{{ route('user.verify.account') }}" class="text-blue-600 font-medium hover:underline">Criar Conta</a>
                </p>
            </form>

        </div>

    </div>


</div>

            
        </div>

        <x-home.whatsapp-floating-button />  

    </div>
</div>

</div>
