<x-layouts.guest :title="__('Sign in')" page="auth-login">
    @php
        $__brandName = (string) \App\Models\SystemSetting::get('app_name', config('app.name', 'WaDesk'));
        $__brandLogo = \App\Support\Brand::logoUrl();
    @endphp

    <div class="grid lg:grid-cols-[1fr_540px] h-screen overflow-hidden">

        <!-- LEFT: visual showcase -->
        <aside class="auth-art relative hidden lg:flex flex-col p-10 text-paper-0 overflow-hidden">
            <div class="blob bg-wa-green w-[300px] h-[300px] -top-12 -left-12"></div>
            <div class="blob bg-accent-amber w-[260px] h-[260px] bottom-12 right-12"></div>

            <div class="relative z-10 flex-1 flex flex-col justify-center w-full">

                <!-- Top: hero card -->
                <div class="rounded-2xl bg-paper-0/8 border border-paper-0/15 backdrop-blur-sm p-5 mb-4">
                    <div class="flex items-start gap-3">
                        <span class="w-10 h-10 rounded-lg bg-wa-green/25 text-wa-green grid place-items-center shrink-0">
                            <svg viewBox="0 0 16 16" class="w-4 h-4" fill="none" stroke="currentColor"
                                stroke-width="1.6">
                                <path d="M2 4h12v8H2zM5 4v8M11 4v8" />
                            </svg>
                        </span>
                        <div>
                            <div class="text-[14px] font-semibold leading-tight">{{ __('Multi-workspace') }}</div>
                            <div class="text-[12px] text-paper-0/75 leading-snug mt-1">
                                {{ __('Run agencies, brands or clients side-by-side / each one fully isolated.') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-paper-0/70 mb-3">
                    {{ __('Operator console for WhatsApp') }}</div>
                <h1 class="font-serif text-[42px] leading-[1.05] tracking-[-0.01em]">{{ __('One place for every') }}
                    <span class="italic text-wa-green">{{ __('conversation') }}</span>.</h1>
                <p class="mt-3 text-[13px] text-paper-0/85 leading-relaxed">
                    {{ __('Broadcasts, flows, AI assist, shared inbox / all in one workspace your team will actually use.') }}
                </p>

                <!-- Stat pills (full width) -->
                <div class="grid grid-cols-3 gap-3 mt-5">
                    <div class="stat-pill rounded-2xl p-4 text-center">
                        <div class="font-serif text-[24px] leading-none">42M+</div>
                        <div class="text-[10.5px] text-paper-0/70 mt-1">{{ __('messages sent') }}</div>
                    </div>
                    <div class="stat-pill rounded-2xl p-4 text-center">
                        <div class="font-serif text-[24px] leading-none">99.9%</div>
                        <div class="text-[10.5px] text-paper-0/70 mt-1">{{ __('delivery rate') }}</div>
                    </div>
                    <div class="stat-pill rounded-2xl p-4 text-center">
                        <div class="font-serif text-[24px] leading-none">4.9 *</div>
                        <div class="text-[10.5px] text-paper-0/70 mt-1">{{ __('G2 / Capterra') }}</div>
                    </div>
                </div>

                <!-- Two-column feature row -->
                <div class="grid grid-cols-2 gap-3 mt-5">
                    <div class="rounded-2xl bg-paper-0/8 border border-paper-0/15 backdrop-blur-sm p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="w-7 h-7 rounded-lg bg-wa-green/25 text-wa-green grid place-items-center"><svg
                                    viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                    stroke-width="1.6">
                                    <path d="M3 8h3l1.5-4 2 8 1.5-4h2" />
                                </svg></span>
                            <div class="text-[12.5px] font-semibold">{{ __('Broadcasts') }}</div>
                        </div>
                        <div class="text-[11px] text-paper-0/70 leading-snug">
                            {{ __('Send to thousands at once with smart throttling and per-contact tracking.') }}</div>
                    </div>
                    <div class="rounded-2xl bg-paper-0/8 border border-paper-0/15 backdrop-blur-sm p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="w-7 h-7 rounded-lg bg-wa-green/25 text-wa-green grid place-items-center"><svg
                                    viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                    stroke-width="1.6">
                                    <path d="M5 3l8 5-8 5z" />
                                </svg></span>
                            <div class="text-[12.5px] font-semibold">{{ __('Flow builder') }}</div>
                        </div>
                        <div class="text-[11px] text-paper-0/70 leading-snug">
                            {{ __('Trigger / branch / wait / AI assist. Drag-drop the whole conversation.') }}</div>
                    </div>
                    <div class="rounded-2xl bg-paper-0/8 border border-paper-0/15 backdrop-blur-sm p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="w-7 h-7 rounded-lg bg-wa-green/25 text-wa-green grid place-items-center"><svg
                                    viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                    stroke-width="1.6">
                                    <path
                                        d="M3 5.5A2.5 2.5 0 0 1 5.5 3h5A2.5 2.5 0 0 1 13 5.5v3A2.5 2.5 0 0 1 10.5 11H8l-3.5 2v-2A2.5 2.5 0 0 1 3 8.5v-3Z" />
                                </svg></span>
                            <div class="text-[12.5px] font-semibold">{{ __('Team inbox') }}</div>
                        </div>
                        <div class="text-[11px] text-paper-0/70 leading-snug">
                            {{ __('Live shared inbox with assignments, internal notes, AI suggestions.') }}</div>
                    </div>
                    <div class="rounded-2xl bg-paper-0/8 border border-paper-0/15 backdrop-blur-sm p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="w-7 h-7 rounded-lg bg-wa-green/25 text-wa-green grid place-items-center"><svg
                                    viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                    stroke-width="1.6">
                                    <path d="M3 5h8l1 6H4z" />
                                </svg></span>
                            <div class="text-[12.5px] font-semibold">{{ __('Shopify + Woo') }}</div>
                        </div>
                        <div class="text-[11px] text-paper-0/70 leading-snug">
                            {{ __('Cart recovery, order updates, and catalog sync out of the box.') }}</div>
                    </div>
                </div>

                <!-- Bottom: What's also inside compact list -->
                <div class="rounded-2xl bg-paper-0/8 border border-paper-0/15 backdrop-blur-sm p-4 mt-4">
                    <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-paper-0/70 mb-2">
                        {{ __("What's also inside") }}</div>
                    <div class="grid grid-cols-3 gap-x-3 gap-y-1.5 text-[11.5px] text-paper-0/85">
                        <span class="flex items-center gap-1.5"><svg viewBox="0 0 16 16"
                                class="w-3 h-3 text-wa-green shrink-0" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M3 8l3 3 7-7" />
                            </svg>{{ __('Templates') }}</span>
                        <span class="flex items-center gap-1.5"><svg viewBox="0 0 16 16"
                                class="w-3 h-3 text-wa-green shrink-0" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M3 8l3 3 7-7" />
                            </svg>{{ __('Meta Ads / CTWA') }}</span>
                        <span class="flex items-center gap-1.5"><svg viewBox="0 0 16 16"
                                class="w-3 h-3 text-wa-green shrink-0" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M3 8l3 3 7-7" />
                            </svg>{{ __('AI assist') }}</span>
                        <span class="flex items-center gap-1.5"><svg viewBox="0 0 16 16"
                                class="w-3 h-3 text-wa-green shrink-0" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M3 8l3 3 7-7" />
                            </svg>{{ __('Webhooks') }}</span>
                        <span class="flex items-center gap-1.5"><svg viewBox="0 0 16 16"
                                class="w-3 h-3 text-wa-green shrink-0" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M3 8l3 3 7-7" />
                            </svg>{{ __('Auto-replies') }}</span>
                        <span class="flex items-center gap-1.5"><svg viewBox="0 0 16 16"
                                class="w-3 h-3 text-wa-green shrink-0" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <path d="M3 8l3 3 7-7" />
                            </svg>{{ __('Encrypted') }}</span>
                    </div>
                </div>
            </div>

            <div class="relative z-10 text-[11px] text-paper-0/60 font-mono mt-6 text-right">2026 {{ $__brandName }}
                / Mumbai, India</div>
        </aside>

        <!-- RIGHT: form -->
        <main class="flex flex-col justify-center px-6 py-10 lg:px-14">
            <div class="w-full max-w-[400px] mx-auto">
                <!-- mobile logo -->
                <a href="{{ url('/dashboard') }}" class="lg:hidden inline-flex items-center gap-2 mb-8">
                    @if ($__brandLogo)
                        {{-- An uploaded brand logo replaces the icon + name entirely. --}}
                        <img src="{{ $__brandLogo }}" alt="{{ $__brandName }}"
                            class="h-9 w-auto max-w-[210px] object-contain">
                    @else
                        <span class="w-8 h-8 rounded-md bg-wa-deep text-paper-0 grid place-items-center"><svg
                                viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12c0 1.96.57 3.79 1.55 5.34L2 22l4.78-1.5A9.93 9.93 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Z" />
                            </svg></span>
                        <span class="font-serif text-[22px] tracking-[-0.01em]">{{ $__brandName }}</span>
                    @endif
                </a>

                <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-500 mb-2">{{ __('Sign in') }}
                </div>
                <h2 class="font-serif text-[36px] leading-tight tracking-[-0.01em]">{{ __('Welcome') }} <span
                        class="italic text-wa-deep">{{ __('back') }}</span>.</h2>
                <p class="text-[13px] text-ink-600 mt-2">
                    {{ __('Enter your details below to get back into your workspace.') }}</p>

                {{-- Social sign-in (Google / Facebook) + "or with email" divider.
 Renders only the providers an admin enabled at
 /admin/settings/social-login; renders nothing when none are. --}}
                @include('auth._social')

                @if ($errors->any())
                    <div
                        class="mb-3 rounded-lg border border-accent-coral/40 bg-accent-coral/10 px-3 py-2 text-[12px] text-[#A1431F]">
                        @foreach ($errors->all() as $err)
                            <div>{{ $err }}</div>
                        @endforeach
                    </div>
                @endif
                @if (session('status'))
                    <div
                        class="mb-3 rounded-lg border border-wa-green/40 bg-wa-mint text-wa-deep px-3 py-2 text-[12.5px]">
                        {{ session('status') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('login') }}" class="space-y-4">
                    @csrf
                    <div>
                        <label
                            class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Email') }}</label>
                        <input name="email" type="email" required value="{{ old('email') }}"
                            autocomplete="email" autofocus placeholder="you@company.com"
                            class="w-full px-3 py-2.5 border border-paper-200 rounded-lg bg-paper-0 text-[13px] focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10" />
                    </div>
                    <div>
                        <div class="flex items-center justify-between mb-1.5"><label
                                class="text-[11.5px] font-semibold text-ink-700">{{ __('Password') }}</label><a
                                href="{{ route('password.request') }}"
                                class="text-[11px] text-wa-deep font-semibold hover:underline cursor-pointer">{{ __('Forgot?') }}</a>
                        </div>
                        {{-- Eye-reveal is auto-injected on every <input type="password">
 by resources/js/lib/password-reveal.js (loaded from app.js).
 Don't duplicate the button here — the lib handles it. --}}
                        <input id="pw" name="password" type="password" required
                            autocomplete="current-password" placeholder="********"
                            class="w-full px-3 py-2.5 border border-paper-200 rounded-lg bg-paper-0 text-[13px] font-mono focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10" />
                    </div>

                    <label class="flex items-center gap-2 cursor-pointer">
                        <input name="remember" type="checkbox" value="1" checked
                            class="w-4 h-4 accent-wa-deep" />
                        <span class="text-[12.5px] text-ink-700">{{ __('Keep me signed in for 30 days') }}</span>
                    </label>

                    {{-- reCAPTCHA (admin-toggled, v2 checkbox or invisible v3) --}}
                    @include('auth._recaptcha', ['action' => 'login'])

                    <button type="submit"
                        class="w-full px-4 py-3 rounded-full bg-wa-deep hover:bg-wa-teal text-paper-0 text-[13px] font-semibold inline-flex items-center justify-center gap-2 mt-2">
                        <span>{{ __('Sign in') }}</span>
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.7">
                            <path d="M3 8h10M9 4l4 4-4 4" />
                        </svg>
                    </button>

                    <p class="text-[12.5px] text-ink-600 text-center mt-2">{{ __('New to') }} {{ $__brandName }}?
                        <a href="{{ route('register') }}"
                            class="text-wa-deep font-semibold hover:underline">{{ __('Create an account') }}</a></p>
                </form>
                {{-- eye-toggle wiring lives in resources/js/charts/auth-login.js --}}

                <p class="text-[10.5px] text-ink-500 text-center mt-8 leading-relaxed">
                    {{ __('By signing in you agree to our') }} <a
                        class="text-wa-deep font-semibold hover:underline">{{ __('Terms') }}</a> and <a
                        class="text-wa-deep font-semibold hover:underline">{{ __('Privacy policy') }}</a>.</p>
            </div>
        </main>

    </div>

</x-layouts.guest>
