<?php
// empezar.php
// Página de introducción para nuevos usuarios

// 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 = 'Empieza Ahora';
$metaDescription = 'Guía para principiantes sobre cómo encontrar y acceder a los mejores cursos gratuitos en nuestra plataforma.';
$metaKeywords = 'guía de inicio, primeros pasos, tutorial, cursos gratuitos, aprendizaje online';
$currentPage = 'start';
$showHeader = true;

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

// Busca categorías populares
try {
    $db->query("SELECT DISTINCT categoria, COUNT(*) as total FROM cursos WHERE status = 'ativo' GROUP BY categoria ORDER BY total DESC LIMIT 6");
    $categorias = $db->resultSet();
} catch (Exception $e) {
    logError("Error al cargar categorías: " . $e->getMessage());
    $categorias = [];
}
// Adicione após os includes básicos
require_once 'includes/unique-visits-tracker.php';

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

// Busca cursos destacados recientes
try {
    $db->query("SELECT * FROM cursos WHERE status = 'ativo' ORDER BY data_criacao DESC LIMIT 3");
    $cursos_recientes = $db->resultSet();
} catch (Exception $e) {
    logError("Error al cargar cursos recientes: " . $e->getMessage());
    $cursos_recientes = [];
}

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

<!-- Contenido Principal -->
<section class="start-hero py-5 bg-primary text-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <h1 class="display-4 fw-bold mb-4">Tu Camino Hacia el Aprendizaje Gratuito</h1>
                <p class="lead mb-4">Te damos la bienvenida a nuestra plataforma, donde conectamos a estudiantes como tú con los mejores cursos gratuitos disponibles en internet. Descubre cómo encontrar exactamente lo que buscas.</p>
                <a href="#guia" class="btn btn-light btn-lg">
                    <i class="fas fa-arrow-down me-2"></i>Comenzar
                </a>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <img src="/assets/img/start-illustration.svg" alt="Ilustración de aprendizaje online" class="img-fluid">
            </div>
        </div>
    </div>
</section>

<section id="guia" class="start-guide py-5">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="section-title">Cómo Usar Nuestra Plataforma</h2>
                <p class="lead">Sigue estos sencillos pasos para encontrar los cursos gratuitos perfectos para ti.</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="step-circle mb-3">1</div>
                        <h3 class="h4 mb-3">Explora por Categorías</h3>
                        <p>Navega por nuestras categorías para descubrir cursos gratuitos en temas que te interesen.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="step-circle mb-3">2</div>
                        <h3 class="h4 mb-3">Filtra los Resultados</h3>
                        <p>Utiliza los filtros para ajustar los resultados según nivel, duración o plataforma.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="step-circle mb-3">3</div>
                        <h3 class="h4 mb-3">Revisa los Detalles</h3>
                        <p>Examina la descripción, reseñas y valoraciones para elegir el curso adecuado.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="step-circle mb-3">4</div>
                        <h3 class="h4 mb-3">Accede al Curso</h3>
                        <p>Haz clic en "Acceder al Curso" para ser redirigido a la plataforma original.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="start-tips py-5">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="section-title">Consejos para Aprovechar al Máximo</h2>
                <p class="lead">Recomendaciones para sacar el mayor provecho de los cursos gratuitos</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="tip-card p-4 rounded bg-white shadow-sm h-100">
                    <h3 class="h5 d-flex align-items-center">
                        <i class="fas fa-calendar-check text-primary me-3"></i>
                        Establece un Horario Regular
                    </h3>
                    <p class="mb-0">Dedica tiempo específico cada día o semana para tus cursos. La consistencia es clave para completarlos con éxito.</p>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="tip-card p-4 rounded bg-white shadow-sm h-100">
                    <h3 class="h5 d-flex align-items-center">
                        <i class="fas fa-users text-primary me-3"></i>
                        Únete a Comunidades
                    </h3>
                    <p class="mb-0">Busca foros o grupos relacionados con el curso para compartir dudas, discutir temas y mantenerte motivado.</p>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="tip-card p-4 rounded bg-white shadow-sm h-100">
                    <h3 class="h5 d-flex align-items-center">
                        <i class="fas fa-clipboard-list text-primary me-3"></i>
                        Toma Notas Activamente
                    </h3>
                    <p class="mb-0">Escribir notas mientras sigues el curso te ayudará a retener información y tener material de referencia.</p>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="tip-card p-4 rounded bg-white shadow-sm h-100">
                    <h3 class="h5 d-flex align-items-center">
                        <i class="fas fa-project-diagram text-primary me-3"></i>
                        Crea Proyectos Prácticos
                    </h3>
                    <p class="mb-0">Aplica lo aprendido en proyectos reales para reforzar conceptos y construir un portafolio.</p>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="tip-card p-4 rounded bg-white shadow-sm h-100">
                    <h3 class="h5 d-flex align-items-center">
                        <i class="fas fa-certificate text-primary me-3"></i>
                        Completa los Exámenes
                    </h3>
                    <p class="mb-0">Realiza todas las evaluaciones disponibles para medir tu progreso y obtener certificados si están disponibles.</p>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="tip-card p-4 rounded bg-white shadow-sm h-100">
                    <h3 class="h5 d-flex align-items-center">
                        <i class="fas fa-search-plus text-primary me-3"></i>
                        Complementa los Cursos
                    </h3>
                    <p class="mb-0">Busca recursos adicionales como libros, artículos o tutoriales para profundizar en los temas que más te interesen.</p>
                </div>
            </div>
        </div>
    </div>
