<x-app-shell title="Login to RemoteMatch" max="max-w-5xl">
    <section class="grid gap-5 lg:grid-cols-[0.9fr_1.1fr] lg:items-stretch">
        <div class="surface relative overflow-hidden p-5 sm:p-7">
            <div class="absolute -right-10 top-0 size-44 rounded-full bg-teal-200/30 blur-3xl"></div>
            <div class="relative">
                <p class="eyebrow">Welcome back</p>
                <h1 class="page-title mt-2">Login and continue your remote job workflow.</h1>
                <p class="body-copy mt-3">
                    Use Google sign-in or your username/email and password. Your admin session remains separate from applicant login.
                </p>
                <a class="btn-secondary mt-5 min-h-11 px-4 text-sm" href="{{ route('landing') }}">
                    Back to homepage
                </a>

                <div class="mt-7 grid gap-3">
                    @foreach ([
                        'Resume ATS insights',
                        'Personalized remote matches',
                        'Saved jobs and application tracker',
                    ] as $item)
                        <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white/80 p-3">
                            <span class="flex size-9 items-center justify-center rounded-xl bg-teal-50 text-teal-700">
                                <svg class="size-4" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                            <span class="text-sm font-bold text-slate-700">{{ $item }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="surface p-5 sm:p-7">
            @if (session('status'))
                <div class="alert-success mb-5">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert-error mb-5">
                    <p class="font-bold">Please check your login details.</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if ($googleLoginEnabled)
                <a class="btn-secondary w-full gap-3" href="{{ route('auth.google.redirect', ['popup' => 1]) }}" data-google-popup>
                    <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true">
                        <path fill="#4285F4" d="M21.6 12.23c0-.78-.07-1.53-.2-2.23H12v4.22h5.38a4.6 4.6 0 0 1-2 3.02v2.51h3.24c1.9-1.75 2.98-4.33 2.98-7.52Z"/>
                        <path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.62-2.43l-3.24-2.51c-.9.6-2.05.96-3.38.96-2.6 0-4.8-1.76-5.59-4.12H3.07v2.6A10 10 0 0 0 12 22Z"/>
                        <path fill="#FBBC05" d="M6.41 13.9A6 6 0 0 1 6.1 12c0-.66.11-1.3.31-1.9V7.5H3.07A10 10 0 0 0 2 12c0 1.62.39 3.15 1.07 4.5l3.34-2.6Z"/>
                        <path fill="#EA4335" d="M12 5.98c1.47 0 2.79.5 3.83 1.5l2.87-2.87A9.62 9.62 0 0 0 12 2 10 10 0 0 0 3.07 7.5l3.34 2.6C7.2 7.74 9.4 5.98 12 5.98Z"/>
                    </svg>
                    Continue with Google
                </a>
            @endif

            <div class="my-6 flex items-center gap-3">
                <div class="h-px flex-1 bg-slate-200"></div>
                <span class="text-xs font-black uppercase tracking-[0.16em] text-slate-400">or</span>
                <div class="h-px flex-1 bg-slate-200"></div>
            </div>

            @if ($emailLoginEnabled)
                <form method="POST" action="{{ route('login.store') }}" class="space-y-4">
                    @csrf

                    <label class="block">
                        <span class="field-label">Username or email</span>
                        <input class="field-input" name="identifier" value="{{ old('identifier') }}" autocomplete="username" required autofocus>
                    </label>

                    <label class="block">
                        <span class="field-label">Password</span>
                        <input class="field-input" type="password" name="password" autocomplete="current-password" required>
                    </label>

                    <div class="flex items-center justify-between gap-3">
                        <label class="inline-flex items-center gap-2 text-sm font-bold text-slate-600">
                            <input class="option-input" type="checkbox" name="remember" value="1">
                            Remember me
                        </label>

                        <a class="text-sm font-black text-teal-700 hover:text-teal-900" href="{{ route('password.request') }}">
                            Forgot password?
                        </a>
                    </div>

                    <button class="btn-primary w-full" type="submit">
                        Login
                    </button>
                </form>
            @else
                <div class="alert-warn">
                    Username/email login is disabled in Admin Settings. Use Google sign-in or enable Security → Email login.
                </div>
            @endif
        </div>
    </section>
</x-app-shell>
