{% extends "base.html" %}

{% block title %}Marimo Learn - Interactive Python Notebooks{% endblock %}

{% block content %}
    <header class="bg-white">
        <div class="container mx-auto px-4 py-12 max-w-6xl">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Interactive Python Learning with <span class="text-primary">marimo</span></h1>
                    <p class="text-lg text-gray-600 mb-6">Explore our collection of interactive notebooks for Python, data science, and machine learning.</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#courses" class="btn-primary py-2 px-6">Explore Courses</a>
                        <a href="https://github.com/marimo-team/learn" target="_blank" class="bg-white border border-gray-300 hover:border-primary text-gray-700 font-medium py-2 px-6 rounded-md transition duration-300">View on GitHub</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="logo-container">
                        <img src="https://github.com/marimo-team/learn/blob/main/assets/marimo-learn.png?raw=true" alt="Marimo Logo" class="w-64 h-64 mx-auto object-contain">
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 max-w-6xl">
            <h2 class="text-3xl font-bold text-center mb-12">Why Learn with <span class="text-primary">Marimo</span>?</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="feature-card">
                    <div class="icon-container">
                        {% include "icons/lightning.svg" %}
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Interactive Learning</h3>
                    <p class="text-gray-600">Learn by doing with interactive notebooks that run directly in your browser.</p>
                </div>
                <div class="feature-card">
                    <div class="icon-container">
                        {% include "icons/flask.svg" %}
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Practical Examples</h3>
                    <p class="text-gray-600">Real-world examples and applications to reinforce your understanding.</p>
                </div>
                <div class="feature-card">
                    <div class="icon-container">
                        {% include "icons/book.svg" %}
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Comprehensive Curriculum</h3>
                    <p class="text-gray-600">From Python basics to advanced machine learning concepts.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="courses" class="py-16 bg-white">
        <div class="container mx-auto px-4 max-w-6xl">
            <h2 class="text-3xl font-bold text-center mb-12">Explore Our <span class="text-primary">Courses</span></h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for course_id, course in courses.items() %}
                    {% set notebooks = course.get('notebooks', []) %}
                    {% if notebooks %}
                        <div class="content-card hover-grow">
                            <div class="card-accent"></div>
                            <div class="p-6">
                                <h3 class="text-xl font-semibold mb-2">
                                    <a href="{{ course_id }}/" class="hover:text-primary">
                                        {{ course.get('title', course_id) }}
                                    </a>
                                </h3>
                                <p class="text-gray-600 mb-4">
                                    {% if course.get('description_html') %}
                                        {{ course.get('description_html')|safe }}
                                    {% endif %}
                                </p>
                                <div class="mt-4">
                                    <ol class="space-y-1 list-decimal pl-5">
                                        {% for notebook in notebooks %}
                                            <li>
                                                <a href="{{ notebook.molab_url }}" class="link-primary">
                                                    {{ notebook.title }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ol>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </section>

{% endblock %}