</section>



<section class="start-faq py-5">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="section-title">Preguntas Frecuentes Para Principiantes</h2>
                <p class="lead">Respuestas a las dudas más comunes de nuevos usuarios</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">
                                ¿Necesito crear una cuenta para acceder a los cursos?
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>No, no necesitas crear una cuenta en nuestra plataforma para buscar o acceder a los cursos. Nuestro directorio es de acceso libre. Sin embargo, al ser redirigido al sitio original del curso, es posible que necesites registrarte en esa plataforma específica para acceder al contenido completo.</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">
                                ¿Todos los cursos ofrecen certificados?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>No todos los cursos gratuitos ofrecen certificados. Algunos pueden ofrecer certificados gratuitos al completar todas las actividades, mientras que otros podrían ofrecer certificados de pago opcional. En la descripción de cada curso, indicamos si ofrece certificación y bajo qué condiciones.</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">
                                ¿Puedo descargar el contenido de los cursos?
                            </button>
                        </h2>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>La posibilidad de descargar el contenido depende de cada plataforma que ofrece el curso. Nosotros funcionamos como un directorio y no almacenamos ni distribuimos el contenido de los cursos. Te recomendamos verificar las opciones disponibles una vez que accedas al curso en su plataforma original.</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">
                                ¿Cómo sé si un curso sigue disponible gratuitamente?
                            </button>
                        </h2>
                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Nos esforzamos por mantener nuestro directorio actualizado, pero las políticas de las plataformas pueden cambiar. Si encuentras un curso que ya no es gratuito, por favor infórmanos a través de nuestro formulario de contacto para que podamos actualizarlo. También mostramos la fecha de última verificación en cada listado de curso.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 shadow-sm mb-3 rounded">
                        <h2 class="accordion-header" id="headingFive">
                            <button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                ¿Cómo puedo guardar cursos para ver más tarde?
                            </button>
                        </h2>
                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Actualmente, te recomendamos utilizar los marcadores o favoritos de tu navegador para guardar los cursos que te interesen. Estamos trabajando en implementar un sistema de "guardar para más tarde" que estará disponible próximamente.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="start-cta py-5 bg-primary text-white">
    <div class="container text-center">
        <h2 class="display-5 fw-bold mb-4">¿Listo para comenzar tu viaje de aprendizaje?</h2>
        <p class="lead mb-4">Miles de cursos gratuitos de calidad te están esperando.</p>
        <a href="/cursos.php" class="btn btn-light btn-lg">Explorar Cursos Ahora</a>
    </div>
</section>

<!-- Estilos específicos de la página de inicio -->
<style>
    .step-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--gradient);
        color: white;
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    
    .category-card {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
    }
    
    .category-card:hover {
        transform: translateY(-5px);
    }
    
    .category-card:hover .card {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    }
    
    .category-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(79, 70, 229, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--primary-color);
    }
    
    .tip-card {
        transition: all 0.3s ease;
    }
    
    .tip-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Estilos para los cursos (copiados de index.php) */
    .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;
    }
    
    /* Estilo para el acordeón (copiado de contacto.php) */
    .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>

<?php
// Define la función para obtener el icono de cada categoría
function getCategoryIcon($category) {
    $icons = [
        'Tecnología' => 'fas fa-laptop-code',
        'Negocios' => 'fas fa-briefcase',
        'Marketing' => 'fas fa-bullhorn',
        'Diseño' => 'fas fa-pencil-ruler',
        'Desarrollo' => 'fas fa-code',
        'Idiomas' => 'fas fa-language',
        'Salud' => 'fas fa-heartbeat',
        'Ciencia' => 'fas fa-flask',
        'Música' => 'fas fa-music',
        'Fotografía' => 'fas fa-camera',
        'Cocina' => 'fas fa-utensils',
        'Finanzas' => 'fas fa-chart-line',
        'Arte' => 'fas fa-palette',
        'Educación' => 'fas fa-graduation-cap',
        'Deporte' => 'fas fa-running',
        'Psicología' => 'fas fa-brain'
    ];
    
    // Convertir a minúscula para la comparación
    $normalizedCategory = mb_strtolower($category, 'UTF-8');
    
    foreach ($icons as $key => $icon) {
        if (mb_strtolower($key, 'UTF-8') === $normalizedCategory) {
            return $icon;
        }
    }
    
    // Icono por defecto si no se encuentra coincidencia
    return 'fas fa-book';
}

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