<?php
// sobre.php
// Página sobre nosotros - directorio 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';

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

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

// Define variables para el header
$pageTitle = 'Sobre Nosotros';
$metaDescription = 'Descubre cómo ayudamos a nuestros usuarios a encontrar los mejores cursos gratuitos disponibles en línea.';
$metaKeywords = 'directorio cursos gratuitos, encontrar cursos online, agregador cursos';
$currentPage = 'about';
$showHeader = true;

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

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

<!-- Contenido Principal -->
<section class="about-intro py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <img src="/assets/img/about-illustration.svg" alt="Ilustración de búsqueda de cursos" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h2 class="section-title text-start mb-4">Tu Guía en el Mundo del Aprendizaje Gratuito</h2>
                <p class="lead">No creamos cursos. Somos un directorio dedicado a ayudarte a encontrar las mejores oportunidades de aprendizaje gratuito disponibles en internet.</p>
                <p>Nuestra misión es simple: conectar a personas con los mejores recursos educativos gratuitos disponibles online, eliminando barreras y haciendo la educación accesible para todos.</p>
                <div class="mt-4">
                    <a href="#how-it-works" class="btn btn-primary me-2">Cómo Funciona</a>
                    <a href="#faq" class="btn btn-outline-primary">Preguntas Frecuentes</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-mission py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="section-title">Nuestra Misión</h2>
                <p class="lead mb-5">Democratizar el acceso a la educación conectando personas con recursos de aprendizaje gratuitos y de calidad.</p>
            </div>
        </div>
        
        <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-search fa-3x text-primary"></i>
                        </div>
                        <h3 class="h4 mb-3">Encontrar</h3>
                        <p>Exploramos la web para descubrir los mejores cursos gratuitos disponibles, evaluando cuidadosamente cada recurso.</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-filter fa-3x text-primary"></i>
                        </div>
                        <h3 class="h4 mb-3">Filtrar</h3>
                        <p>Seleccionamos solo los recursos educativos de mayor calidad, asegurándonos de que sean realmente gratuitos y valiosos.</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-share-alt fa-3x text-primary"></i>
                        </div>
                        <h3 class="h4 mb-3">Compartir</h3>
                        <p>Conectamos a nuestros usuarios con estos recursos, facilitando el acceso a oportunidades educativas sin costo.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="how-it-works" class="about-process 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 Funciona</h2>
                <p class="lead">Descubre cómo te ayudamos a encontrar los mejores cursos gratuitos disponibles en la web.</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-item-content">
                            <span class="timeline-number">1</span>
                            <h3 class="h4 mb-3">Investigación Exhaustiva</h3>
                            <p>Nuestro equipo investiga constantemente la web para encontrar cursos gratuitos de alta calidad ofrecidos por universidades, plataformas educativas y expertos en diversas áreas.</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-item-content">
                            <span class="timeline-number">2</span>
                            <h3 class="h4 mb-3">Verificación de Calidad</h3>
                            <p>Evaluamos cuidadosamente cada curso para asegurarnos de que sea realmente gratuito y ofrezca contenido valioso. No todos los cursos pasan nuestros estándares de calidad.</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-item-content">
                            <span class="timeline-number">3</span>
                            <h3 class="h4 mb-3">Organización por Categorías</h3>
                            <p>Clasificamos los cursos por categorías, niveles de dificultad y habilidades a desarrollar, para que puedas encontrar exactamente lo que necesitas.</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-item-content">
                            <span class="timeline-number">4</span>
                            <h3 class="h4 mb-3">Redirección a la Fuente</h3>
                            <p>Te redireccionamos directamente a la fuente original del curso, para que puedas acceder al contenido completo sin intermediarios.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<section id="faq" class="about-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</h2>
                <p class="lead">Respuestas a las preguntas más comunes sobre nuestro servicio.</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">
                                ¿Ustedes crean o imparten 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, nosotros no creamos ni impartimos los cursos. Funcionamos como un directorio que conecta a nuestros usuarios con cursos gratuitos disponibles en diferentes plataformas educativas, universidades y otros proveedores. Nuestra labor es identificar, verificar y organizar estos recursos para facilitar su acceso.</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">
                                ¿Los cursos son realmente gratuitos?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Sí, todos los cursos listados en nuestra plataforma son completamente gratuitos en el momento de ser agregados. Sin embargo, algunas plataformas pueden cambiar sus políticas con el tiempo. Si encuentras un curso que ya no es gratuito, por favor infórmanos para actualizarlo.</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">
                                ¿Cómo seleccionan los cursos que muestran?
                            </button>
                        </h2>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Evaluamos cada curso según criterios específicos: que sea realmente gratuito, ofrezca contenido de calidad, tenga una estructura clara y sea creado por instructores cualificados. También consideramos las valoraciones de los usuarios y la relevancia del tema.</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">
                                ¿Puedo sugerir un curso para que lo incluyan?
                            </button>
                        </h2>
                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>¡Absolutamente! Valoramos mucho las sugerencias de nuestra comunidad. Si conoces un curso gratuito de calidad que no está listado en nuestra plataforma, puedes enviarnos los detalles a través de nuestro formulario de contacto. Nuestro equipo lo evaluará y, si cumple con nuestros estándares, lo agregaremos a nuestra base de datos.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-cta py-5 bg-primary text-white">
    <div class="container text-center">
        <h2 class="mb-4">¿Listo para empezar a aprender?</h2>
        <p class="lead mb-4">Explora nuestro catálogo de cursos gratuitos y comienza tu viaje educativo hoy mismo.</p>
        <a href="/cursos" class="btn btn-light btn-lg">Ver Todos los Cursos</a>
    </div>
</section>

<!-- Estilos específicos de la página Sobre Nosotros -->
<style>
    /* Timeline Style */
    .timeline {
        position: relative;
        padding: 30px 0;
    }
    
    .timeline:before {
        content: '';
        position: absolute;
        width: 4px;
        background: var(--primary-color);
        top: 0;
        bottom: 0;
        left: 20px;
        margin-left: -2px;
        border-radius: 4px;
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 50px;
        padding-left: 60px;
    }
    
    .timeline-item:last-child {
        margin-bottom: 0;
    }
    
    .timeline-number {
        position: absolute;
        left: -20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: var(--gradient);
        border-radius: 50%;
        text-align: center;
        color: white;
        font-weight: 700;
        font-size: 1.2rem;
        z-index: 1;
    }
    
    .timeline-item-content {
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    /* Stats Style */
    .stat-card {
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    /* FAQ Style */
    .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");
    }
    
    /* Mission Cards */
    .icon-box {
        width: 80px;
        height: 80px;
        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);
    }
    
    @media (min-width: 768px) {
        .timeline:before {
            left: 50%;
        }
        
        .timeline-item {
            padding-left: 0;
            margin-bottom: 80px;
        }
        
        .timeline-item:nth-child(odd) {
            padding-right: 50%;
            padding-left: 30px;
        }
        
        .timeline-item:nth-child(even) {
            padding-left: 50%;
            padding-right: 30px;
        }
        
        .timeline-number {
            left: 50%;
            margin-left: -20px;
        }
    }
</style>

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