<?php
// Evitar caché del navegador
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opciones de Traducción - Discord Bot</title>
    <style>
        :root {
            --discord-blurple: #5865F2;
            --discord-green: #57F287;
            --discord-yellow: #FEE75C;
            --discord-red: #ED4245;
            --discord-dark: #2c2f33;
            --discord-gray: #99aab5;
            --discord-light-gray: #f2f3f5;
            --discord-chat-bg: #36393f;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'gg sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: var(--discord-dark);
            color: white;
            padding: 20px;
        }
        .container { max-width: 1200px; margin: 0 auto; }
        .header { text-align: center; color: white; margin-bottom: 40px; }
        .header h1 { font-size: 2.5rem; margin-bottom: 10px; }
        .header p { font-size: 1.2rem; color: var(--discord-gray); }
        .options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 30px; }
        .option-card { background: var(--discord-chat-bg); border-radius: 8px; padding: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); transition: transform 0.3s ease; }
        .option-card:hover { transform: translateY(-5px); }
        .option-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
        .option-icon { font-size: 28px; }
        .option-title { font-size: 1.5rem; font-weight: bold; color: white; }
        .option-description { color: var(--discord-gray); font-size: 1rem; margin-bottom: 20px; }
        .demo-area { background: var(--discord-dark); border-radius: 8px; padding: 20px; border: 1px solid #40444b; }
        .discord-message { display: flex; gap: 15px; }
        .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
        .message-content { display: flex; flex-direction: column; }
        .username { font-weight: 600; font-size: 1rem; margin-bottom: 5px; color: var(--discord-green); }
        .message-text { color: #dcddde; line-height: 1.4; }
        .discord-button { padding: 10px 16px; border: none; border-radius: 3px; font-weight: 600; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s; margin-top: 10px; background-color: #4f545c; color: white; }
        .discord-button:hover { background-color: #5d636b; }
        .pros-cons { margin-top: 20px; }
        .pros, .cons { padding: 12px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; }
        .pros { background: rgba(87, 242, 135, 0.1); border-left: 3px solid var(--discord-green); }
        .pros strong { color: var(--discord-green); }
        .cons { background: rgba(254, 231, 92, 0.1); border-left: 3px solid var(--discord-yellow); }
        .cons strong { color: var(--discord-yellow); }
        ul { color: var(--discord-gray); margin-left: 20px; margin-top: 5px; }
        .recommendation { background: var(--discord-blurple); color: white; padding: 30px; border-radius: 8px; text-align: center; }
        
        /* Modal for Ephemeral Message */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; }
        .modal.active { display: flex; }
        .modal-content { background: var(--discord-chat-bg); padding: 20px; border-radius: 8px; max-width: 450px; width: 90%; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
        .modal-header { color: var(--discord-green); font-weight: bold; margin-bottom: 15px; }
        .modal-body { color: #dcddde; }
        .modal-body .translation { margin-bottom: 10px; }
        .modal-body .translation strong { color: white; }
        .modal-footer { font-size: 0.8rem; color: var(--discord-gray); margin-top: 15px; text-align: center; }
        
        /* Spoiler styles */
        .spoiler { background-color: #202225; color: transparent; border-radius: 3px; cursor: pointer; padding: 0 2px; }
        .spoiler.revealed { background-color: transparent; color: inherit; }

        /* Thread styles */
        .thread-link { color: var(--discord-blurple); font-weight: 600; cursor: pointer; font-size: 0.9rem; margin-top: 8px; }
        .thread-view { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #40444b; }
    </style>
</head>
<body>

<div class="container">
    <div class="header">
        <h1><img src="https://discord.com/assets/f8389ca1a741a115313a74fbbd352562.svg" alt="Discord Logo" width="40" style="vertical-align: middle;"> Opciones de Traducción para Discord</h1>
        <p>Demostración visual de métodos no invasivos para mostrar traducciones.</p>
    </div>

    <div class="options-grid">
        <!-- Opción 1: Botón con Respuesta Efímera -->
        <div class="option-card">
            <div class="option-header"><span class="option-icon">🤫</span> <h2 class="option-title">Botón Efímero</h2></div>
            <p class="option-description">Un botón "Traducir" bajo el mensaje original. Al pulsarlo, se muestra una traducción que sólo el usuario que ha hecho clic puede ver.</p>
            <div class="demo-area">
                <div class="discord-message">
                    <img src="https://cdn.discordapp.com/embed/avatars/1.png" alt="avatar" class="avatar">
                    <div class="message-content">
                        <span class="username">UserFromFrance</span>
                        <div class="message-text">Bonjour tout le monde! C'est une démo.</div>
                        <button class="discord-button" onclick="showPopup('ephemeral-popup')">🌐 Traducir</button>
                    </div>
                </div>
            </div>
            <div class="pros-cons">
                <div class="pros"><strong>✅ Ventajas:</strong><ul><li>No satura el chat general.</li><li>La traducción es bajo demanda.</li><li>Experiencia de usuario moderna y limpia.</li></ul></div>
                <div class="cons"><strong>⚠️ Consideración:</strong><p style="margin-left: 20px; color: var(--discord-gray);">Requiere manejar interacciones (clicks de botón) en el backend.</p></div>
            </div>
        </div>

        <!-- Opción 2: Hilos -->
        <div class="option-card">
            <div class="option-header"><span class="option-icon">🧵</span> <h2 class="option-title">Hilos (Threads)</h2></div>
            <p class="option-description">Se crea un hilo a partir del mensaje original, y la traducción se publica dentro de ese hilo, manteniendo el canal principal limpio.</p>
            <div class="demo-area">
                <div class="discord-message">
                    <img src="https://cdn.discordapp.com/embed/avatars/2.png" alt="avatar" class="avatar">
                    <div class="message-content">
                        <span class="username" style="color: #f1c40f;">UserFromGermany</span>
                        <div class="message-text">Guten Tag, dies ist eine weitere Demo.</div>
                        <div class="thread-link" onclick="toggleThread('thread-view')">↪️ Ver Hilo (1 respuesta)</div>
                    </div>
                </div>
                <div class="thread-view" id="thread-view">
                     <div class="discord-message">
                        <img src="https://www.google.com/s2/favicons?domain=discord.com" alt="avatar" class="avatar">
                        <div class="message-content">
                            <span class="username" style="color: #5865F2;">Translation Bot</span>
                            <div class="message-text"><strong>Traducción (ES):</strong><br>Buenas tardes, esta es otra demo.</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pros-cons">
                <div class="pros"><strong>✅ Ventajas:</strong><ul><li>Mantiene el canal principal 100% limpio.</li><li>Permite discusiones sobre la traducción en el hilo.</li><li>Ideal para mensajes largos.</li></ul></div>
                <div class="cons"><strong>⚠️ Consideración:</strong><p style="margin-left: 20px; color: var(--discord-gray);">Puede generar muchas notificaciones de hilos si hay mucha actividad.</p></div>
            </div>
        </div>

        <!-- Opción 3: Spoilers -->
        <div class="option-card">
            <div class="option-header"><span class="option-icon">⬛</span> <h2 class="option-title">Spoilers</h2></div>
            <p class="option-description">La traducción se añade al mensaje original o en una respuesta, pero oculta tras una etiqueta de spoiler que se revela al hacer clic.</p>
            <div class="demo-area">
                <div class="discord-message">
                    <img src="https://cdn.discordapp.com/embed/avatars/3.png" alt="avatar" class="avatar">
                    <div class="message-content">
                        <span class="username" style="color: #e91e63;">UserFromItaly</span>
                        <div class="message-text">
                            Ciao! Benvenuto alla demo finale.<br>
                            <strong>Traducción:</strong> <span class="spoiler" onclick="this.classList.toggle('revealed')">¡Hola! Bienvenido a la demo final.</span>
                        </div>
                    </div>
                </div>
            </div>
             <div class="pros-cons">
                <div class="pros"><strong>✅ Ventajas:</strong><ul><li>Muy fácil de implementar.</li><li>No requiere interacciones complejas.</li><li>La traducción está en el mismo contexto.</li></ul></div>
                <div class="cons"><strong>⚠️ Consideración:</strong><p style="margin-left: 20px; color: var(--discord-gray);">Añade "ruido" visual al chat, aunque esté oculto.</p></div>
            </div>
        </div>
    </div>

    <div class="recommendation">
        <h3>💡 Nuestra Recomendación</h3>
        <p>Para la mejor experiencia de usuario y mantener los canales limpios, la **Opción 1 (Botón Efímero)** es la más recomendada. Es moderna, eficiente y le da el control total al usuario sin interrumpir a los demás.</p>
    </div>
</div>

<!-- Modal para la demo efímera -->
<div class="modal" id="ephemeral-popup" onclick="closePopup('ephemeral-popup')">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">Traducción del mensaje</div>
        <div class="modal-body">
            <div class="translation">
                <strong>Inglés:</strong><br>
                <span>Hello everyone! This is a demo.</span>
            </div>
            <div class="translation">
                <strong>Español:</strong><br>
                <span>¡Hola a todos! Esto es una demo.</span>
            </div>
        </div>
        <div class="modal-footer">Solo tú puedes ver este mensaje.</div>
    </div>
</div>

<script>
    function showPopup(id) {
        document.getElementById(id).classList.add('active');
    }
    function closePopup(id) {
        document.getElementById(id).classList.remove('active');
    }
    function toggleThread(id) {
        const threadView = document.getElementById(id);
        if (threadView.style.display === 'block') {
            threadView.style.display = 'none';
        } else {
            threadView.style.display = 'block';
        }
    }
    // Cerrar modal con la tecla Escape
    document.addEventListener('keydown', function (event) {
        if (event.key === "Escape") {
            const activeModal = document.querySelector('.modal.active');
            if (activeModal) {
                closePopup(activeModal.id);
            }
        }
    });
</script>

</body>
</html>