
<?php
// contacto.php
// Página de contacto

// Define BASE_PATH
if (!defined('BASE_PATH')) {
    define('BASE_PATH', dirname(__FILE__));
}

// Configuraciones iniciales
require_once 'includes/config.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';
require_once BASE_PATH . '/includes/config-tracking.php';

// Inclui o sistema de tracking atualizado
require_once 'includes/unique-visits-tracker.php';

    // Track visita única para página estática
$uniqueVisitsTracker->trackUniqueVisit(null, '/contacto', 'Cursos Gratuitos');

// Define variables para el header
$pageTitle = 'Contacto';
$metaDescription = 'Ponte en contacto con nosotros para sugerir cursos, reportar problemas o realizar consultas sobre nuestro directorio de cursos gratuitos.';
$metaKeywords = 'contacto, ayuda, soporte, sugerir cursos';
$currentPage = 'contact';
$showHeader = true;

// Breadcrumbs para la página
$breadcrumbs = [
    '' => 'Contacto'
];

// Procesar el formulario si se envió
$formSubmitted = false;
$formSuccess = false;
$formError = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        // Validación básica
        $name = isset($_POST['name']) ? sanitizeInput($_POST['name']) : '';
        $email = isset($_POST['email']) ? sanitizeInput($_POST['email']) : '';
        $subject = isset($_POST['subject']) ? sanitizeInput($_POST['subject']) : '';
        $message = isset($_POST['message']) ? sanitizeInput($_POST['message']) : '';
        
        // Validación
        if (empty($name)) {
            throw new Exception('Por favor, introduce tu nombre.');
        }
        
        if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            throw new Exception('Por favor, introduce un email válido.');
        }
        
        if (empty($subject)) {
            throw new Exception('Por favor, introduce un asunto.');
        }
        
        if (empty($message)) {
            throw new Exception('Por favor, introduce un mensaje.');
        }
        
        // Aquí iría el código para enviar el email
        // Este es un ejemplo simplificado
        
        /*
        mail(
            ADMIN_EMAIL,
            'Nuevo mensaje de contacto: ' . $subject,
            "Nombre: $name\nEmail: $email\nMensaje: $message",
            "From: $email"
        );
        */
        
        // Como no implementamos el envío real, simulamos éxito
        $formSubmitted = true;
        $formSuccess = true;
        
        // Limpiar los campos después del éxito
        $name = $email = $subject = $message = '';
        
    } catch (Exception $e) {
        $formSubmitted = true;
        $formError = $e->getMessage();
    }
}

// Incluye el header
require_once 'includes/header.php';
?>

