<x-layouts.guest title="Sign In">
    <div class="grid w-full gap-12 lg:grid-cols-[1.05fr_0.95fr]">
        <section class="space-y-8">
            <div class="space-y-5">
                <p class="text-sm font-semibold uppercase tracking-[0.25em] text-emerald-400">Team inbox for social selling</p>
                <h1 class="max-w-3xl text-5xl font-semibold tracking-tight text-white">Welcome back to ChatSell OS.</h1>
                <p class="max-w-3xl text-lg leading-8 text-slate-300">
                    Sign in to continue managing conversations, assignments, tenant settings, and AI-assisted sales operations from one professional workspace.
                </p>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-300">Now available</p>
                    <p class="mt-3 text-lg font-semibold text-white">Interactive AI testing</p>
                    <p class="mt-2 text-sm leading-6 text-slate-300">Use the dashboard AI studio to generate safe suggestion drafts and review warnings before sending.</p>
                </div>
                <div class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-blue-300">Current stage</p>
                    <p class="mt-3 text-lg font-semibold text-white">Foundation release</p>
                    <p class="mt-2 text-sm leading-6 text-slate-300">Roles, onboarding, AI settings, and workspace shell are live while inbox and pipeline UI continue next.</p>
                </div>
            </div>
        </section>

        <section class="rounded-[32px] border border-white/10 bg-white/6 p-8 shadow-[0_40px_140px_-40px_rgba(0,0,0,0.65)] backdrop-blur-xl">
            <form method="POST" action="{{ route('login.store') }}" class="space-y-5">
                @csrf

                <div class="space-y-2">
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Sign in</p>
                    <h2 class="text-2xl font-semibold text-white">Open your operator workspace</h2>
                </div>

                <div>
                    <label for="email" class="mb-2 block text-sm font-medium text-slate-200">Email</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none placeholder:text-slate-500" required>
                    @error('email') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="password" class="mb-2 block text-sm font-medium text-slate-200">Password</label>
                    <input id="password" type="password" name="password" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none" required>
                    @error('password') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                </div>

                <label class="flex items-center gap-3 text-sm text-slate-300">
                    <input type="checkbox" name="remember" value="1" class="rounded border-white/10 bg-slate-900 text-emerald-500">
                    Remember me
                </label>

                <button class="w-full rounded-xl bg-emerald-500 px-4 py-3 font-semibold text-slate-950 transition hover:bg-emerald-400">
                    Sign in
                </button>

                <div class="rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-xs leading-6 text-slate-400">
                    AI-generated customer-facing suggestions are always presented for human review before sending.
                </div>

                <p class="text-center text-sm text-slate-400">
                    Need a workspace?
                    <a href="{{ route('register') }}" class="font-medium text-emerald-400 hover:text-emerald-300">Create one</a>
                </p>
            </form>
        </section>
    </div>
</x-layouts.guest>
