{% extends 'base.html' %}
{% load static %}

{% block content %}
<section class="hero-bw text-center">
    <div class="container">
        <div class="hero-content">
            <h1 class="display-3 mb-0">PYTHON_MASTER</h1>
            <p class="lead font-mono mt-3">STRONGLY TYPED. MINIMALLY DESIGNED.</p>
            <div class="mt-4">
                <a href="#courses" class="btn btn-bw">EXPLORE PATHS</a>
            </div>
        </div>
    </div>
</section>

<section id="courses" class="py-5">
    <div class="container">
        <h2 class="mb-5 text-center">LEARNING_PATHS</h2>
        <div class="row g-4">
            {% for course in courses %}
            <div class="col-md-4">
                <div class="card card-bw h-100 p-4">
                    <h3 class="h4 mb-3">{{ course.title }}</h3>
                    <p class="text-muted small mb-4">{{ course.description|truncatewords:20 }}</p>
                    <div class="mt-auto">
                        <a href="{% url 'course_detail' course.pk %}" class="btn btn-bw-outline w-100">VIEW PATH</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <p class="font-mono">NO PATHS AVAILABLE YET. CHECK BACK SOON.</p>
                {% if user.is_staff %}
                    <a href="/admin/core/course/add/" class="btn btn-bw">ADD FIRST COURSE</a>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="py-5 section-inverted w-100 text-center">
    <div class="container">
        <h2 class="mb-4">WHY_B&W?</h2>
        <p class="lead font-mono mx-auto" style="max-width: 700px;">
            WE REMOVE ALL DISTRACTIONS. NO COLORS. NO FLUFF. JUST YOU AND THE CODE. 
            FOCUS ON LOGIC, SYNTAX, AND ARCHITECTURE.
        </p>
    </div>
</section>
{% endblock %}