@section("title","Criar conta")
<div class="min-h-screen flex bg-white">

    <div class="hidden lg:block lg:w-1/2 relative overflow-hidden bg-slate-900" x-data="{ 
            active: 0, 
            slides: [
                { title: 'Gestão Inteligente', desc: 'Sistemas moldados para alta performance empresarial.' },
                { title: 'Segurança de Dados', desc: 'Protocolos rigorosos para governança documental.' },
                { title: 'Escalabilidade', desc: 'Soluções prontas para o crescimento do seu negócio.' }
            ] 
         }" x-init="setInterval(() => { active = (active + 1) % slides.length }, 5000)">

        <template x-for="(slide, index) in slides" :key="index">
            <div x-show="active === index" x-transition:enter="transition ease-out duration-1000"
                x-transition:enter-start="opacity-0 transform scale-105"
                x-transition:enter-end="opacity-100 transform scale-100" class="absolute inset-0">
                <div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 to-slate-900"></div>
                <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1000"
                    class="w-full h-full object-cover" alt="Slide Image">

                <div class="absolute bottom-20 left-12 right-12 text-white">
                    <h2 class="text-4xl font-bold mb-4" x-text="slide.title"></h2>
                    <p class="text-lg text-slate-300" x-text="slide.desc"></p>
                </div>
            </div>
        </template>
    </div>

    <div class="w-full lg:w-1/2 flex items-center justify-center p-8 md:p-16">
        <div class="max-w-md w-full">
            <div class="mb-10 text-center lg:text-left">
                <h1 class="text-3xl font-extrabold text-slate-900">Criar conta</h1>
                <p class="text-slate-500 mt-2">Introduza os seus dados para aceder à plataforma.</p>
            </div>

            <form wire:submit.prevent="register" class="space-y-5">
                <div>
                    <label class="block text-sm font-semibold text-slate-700">Nome Completo</label>
                    <input type="text" wire:model.defer="name"
                        class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-transparent transition">
                    @error('name') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-700">Telefone</label>
                    <input type="text" wire:model.defer="phone" placeholder="+244"
                        class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-transparent transition">
                    @error('phone') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-700">E-mail Corporativo</label>
                    <input type="email" wire:model.defer="email"
                        class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-transparent transition">
                    @error('email') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700">Palavra-passe</label>
                        <input type="password" wire:model.defer="password"
                            class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-transparent transition">
                        @error('password') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-700">Confirmar</label>
                        <input type="password" wire:model.defer="password_confirmation"
                            class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-transparent transition">
                    </div>
                </div>

                <button type="submit" wire:loading.attr="disabled"
                    class="w-full bg-slate-900 text-white py-4 rounded-xl font-bold hover:bg-slate-800 disabled:opacity-70 disabled:cursor-not-allowed transition shadow-lg shadow-slate-200 flex items-center justify-center">

                    <span wire:loading.remove>
                        Criar conta
                    </span>

                    <span wire:loading class="flex items-center">

                        A processar...
                    </span>
                </button>
            </form>

            <p class="mt-8 text-center text-sm text-slate-500">
                Já tem uma conta? <a href="{{ route('site.login') }}" class="text-blue-600 font-semibold">Faça Login</a>
            </p>
            <p class="mt-8 text-center text-sm text-slate-500">
                <a href="{{ route('home') }}" class="text-blue-600 font-semibold">Voltar ao website</a>
            </p>
        </div>
    </div>
</div>