<?php
// index.php
// Página inicial de la plataforma de cursos gratuitos

// 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';

// Define variables para el header
$pageTitle = 'Cursos Gratuitos para Transformar tu Vida';
$metaDescription = 'Cursos gratuitos de alta calidad para ayudarte a desarrollar nuevas habilidades, avanzar en tu carrera y transformar tu vida.';
$metaKeywords = 'cursos gratuitos, educación online, aprendizaje, desarrollo profesional';
$currentPage = 'home';
$showHeader = false; // No mostrar la cabecera grande en la página principal

// Adicione após os includes básicos
require_once 'includes/unique-visits-tracker.php';

// Track visita única
$uniqueVisitsTracker->trackUniqueVisit(null, '/home', 'Cursos Gratuitos');

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

// Busca los cursos activos en la base de datos
try {
    // Busca cursos destacados
    $db->query("SELECT * FROM cursos WHERE status = 'ativo' ORDER BY data_criacao DESC LIMIT 6");
    $cursos = $db->resultSet();
    
    // Busca las páginas de landing activas
    $db->query("SELECT id, title, slug, excerpt, featured_image FROM pages 
               WHERE type = 'landing' AND published = 1 
               ORDER BY sequence ASC, created_at DESC 
               LIMIT 4");
    $landingPages = $db->resultSet();
    
} catch (Exception $e) {
    // Si ocurre un error, inicializa arrays vacíos
    logError("Error al cargar cursos: " . $e->getMessage());
    $cursos = [];
    $landingPages = [];
}

// Procesa búsqueda
$searchQuery = '';
$searchResults = [];

if (isset($_GET['q']) && !empty($_GET['q'])) {
    $searchQuery = sanitizeInput($_GET['q']);
    
    try {
        $db->query("SELECT * FROM cursos 
                   WHERE (titulo LIKE :query OR categoria LIKE :query OR palavras_chave LIKE :query) 
                   AND status = 'ativo' 
                   ORDER BY data_criacao DESC");
        
        $db->bind(':query', "%{$searchQuery}%");
        $searchResults = $db->resultSet();
    } catch (Exception $e) {
        logError("Error en la búsqueda: " . $e->getMessage());
    }
}
?>

<!-- Contenido Principal -->
<?php if (!empty($searchQuery)): ?>
<!-- Resultados de Búsqueda -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Resultados de la búsqueda: "<?php echo htmlspecialchars($searchQuery); ?>"</h2>
        
        <?php if (empty($searchResults)): ?>
            <div class="alert alert-info">
                No se encontraron cursos para tu búsqueda. Intenta con otros términos o explora nuestros cursos a continuación.
            </div>
        <?php else: ?>
            <div class="row">
                <?php foreach ($searchResults as $curso): ?>
                    <div class="col-md-4 mb-4">
                        <div class="course-card">
                            <?php if (!empty($curso['imagem'])): ?>
                                <img src="<?php echo htmlspecialchars($curso['imagem']); ?>" alt="<?php echo htmlspecialchars($curso['titulo']); ?>" class="course-image">
                            <?php else: ?>
                                <img src="/assets/img/course-placeholder.jpg" alt="<?php echo htmlspecialchars($curso['titulo']); ?>" class="course-image">
                            <?php endif; ?>
                            
                            <div class="course-body">
                                <span class="course-category"><?php echo htmlspecialchars($curso['categoria']); ?></span>
                                <h3><a href="/pages/landing.php?curso_id=<?php echo $curso['id']; ?>" class="course-title"><?php echo htmlspecialchars($curso['titulo']); ?></a></h3>
                                <p class="course-description">
                                    <?php echo substr(htmlspecialchars($curso['palavras_chave'] ?? ''), 0, 100); ?>...
                                </p>
                                <a href="/pages/landing.php?curso_id=<?php echo $curso['id']; ?>" class="course-button">Acceder al Curso</a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
        
        <div class="text-center mt-4">
            <a href="#cursos" class="btn btn-outline-primary">Ver todos los cursos</a>
        </div>
    </div>
</section>
<?php else: ?>
<!-- Hero Section -->
<section class="hero-section">
    <div class="hero-bg"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content">
                <h1 class="hero-title">Transforma tu Futuro con Cursos Gratuitos de Calidad</h1>
                <p class="hero-subtitle">Accede a contenido exclusivo y desarrolla nuevas habilidades sin gastar nada. ¡Comienza ahora mismo!</p>
                <a href="/cursos.php" class="hero-cta">Explorar Cursos <i class="fas fa-arrow-right ms-2"></i></a>
            </div>
            <div class="col-lg-6 d-none d-lg-block text-center">
                <img src="/assets/img/hero-image.svg" alt="Ilustración de cursos online" class="img-fluid">
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section">
    <div class="container">
        <h2 class="section-title">¿Por qué elegir un curso gratuito?</h2>
        
        <div class="row">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-laptop"></i>
                    </div>
                    <h3 class="feature-title">100% Online</h3>
                    <p>Accede desde cualquier lugar, en cualquier momento. Estudia a tu ritmo y según tu disponibilidad.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <h3 class="feature-title">Totalmente Gratuito</h3>
                    <p>Sin mensualidades, sin tarifas ocultas. Todos los cursos son completamente gratuitos.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <h3 class="feature-title">Certificado Digital</h3>
                    <p>Recibe un certificado al completar el curso y añade un nuevo logro a tu currículum.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>


<!-- Landing Pages Section -->
<?php if (!empty($landingPages)): ?>
<section class="landing-section">
    <div class="container">
        <h2 class="section-title">Contenidos Especiales</h2>
        
        <div class="row">
            <?php foreach ($landingPages as $page): ?>
                <div class="col-md-6 col-lg-3">
                    <a href="<?php echo SITE_URL . '/pages/' . $page['slug']; ?>" class="landing-card">
                        <?php if (!empty($page['featured_image'])): ?>
                            <img src="<?php echo htmlspecialchars($page['featured_image']); ?>" alt="<?php echo htmlspecialchars($page['title']); ?>" class="landing-image">
                        <?php else: ?>
                            <img src="/assets/img/landing-placeholder.jpg" alt="<?php echo htmlspecialchars($page['title']); ?>" class="landing-image">
                        <?php endif; ?>
                        
                        <div class="landing-overlay">
                            <h3 class="landing-title"><?php echo htmlspecialchars($page['title']); ?></h3>
                            <p class="landing-description"><?php echo substr(htmlspecialchars($page['excerpt'] ?? ''), 0, 80); ?>...</p>
                        </div>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Testimonials Section -->
<section class="testimonials-section">
    <div class="container">
        <h2 class="section-title">Lo que dicen algunos estudiantes</h2>
        
        <div class="row">
            <div class="col-md-4">
                <div class="testimonial-card">
                    <p class="testimonial-text">
                        "¡Los cursos son increíbles! Pude aprender mucho en poco tiempo y lo mejor de todo: totalmente gratuito. Lo recomiendo a todos los que quieran expandir sus conocimientos."
                    </p>
                    <div class="testimonial-author">
                        <img src="/assets/img/avatar1.jpg" alt="Foto de perfil" class="testimonial-avatar">
                        <div>
                            <h4 class="testimonial-name">Ana García</h4>
                            <p class="testimonial-position">Estudiante de Marketing</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="testimonial-card">
                    <p class="testimonial-text">
                        "Contenido de calidad, bien estructurado y fácil de seguir. Pude aplicar el conocimiento en mi trabajo inmediatamente y ya estoy viendo resultados."
                    </p>
                    <div class="testimonial-author">
                        <img src="/assets/img/avatar2.jpg" alt="Foto de perfil" class="testimonial-avatar">
                        <div>
                            <h4 class="testimonial-name">Carlos Rodríguez</h4>
                            <p class="testimonial-position">Desarrollador Web</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="testimonial-card">
                    <p class="testimonial-text">
                        "Comencé sin ningún conocimiento en el área y hoy ya estoy trabajando como freelancer, todo gracias a los cursos. ¡La plataforma cambió mi vida profesional!"
                    </p>
                    <div class="testimonial-author">
                        <img src="/assets/img/avatar3.jpg" alt="Foto de perfil" class="testimonial-avatar">
                        <div>
                            <h4 class="testimonial-name">Juliana Martínez</h4>
                            <p class="testimonial-position">Diseñadora Gráfica</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <h2 class="cta-title">¿Listo para Transformar tu Futuro?</h2>
        <p class="cta-text">
            No lo dejes para después. Comienza hoy mismo a aprender nuevas habilidades y da un paso importante hacia tus objetivos profesionales.
        </p>
        <a href="/cursos.php" class="cta-button">Acceder a Cursos Gratuitos <i class="fas fa-arrow-right ms-2"></i></a>
    </div>
</section>

<!-- Estilos específicos de la página de inicio -->
<style>
    :root {
        --primary-color: #4F46E5;
        --secondary-color: #7C3AED;
        --accent-color: #EC4899;
        --dark-color: #1F2937;
        --light-color: #F8FAFC;
        --text-color: #1F2937;
        --border-color: #E5E7EB;
        --success-color: #10B981;
        --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }
    
    .hero-section {
        background: var(--gradient);
        padding: 5rem 0;
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/assets/img/pattern.svg');
        background-size: cover;
        opacity: 0.1;
    }
    
    .hero-content {
        position: relative;
        z-index: 2;
    }
    
    .hero-title {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
    }
    
    .hero-cta {
        display: inline-block;
        background: white;
        color: var(--primary-color);
        font-weight: 600;
        padding: 1rem 2rem;
        border-radius: 0.5rem;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .hero-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        color: var(--primary-color);
    }
    
    .section-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 3rem;
        text-align: center;
        position: relative;
        padding-bottom: 1rem;
    }
    
    .section-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: var(--gradient);
        border-radius: 2px;
    }
    
    .features-section {
        padding: 5rem 0;
        background: white;
    }
    
    .feature-card {
        padding: 2rem;
        border-radius: 1rem;
        background: white;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
        text-align: center;
        height: 100%;
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .feature-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--gradient);
        color: white;
        font-size: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }
    
    .feature-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    
    .courses-section {
        padding: 5rem 0;
        background-color: #f9fafb;
    }
    
    .course-card {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        margin-bottom: 2rem;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .course-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .course-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .course-body {
        padding: 1.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .course-category {
        display: inline-block;
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary-color);
        font-size: 0.8rem;
        font-weight: 500;
        padding: 0.25rem 0.75rem;
        border-radius: 30px;
        margin-bottom: 0.75rem;
    }
    
    .course-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--dark-color);
        text-decoration: none;
    }
    
    .course-title:hover {
        color: var(--primary-color);
    }
    
    .course-description {
        color: #6B7280;
        margin-bottom: 1.5rem;
        flex-grow: 1;
    }
    
    .course-button {
        display: inline-block;
        background: var(--gradient);
        color: white;
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        text-decoration: none;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .course-button:hover {
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
        color: white;
    }
    
    .landing-section {
        padding: 5rem 0;
        background: white;
    }
    
    .landing-card {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
        height: 300px;
        display: block;
        text-decoration: none;
    }
    
    .landing-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .landing-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .landing-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        padding: 2rem 1.5rem;
        color: white;
    }
    
    .landing-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: white;
    }
    
    .landing-description {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
    }
    
    .cta-section {
        padding: 5rem 0;
        background: var(--gradient);
        color: white;
        text-align: center;
    }
    
    .cta-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }
    
    .cta-text {
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto 2rem;
        opacity: 0.9;
    }
    
    .cta-button {
        display: inline-block;
        background: white;
        color: var(--primary-color);
        font-weight: 600;
        padding: 1rem 2rem;
        border-radius: 0.5rem;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        color: var(--primary-color);
    }
    
    .testimonials-section {
        padding: 5rem 0;
        background-color: #f9fafb;
    }
    
    .testimonial-card {
        background: white;
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .testimonial-text {
        font-size: 1rem;
        color: #4B5563;
        margin-bottom: 1.5rem;
        position: relative;
        padding-left: 1.5rem;
    }
    
    .testimonial-text:before {
        content: '"';
        font-size: 3rem;
        color: var(--primary-color);
        opacity: 0.2;
        position: absolute;
        left: 0;
        top: -1rem;
    }
    
    .testimonial-author {
        display: flex;
        align-items: center;
    }
    
    .testimonial-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 1rem;
        object-fit: cover;
    }
    
    .testimonial-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .testimonial-position {
        font-size: 0.85rem;
        color: #6B7280;
    }
    
    @media (max-width: 992px) {
        .hero-title {
            font-size: 2.5rem;
        }
    }
    
    @media (max-width: 768px) {
        .hero-title {
            font-size: 2rem;
        }
        
        .section-title {
            font-size: 1.75rem;
        }
        
        .hero-section {
            padding: 3rem 0;
        }
        
        .features-section,
        .courses-section,
        .testimonials-section,
        .landing-section,
        .cta-section {
            padding: 3rem 0;
        }
        
        .feature-card,
        .course-card,
        .testimonial-card {
            margin-bottom: 1.5rem;
        }
    }
</style>

<?php
// Define variables personalizadas para el footer
$customScripts = ['/assets/js/home.js'];

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