<?php
require_once __DIR__ . '/config/auth.php';
require_once __DIR__ . '/config/conn.php';

if (av_is_logged()) {
    $next = $_GET['next'] ?? '';
    if ($next && strpos($next, '/') === 0 && strpos($next, '//') !== 0) {
        header('Location: ' . $next);
    } else {
        header('Location: index.php');
    }
    exit;
}

$error = '';
$next  = $_GET['next'] ?? ($_POST['next'] ?? '');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';

    if ($username !== '' && $password !== '') {
        try {
            if (av_login($username, $password)) {
                if ($next && strpos($next, '/') === 0 && strpos($next, '//') !== 0) {
                    header('Location: ' . $next);
                } else {
                    header('Location: index.php');
                }
                exit;
            }
        } catch (Exception $e) {
            $error = 'Error de conexión con la base de datos. Intenta más tarde.';
            error_log('Login error: ' . $e->getMessage());
        }
    }
    if (!$error) $error = 'Usuario o contraseña incorrectos.';
}
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acceso · Servicios DEMO Seguridad Privada</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap"
        rel="stylesheet">
    <style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --navy: #080e1f;
        --navy-2: #0d1530;
        --navy-3: #121c3a;
        --navy-4: #1a2550;
        --gold: #c9a84c;
        --gold-2: #e2c06a;
        --gold-3: #f0d896;
        --white: #f0ece4;
        --muted: rgba(240, 236, 228, 0.38);
        --border: rgba(201, 168, 76, 0.18);
        --error: #e05252;
    }

    html,
    body {
        height: 100%;
        font-family: 'DM Sans', sans-serif;
        background: var(--navy);
        color: var(--white);
        overflow: hidden;
    }

    /* ── BACKGROUND TEXTURE ── */
    .bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(ellipse 70% 60% at 15% 50%, rgba(20, 36, 90, 0.9) 0%, transparent 70%),
            radial-gradient(ellipse 50% 80% at 85% 50%, rgba(8, 14, 31, 0.95) 0%, transparent 60%),
            var(--navy-2);
    }

    .bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }

    .bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.03;
    }

    /* ── DECORATIVE SHIELD ── */
    .shield-bg {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-76%, -50%);
        width: 680px;
        height: 680px;
        opacity: 0.04;
        pointer-events: none;
        z-index: 1;
    }

    /* ── LAYOUT ── */
    .page {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 480px;
    }

    /* ── LEFT PANEL ── */
    .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3rem 4rem;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* ── LOGO ── */
    .brand-logo-link { display: inline-flex; align-items: center; }
    .brand-logo-img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(201,168,76,.25)); }
    .form-logo-wrap { display: flex; justify-content: center; margin-bottom: 1.4rem; }
    .form-logo { width: 110px; height: auto; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(201,168,76,.18)); }

    .brand-shield {
        width: 42px;
        height: 42px;
        position: relative;
    }

    .brand-name {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 28px;
        letter-spacing: 0.12em;
        color: var(--white);
        line-height: 1;
    }

    .brand-sub {
        font-size: 10px;
        letter-spacing: 0.22em;
        color: var(--gold);
        text-transform: uppercase;
        margin-top: 2px;
        font-weight: 400;
    }

    .left-center {
        padding-bottom: 4rem;
    }

    .tagline-label {
        font-size: 10px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 1.4rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tagline-label::before {
        content: '';
        display: block;
        width: 28px;
        height: 1px;
        background: var(--gold);
    }

    .tagline {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(48px, 5vw, 76px);
        line-height: 0.95;
        letter-spacing: 0.03em;
        color: var(--white);
        margin-bottom: 1.8rem;
    }

    .tagline span {
        color: var(--gold);
    }

    .tagline-desc {
        font-size: 14px;
        line-height: 1.75;
        color: var(--muted);
        max-width: 380px;
        font-weight: 300;
    }

    .stats {
        display: flex;
        gap: 3rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
    }

    .stat-num {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 36px;
        letter-spacing: 0.06em;
        color: var(--gold-2);
        line-height: 1;
    }

    .stat-label {
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 4px;
        font-weight: 300;
    }

    /* ── RIGHT PANEL ── */
    .right {
        background: rgba(13, 21, 48, 0.6);
        border-left: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3.5rem 3rem;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        position: relative;
        overflow: hidden;
    }

    .right::before {
        content: '';
        position: absolute;
        top: -120px;
        right: -120px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 70%);
        pointer-events: none;
    }

    .right::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -80px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(26, 37, 80, 0.8) 0%, transparent 70%);
        pointer-events: none;
    }

    .form-wrap {
        position: relative;
        z-index: 1;
    }

    .form-header {
        margin-bottom: 2.4rem;
    }

    .form-eyebrow {
        font-size: 10px;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-eyebrow::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

    .form-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 38px;
        letter-spacing: 0.04em;
        color: var(--white);
        line-height: 1;
        margin-bottom: 6px;
    }

    .form-subtitle {
        font-size: 13px;
        color: var(--muted);
        font-weight: 300;
    }

    /* ── ERROR ── */
    .error-box {
        background: rgba(224, 82, 82, 0.1);
        border: 1px solid rgba(224, 82, 82, 0.3);
        border-radius: 6px;
        padding: 10px 14px;
        font-size: 13px;
        color: #f59f9f;
        margin-bottom: 1.4rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .error-box svg {
        flex-shrink: 0;
    }

    /* ── FORM FIELDS ── */
    .field {
        margin-bottom: 1.2rem;
    }

    .field label {
        display: block;
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: 8px;
    }

    .field-inner {
        position: relative;
    }

    .field-inner svg {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: 0.4;
        transition: opacity 0.2s;
    }

    .field-inner input {
        width: 100%;
        background: rgba(8, 14, 31, 0.7);
        border: 1px solid rgba(201, 168, 76, 0.2);
        border-radius: 6px;
        padding: 13px 14px 13px 42px;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        color: var(--white);
        outline: none;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        caret-color: var(--gold);
    }

    .field-inner input::placeholder {
        color: rgba(240, 236, 228, 0.2);
        font-weight: 300;
    }

    .field-inner input:focus {
        border-color: rgba(201, 168, 76, 0.6);
        background: rgba(8, 14, 31, 0.9);
        box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08);
    }

    .field-inner input:focus+svg,
    .field-inner:focus-within svg {
        opacity: 0.7;
    }

    /* ── SUBMIT ── */
    .submit-btn {
        width: 100%;
        margin-top: 1.6rem;
        padding: 14px 20px;
        background: var(--gold);
        border: none;
        border-radius: 6px;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 18px;
        letter-spacing: 0.14em;
        color: var(--navy);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: background 0.2s, transform 0.1s;
    }

    .submit-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
        transform: translateX(-100%);
        transition: transform 0.5s ease;
    }

    .submit-btn:hover {
        background: var(--gold-2);
    }

    .submit-btn:hover::before {
        transform: translateX(100%);
    }

    .submit-btn:active {
        transform: scale(0.99);
    }

    /* ── FOOTER ── */
    .form-footer {
        margin-top: 2rem;
        padding-top: 1.2rem;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .secure-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(240, 236, 228, 0.25);
    }

    .secure-badge svg {
        opacity: 0.4;
    }

    .help-link {
        font-size: 11px;
        color: var(--gold);
        text-decoration: none;
        opacity: 0.6;
        transition: opacity 0.2s;
        font-weight: 400;
    }

    .help-link:hover {
        opacity: 1;
    }

    /* ── ENTRY ANIMATIONS ── */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .left {
        animation: fadeIn 0.9s ease both;
    }

    .right {
        animation: fadeUp 0.7s 0.15s ease both;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 860px) {

        html,
        body {
            overflow: auto;
        }

        .page {
            grid-template-columns: 1fr;
            min-height: 100vh;
        }

        .left {
            padding: 2.5rem 2rem 2rem;
        }

        .left-center {
            padding-bottom: 2rem;
        }

        .tagline {
            font-size: 52px;
        }

        .stats {
            gap: 2rem;
        }

        .shield-bg {
            display: none;
        }

        .right {
            border-left: none;
            border-top: 1px solid var(--border);
            padding: 2.5rem 2rem;
        }
    }
    </style>