<!-- Contenido Principal -->
<section class="contact-intro py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="section-title mb-4">Estamos Aquí Para Ayudarte</h2>
                <p class="lead mb-5">¿Tienes alguna pregunta, sugerencia o encontraste un problema en nuestra plataforma? Nos encantaría saber de ti. Completa el formulario a continuación o utiliza uno de nuestros canales de contacto.</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <?php if ($formSubmitted && $formSuccess): ?>
                    <div class="alert alert-success p-4 rounded-3 shadow-sm mb-5">
                        <h4 class="alert-heading mb-3"><i class="fas fa-check-circle me-2"></i>¡Mensaje Enviado!</h4>
                        <p class="mb-0">Gracias por contactarnos. Hemos recibido tu mensaje y te responderemos lo antes posible, generalmente dentro de 24-48 horas.</p>
                    </div>
                <?php elseif ($formSubmitted && !$formSuccess): ?>
                    <div class="alert alert-danger p-4 rounded-3 shadow-sm mb-5">
                        <h4 class="alert-heading mb-3"><i class="fas fa-exclamation-circle me-2"></i>Hubo un problema</h4>
                        <p class="mb-0"><?php echo $formError; ?></p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<section class="contact-info py-5 bg-light">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="icon-box mb-4">
                            <i class="fas fa-envelope fa-2x text-primary"></i>
                        </div>
                        <h3 class="h5 mb-3">Email</h3>
                        <p class="mb-0">
                            <a href="mailto:<?php echo ADMIN_EMAIL; ?>" class="text-decoration-none">
                                <?php echo ADMIN_EMAIL; ?>
                            </a>
                        </p>
                        <p class="text-muted small mt-2">Respondemos en 24-48 horas laborables</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="icon-box mb-4">
                            <i class="fas fa-comments fa-2x text-primary"></i>
                        </div>
                        <h3 class="h5 mb-3">Chat en Vivo</h3>
                        <p class="mb-0">Disponible de lunes a viernes</p>
                        <p class="text-muted small mt-2">9:00 AM - 6:00 PM (Hora local)</p>
                        <button class="btn btn-sm btn-outline-primary mt-2" onclick="openLiveChat()">
                            Iniciar Chat <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="icon-box mb-4">
                            <i class="fas fa-hashtag fa-2x text-primary"></i>
                        </div>
                        <h3 class="h5 mb-3">Redes Sociales</h3>
                        <p class="mb-3">Síguenos y envíanos un mensaje directo</p>
                        <div class="social-links d-flex justify-content-center">
                            <a href="#" class="me-2" title="Facebook">
                                <i class="fab fa-facebook"></i>
                            </a>
                            <a href="#" class="me-2" title="Instagram">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="me-2" title="Twitter">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" title="LinkedIn">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="contact-form py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card border-0 shadow">
                    <div class="card-body p-4 p-md-5">
                        <h3 class="card-title text-center mb-4">Envíanos un Mensaje</h3>
                        
                        <form action="" method="post" id="contactForm">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Tu nombre" value="<?php echo isset($name) ? htmlspecialchars($name) : ''; ?>" required>
                                        <label for="name">Nombre completo</label>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-floating mb-3">
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Tu email" value="<?php echo isset($email) ? htmlspecialchars($email) : ''; ?>" required>
                                        <label for="email">Email</label>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-floating mb-3">
                                        <select class="form-select" id="subject" name="subject" required>
                                            <option value="" selected disabled>Selecciona una opción</option>
                                            <option value="Sugerir Curso" <?php echo (isset($subject) && $subject === 'Sugerir Curso') ? 'selected' : ''; ?>>Sugerir un curso</option>
                                            <option value="Reportar Problema" <?php echo (isset($subject) && $subject === 'Reportar Problema') ? 'selected' : ''; ?>>Reportar un problema</option>
                                            <option value="Consulta General" <?php echo (isset($subject) && $subject === 'Consulta General') ? 'selected' : ''; ?>>Consulta general</option>
                                            <option value="Colaboración" <?php echo (isset($subject) && $subject === 'Colaboración') ? 'selected' : ''; ?>>Propuesta de colaboración</option>
                                            <option value="Otro" <?php echo (isset($subject) && $subject === 'Otro') ? 'selected' : ''; ?>>Otro</option>
                                        </select>
                                        <label for="subject">Asunto</label>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-floating mb-3">
                                        <textarea class="form-control" id="message" name="message" placeholder="Tu mensaje" style="height: 200px" required><?php echo isset($message) ? htmlspecialchars($message) : ''; ?></textarea>
                                        <label for="message">Mensaje</label>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="agreeTerms" name="agreeTerms" required>
                                        <label class="form-check-label" for="agreeTerms">
                                            Acepto la <a href="/privacidad.php" target="_blank">política de privacidad</a> y el procesamiento de mis datos.
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary btn-lg px-5">
                                        <i class="fas fa-paper-plane me-2"></i>Enviar Mensaje
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="contact-faq py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="section-title">Preguntas Frecuentes</h2>
                <p class="lead">Respuestas a las consultas más comunes sobre contacto y soporte.</p>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item border-0 shadow-sm mb-3 rounded">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                ¿Cuál es el tiempo de respuesta habitual?
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Normalmente respondemos a todas las consultas en un plazo de 24-48 horas laborables. Para consultas más complejas o que requieran investigación, el tiempo de respuesta puede ser mayor, pero siempre te mantendremos informado.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 shadow-sm mb-3 rounded">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                ¿Cómo puedo sugerir un curso para añadir a la plataforma?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Para sugerir un curso, completa el formulario de contacto seleccionando "Sugerir un curso" en el campo de asunto. Proporciona toda la información posible: título del curso, enlace, plataforma, instructor y una breve descripción. Revisaremos tu sugerencia y, si cumple con nuestros criterios de calidad, lo añadiremos a nuestra base de datos.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 shadow-sm mb-3 rounded">
                        <h2 class="accordion-header" id="headingThree">
                            <button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                ¿Qué debo hacer si encuentro un curso que ya no es gratuito?
                            </button>
                        </h2>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Si encuentras un curso en nuestra plataforma que ya no es gratuito, por favor infórmanos inmediatamente mediante el formulario de contacto, seleccionando "Reportar un problema" como asunto. Incluye el enlace al curso y cualquier otra información relevante. Actualizaremos nuestra base de datos para reflejar el cambio.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 shadow-sm mb-3 rounded">
                        <h2 class="accordion-header" id="headingFour">
                            <button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                ¿Ofrecen soporte técnico para los cursos listados?
                            </button>
                        </h2>
                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>No proporcionamos soporte técnico para los cursos individuales. Como directorio, nuestra función es conectarte con cursos gratuitos, pero el soporte técnico específico debe ser proporcionado por la plataforma o institución que ofrece el curso. Sin embargo, podemos ayudarte a encontrar los canales de soporte adecuados si tienes dificultades.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Estilos específicos de la página de contacto -->
