@extends("front/layout.master")
@section('title', __('staticwords.Login'))

@section('body')

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 py-10 lg:py-16">
    <div class="grid lg:grid-cols-2 gap-8 max-w-5xl mx-auto bg-white rounded-3xl shadow-card overflow-hidden">

        {{-- Left: brand panel --}}
        <div class="mesh-1 text-white p-8 lg:p-12 relative overflow-hidden hidden lg:block">
            <div class="absolute -right-10 -bottom-10 w-72 h-72 bg-saffron/30 rounded-full blur-3xl"></div>
            <div class="relative">
                <div class="w-12 h-12 bg-white rounded-xl grid place-items-center text-brand-600 font-display font-extrabold text-2xl">{{ strtoupper(substr($title ?? 'E', 0, 1)) }}</div>
                <h2 class="font-display font-extrabold text-3xl mt-6 leading-tight">{{ __('Welcome back to') }}<br>{{ $title ?? 'Emart' }}</h2>
                <p class="text-white/80 mt-3 text-[14px] max-w-sm">{{ __('Sign in to access your account, track orders, save items to your wishlist, and more.') }}</p>

                <div class="mt-10 space-y-4">
                    <div class="flex items-start gap-3">
                        <span class="w-9 h-9 bg-white/20 rounded-lg grid place-items-center shrink-0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/></svg></span>
                        <div><div class="font-semibold text-[14px]">{{ __('Faster checkout') }}</div><div class="text-[12px] text-white/70">{{ __('Save time on every purchase') }}</div></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="w-9 h-9 bg-white/20 rounded-lg grid place-items-center shrink-0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg></span>
                        <div><div class="font-semibold text-[14px]">{{ __('Save your favorites') }}</div><div class="text-[12px] text-white/70">{{ __('Build your wishlist anytime') }}</div></div>
                    </div>
                    <div class="flex items-start gap-3">
                        <span class="w-9 h-9 bg-white/20 rounded-lg grid place-items-center shrink-0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
                        <div><div class="font-semibold text-[14px]">{{ __('Track every order') }}</div><div class="text-[12px] text-white/70">{{ __('Real-time delivery updates') }}</div></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right: form --}}
        <div class="p-8 lg:p-12">
            <h2 class="font-display font-extrabold text-2xl">{{ __('staticwords.Signin') }}</h2>
            <p class="text-slate-500 text-[14px] mt-1 mb-6">{{ __('staticwords.LoginWelcome') }}</p>

            @if($configs->fb_login_enable == '1' || $configs->google_login_enable == '1' || $configs->twitter_enable == 1 || $configs->linkedin_enable == '1')
                <div class="grid sm:grid-cols-2 gap-2 mb-5">
                    @if($configs->google_login_enable == '1')
                        <a href="{{ url('login/google') }}" class="flex items-center justify-center gap-2 h-11 border-2 border-slate-200 rounded-lg hover:bg-slate-50 text-[13px] font-semibold">
                            <img src="{{ url('frontend/assets/images/login/google.png') }}" class="w-5 h-5"> Google
                        </a>
                    @endif
                    @if($configs->fb_login_enable == '1')
                        <a href="{{ url('login/facebook') }}" class="flex items-center justify-center gap-2 h-11 border-2 border-slate-200 rounded-lg hover:bg-slate-50 text-[13px] font-semibold">
                            <img src="{{ url('frontend/assets/images/login/facebook.png') }}" class="w-5 h-5"> Facebook
                        </a>
                    @endif
                    @if($configs->twitter_enable == 1)
                        <a href="{{ url('login/twitter') }}" class="flex items-center justify-center gap-2 h-11 border-2 border-slate-200 rounded-lg hover:bg-slate-50 text-[13px] font-semibold">
                            <img src="{{ url('frontend/assets/images/login/twitter.png') }}" class="w-5 h-5"> Twitter
                        </a>
                    @endif
                    @if($configs->linkedin_enable == '1')
                        <a href="{{ url('login/linkedin') }}" class="flex items-center justify-center gap-2 h-11 border-2 border-slate-200 rounded-lg hover:bg-slate-50 text-[13px] font-semibold">
                            <img src="{{ url('frontend/assets/images/login/linkedin.png') }}" class="w-5 h-5"> LinkedIn
                        </a>
                    @endif
                </div>
                <div class="relative my-5 text-center">
                    <span class="bg-white px-3 relative z-10 text-[12px] text-slate-400 uppercase">{{ __('Or continue with') }}</span>
                    <div class="absolute inset-x-0 top-1/2 h-px bg-slate-200"></div>
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-4" novalidate>
                @csrf
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Email') }} <span class="text-rose-500">*</span></label>
                    <input required type="email" name="email" value="{{ old('email') }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]" placeholder="you@example.com">
                    @error('email')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-[13px] font-semibold">{{ __('Password') }} <span class="text-rose-500">*</span></label>
                        <a href="{{ route('password.request') }}" class="text-[12px] text-brand-600 hover:underline">{{ __('Forgot Password') }}?</a>
                    </div>
                    <input required type="password" name="password" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    @error('password')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <label class="flex items-center gap-2 text-[13px] text-slate-600">
                    <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }} class="w-4 h-4 rounded">{{ __('Remember me') }}
                </label>
                <button type="submit" class="w-full h-12 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-lg transition-colors flex items-center justify-center gap-2">
                    {{ __('Sign In') }}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
                <p class="text-center text-[14px] text-slate-600">{{ __('Not an account') }}? <a href="{{ route('register') }}" class="text-brand-600 font-semibold hover:underline">{{ __('Register') }}</a></p>
            </form>
        </div>
    </div>
</section>

@endsection