</head>

<body>

    <div class="bg"></div>

    <!-- Decorative Shield SVG -->
    <svg class="shield-bg" viewBox="0 0 200 230" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 5L10 40V110C10 162 55 205 100 225C145 205 190 162 190 110V40L100 5Z" stroke="white"
            stroke-width="2" fill="none" />
        <path d="M100 22L25 52V110C25 155 65 193 100 210C135 193 175 155 175 110V52L100 22Z" stroke="white"
            stroke-width="1" fill="none" />
        <line x1="100" y1="22" x2="100" y2="210" stroke="white" stroke-width="0.5" />
        <line x1="25" y1="116" x2="175" y2="116" stroke="white" stroke-width="0.5" />
    </svg>

    <div class="page">

        <!-- LEFT PANEL -->
        <div class="left">
            <div class="brand">
                <a href="index.php" class="brand-logo-link" aria-label="Servicios DEMO">
                    <img src="img/demoLogo_SinFondo.png" alt="Servicios DEMO Seguridad Privada"
                         class="brand-logo-img"
                         onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                    <div class="brand-shield" style="display:none">
                        <svg viewBox="0 0 42 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21 2L3 9V23C3 34 12 43 21 47C30 43 39 34 39 23V9L21 2Z" fill="rgba(201,168,76,0.12)"
                                stroke="#c9a84c" stroke-width="1.5" />
                            <path d="M15 23l4 4 8-8" stroke="#c9a84c" stroke-width="1.8" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </div>
                </a>
                <div>
                    <div class="brand-name">DEMO</div>
                    <div class="brand-sub">Seguridad Privada</div>
                </div>
            </div>

            <div class="left-center">
                <div class="tagline-label">Portal Institucional</div>
                <div class="tagline">
                    PROTECCIÓN<br>
                    SIN <span>COMPROMISO</span>
                </div>
                <p class="tagline-desc">
                    Sistema de gestión interno para el personal operativo y administrativo de DEMO Seguridad Privada.
                    Acceso controlado y supervisado.
                </p>
            </div>

            <div class="stats">
                <div>
                    <div class="stat-num">24/7</div>
                    <div class="stat-label">Operación continua</div>
                </div>
                <div>
                    <div class="stat-num">ISO</div>
                    <div class="stat-label">Certificado</div>
                </div>
                <div>
                    <div class="stat-num">TLS</div>
                    <div class="stat-label">Cifrado seguro</div>
                </div>
            </div>
        </div>

        <!-- RIGHT PANEL -->
        <div class="right">
            <div class="form-wrap">
                <div class="form-logo-wrap">
                    <img src="img/demoLogo_SinFondo.png" alt="DEMO" class="form-logo"
                         onerror="this.style.display='none'">
                </div>
                <div class="form-header">
                    <div class="form-eyebrow">Acceso autorizado</div>
                    <div class="form-title">INICIAR<br>SESIÓN</div>
                    <div class="form-subtitle">Ingresa tus credenciales institucionales</div>
                </div>

                <?php if ($error): ?>
                <div class="error-box">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="10" stroke="#e05252" stroke-width="1.8" />
                        <path d="M12 8v4M12 16h.01" stroke="#e05252" stroke-width="1.8" stroke-linecap="round" />
                    </svg>
                    <?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?>
                </div>
                <?php endif; ?>

                <form method="post" autocomplete="off" novalidate>
                    <input type="hidden" name="next" value="<?= htmlspecialchars($next, ENT_QUOTES, 'UTF-8') ?>">

                    <div class="field">
                        <label for="username">Usuario</label>
                        <div class="field-inner">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <circle cx="12" cy="8" r="4" stroke="#f0ece4" stroke-width="1.6" />
                                <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="#f0ece4" stroke-width="1.6"
                                    stroke-linecap="round" />
                            </svg>
                            <input type="text" id="username" name="username"
                                value="<?= htmlspecialchars($_POST['username'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                                placeholder="nombre.apellido" autofocus autocomplete="username" required>
                        </div>
                    </div>

                    <div class="field">
                        <label for="password">Contraseña</label>
                        <div class="field-inner">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <rect x="5" y="11" width="14" height="10" rx="2" stroke="#f0ece4" stroke-width="1.6" />
                                <path d="M8 11V7a4 4 0 0 1 8 0v4" stroke="#f0ece4" stroke-width="1.6"
                                    stroke-linecap="round" />
                            </svg>
                            <input type="password" id="password" name="password" placeholder="••••••••"
                                autocomplete="current-password" required>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn">Ingresar al Sistema</button>
                </form>

                <div class="form-footer">
                    <div class="secure-badge">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2L4 6v7c0 5 3.6 9.7 8 11 4.4-1.3 8-6 8-11V6L12 2z" stroke="#f0ece4"
                                stroke-width="1.6" />
                        </svg>
                        Conexión segura
                    </div>
                    <a href="mailto:soporte@demo.com" class="help-link">¿Problemas de acceso?</a>
                </div>
            </div>
        </div>

    </div>

</body>

</html>