@extends('layouts.base', ['pageTitle' => 'SmartHub — Acceso'])

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&display=swap');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
        --ink:      #0b0f1a;
        --ink-soft: #3d4560;
        --silver:   #f4f5f8;
        --accent:   #3d5cff;
        --accent2:  #00c2a8;
        --white:    #ffffff;
        --card-bg:  rgba(255,255,255,0.92);
        --radius:   18px;
    }

    html, body { height: 100%; overflow: hidden; }

    .login-root {
        display: flex;
        height: 100vh;
        font-family: 'DM Sans', sans-serif;
        background: var(--ink);
    }

    /* ── PANEL IZQUIERDO ── */
    .login-left {
        flex: 1;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
    }

    /* Fondo animado con gradiente mesh */
    .login-left::before {
        content: '';
        position: absolute;
        inset: -60px;
        background:
            radial-gradient(ellipse 60% 50% at 20% 30%, #3d5cff55, transparent),
            radial-gradient(ellipse 50% 60% at 80% 20%, #00c2a855, transparent),
            radial-gradient(ellipse 70% 40% at 50% 80%, #7c3dff44, transparent),
            #0b0f1a;
        animation: meshMove 12s ease-in-out infinite alternate;
        z-index: 0;
    }

    @keyframes meshMove {
        0%   { transform: scale(1) rotate(0deg); }
        100% { transform: scale(1.08) rotate(2deg); }
    }

    /* Grid lines decorativas */
    .login-left::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
        background-size: 48px 48px;
        z-index: 1;
    }

    .left-content {
        position: relative;
        z-index: 2;
        text-align: center;
        animation: fadeUp .8s ease both;
    }

    /* Logo centrado encima de la imagen */
    .left-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 1.25rem;
    }
    .left-logo img { height: 36px; filter: brightness(0) invert(1); }

    /* Imagen de soporte */
    .support-img-wrap {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }
    .support-img-wrap img:last-child {
        width: min(420px, 80%);
        border-radius: 20px;
        box-shadow: 0 32px 80px rgba(0,0,0,.5);
        display: block;
    }

    .left-headline {
        font-family: 'Syne', sans-serif;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800;
        color: var(--white);
        line-height: 1.15;
        margin-bottom: .75rem;
    }
    .left-headline span {
        background: linear-gradient(90deg, var(--accent), var(--accent2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .left-sub {
        color: rgba(255,255,255,.45);
        font-size: .9rem;
        font-weight: 300;
        max-width: 340px;
        margin: 0 auto;
    }

    /* Puntos decorativos */
    .dots {
        position: absolute;
        z-index: 2;
    }
    .dots-tl { top: 2rem; left: 2rem; }
    .dots-br { bottom: 2rem; right: 2rem; }
    .dots svg { opacity: .15; }

    /* ── PANEL DERECHO ── */
    .login-right {
        width: min(440px, 100%);
        background: var(--silver);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 2.5rem;
        position: relative;
        overflow: hidden;
    }

    .login-right::before {
        content: '';
        position: absolute;
        top: -80px; right: -80px;
        width: 300px; height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, #3d5cff18, transparent 70%);
        pointer-events: none;
    }

    .login-card {
        width: 100%;
        max-width: 360px;
        animation: fadeUp .6s .2s ease both;
    }

    .login-card-header {
        margin-bottom: 2rem;
    }
    .login-card-header .greeting {
        font-size: .8rem;
        font-weight: 500;
        color: var(--accent);
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: .4rem;
    }
    .login-card-header h1 {
        font-family: 'Syne', sans-serif;
        font-size: 1.9rem;
        font-weight: 800;
        color: var(--ink);
        line-height: 1.1;
    }
    .login-card-header p {
        margin-top: .4rem;
        font-size: .85rem;
        color: var(--ink-soft);
    }

    /* Campos */
    .field-group { margin-bottom: 1.1rem; }
    .field-label {
        display: block;
        font-size: .78rem;
        font-weight: 500;
        color: var(--ink-soft);
        margin-bottom: .4rem;
        letter-spacing: .02em;
    }
    .field-wrap {
        position: relative;
    }
    .field-wrap .f-icon {
        position: absolute;
        left: .9rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: .95rem;
        pointer-events: none;
    }
    .field-input {
        width: 100%;
        padding: .7rem 1rem .7rem 2.4rem;
        border: 1.5px solid #e2e5ef;
        border-radius: 10px;
        font-family: 'DM Sans', sans-serif;
        font-size: .875rem;
        color: var(--ink);
        background: var(--white);
        transition: border-color .2s, box-shadow .2s;
        outline: none;
    }
    .field-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(61,92,255,.12);
    }
    .field-input::placeholder { color: #c0c5d4; }

    /* Toggle password */
    .toggle-pw {
        position: absolute;
        right: .9rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #9ca3af;
        font-size: .9rem;
        padding: 0;
        line-height: 1;
    }
    .toggle-pw:hover { color: var(--accent); }

    /* Opciones */
    .field-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        font-size: .8rem;
    }
    .remember-wrap {
        display: flex;
        align-items: center;
        gap: .4rem;
        color: var(--ink-soft);
        cursor: pointer;
    }
    .remember-wrap input[type="checkbox"] {
        accent-color: var(--accent);
        width: 14px; height: 14px;
    }
    .forgot-link {
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
        transition: opacity .15s;
    }
    .forgot-link:hover { opacity: .7; }

    /* Botón submit */
    .btn-signin {
        width: 100%;
        padding: .8rem;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-family: 'Syne', sans-serif;
        font-size: .95rem;
        font-weight: 700;
        cursor: pointer;
        letter-spacing: .02em;
        transition: background .2s, transform .1s, box-shadow .2s;
        box-shadow: 0 4px 20px rgba(61,92,255,.35);
        margin-bottom: 1.25rem;
    }
    .btn-signin:hover {
        background: #2a46e8;
        box-shadow: 0 6px 28px rgba(61,92,255,.45);
        transform: translateY(-1px);
    }
    .btn-signin:active { transform: translateY(0); }

    /* Divider */
    .divider {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin-bottom: 1.25rem;
        color: #c0c5d4;
        font-size: .75rem;
    }
    .divider::before, .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e5ef;
    }

    /* Register link */
    .register-wrap {
        text-align: center;
        font-size: .82rem;
        color: var(--ink-soft);
    }
    .register-wrap a {
        color: var(--accent);
        font-weight: 600;
        text-decoration: none;
    }
    .register-wrap a:hover { text-decoration: underline; }

    /* Error messages */
    .field-error {
        font-size: .75rem;
        color: #e02424;
        margin-top: .3rem;
    }
    .alert-error {
        background: #fff1f1;
        border: 1px solid #fca5a5;
        border-radius: 8px;
        padding: .65rem .9rem;
        font-size: .8rem;
        color: #e02424;
        margin-bottom: 1rem;
    }

    /* Animación entrada */
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Responsive — mobile */
    @media (max-width: 767px) {
        .login-left { display: none; }
        .login-right {
            width: 100%;
            background: var(--ink);
        }
        .login-right::before { display: none; }
        .field-input { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
        .field-input::placeholder { color: rgba(255,255,255,.3); }
        .field-label { color: rgba(255,255,255,.6); }
        .login-card-header h1 { color: #fff; }
        .login-card-header p { color: rgba(255,255,255,.5); }
        .field-options { color: rgba(255,255,255,.5); }
        .remember-wrap { color: rgba(255,255,255,.5); }
        .register-wrap { color: rgba(255,255,255,.5); }
        .divider { color: rgba(255,255,255,.2); }
        .divider::before, .divider::after { background: rgba(255,255,255,.1); }
    }
</style>

<div class="login-root">

    {{-- ── PANEL IZQUIERDO ── --}}
    <div class="login-left">

        <div class="dots dots-tl">
            <svg width="80" height="80" viewBox="0 0 80 80">
                <pattern id="dp" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
                    <circle cx="2" cy="2" r="1.5" fill="white"/>
                </pattern>
                <rect width="80" height="80" fill="url(#dp)"/>
            </svg>
        </div>

        <div class="left-content">

            <div class="support-img-wrap">
                <div class="left-logo">
                    <img src="/img/logo.svg" alt="SmartHub">
                </div>
                <img src="/img/portada/Support.jpg" alt="Soporte">
            </div>

            <h2 class="left-headline">
                Resuelve más rápido.<br>
                <span>Trabaja mejor.</span>
            </h2>
            <p class="left-sub">
                Gestiona tickets, activos y solicitudes desde un solo lugar.
            </p>
        </div>

        <div class="dots dots-br">
            <svg width="80" height="80" viewBox="0 0 80 80">
                <pattern id="dp2" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
                    <circle cx="2" cy="2" r="1.5" fill="white"/>
                </pattern>
                <rect width="80" height="80" fill="url(#dp2)"/>
            </svg>
        </div>
    </div>

    {{-- ── PANEL DERECHO ── --}}
    <div class="login-right">
        <div class="login-card">

            <div class="login-card-header">
                <p class="greeting">Bienvenido de vuelta</p>
                <h1>Iniciar sesión</h1>
                <p>Ingresa tus credenciales para continuar.</p>
            </div>

            {{-- Error general --}}
            @if ($errors->any())
                <div class="alert-error">
                    {{ $errors->first() }}
                </div>
            @endif

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

                {{-- Email --}}
                <div class="field-group">
                    <label class="field-label" for="email">Correo electrónico</label>
                    <div class="field-wrap">
                        <span class="f-icon">✉</span>
                        <input
                            class="field-input"
                            id="email" name="email" type="email"
                            placeholder="ejemplo@correo.com"
                            value="{{ old('email') }}"
                            required autofocus>
                    </div>
                    @error('email')
                        <p class="field-error">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password --}}
                <div class="field-group">
                    <label class="field-label" for="password">Contraseña</label>
                    <div class="field-wrap">
                        <span class="f-icon">🔒</span>
                        <input
                            class="field-input"
                            id="password" name="password" type="password"
                            placeholder="••••••••"
                            required>
                        <button type="button" class="toggle-pw" onclick="togglePw()" id="toggleBtn">👁</button>
                    </div>
                    @error('password')
                        <p class="field-error">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Opciones --}}
                <div class="field-options">
                    <label class="remember-wrap">
                        <input type="checkbox" name="remember">
                        Recordarme
                    </label>
                    @if (Route::has('password.request'))
                        <a class="forgot-link" href="{{ route('password.request') }}">¿Olvidaste tu contraseña?</a>
                    @endif
                </div>

                <button type="submit" class="btn-signin">Iniciar sesión →</button>

            </form>

            @if (Route::has('register'))
                <div class="divider">o</div>
                <div class="register-wrap">
                    ¿No tienes cuenta?
                    <a href="{{ route('register') }}">Crear cuenta</a>
                </div>
            @endif

        </div>
    </div>

</div>

<script>
    function togglePw() {
        const input = document.getElementById('password');
        const btn = document.getElementById('toggleBtn');
        if (input.type === 'password') {
            input.type = 'text';
            btn.textContent = '🙈';
        } else {
            input.type = 'password';
            btn.textContent = '👁';
        }
    }
</script>

@endsection