@extends('layouts.app')

@section('title', 'Iniciar Sesión - Numerología')

@section('header', 'Numerología')
@section('subtitle', 'Inicia sesión para acceder a tu análisis')

@section('content')
<div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-md-7 col-lg-5">

        <div class="card shadow-lg border-0 login-card">
            <div class="card-body p-4 p-md-5">

                <div class="text-center mb-4">
                    <div class="login-icon mb-3">🔮</div>
                    <h2 class="fw-bold login-title">Acceso</h2>
                    <p class="text-muted small">Ingresa tus credenciales para continuar</p>
                </div>

                {{-- Error general --}}
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show py-2 px-3" role="alert">
                        <small>{{ $errors->first() }}</small>
                        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
                    </div>
                @endif

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

                    {{-- Email --}}
                    <div class="mb-3">
                        <label for="email" class="form-label fw-semibold login-label">Correo electrónico</label>
                        <input
                            type="email"
                            class="form-control form-control-lg login-input @error('email') is-invalid @enderror"
                            id="email"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="correo@ejemplo.com"
                            autocomplete="email"
                            autofocus
                        >
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Contraseña --}}
                    <div class="mb-4">
                        <label for="password" class="form-label fw-semibold login-label">Contraseña</label>
                        <input
                            type="password"
                            class="form-control form-control-lg login-input @error('password') is-invalid @enderror"
                            id="password"
                            name="password"
                            placeholder="••••••••"
                            autocomplete="current-password"
                        >
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Recuérdame --}}
                    <div class="mb-4 form-check">
                        <input type="checkbox" class="form-check-input login-check" id="remember" name="remember">
                        <label class="form-check-label login-label" for="remember">Recordarme</label>
                    </div>

                    {{-- Botón --}}
                    <button type="submit" class="btn btn-lg w-100 login-btn">
                        Iniciar Sesión
                    </button>
                </form>

            </div>
        </div>

    </div>
</div>
@endsection

@push('styles')
<style>
    .login-card {
        background: rgba(255, 255, 255, 0.97);
        border-radius: 16px;
        backdrop-filter: blur(10px);
    }

    .login-icon {
        font-size: 2.5rem;
    }

    .login-title {
        font-family: 'Cinzel', serif;
        color: #4a148c;
        font-size: 1.6rem;
    }

    .login-label {
        color: #4a148c;
        font-size: 0.9rem;
    }

    .login-input {
        border: 2px solid #e0d4f7;
        border-radius: 10px;
        color: #2d1b69;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .login-input:focus {
        border-color: #8121A4;
        box-shadow: 0 0 0 0.2rem rgba(129, 33, 164, 0.2);
    }

    .login-input::placeholder {
        color: #b0a4c8;
    }

    .login-check {
        border-color: #8121A4;
    }

    .login-check:checked {
        background-color: #8121A4;
        border-color: #8121A4;
    }

    .login-btn {
        background: linear-gradient(135deg, #4a148c 0%, #8121A4 100%);
        color: white;
        border: none;
        border-radius: 10px;
        font-family: 'Cinzel', serif;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 0.875rem;
        transition: all 0.3s ease;
    }

    .login-btn:hover {
        background: linear-gradient(135deg, #8121A4 0%, #4a148c 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(129, 33, 164, 0.4);
    }

    .login-btn:active {
        transform: translateY(0);
    }
</style>
@endpush
