<?php 
// Incluir archivo de configuración
require_once 'configs.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>L2Jade - Panel de Usuario</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/media/favicons/favicon-32x32.png">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome para iconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Modern Antiqua Font -->
    <link href="https://fonts.googleapis.com/css2?family=Modern+Antiqua&display=swap" rel="stylesheet">
    <!-- Estilos personalizados -->
    <style>
        :root {
            --jade: #00c896;
            --jade-light: #33d9ac;
            --jade-dark: #00967c;
            --dark-bg: #0a0a12;
        }
        
        /* Estilos de cursor personalizado */
        body {
            cursor: url("assets/media/cursors/image.png"), auto !important;
        }
        
        a, 
        button,
        .custom-button,
        .language-button,
        .back-button {
            cursor: url("assets/media/cursors/image.png"), auto !important;
        }
        
        a:hover, 
        button:hover,
        .custom-button:hover,
        .language-button:hover,
        .back-button:hover {
            cursor: url("assets/media/cursors/image2.png"), auto !important;
        }
        
        body {
            font-family: 'Modern Antiqua', serif;
            background-color: #000000;
            color: #f1f1f1;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .background-image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .radial-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 70%);
        }
        
        header {
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        
        .back-button {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            background-color: rgba(10, 10, 18, 0.8);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(0, 200, 150, 0.2);
            color: var(--jade);
            text-decoration: none;
            transition: all 0.3s;
            font-weight: 500;
            letter-spacing: 0.05em;
        }
        
        .back-button:hover {
            color: var(--jade-light);
            background-color: rgba(10, 10, 18, 0.95);
            border-color: rgba(0, 200, 150, 0.4);
        }
        
        .language-selector {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001; /* Aumentado para asegurar que esté por encima de todo */
            display: flex;
            gap: 10px;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 8px;
            backdrop-filter: blur(5px);
            pointer-events: auto !important; /* Forzar eventos de puntero */
        }

        .language-button {
            background: transparent;
            border: 1px solid #4a9e83;
            color: #fff;
            padding: 5px 15px;
            border-radius: 4px;
            cursor: pointer !important; /* Forzar cursor */
            transition: all 0.3s ease;
            pointer-events: auto !important; /* Forzar eventos de puntero */
        }

        .language-button:hover {
            background: rgba(74, 158, 131, 0.4) !important;
        }

        .language-button.active {
            background: #4a9e83;
        }
        
        main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 10;
            padding: 2rem 1rem;
        }
        
        .content-container {
            width: 100%;
            max-width: 1024px;
            margin: 0 auto;
        }
        
        .animated-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .animated-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .header-section {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .logo-container {
            margin-bottom: 2rem;
        }
        
        .logo-image {
            max-width: 300px;
            height: auto;
        }
        
        h1 {
            color: var(--jade);
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            letter-spacing: 0.05em;
        }
        
        .description {
            color: #aaa;
            max-width: 36rem;
            margin: 0 auto;
            letter-spacing: 0.02em;
        }
        
        .options-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            max-width: 768px;
            margin: 0 auto;
        }
        
        @media (min-width: 768px) {
            .options-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }
        }
        
        .panel-option {
            background-color: rgba(10, 10, 18, 0.8);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(0, 200, 150, 0.2);
            border-radius: 0.5rem;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            min-height: 200px;
            height: 100%;
            transition: all 0.3s;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .panel-option.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .panel-option:hover {
            border-color: rgba(0, 200, 150, 0.5);
        }
        
        .option-content {
            text-align: center;
        }
        
        .option-title {
            color: var(--jade);
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            letter-spacing: 0.05em;
        }
        
        .option-description {
            color: #aaa;
            margin-bottom: 2rem;
            letter-spacing: 0.02em;
        }
        
        /* Estilos de botones especiales */
        .btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            background-color: transparent;
            transform: scale(1);
            transition: transform 0.2s;
        }
        
        .btn:hover {
            transform: scale(1.05);
        }

        .btn::before,
        .btn::after {
            content: "";
            position: absolute;
            top: 0;
        }

        .btn::after {
            width: calc(100% + 6px);
            height: 100%;
            z-index: 2;
            left: -3px;
            background: url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bg_btn_red_left-oS4gSgIbHzacJPhxkdy439dSIvhsRB.png")
                left center / auto 100% no-repeat,
                url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bg_btn_red_right-D2erGMEqvd01Kk4K2rynDUoxQvdvMO.png")
                right center / auto 100% no-repeat;
        }

        .btn::before {
            height: 100%;
            z-index: 1;
            left: 50%;
            transform: translateX(-50%);
            background: url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bg_btn_red_middle-O4426m3uVxk9u8eeyh7MOzfx37Ri1j.png")
                center center / auto 100% repeat-x;
        }
        
        .btn-register {
            padding: 0 30px !important;
            min-width: 150px;
            height: 54px;
            font-size: 0.875rem;
        }

        .btn-register::before {
            width: calc(100% - 60px);
        }
        
        .btn-text {
            position: relative;
            z-index: 20;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        /* Estilos para la sección de votación */
        .vote-section {
            position: fixed;
            z-index: 50;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
        }

        .vote-container {
            padding: 1rem;
        }

        .vote-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .vote-buttons {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            align-items: center;
        }

        .vote-button {
            position: relative;
            display: block;
            text-decoration: none;
        }

        .vote-button-glow {
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            background-color: rgba(0, 200, 150, 0.2);
            opacity: 0;
            transition: opacity 0.3s, filter 0.3s;
            filter: blur(1rem);
        }

        .vote-button:hover .vote-button-glow {
            opacity: 1;
        }

        .vote-button-content {
            position: relative;
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(10, 10, 18, 0.8);
            border-radius: 9999px;
            border: 2px solid rgba(0, 200, 150, 0.2);
            backdrop-filter: blur(4px);
            transition: all 0.3s;
        }

        .vote-button:hover .vote-button-content {
            border-color: rgba(0, 200, 150, 0.5);
            transform: scale(1.1);
        }

        .vote-icon {
            width: 2rem;
            height: 2rem;
            transition: transform 0.3s;
        }

        .vote-button:hover .vote-icon {
            transform: scale(1.1);
        }
        
        footer {
            padding: 1rem;
            text-align: center;
            font-size: 0.875rem;
            color: #666;
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- Contenedor de fondo -->
    <div class="background-container">
        <img src="assets/media/background 3.jpg.jpeg" alt="Fondo místico" class="background-image">
        <div class="overlay"></div>
        <div class="radial-overlay"></div>
    </div>

    <!-- Sección de votación -->
    <div class="vote-section">
        <div class="vote-container">
            <h3 class="vote-title lang-vote-title">Votar</h3>
            <div class="vote-buttons">
                <a href="https://l2.hopzone.net/site/vote/106242/1" target="_blank" rel="noopener noreferrer" class="vote-button">
                    <div class="vote-button-glow"></div>
                    <div class="vote-button-content">
                        <img src="assets/media/hopzone.png" alt="Vote on Hopzone" class="vote-icon">
                    </div>
                </a>
                <a href="https://svtop.net/vote/618" target="_blank" rel="noopener noreferrer" class="vote-button">
                    <div class="vote-button-glow"></div>
                    <div class="vote-button-content">
                        <img src="assets/media/server-top.png" alt="Vote on Server Top" class="vote-icon">
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Cabecera con botón de regreso y selector de idioma -->
    <header>
        <div id="idiomas-directos" style="position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; gap: 5px;">
            <button onclick="cambiarDirecto('es')" style="padding: 5px 10px; background: #222; color: white; border: 1px solid #4a9e83; cursor: pointer; border-radius: 4px;">ES</button>
            <button onclick="cambiarDirecto('en')" style="padding: 5px 10px; background: #222; color: white; border: 1px solid #4a9e83; cursor: pointer; border-radius: 4px;">EN</button>
            <button onclick="cambiarDirecto('br')" style="padding: 5px 10px; background: #222; color: white; border: 1px solid #4a9e83; cursor: pointer; border-radius: 4px;">PT</button>
        </div>
        <a href="https://l2jade.com.ar" class="back-button">
            <i class="fas fa-arrow-left"></i>
            <span class="lang-back-to-site">Volver al Sitio</span>
        </a>
    </header>

    <!-- Contenido principal -->
    <main>
        <div class="content-container">
            <div class="animated-section header-section">
                <div class="logo-container">
                    <img src="assets/media/logo.png" alt="L2JADE Logo" class="logo-image">
                </div>
                <h1 class="lang-panel-title">Panel de usuario</h1>
                <p class="description lang-panel-subtitle">Bienvenido al panel de usuario de L2Jade. Aquí puedes realizar donaciones y registrar tu cuenta para empezar a jugar.</p>
            </div>

            <div class="options-grid">
                <!-- Opción de Donar -->
                <div class="animated-section panel-option" data-delay="0">
                    <div class="option-content">
                        <h2 class="option-title lang-donate">Donar</h2>
                        <p class="option-description lang-donate-desc">Apoya nuestro servidor con donaciones y recibe recompensas exclusivas.</p>
                    </div>
                    <a href="donaciones.php" class="btn btn-register">
                        <span class="btn-text lang-donate">Donar</span>
                    </a>
                </div>

                <!-- Opción de Registro -->
                <div class="animated-section panel-option" data-delay="0.2">
                    <div class="option-content">
                        <h2 class="option-title lang-register">Registrarse</h2>
                        <p class="option-description lang-register-desc">Crea una nueva cuenta para comenzar tu aventura en L2Jade.</p>
                    </div>
                    <a href="registro.php" class="btn btn-register">
                        <span class="btn-text lang-register">Registro</span>
                    </a>
                </div>
            </div>
        </div>
    </main>

    <!-- Pie de página -->
    <footer>
        <p>&copy; <?php echo date('Y'); ?> L2JADE. Todos los derechos reservados.</p>
    </footer>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Script de animaciones -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Función para activar animaciones con observador de intersección
            function setupAnimations() {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('visible');
                            
                            // Si es un panel-option, aplicamos un retraso basado en el atributo data-delay
                            if (entry.target.classList.contains('panel-option')) {
                                const delay = entry.target.getAttribute('data-delay') || 0;
                                entry.target.style.transitionDelay = `${delay}s`;
                            }
                        }
                    });
                }, { threshold: 0.1 });
                
                // Observar todos los elementos con la clase animated-section
                document.querySelectorAll('.animated-section').forEach(el => {
                    observer.observe(el);
                });
            }
            
            // Ejecutar animaciones
            setupAnimations();
        });
    </script>

    <!-- Script de traducciones - Simplificado -->
    <script>
        // Traducciones simplificadas
        const traducciones = {
            en: {
                "lang-panel-title": "User Panel",
                "lang-panel-subtitle": "Welcome to the L2Jade user panel. Here you can make donations and register your account to start playing.",
                "lang-register": "Register",
                "lang-register-desc": "Create a new account to start your adventure in L2Jade.",
                "lang-donate": "Donate",
                "lang-donate-desc": "Support our server with donations and receive exclusive rewards.",
                "lang-vote-title": "Vote",
                "lang-back-to-site": "Back to Site"
            },
            es: {
                "lang-panel-title": "Panel de usuario",
                "lang-panel-subtitle": "Bienvenido al panel de usuario de L2Jade. Aquí puedes realizar donaciones y registrar tu cuenta para empezar a jugar.",
                "lang-register": "Registrarse",
                "lang-register-desc": "Crea una nueva cuenta para comenzar tu aventura en L2Jade.",
                "lang-donate": "Donar",
                "lang-donate-desc": "Apoya nuestro servidor con donaciones y recibe recompensas exclusivas.",
                "lang-vote-title": "Votar",
                "lang-back-to-site": "Volver al Sitio"
            },
            br: {
                "lang-panel-title": "Painel do Usuário",
                "lang-panel-subtitle": "Bem-vindo ao painel do usuário do L2Jade. Aqui você pode fazer doações e registrar sua conta para começar a jogar.",
                "lang-register": "Registrar-se",
                "lang-register-desc": "Crie uma nova conta para começar sua aventura em L2Jade.",
                "lang-donate": "Doar",
                "lang-donate-desc": "Apoie nosso servidor com doações e receba recompensas exclusivas.",
                "lang-vote-title": "Votar",
                "lang-back-to-site": "Voltar ao Site"
            }
        };

        // Función ultra simple para cambiar el idioma
        function cambiarDirecto(idioma) {
            // Guardar el idioma
            window.localStorage.setItem('language', idioma);
            console.log("Idioma cambiado a " + idioma);
            
            // Actualizar textos directamente sin jQuery
            const textos = traducciones[idioma];
            for (const clase in textos) {
                const elementos = document.getElementsByClassName(clase);
                for (let i = 0; i < elementos.length; i++) {
                    elementos[i].textContent = textos[clase];
                }
            }
        }

        // Al cargar la página, usar el idioma guardado
        window.onload = function() {
            const idiomaGuardado = window.localStorage.getItem('language');
            if (idiomaGuardado && traducciones[idiomaGuardado]) {
                cambiarDirecto(idiomaGuardado);
            } else {
                cambiarDirecto('es');
            }
        };
    </script>
</body>
</html>
