<!doctype html>
<html lang="es">
    {% set current_theme = current_theme() %}{% set site_config = config() %}
    <head>
        {{ current_theme.headertags() }} {{ current_theme.local_style() }}
        <title>{{ site_config.titulo_html or "NOW - Learning Management System" }}</title>
    </head>
    <body>
        {{ current_theme.navbar() }}

        <!-- Hero Section -->
        <section
            class="hero-section py-5"
            style="
                background: linear-gradient(135deg, #d63384 0%, #e83e8c 100%);
                min-height: 60vh;
                display: flex;
                align-items: center;
            "
        >
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-md-8 col-lg-8 text-white order-2 order-md-1">
                        <div class="hero-content">
                            <h1 class="display-4 fw-bold mb-4">{{ _('Bienvenido a') }} {{ site_config.titulo }}</h1>
                            <p class="lead mb-4" style="font-size: 1.3rem; line-height: 1.6">
                                {% if site_config.hero and site_config.hero != "" %} {{ site_config.hero }} {% else %} {{
                                _('Aprendizaje elegante y moderno con un toque de sofisticación rosada. Nuestra plataforma está
                                diseñada para brindar una experiencia de aprendizaje excepcional.') }} {% endif %}
                            </p>
                            <div class="d-flex gap-3 flex-wrap justify-content-center justify-content-md-start">
                                {% if not current_user.is_authenticated %}
                                <a href="{{ url_for('user.crear_cuenta') }}" class="btn btn-light btn-lg px-4 py-2">
                                    <strong>{{ _('Comenzar Ahora') }}</strong>
                                </a>
                                <a
                                    href="{{ url_for('course.lista_cursos', page=1) }}"
                                    class="btn btn-outline-light btn-lg px-4 py-2"
                                >
                                    {{ _('Explorar Cursos') }}
                                </a>
                                {% else %}
                                <a href="{{ url_for('home.panel') }}" class="btn btn-light btn-lg px-4 py-2">
                                    <strong>{{ _('Mi Panel') }}</strong>
                                </a>
                                <a
                                    href="{{ url_for('course.lista_cursos', page=1) }}"
                                    class="btn btn-outline-light btn-lg px-4 py-2"
                                >
                                    {{ _('Ver Cursos') }}
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 col-lg-4 text-center order-1 order-md-2 mb-4 mb-md-0">
                        <div class="hero-visual">
                            <div
                                class="learning-icon"
                                style="
                                    background: rgba(255, 255, 255, 0.1);
                                    border-radius: 50%;
                                    width: 250px;
                                    height: 250px;
                                    margin: 0 auto;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border: 4px solid rgba(255, 255, 255, 0.3);
                                "
                            >
                                <div class="text-center text-white">
                                    <div style="font-size: 3rem; margin-bottom: 0.5rem">📚</div>
                                    <div style="font-size: 1.2rem; font-weight: 600">{{ _('Aprendizaje') }}</div>
                                    <div style="font-size: 0.9rem; opacity: 0.8">{{ _('Digital') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        {% if site_config.enable_feature_section %} {% if site_config.custom_feature_section and
        site_config.custom_feature_section != "" %} {{ site_config.custom_feature_section | safe }} {% else %}
        <section class="py-5" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center mb-5">
                        <h2 class="display-5 fw-bold mb-4">{{ _('Aprende con Nosotros') }}</h2>
                        <p class="lead">
                            {{ _('Descubre una nueva forma de aprender con nuestra plataforma educativa moderna y eficiente.')
                            }}
                        </p>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <div
                            class="feature-card h-100"
                            style="
                                background: white;
                                border-radius: 15px;
                                padding: 2rem;
                                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
                                border-top: 4px solid #d63384;
                            "
                        >
                            <div
                                class="feature-icon mb-3"
                                style="
                                    background: #d63384;
                                    width: 60px;
                                    height: 60px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                "
                            >
                                <span style="color: white; font-size: 1.5rem">🎯</span>
                            </div>
                            <h4 class="mb-3">{{ _('Cursos Especializados') }}</h4>
                            <p style="line-height: 1.6">
                                {{ _('Accede a una amplia variedad de cursos diseñados por expertos en cada área de
                                conocimiento.') }}
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div
                            class="feature-card h-100"
                            style="
                                background: white;
                                border-radius: 15px;
                                padding: 2rem;
                                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
                                border-top: 4px solid #e83e8c;
                            "
                        >
                            <div
                                class="feature-icon mb-3"
                                style="
                                    background: #e83e8c;
                                    width: 60px;
                                    height: 60px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                "
                            >
                                <span style="color: white; font-size: 1.5rem">👥</span>
                            </div>
                            <h4 class="mb-3">{{ _('Comunidad Activa') }}</h4>
                            <p style="line-height: 1.6">
                                {{ _('Únete a una comunidad de estudiantes y profesionales que comparten tus intereses y
                                objetivos.') }}
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div
                            class="feature-card h-100"
                            style="
                                background: white;
                                border-radius: 15px;
                                padding: 2rem;
                                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
                                border-top: 4px solid #28a745;
                            "
                        >
                            <div
                                class="feature-icon mb-3"
                                style="
                                    background: #28a745;
                                    width: 60px;
                                    height: 60px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                "
                            >
                                <span style="color: white; font-size: 1.5rem">🏆</span>
                            </div>
                            <h4 class="mb-3">{{ _('Certificaciones') }}</h4>
                            <p style="line-height: 1.6">
                                {{ _('Obtén certificaciones reconocidas que validen tu conocimiento y impulsen tu carrera
                                profesional.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {% endif %} {% endif %}

        <!-- Featured Courses Section - Rose Pink Themed -->
        {% if cursos and cursos.total > 0 %}
        <section class="py-5" style="background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%)">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center mb-5">
                        <h2 class="display-6 fw-bold mb-4" style="color: #d63384">
                            🌸 {{ _('Cursos que Florecen con Elegancia') }}
                        </h2>
                        <p class="lead">{{ _('Una selección cuidada de cursos diseñados con pasión y sofisticación.') }}</p>
                    </div>
                </div>
                <div class="row row-cols-1 row-cols-sm-2 g-4">
                    {% for curso in cursos.items[:4] %}
                    <div class="col">
                        <div
                            class="card h-100"
                            style="
                                border: none;
                                border-radius: 25px;
                                box-shadow: 0 10px 30px rgba(214, 51, 132, 0.1);
                                background: linear-gradient(135deg, #fff 0%, #fdf2f8 100%);
                            "
                        >
                            {% 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: 25px 25px 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, #d63384 0%, #e83e8c 100%);
                                    border-radius: 25px 25px 0 0;
                                    position: relative;
                                "
                            >
                                <!-- Floral pattern -->
                                <div
                                    style="
                                        position: absolute;
                                        top: 15px;
                                        right: 15px;
                                        opacity: 0.3;
                                        font-size: 1.2rem;
                                        color: white;
                                    "
                                >
                                    🌸
                                </div>
                                <div
                                    style="
                                        position: absolute;
                                        bottom: 15px;
                                        left: 15px;
                                        opacity: 0.3;
                                        font-size: 1rem;
                                        color: white;
                                    "
                                >
                                    🌺
                                </div>
                                <div class="text-center">
                                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem">💖</div>
                                    <div
                                        style="font-size: 1rem; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)"
                                    >
                                        {{ curso.nombre }}
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                            <div class="card-body d-flex flex-column" style="position: relative">
                                <!-- Subtle floral decoration -->
                                <div
                                    style="
                                        position: absolute;
                                        top: 10px;
                                        right: 15px;
                                        opacity: 0.1;
                                        font-size: 0.8rem;
                                        color: #d63384;
                                    "
                                >
                                    🌸🌺🌸
                                </div>
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title mb-0" style="color: #d63384; font-weight: 600">
                                        {{ curso.nombre }}
                                    </h5>
                                    <div class="d-flex align-items-center gap-2">
                                        {% if not curso.precio %}
                                        <span class="badge" style="background: #e83e8c; color: white"
                                            >🌸 {{ _('Gratis') }}</span
                                        >
                                        {% endif %} {% if curso.nivel == 0 %}
                                        <span class="badge" style="background: #f8bbd9" title="Nivel Introductorio"
                                            >🌱 {{ _('Intro') }}</span
                                        >
                                        {% elif curso.nivel == 1 %}
                                        <span class="badge" style="background: #d63384" title="Nivel Principiante"
                                            >🌸 {{ _('Principiante') }}</span
                                        >
                                        {% elif curso.nivel == 2 %}
                                        <span class="badge" style="background: #e83e8c" title="Nivel Intermedio"
                                            >🌺 {{ _('Intermedio') }}</span
                                        >
                                        {% elif curso.nivel == 3 %}
                                        <span class="badge" style="background: #ad1f5b" 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: linear-gradient(135deg, #d63384 0%, #e83e8c 100%);
                                            color: white;
                                            border: none;
                                            border-radius: 20px;
                                        "
                                        >💖 {{ _('Explorar Curso') }}</a
                                    >
                                    <div class="text-end">
                                        {% if curso.duracion %}
                                        <small class="text-muted d-block">⏰ {{ curso.duracion }} {{ _('mins') }}</small>
                                        {% endif %} {% if curso.precio %}
                                        <small class="fw-bold" style="color: #e83e8c"
                                            >💎 {{ curso.precio | float }} {{ site_config.moneda }}</small
                                        >
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="text-center mt-4">
                    <a
                        href="{{ url_for('course.lista_cursos', page=1) }}"
                        class="btn btn-lg px-4 py-2"
                        style="
                            background: linear-gradient(135deg, #d63384 0%, #e83e8c 100%);
                            color: white;
                            border: none;
                            border-radius: 25px;
                        "
                    >
                        🌸 {{ _('Descubrir Más Cursos Elegantes') }}
                    </a>
                </div>
            </div>
        </section>
        {% endif %}

        <!-- Call to Action Section -->
        <section class="py-5" style="background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%)">
            <div class="container">
                <div class="row justify-content-center text-center">
                    <div class="col-12 col-md-8 col-lg-8">
                        {% if not current_user.is_authenticated %}
                        <h3 class="mb-4">{{ _('¿Listo para Comenzar?') }}</h3>
                        <p class="lead mb-4">
                            {{ _('Únete a nuestra plataforma educativa y comienza tu viaje de aprendizaje hoy mismo.') }}
                        </p>
                        <a
                            href="{{ url_for('user.crear_cuenta') }}"
                            class="btn btn-lg px-5 py-3"
                            style="
                                background: #d63384;
                                color: white;
                                border: none;
                                border-radius: 10px;
                                font-weight: 600;
                                text-decoration: none;
                            "
                        >
                            {{ _('Registrarse Gratis') }}
                        </a>
                        {% else %}
                        <h3 class="mb-4">{{ _('Bienvenido de vuelta') }}, {{ current_user.nombre }}</h3>
                        <p class="lead mb-4">
                            {{ _('Continúa tu viaje de aprendizaje y explora nuevas oportunidades educativas.') }}
                        </p>
                        <a
                            href="{{ url_for('home.panel') }}"
                            class="btn btn-lg px-5 py-3 me-3"
                            style="
                                background: #d63384;
                                color: white;
                                border: none;
                                border-radius: 10px;
                                font-weight: 600;
                                text-decoration: none;
                            "
                        >
                            {{ _('Ir a Mi Panel') }}
                        </a>
                        <a
                            href="{{ url_for('course.lista_cursos', page=1) }}"
                            class="btn btn-lg btn-outline-dark px-5 py-3"
                            style="border-radius: 10px; font-weight: 600"
                        >
                            {{ _('Explorar Cursos') }}
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>

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