<x-guest-layout>
    <div class="mb-6">
        <h2 style="color: #003D7A; font-size: 1.875rem; margin: 0 0 0.5rem 0;">Welcome Back</h2>
        <p style="color: #6B7280; margin: 0;">Sign in to your TrueTrucker account</p>
    </div>

    <!-- Session Status -->
    @if ($errors->any())
        <div style="background-color: #FEE2E2; border-left: 4px solid #EF4444; padding: 1rem; border-radius: 0.75rem; margin-bottom: 1.5rem;">
            <p style="color: #7F1D1D; margin: 0; font-weight: 600;">Login Failed</p>
            @foreach ($errors->all() as $error)
                <p style="color: #7F1D1D; margin: 0.25rem 0 0 0; font-size: 0.875rem;">{{ $error }}</p>
            @endforeach
        </div>
    @endif

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

        <!-- Email Address -->
        <div class="form-group">
            <label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1F2937;">Email Address</label>
            <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username"
                   style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #E5E7EB; border-radius: 0.75rem; font-size: 1rem; transition: border-color 0.3s ease; font-family: inherit;"
                   class="form-control" />
            @error('email')
                <p style="color: #EF4444; font-size: 0.875rem; margin-top: 0.5rem;">{{ $message }}</p>
            @enderror
        </div>

        <!-- Password -->
        <div class="form-group">
            <label for="password" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1F2937;">Password</label>
            <input id="password" type="password" name="password" required autocomplete="current-password"
                   style="width: 100%; padding: 0.75rem 1rem; border: 2px solid #E5E7EB; border-radius: 0.75rem; font-size: 1rem; transition: border-color 0.3s ease; font-family: inherit;"
                   class="form-control" />
            @error('password')
                <p style="color: #EF4444; font-size: 0.875rem; margin-top: 0.5rem;">{{ $message }}</p>
            @enderror
        </div>

        <!-- Remember Me -->
        <div class="form-group">
            <div style="display: flex; align-items: center; gap: 0.75rem;">
                <input id="remember" type="checkbox" name="remember"
                       style="width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #003D7A;" />
                <label for="remember" style="font-size: 0.875rem; color: #6B7280; cursor: pointer; margin: 0;">
                    Keep me signed in
                </label>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="form-group">
            <button type="submit"
                    style="width: 100%; padding: 0.875rem 1.5rem; background-color: #003D7A; color: white; border: none; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;"
                    onmouseover="this.style.backgroundColor='#002651'; this.style.boxShadow='0 10px 15px -3px rgba(0, 61, 122, 0.2)'; this.style.transform='translateY(-2px)';"
                    onmouseout="this.style.backgroundColor='#003D7A'; this.style.boxShadow='none'; this.style.transform='translateY(0)';">
                Sign In
            </button>
        </div>

        <!-- Forgot Password & Sign Up Links -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #E5E7EB;">
            @if (Route::has('password.request'))
                <a href="{{ route('password.request') }}"
                   style="display: block; text-align: center; color: #003D7A; font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.5rem; border-radius: 0.5rem; transition: all 0.3s ease;"
                   onmouseover="this.style.backgroundColor='#F3F4F6'"
                   onmouseout="this.style.backgroundColor='transparent';">
                    Forgot Password?
                </a>
            @endif
            <a href="{{ route('register') }}"
               style="display: block; text-align: center; color: #6B7280; font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.5rem; border-radius: 0.5rem; transition: all 0.3s ease;"
               onmouseover="this.style.color='#003D7A'; this.style.backgroundColor='#F3F4F6'"
               onmouseout="this.style.color='#6B7280'; this.style.backgroundColor='transparent';">
                Create Account
            </a>
        </div>
    </form>
</x-guest-layout>
