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

{% block content %}
<section class="hero-section py-5 mb-5" style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--slate-blue) 100%); color: white;">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-3 fw-bold mb-4">Elevate Your Future with Expert Guidance</h1>
                <p class="lead mb-5 opacity-75">Discover a curated catalog of world-class courses taught by leading academics and industry professionals.</p>
                <div class="d-flex gap-3">
                    <a href="#catalog" class="btn btn-gold px-4 py-3">Browse Catalog</a>
                    <a href="{% url 'signup' %}" class="btn btn-outline-light px-4 py-3">Join for Free</a>
                </div>
            </div>
            <div class="col-lg-5 offset-lg-1 d-none d-lg-block">
                <div class="p-4 bg-white bg-opacity-10 rounded-4 shadow-lg" style="backdrop-filter: blur(10px);">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-gold p-2 rounded-circle me-3" style="width: 40px; height: 40px; background-color: var(--academic-gold);"></div>
                        <div class="flex-grow-1 bg-white bg-opacity-20 rounded" style="height: 10px;"></div>
                    </div>
                    <div class="bg-white bg-opacity-20 rounded mb-2" style="height: 150px;"></div>
                    <div class="bg-white bg-opacity-20 rounded" style="height: 10px; width: 60%;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="catalog" class="container">
    <div class="row mb-5 align-items-end">
        <div class="col-md-6">
            <h2 class="display-5 mb-0">Our Courses</h2>
        </div>
        <div class="col-md-6">
            <form method="get" class="d-flex gap-2">
                <input type="text" name="q" class="form-control" placeholder="Search courses..." value="{{ query }}">
                <select name="level" class="form-select" style="width: 150px;">
                    <option value="">All Levels</option>
                    {% for l in levels %}
                        <option value="{{ l }}" {% if level == l %}selected{% endif %}>{{ l }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-primary">Filter</button>
            </form>
        </div>
    </div>

    <div class="row g-4">
        {% for course in courses %}
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                {% if course.image_url %}
                    <img src="{{ course.image_url }}" class="card-img-top" alt="{{ course.title }}" style="height: 200px; object-fit: cover;">
                {% else %}
                    <div class="bg-secondary bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
                        <span class="text-muted">No Image Available</span>
                    </div>
                {% endif %}
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <span class="badge bg-opacity-10 text-primary bg-primary px-3 py-2 rounded-pill">{{ course.level }}</span>
                        <span class="fw-bold text-navy">${{ course.price }}</span>
                    </div>
                    <h5 class="card-title fw-bold mb-3">{{ course.title }}</h5>
                    <p class="card-text text-muted small mb-4">{{ course.description|truncatewords:20 }}</p>
                    <div class="d-flex align-items-center">
                        {% if course.instructor.photo_url %}
                            <img src="{{ course.instructor.photo_url }}" class="rounded-circle me-2" width="30" height="30">
                        {% endif %}
                        <small class="text-muted">By {{ course.instructor.name }}</small>
                    </div>
                </div>
                <div class="card-footer bg-white border-0 p-4 pt-0">
                    <a href="{% url 'course_detail' course.slug %}" class="btn btn-outline-primary w-100 rounded-3">View Details</a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <p class="lead text-muted">No courses found matching your criteria.</p>
        </div>
        {% endfor %}
    </div>
</section>
{% endblock %}