<x-layout title="Sign in">
    <section class="min-h-[calc(100vh-72px)] grid lg:grid-cols-2">
        {{-- Brand side --}}
        <div class="theme-dark relative hidden lg:flex flex-col justify-between bg-navy-900 text-white p-12 overflow-hidden">
            <img src="{{ asset('images/ict.jpg') }}" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover opacity-20">
            <div class="absolute inset-0 bg-gradient-to-br from-navy-900 via-navy-900/90 to-navy-900/70"></div>
            <div class="absolute inset-0 mesh-bg opacity-40"></div>
            <div class="pointer-events-none absolute -right-24 -top-24 w-80 h-80 rounded-full bg-brand-500/30 blur-3xl"></div>
            <a href="{{ route('home') }}" class="relative"><img src="{{ asset('brand/v2_reversed.svg') }}" alt="Brokam International" class="h-10 w-auto"></a>
            <div class="relative">
                <p class="kicker mb-4">Content Management</p>
                <h1 class="text-4xl font-semibold tracking-tight leading-tight">Manage projects, news, and enquiries.</h1>
                <p class="mt-4 text-white/60 max-w-sm">Sign in to update the website and respond to incoming leads.</p>
            </div>
            <p class="relative text-xs text-white/40">{{ config('brokam.company.name') }} · {{ config('brokam.company.domain') }}</p>
        </div>

        {{-- Form side --}}
        <div class="flex items-center justify-center p-6 sm:p-12">
            <div class="w-full max-w-sm">
                <h2 class="text-2xl font-semibold text-slate-ink">Sign in</h2>
                <p class="text-slate-500 mt-1 text-sm">Welcome back. Enter your credentials to continue.</p>

                @if ($errors->any())
                    <div class="mt-6 rounded-xl bg-red-50 border border-red-200 p-4 text-sm text-red-700">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form method="POST" action="{{ route('login') }}" class="mt-6 space-y-5">
                    @csrf
                    <x-field name="email" type="email" label="Email address" required />
                    <x-field name="password" type="password" label="Password" required />
                    <label class="flex items-center gap-2 text-sm text-slate-600">
                        <input type="checkbox" name="remember" value="1" class="rounded border-slate-300 text-brand-500 focus:ring-brand-500">
                        Remember me
                    </label>
                    <button type="submit" class="btn btn-primary w-full">Sign in <x-icon name="arrow" class="w-4 h-4"/></button>
                </form>

                <a href="{{ route('home') }}" class="inline-flex items-center gap-2 mt-8 text-sm text-slate-500 hover:text-brand-600 transition">
                    <x-icon name="arrow" class="w-4 h-4 rotate-180"/> Back to website
                </a>
            </div>
        </div>
    </section>
</x-layout>
