<!doctype html>
{% set config = config() %} {% set current_theme = current_theme() %}
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>{{ config.titulo_html or "NOW - Learning Management System" }}</title>

        {{ current_theme.local_style() }}
    </head>

    <body class="excel-theme">
        {{ current_theme.navbar() }}

        <main>
            {{ current_theme.notify() }}

            <!-- Hero Section - Excel Style -->
            <section class="excel-hero">
                <div class="container">
                    <div class="row align-items-center min-vh-50">
                        <div class="col-12 col-lg-7">
                            <div class="excel-hero-content">
                                <h1 class="excel-hero-title">{{ _('Bienvenido a') }} {{ config.titulo }}</h1>
                                <p>
                                    <span class="excel-hero-subtitle">{{ _('CURSOS QUE TRANSFORMAN TUS FINANZAS') }}</span>
                                </p>
                                <p class="excel-hero-description">
                                    {% if config.hero and config.hero != "" %} {{ config.hero }} {% else %} {{ _('Aprende a
                                    dominar tus finanzas personales con nuestros cursos.') }} {% endif %}
                                </p>
                                <div class="excel-hero-actions">
                                    {% if not current_user.is_authenticated %}
                                    <a
                                        href="{{ url_for('course.lista_cursos', page=1) }}"
                                        class="btn excel-btn-primary excel-btn-lg"
                                    >
                                        {{ _('EXPLORAR CURSOS') }}
                                    </a>
                                    {% else %}
                                    <a href="{{ url_for('home.panel') }}" class="btn excel-btn-primary excel-btn-lg">
                                        {{ _('MI PANEL') }}
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-5">
                            <div class="excel-hero-visual">
                                <div class="excel-visual-container">
                                    <!-- Large Excel X logo -->
                                    <div class="excel-big-logo">
                                        <span class="excel-x-letter">X</span>
                                    </div>
                                    <!-- Floating Excel elements -->
                                    <div class="excel-floating-elements">
                                        <div class="excel-element excel-chart">📊</div>
                                        <div class="excel-element excel-table">📋</div>
                                        <div class="excel-element excel-formula">📈</div>
                                        <div class="excel-element excel-data">🔢</div>
                                        <div class="excel-element excel-pivot">⚡</div>
                                        <div class="excel-element excel-graph">📉</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Features Section -->
            {% if config.enable_feature_section %} {% if config.custom_feature_section and config.custom_feature_section != ""
            %} {{ config.custom_feature_section | safe }} {% endif %} {% endif %}

            <!-- Featured Courses Section - Excel Themed -->
            {% if cursos and cursos.total > 0 %}
            <section class="excel-courses-section">
                <div class="container">
                    <div class="excel-section-header">
                        <h2 class="excel-section-title">📊 {{ _('CURSOS DESTACADOS') }}</h2>
                        <p class="lead text-center mb-5">
                            {{ _('Domina las herramientas más poderosas con nuestros cursos especializados.') }}
                        </p>
                    </div>

                    <div class="row row-cols-1 row-cols-sm-2 g-4">
                        {% for curso in cursos.items[:4] %}
                        <div class="col-12 col-md-6 col-lg-6">
                            <div
                                class="card h-100"
                                style="
                                    border: 2px solid var(--excel-primary);
                                    border-radius: 12px;
                                    box-shadow: 0 8px 16px rgba(33, 115, 70, 0.1);
                                "
                            >
                                {% if curso.portada and course_logo(curso.codigo) %}
                                <img
                                    src="{{ url_for('static', filename='/files/public/images/' + curso.codigo + '/' + course_logo(curso.codigo)) }}"
                                    alt="{{ curso.nombre }}"
                                    class="card-img-top"
                                    style="height: 200px; object-fit: cover; border-radius: 10px 10px 0 0"
                                />
                                {% else %}
                                <div
                                    class="card-img-top d-flex align-items-center justify-content-center text-white"
                                    style="
                                        height: 200px;
                                        background: linear-gradient(
                                            135deg,
                                            var(--excel-primary) 0%,
                                            var(--excel-primary-light) 100%
                                        );
                                        border-radius: 10px 10px 0 0;
                                    "
                                >
                                    <div class="text-center">
                                        {% set course_name_lower = curso.nombre|lower %} {% if 'fundamentos' in
                                        course_name_lower or 'basico' in course_name_lower or 'inicio' in course_name_lower %}
                                        <div style="font-size: 3rem; margin-bottom: 0.5rem">📋</div>
                                        {% elif 'datos' in course_name_lower or 'analisis' in course_name_lower or 'power' in
                                        course_name_lower %}
                                        <div style="font-size: 3rem; margin-bottom: 0.5rem">📊</div>
                                        {% elif 'vba' in course_name_lower or 'macro' in course_name_lower or 'automatizacion'
                                        in course_name_lower %}
                                        <div style="font-size: 3rem; margin-bottom: 0.5rem">⚙️</div>
                                        {% elif 'avanzado' in course_name_lower or 'experto' in course_name_lower %}
                                        <div style="font-size: 3rem; margin-bottom: 0.5rem">🚀</div>
                                        {% else %}
                                        <div style="font-size: 3rem; margin-bottom: 0.5rem">📈</div>
                                        {% endif %}
                                        <div style="font-size: 1rem; font-weight: 600">{{ curso.nombre }}</div>
                                    </div>
                                </div>
                                {% endif %}

                                <div class="card-body d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="card-title mb-0" style="color: var(--excel-primary); font-weight: 600">
                                            {{ curso.nombre }}
                                        </h5>
                                        <div class="d-flex align-items-center gap-2">
                                            {% if not curso.precio %}
                                            <span class="badge" style="background: var(--excel-primary); color: white"
                                                >{{ _('Gratis') }}</span
                                            >
                                            {% endif %} {% if curso.nivel == 0 %}
                                            <span
                                                class="badge bg-light text-dark border"
                                                title="{{ _('Nivel Introductorio') }}"
                                                >{{ _('Introductorio') }}</span
                                            >
                                            {% elif curso.nivel == 1 %}
                                            <span
                                                class="badge"
                                                style="background: var(--excel-primary-light)"
                                                title="{{ _('Nivel Principiante') }}"
                                                >{{ _('Principiante') }}</span
                                            >
                                            {% elif curso.nivel == 2 %}
                                            <span
                                                class="badge"
                                                style="background: var(--excel-primary)"
                                                title="{{ _('Nivel Intermedio') }}"
                                                >{{ _('Intermedio') }}</span
                                            >
                                            {% elif curso.nivel == 3 %}
                                            <span
                                                class="badge"
                                                style="background: var(--excel-primary-dark)"
                                                title="{{ _('Nivel Avanzado') }}"
                                                >{{ _('Avanzado') }}</span
                                            >
                                            {% endif %}
                                        </div>
                                    </div>
                                    <p class="card-text flex-grow-1" style="color: #6c757d">
                                        {{ curso.descripcion_corta | truncate(100) }}
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <a
                                            href="{{ url_for('course.curso', course_code=curso.codigo) }}"
                                            class="btn btn-sm"
                                            style="background: var(--excel-primary); color: white; border: none"
                                        >
                                            📊 {{ _('Acceder al Curso') }}
                                        </a>
                                        <div class="text-end">
                                            {% if curso.duracion %}
                                            <small class="text-muted d-block"
                                                >⏱️ {{ curso.duracion }} {{ _('minutos') }}</small
                                            >
                                            {% endif %} {% if curso.precio %}
                                            <small class="fw-bold" style="color: var(--excel-primary)">
                                                {{ curso.precio | float }} {{ config.moneda }}
                                            </small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    <!-- Show more courses -->
                    <div class="text-center mt-5">
                        <a
                            href="{{ url_for('course.lista_cursos', page=1) }}"
                            class="btn btn-lg px-5 py-3"
                            style="background: var(--excel-primary); color: white; border: none; border-radius: 10px"
                        >
                            📚 {{ _('Catálogo Completo') }}
                        </a>
                    </div>
                </div>
            </section>
            {% else %}
            <!-- No courses available -->
            <section class="excel-no-courses">
                <div class="container">
                    <div class="text-center py-5">
                        <div class="excel-icon-bg excel-icon-empty mb-4">
                            <i class="bi bi-journal-x"></i>
                        </div>
                        <h3>{{ _('No hay cursos disponibles') }}</h3>
                        <p class="text-muted">{{ _('Los cursos estarán disponibles pronto.') }}</p>
                        {% if current_user.is_authenticated and current_user.roles %}
                        <a href="{{ url_for('nuevo_curso') }}" class="btn excel-btn-primary"> {{ _('Crear Curso') }} </a>
                        {% endif %}
                    </div>
                </div>
            </section>
            {% endif %}

            <!-- Call to Action Section -->
            <section class="excel-cta-section">
                <div class="container">
                    <div class="excel-cta-content">
                        <div class="row justify-content-center text-center">
                            <div class="col-lg-8">
                                {% if not current_user.is_authenticated %}
                                <h3 class="excel-cta-title">{{ _('¿Listo para Dominar tus Finanzas?') }}</h3>
                                <p class="excel-cta-description">
                                    {{ _('Únete a miles de estudiantes que ya han transformado su carrera con nuestros
                                    cursos.') }}
                                </p>
                                <div class="excel-cta-actions">
                                    <a
                                        href="{{ url_for('user.crear_cuenta') }}"
                                        class="btn excel-btn-primary excel-btn-lg me-3"
                                    >
                                        {{ _('Registrarse Gratis') }}
                                    </a>
                                    <a
                                        href="{{ url_for('course.lista_cursos', page=1) }}"
                                        class="btn excel-btn-outline excel-btn-lg"
                                    >
                                        {{ _('Explorar Cursos') }}
                                    </a>
                                </div>
                                {% else %}
                                <h3 class="excel-cta-title">{{ _('Bienvenido de vuelta') }}, {{ current_user.nombre }}</h3>
                                <p class="excel-cta-description">
                                    {{ _('Continúa tu aprendizaje y lleva tus habilidades al siguiente nivel.') }}
                                </p>
                                <div class="excel-cta-actions">
                                    <a href="{{ url_for('home.panel') }}" class="btn excel-btn-primary excel-btn-lg me-3">
                                        {{ _('Ir a Mi Panel') }}
                                    </a>
                                    <a
                                        href="{{ url_for('course.lista_cursos', page=1) }}"
                                        class="btn excel-btn-outline excel-btn-lg"
                                    >
                                        {{ _('Explorar Cursos') }}
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        {{ current_theme.jslibs() }}
    </body>
</html>
