<?php
/**
 * Página principal final para TRAUMA 2025
 * Con correcciones para el espaciado entre header y contenido
 */
session_start();

// Configuración de idioma
$currentLanguage = isset($_SESSION['language']) ? $_SESSION['language'] : 'es';
$translations = include('includes/translations.php');
$text = $translations[$currentLanguage];

// Habilitar mensajes de error durante el desarrollo
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE html>
<html lang="<?php echo $currentLanguage; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $text['pageTitle']; ?></title>
    
    <!-- Fonts -->
    <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=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- CSS -->
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/modern-design.css"> <!-- Diseño base moderno -->
    <link rel="stylesheet" href="css/header.css"> <!-- Corrección del espaciado -->
    
    <style>
        /* Ajustes adicionales para consistencia visual */
        :root {
            /* Colores principales para tema consistente */
            --primary-gradient: linear-gradient(135deg, var(--tertiary-color), var(--dark-color));
            --secondary-gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        }
        
        /* Header y footer con mismo estilo visual */
        header, footer {
            background: var(--primary-gradient);
            color: rgba(255, 255, 255, 0.9);
        }
        
        /* Mejoras para la barra de progreso */
        .progress-container {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.7);
        }
        
        /* Consistencia en botones del formulario */
        .btn-next, .btn-submit {
            background: var(--secondary-gradient);
        }
        
        /* Bordes más consistentes */
        .form-section, .progress-container, header, footer {
            border-radius: 20px;
        }
        
        /* Fix para cualquier solapamiento residual */
        .progress-container {
            position: relative;
            z-index: 100;
        }
        
        /* Contenedor principal con mayor espacio */
        .container {
            position: relative;
            padding-bottom: 40px;
        }
        
        /* Primera sección también con mayor separación */
        .form-section[data-section="1"] {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <!-- Toast para notificaciones -->
    <div class="toast" id="toast-notification">
        <div class="toast-icon"><i class="fas fa-info-circle"></i></div>
        <div class="toast-content">
            <strong class="toast-title">Notificación</strong>
            <div class="toast-message">Este es un mensaje de notificación</div>
        </div>
    </div>

    <div class="container">
        <!-- Header con espacio adicional para evitar que se corte -->
        <header>
            <div class="language-selector">
                <div class="language-dropdown">
                    <button class="language-btn">
                        <i class="fas fa-globe"></i>
                        <?php echo strtoupper($currentLanguage); ?>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="language-dropdown-content">
                        <a href="?lang=es" <?php echo $currentLanguage == 'es' ? 'class="active"' : ''; ?>>Español</a>
                        <a href="?lang=en" <?php echo $currentLanguage == 'en' ? 'class="active"' : ''; ?>>English</a>
                        <a href="?lang=pt" <?php echo $currentLanguage == 'pt' ? 'class="active"' : ''; ?>>Português</a>
                    </div>
                </div>
            </div>

            <div class="logo-container">
                <i class="fas fa-hospital-user logo-icon"></i>
            </div>
            <h1><?php echo $text['headerTitle']; ?></h1>
        
        </header>
        
        <!-- Barra de progreso reposicionada -->
        <div class="progress-container">
            <div class="progress-steps">
                <div class="step active" data-step="1">
                    <div class="step-circle">1</div>
                    <div class="step-label"><?php echo $text['basicInfo']; ?></div>
                </div>
                <div class="step" data-step="2">
                    <div class="step-circle">2</div>
                    <div class="step-label"><?php echo $text['introduction']; ?></div>
                </div>
                <div class="step" data-step="3">
                    <div class="step-circle">3</div>
                    <div class="step-label"><?php echo $text['methods']; ?></div>
                </div>
                <div class="step" data-step="4">
                    <div class="step-circle">4</div>
                    <div class="step-label"><?php echo $text['results']; ?></div>
                </div>
                <div class="step" data-step="5">
                    <div class="step-circle">5</div>
                    <div class="step-label"><?php echo $text['conclusions']; ?></div>
                </div>
                <div class="step" data-step="6">
                    <div class="step-circle">6</div>
                    <div class="step-label"><?php echo $text['authors']; ?></div>
                </div>
                <div class="step" data-step="7">
                    <div class="step-circle">7</div>
                    <div class="step-label"><?php echo $text['additionalInfo']; ?></div>
                </div>
                <div class="step" data-step="8">
                    <div class="step-circle">8</div>
                    <div class="step-label"><?php echo $text['confirmation']; ?></div>
                </div>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: 12.5%;"></div>
            </div>
        </div>
        
        <form id="abstract-form" action="submit.php" method="post" enctype="multipart/form-data">
            <div class="form-container">
                <?php 
                    // Inclusión de todas las secciones del formulario
                    include('sections/basic-info.php');
                    include('sections/introduction.php');
                    include('sections/methods.php');
                    include('sections/results.php');
                    include('sections/conclusions.php');
                    include('sections/authors-direct.php');
                    include('sections/additional-info.php');
                    include('sections/confirmation.php');
                ?>
            </div>
        </form>
        
        <footer>
            <p>&copy; <?php echo date('Y'); ?> TRAUMA 2026 - <?php echo $text['footerRights'] ?? 'Todos los derechos reservados'; ?></p>
            
            <div class="footer-links">
                <a href="#"><?php echo $text['footerContact'] ?? 'Contacto'; ?></a>
                <a href="#"><?php echo $text['footerPrivacy'] ?? 'Política de Privacidad'; ?></a>
                <a href="#"><?php echo $text['footerTerms'] ?? 'Términos de Uso'; ?></a>
            </div>
            
            <div class="social-icons">
                <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
            </div>
        </footer>
    </div>

    <!-- Scripts -->
    <script src="js/navigation.js"></script> <!-- Navegación principal -->
    <script src="js/validation.js"></script>
    <script src="js/word-counter.js"></script>
    <script src="js/file-upload.js"></script>
    <script src="js/modern-animations.js"></script> <!-- Animaciones modernas -->
    
    <!-- Script para Toast Notifications -->
    <script>
        // Función para mostrar notificaciones
        function showToast(message, type = 'info', duration = 5000) {
            const toast = document.getElementById('toast-notification');
            const toastTitle = toast.querySelector('.toast-title');
            const toastMessage = toast.querySelector('.toast-message');
            const toastIcon = toast.querySelector('.toast-icon i');
            
            // Establecer tipo
            toast.className = 'toast';
            toast.classList.add(type);
            
            // Actualizar ícono según el tipo
            toastIcon.className = 'fas';
            switch(type) {
                case 'success':
                    toastIcon.classList.add('fa-check-circle');
                    toastTitle.textContent = 'Éxito';
                    break;
                case 'error':
                    toastIcon.classList.add('fa-exclamation-circle');
                    toastTitle.textContent = 'Error';
                    break;
                case 'warning':
                    toastIcon.classList.add('fa-exclamation-triangle');
                    toastTitle.textContent = 'Advertencia';
                    break;
                default:
                    toastIcon.classList.add('fa-info-circle');
                    toastTitle.textContent = 'Información';
            }
            
            // Actualizar mensaje
            toastMessage.textContent = message;
            
            // Mostrar toast
            toast.classList.add('visible');
            
            // Ocultar después del tiempo definido
            setTimeout(() => {
                toast.classList.remove('visible');
            }, duration);
        }
        
        // Ejemplo de uso
        document.addEventListener('DOMContentLoaded', function() {
            // Mostrar mensaje de bienvenida
            setTimeout(() => {
                showToast('Bienvenido al formulario de resúmenes científicos TRAUMA 2026', 'info');
            }, 1000);
        });
    </script>
</body>
</html>