<style>
    .icon-box {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(79, 70, 229, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: var(--primary-color);
    }
    
    .social-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary-color);
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .social-links a:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-3px);
    }
    
    .form-floating > .form-control,
    .form-floating > .form-select {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: #F9FAFB;
        transition: all 0.3s ease;
    }
    
    .form-floating > .form-control:focus,
    .form-floating > .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        background: white;
    }
    
    .accordion-button:not(.collapsed) {
        background: var(--gradient);
        color: white;
        box-shadow: none;
    }
    
    .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    
    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
</style>

<!-- Scripts específicos de la página de contacto -->
<script>
    function openLiveChat() {
        // Aquí iría el código para abrir el chat en vivo
        alert('El sistema de chat en vivo estará disponible próximamente.');
    }
    
    // Validación del formulario del lado del cliente
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('contactForm');
        
        if (form) {
            form.addEventListener('submit', function(event) {
                let isValid = true;
                
                // Validación del nombre
                const name = document.getElementById('name');
                if (!name.value.trim()) {
                    isValid = false;
                    highlightField(name, false);
                } else {
                    highlightField(name, true);
                }
                
                // Validación del email
                const email = document.getElementById('email');
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!email.value.trim() || !emailPattern.test(email.value)) {
                    isValid = false;
                    highlightField(email, false);
                } else {
                    highlightField(email, true);
                }
                
                // Validación del asunto
                const subject = document.getElementById('subject');
                if (!subject.value || subject.value === '') {
                    isValid = false;
                    highlightField(subject, false);
                } else {
                    highlightField(subject, true);
                }
                
                // Validación del mensaje
                const message = document.getElementById('message');
                if (!message.value.trim()) {
                    isValid = false;
                    highlightField(message, false);
                } else {
                    highlightField(message, true);
                }
                
                // Validación de los términos
                const terms = document.getElementById('agreeTerms');
                if (!terms.checked) {
                    isValid = false;
                    // Resalta visualmente el checkbox
                    terms.classList.add('is-invalid');
                } else {
                    terms.classList.remove('is-invalid');
                }
                
                if (!isValid) {
                    event.preventDefault();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            });
        }
        
        function highlightField(field, isValid) {
            if (isValid) {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            } else {
                field.classList.remove('is-valid');
                field.classList.add('is-invalid');
            }
        }
    });
</script>

<?php
// Incluye el footer
require_once 'includes/footer.php';
?>