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

{% block content %}

<!-- Уменьшенный слайдер с рамкой -->
<div class="mb-5">
    <div id="heroCarousel" class="carousel slide rounded-4 overflow-hidden border border-3 border-primary shadow-lg" 
         data-bs-ride="carousel" data-bs-interval="5000" style="max-height: 350px;">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{% static 'images/slider/online-learning.jpg' %}" 
                     class="d-block w-100" alt="Онлайн-обучение" style="object-fit: cover; height: 350px;">
                <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded">
                    <h5 class="fw-bold">Получи профессию онлайн</h5>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{% static 'images/slider/certificate.jpg' %}" 
                     class="d-block w-100" alt="Сертификат" style="object-fit: cover; height: 350px;">
                <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded">
                    <h5 class="fw-bold">Официальный сертификат</h5>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{% static 'images/slider/programming.jpg' %}" 
                     class="d-block w-100" alt="Программирование" style="object-fit: cover; height: 350px;">
                <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded">
                    <h5 class="fw-bold">От основ до профи</h5>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</div>

<div class="text-center mb-5">
    <h1 class="display-5 fw-bold">Добро пожаловать в «Корочки.есть»</h1>
    <p class="lead text-muted">Современные курсы дополнительного профессионального образования</p>
    <a href="{% url 'register' %}" class="btn btn-primary btn-lg rounded-pill px-5 py-3 shadow">Начать</a>
</div>

<!-- Ровные карточки курсов (одинаковая высота) -->
<h3 class="text-center mb-4 fw-bold">Наши программы</h3>
<div class="row g-4">
    <div class="col-md-4">
        <div class="card h-100 border border-2 border-primary rounded-4 shadow overflow-hidden">
            <img src="{% static 'images/courses/algorithms.jpg' %}" 
                 class="card-img-top" alt="Алгоритмы" style="height: 180px; object-fit: cover;">
            <div class="card-body d-flex flex-column text-center">
                <h5 class="card-title">Основы алгоритмизации и программирования</h5>
                <p class="card-text text-muted flex-grow-1">От нуля до первых проектов</p>
                <a href="{% url 'create_application' %}" class="btn btn-outline-primary rounded-pill mt-auto">Записаться</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 border border-2 border-primary rounded-4 shadow overflow-hidden">
            <img src="{% static 'images/courses/web-design.jpg' %}" 
                 class="card-img-top" alt="Веб-дизайн" style="height: 180px; object-fit: cover;">
            <div class="card-body d-flex flex-column text-center">
                <h5 class="card-title">Основы веб-дизайна</h5>
                <p class="card-text text-muted flex-grow-1">Figma, UI/UX, адаптивность</p>
                <a href="{% url 'create_application' %}" class="btn btn-outline-primary rounded-pill mt-auto">Записаться</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 border border-2 border-primary rounded-4 shadow overflow-hidden">
            <img src="{% static 'C:\Users\mvide\OneDrive\Рабочий стол\09\korochki_est\main\static\main\images\1351577979_www.radionetplus.ru_1.jpg' %}" 
                 class="card-img-top" alt="Базы данных" style="height: 180px; object-fit: cover;">
            <div class="card-body d-flex flex-column text-center">
                <h5 class="card-title">Основы проектирования баз данных</h5>
                <p class="card-text text-muted flex-grow-1">SQL, моделирование, нормализация</p>
                <a href="{% url 'create_application' %}" class="btn btn-outline-primary rounded-pill mt-auto">Записаться</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}