<!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 with Ocean Wave Design -->
        <section
            class="hero-section py-5"
            style="
                background: linear-gradient(135deg, #005f73 0%, #219ebc 50%, #94d2bd 100%);
                min-height: 70vh;
                display: flex;
                align-items: center;
                position: relative;
                overflow: hidden;
            "
        >
            <!-- Animated Ocean Waves Background -->
            <div class="ocean-waves" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1">
                <svg
                    class="wave-animation"
                    style="position: absolute; bottom: 0; left: 0; width: 100%; height: 200px"
                    viewBox="0 0 1200 200"
                    preserveAspectRatio="none"
                >
                    <path
                        d="M0,100 Q300,20 600,100 T1200,100 L1200,200 L0,200 Z"
                        fill="rgba(148, 210, 189, 0.3)"
                        opacity="0.8"
                    >
                        <animate
                            attributeName="d"
                            dur="8s"
                            repeatCount="indefinite"
                            values="M0,100 Q300,20 600,100 T1200,100 L1200,200 L0,200 Z;M0,100 Q300,180 600,100 T1200,100 L1200,200 L0,200 Z;M0,100 Q300,20 600,100 T1200,100 L1200,200 L0,200 Z"
                        />
                    </path>
                    <path d="M0,120 Q400,40 800,120 T1600,120 L1600,200 L0,200 Z" fill="rgba(33, 158, 188, 0.2)" opacity="0.6">
                        <animate
                            attributeName="d"
                            dur="10s"
                            repeatCount="indefinite"
                            values="M0,120 Q400,40 800,120 T1600,120 L1600,200 L0,200 Z;M0,120 Q400,160 800,120 T1600,120 L1600,200 L0,200 Z;M0,120 Q400,40 800,120 T1600,120 L1600,200 L0,200 Z"
                        />
                    </path>
                </svg>

                <!-- Floating particles -->
                <div class="floating-particles" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
                    <div
                        class="particle"
                        style="
                            position: absolute;
                            top: 20%;
                            left: 10%;
                            width: 4px;
                            height: 4px;
                            background: rgba(255, 255, 255, 0.6);
                            border-radius: 50%;
                            animation: float 6s ease-in-out infinite;
                        "
                    ></div>
                    <div
                        class="particle"
                        style="
                            position: absolute;
                            top: 40%;
                            left: 80%;
                            width: 3px;
                            height: 3px;
                            background: rgba(255, 255, 255, 0.5);
                            border-radius: 50%;
                            animation: float 8s ease-in-out infinite;
                        "
                    ></div>
                    <div
                        class="particle"
                        style="
                            position: absolute;
                            top: 60%;
                            left: 30%;
                            width: 5px;
                            height: 5px;
                            background: rgba(255, 255, 255, 0.4);
                            border-radius: 50%;
                            animation: float 7s ease-in-out infinite;
                        "
                    ></div>
                    <div
                        class="particle"
                        style="
                            position: absolute;
                            top: 80%;
                            left: 70%;
                            width: 3px;
                            height: 3px;
                            background: rgba(255, 255, 255, 0.6);
                            border-radius: 50%;
                            animation: float 9s ease-in-out infinite;
                        "
                    ></div>
                </div>
            </div>

            <div class="container" style="position: relative; z-index: 2">
                <div class="row align-items-center">
                    <div class="col-12 col-md-8 text-white">
                        <div class="hero-content">
                            <h1 class="display-3 fw-bold mb-4" style="text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)">
                                {{ _('Bienvenido a') }} {{ site_config.titulo }}
                            </h1>
                            <p
                                class="lead mb-4"
                                style="font-size: 1.4rem; line-height: 1.6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)"
                            >
                                {% if site_config.hero and site_config.hero != "" %} {{ site_config.hero }} {% else %} {{
                                _('Explore a Vast Ocean of Courses &') }}<br />
                                {{ _('Unlock Your Potential') }} {% endif %}
                            </p>
                            <div class="d-flex gap-3 flex-wrap">
                                <a
                                    href="{{ url_for('course.lista_cursos', page=1) }}"
                                    class="btn btn-lg px-4 py-3"
                                    style="
                                        background: #219ebc;
                                        color: white;
                                        border: none;
                                        border-radius: 25px;
                                        font-weight: 600;
                                        text-decoration: none;
                                        box-shadow: 0 4px 15px rgba(33, 158, 188, 0.4);
                                        transition: all 0.3s ease;
                                    "
                                    onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(33, 158, 188, 0.6)';"
                                    onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(33, 158, 188, 0.4)';"
                                >
                                    {{ _('Browse Courses') }}
                                </a>
                                <a
                                    href="#features"
                                    class="btn btn-outline-light btn-lg px-4 py-3"
                                    style="
                                        border-width: 2px;
                                        border-radius: 25px;
                                        font-weight: 600;
                                        text-decoration: none;
                                        transition: all 0.3s ease;
                                    "
                                    onmouseover="this.style.background='rgba(255,255,255,0.1)';"
                                    onmouseout="this.style.background='transparent';"
                                >
                                    {{ _('Learn More') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 text-center mt-4 mt-md-0">
                        <!-- Ocean Wave Graphic -->
                        <div class="wave-graphic" style="position: relative">
                            <svg width="280" height="280" viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
                                <!-- Animated waves -->
                                <circle
                                    cx="140"
                                    cy="140"
                                    r="120"
                                    fill="none"
                                    stroke="rgba(255,255,255,0.3)"
                                    stroke-width="2"
                                    opacity="0.6"
                                >
                                    <animate attributeName="r" dur="4s" repeatCount="indefinite" values="120;130;120" />
                                </circle>
                                <circle
                                    cx="140"
                                    cy="140"
                                    r="90"
                                    fill="none"
                                    stroke="rgba(255,255,255,0.4)"
                                    stroke-width="3"
                                    opacity="0.8"
                                >
                                    <animate attributeName="r" dur="3s" repeatCount="indefinite" values="90;100;90" />
                                </circle>

                                <!-- Central wave pattern -->
                                <path
                                    d="M70,140 Q105,100 140,140 T210,140"
                                    stroke="rgba(255,255,255,0.9)"
                                    stroke-width="4"
                                    fill="none"
                                    opacity="0.9"
                                >
                                    <animate
                                        attributeName="d"
                                        dur="6s"
                                        repeatCount="indefinite"
                                        values="M70,140 Q105,100 140,140 T210,140;M70,140 Q105,180 140,140 T210,140;M70,140 Q105,100 140,140 T210,140"
                                    />
                                </path>
                                <path
                                    d="M60,160 Q95,120 130,160 T200,160"
                                    stroke="rgba(255,255,255,0.7)"
                                    stroke-width="3"
                                    fill="none"
                                    opacity="0.7"
                                >
                                    <animate
                                        attributeName="d"
                                        dur="8s"
                                        repeatCount="indefinite"
                                        values="M60,160 Q95,120 130,160 T200,160;M60,160 Q95,200 130,160 T200,160;M60,160 Q95,120 130,160 T200,160"
                                    />
                                </path>

                                <!-- Flowing particles -->
                                <circle cx="140" cy="140" r="3" fill="rgba(255,255,255,0.8)">
                                    <animateTransform
                                        attributeName="transform"
                                        type="rotate"
                                        dur="12s"
                                        repeatCount="indefinite"
                                        values="0 140 140;360 140 140"
                                    />
                                </circle>
                                <circle cx="180" cy="120" r="2" fill="rgba(255,255,255,0.6)">
                                    <animateTransform
                                        attributeName="transform"
                                        type="rotate"
                                        dur="8s"
                                        repeatCount="indefinite"
                                        values="0 140 140;360 140 140"
                                    />
                                </circle>
                                <circle cx="100" cy="160" r="2.5" fill="rgba(255,255,255,0.7)">
                                    <animateTransform
                                        attributeName="transform"
                                        type="rotate"
                                        dur="10s"
                                        repeatCount="indefinite"
                                        values="0 140 140;360 140 140"
                                    />
                                </circle>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section - Why Choose Ocean? -->
        {% 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 id="features" 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" style="color: var(--ocean-primary)">
                            {{ _('Why Choose Ocean?') }}
                        </h2>
                    </div>
                </div>
                <div class="row g-4">
                    <!-- Diverse Courses -->
                    <div class="col-md-4">
                        <div
                            class="feature-card text-center h-100 p-4"
                            style="
                                background: white;
                                border-radius: 20px;
                                box-shadow: 0 10px 30px rgba(0, 95, 115, 0.1);
                                border: 2px solid #e9ecef;
                                transition: all 0.3s ease;
                            "
                            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0, 95, 115, 0.15)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0, 95, 115, 0.1)';"
                        >
                            <!-- Ocean-themed icon -->
                            <div
                                class="feature-icon mb-4"
                                style="
                                    width: 80px;
                                    height: 80px;
                                    margin: 0 auto;
                                    background: linear-gradient(135deg, #005f73, #219ebc);
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    box-shadow: 0 8px 20px rgba(0, 95, 115, 0.3);
                                "
                            >
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 20 Q12 12, 16 20 T24 20 T32 20" stroke="white" stroke-width="3" fill="none" />
                                    <path
                                        d="M6 25 Q10 17, 14 25 T22 25 T30 25"
                                        stroke="white"
                                        stroke-width="2"
                                        fill="none"
                                        opacity="0.7"
                                    />
                                    <circle cx="12" cy="12" r="2" fill="white" opacity="0.8" />
                                    <circle cx="20" cy="10" r="1.5" fill="white" opacity="0.7" />
                                    <circle cx="28" cy="14" r="1" fill="white" opacity="0.6" />
                                </svg>
                            </div>
                            <h4 class="mb-3" style="color: var(--ocean-primary); font-weight: 700">
                                {{ _('Diverse Courses') }}
                            </h4>
                            <p class="text-muted" style="line-height: 1.6">
                                {{ _('Discover new skills from countless in-depth topics taught by passionate experts in their
                                fields.') }}
                            </p>
                        </div>
                    </div>

                    <!-- Thriving Community -->
                    <div class="col-md-4">
                        <div
                            class="feature-card text-center h-100 p-4"
                            style="
                                background: white;
                                border-radius: 20px;
                                box-shadow: 0 10px 30px rgba(0, 95, 115, 0.1);
                                border: 2px solid #e9ecef;
                                transition: all 0.3s ease;
                            "
                            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0, 95, 115, 0.15)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0, 95, 115, 0.1)';"
                        >
                            <div
                                class="feature-icon mb-4"
                                style="
                                    width: 80px;
                                    height: 80px;
                                    margin: 0 auto;
                                    background: linear-gradient(135deg, #219ebc, #94d2bd);
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    box-shadow: 0 8px 20px rgba(33, 158, 188, 0.3);
                                "
                            >
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="5" stroke="white" stroke-width="2" fill="none" />
                                    <circle cx="25" cy="15" r="5" stroke="white" stroke-width="2" fill="none" />
                                    <path d="M10 30 Q15 25 20 30 Q25 25 30 30" stroke="white" stroke-width="2" fill="none" />
                                    <circle cx="20" cy="25" r="4" stroke="white" stroke-width="2" fill="none" />
                                </svg>
                            </div>
                            <h4 class="mb-3" style="color: var(--ocean-primary); font-weight: 700">
                                {{ _('Thriving Community') }}
                            </h4>
                            <p class="text-muted" style="line-height: 1.6">
                                {{ _('Connect with learners and experts worldwide to share knowledge and grow together.') }}
                            </p>
                        </div>
                    </div>

                    <!-- Certifications -->
                    <div class="col-md-4">
                        <div
                            class="feature-card text-center h-100 p-4"
                            style="
                                background: white;
                                border-radius: 20px;
                                box-shadow: 0 10px 30px rgba(0, 95, 115, 0.1);
                                border: 2px solid #e9ecef;
                                transition: all 0.3s ease;
                            "
                            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0, 95, 115, 0.15)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0, 95, 115, 0.1)';"
                        >
                            <div
                                class="feature-icon mb-4"
                                style="
                                    width: 80px;
                                    height: 80px;
                                    margin: 0 auto;
                                    background: linear-gradient(135deg, #94d2bd, #0a3d4d);
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    box-shadow: 0 8px 20px rgba(148, 210, 189, 0.3);
                                "
                            >
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect
                                        x="8"
                                        y="12"
                                        width="24"
                                        height="16"
                                        rx="2"
                                        stroke="white"
                                        stroke-width="2"
                                        fill="none"
                                    />
                                    <circle cx="20" cy="20" r="4" stroke="white" stroke-width="2" fill="none" />
                                    <path d="M16 8 L20 4 L24 8" stroke="white" stroke-width="2" fill="none" />
                                    <path d="M12 32 Q16 28 20 32 Q24 28 28 32" stroke="white" stroke-width="2" fill="none" />
                                </svg>
                            </div>
                            <h4 class="mb-3" style="color: var(--ocean-primary); font-weight: 700">
                                {{ _('Certifications') }}
                            </h4>
                            <p class="text-muted" style="line-height: 1.6">
                                {{ _('Earn recognized certificates to showcase your achievements and advance your career.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {% endif %} {% endif %}

        <!-- Popular Courses Section -->
        {% if cursos and cursos.total > 0 %}
        <section class="py-5" style="background: #ffffff">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center mb-5">
                        <h2 class="display-6 fw-bold mb-4" style="color: var(--ocean-primary)">{{ _('Popular Courses') }}</h2>
                    </div>
                </div>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
                    {% for curso in cursos.items[:6] %}
                    <div class="col">
                        <div
                            class="course-card h-100"
                            style="
                                background: white;
                                border-radius: 15px;
                                box-shadow: 0 8px 25px rgba(0, 95, 115, 0.1);
                                border: 1px solid #e9ecef;
                                transition: all 0.3s ease;
                                overflow: hidden;
                            "
                            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 35px rgba(0, 95, 115, 0.15)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 25px rgba(0, 95, 115, 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: 180px; object-fit: cover"
                            />
                            {% else %}
                            <div
                                class="card-img-top d-flex align-items-center justify-content-center text-white"
                                style="height: 180px; background: linear-gradient(135deg, #005f73 0%, #219ebc 100%)"
                            >
                                <div class="text-center">
                                    <!-- Course type icon based on level -->
                                    {% if curso.nivel == 0 %}
                                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem">💡</div>
                                    {% elif curso.nivel == 1 %}
                                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem">📚</div>
                                    {% elif curso.nivel == 2 %}
                                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem">🎯</div>
                                    {% elif curso.nivel == 3 %}
                                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem">🎓</div>
                                    {% else %}
                                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem">📖</div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}

                            <div class="card-body d-flex flex-column p-4">
                                <h5
                                    class="card-title mb-2"
                                    style="color: var(--ocean-primary); font-weight: 700; font-size: 1.1rem"
                                >
                                    {{ curso.nombre }}
                                </h5>

                                <!-- Instructor info -->
                                <p class="text-muted small mb-2">{{ _('Instructor Name: Department') }}</p>

                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <a
                                        href="{{ url_for('course.curso', course_code=curso.codigo) }}"
                                        class="btn btn-sm"
                                        style="
                                            background: var(--ocean-info);
                                            color: white;
                                            border: none;
                                            border-radius: 20px;
                                            padding: 0.5rem 1.2rem;
                                            font-weight: 600;
                                            text-decoration: none;
                                        "
                                        >{{ _('View Course') }}</a
                                    >
                                    <div class="text-end">
                                        {% if curso.precio %}
                                        <div class="fw-bold" style="color: var(--ocean-primary); font-size: 1.1rem">
                                            ${{ curso.precio | float }}0
                                        </div>
                                        {% else %}
                                        <div class="fw-bold" style="color: var(--ocean-success); font-size: 1.1rem">
                                            {{ _('Free') }}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        {% endif %}

        <style>
            @keyframes float {
                0%,
                100% {
                    transform: translateY(0px) translateX(0px);
                    opacity: 0.6;
                }
                25% {
                    transform: translateY(-10px) translateX(5px);
                    opacity: 1;
                }
                50% {
                    transform: translateY(-20px) translateX(-5px);
                    opacity: 0.8;
                }
                75% {
                    transform: translateY(-10px) translateX(5px);
                    opacity: 1;
                }
            }

            .floating-particles .particle {
                animation-delay: calc(var(--delay, 0) * 1s);
            }
        </style>

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