@extends('layouts.app')

@section('title', 'Log in')

@section('content')
<div style="min-height:80vh; display:flex; align-items:center; justify-content:center; padding:40px 18px;">
    <div style="width:100%; max-width:440px;">

        <div style="text-align:center; margin-bottom:28px;">
            <a href="{{ url('/') }}" style="display:inline-flex; align-items:center; gap:10px; justify-content:center;">
                <span class="nx-logo"></span>
                <span style="font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px;">Nexus Intelligence</span>
            </a>
            <p class="nx-muted" style="margin:10px 0 0;">Sign in to your account</p>
        </div>

        <div class="nx-card">

            {{-- Session status --}}
            @if(session('status'))
                <div class="alert alert-info" style="margin-bottom:16px;">{{ session('status') }}</div>
            @endif

            <form method="POST" action="{{ route('login') }}">
                @csrf

                <label class="nx-label">Email address</label>
                <input class="nx-input @error('email') is-invalid @enderror"
                       type="email" name="email"
                       value="{{ old('email') }}"
                       placeholder="name@company.com"
                       required autofocus autocomplete="username"/>
                @error('email')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                <label class="nx-label" style="margin-top:14px;">Password</label>
                <input class="nx-input @error('password') is-invalid @enderror"
                       type="password" name="password"
                       placeholder="••••••••"
                       required autocomplete="current-password"/>
                @error('password')
                    <div style="color:var(--nx-danger); font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror

                <div style="display:flex; justify-content:space-between; align-items:center; margin-top:16px; flex-wrap:wrap; gap:10px;">
                    <label style="display:flex; align-items:center; gap:8px; color:var(--nx-muted); font-size:13px; cursor:pointer;">
                        <input type="checkbox" name="remember" style="width:auto; accent-color:var(--nx-accent);">
                        Remember me
                    </label>
                    @if(Route::has('password.request'))
                        <a href="{{ route('password.request') }}"
                           style="font-size:13px; color:var(--nx-accent);">
                            Forgot password?
                        </a>
                    @endif
                </div>

                <div class="nx-divider"></div>

                <button type="submit" class="nx-btn nx-btn-primary nx-btn-lg" style="width:100%;">
                    Sign in
                </button>

                <p style="text-align:center; margin-top:16px; font-size:13px; color:var(--nx-muted);">
                    Don't have an account?
                    <a href="{{ route('register') }}" style="color:var(--nx-accent);">Create one</a>
                </p>

            </form>
        </div>

    </div>
</div>
@endsection