{% extends 'base.html' %}

{% block title %}Учусь.РФ — Портал онлайн-курсов{% endblock %}

{% block content %}
<div class="hero-section text-center py-5 animate__animated animate__fadeIn">
    <h1 class="display-4 fw-bold text-primary mb-3">
        <i class="fas fa-graduation-cap"></i> Учусь.РФ
    </h1>
    <p class="lead text-muted mb-4">Портал записи на онлайн-курсы повышения квалификации, переподготовки и охраны труда</p>
    <div class="d-flex justify-content-center gap-3">
        <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg px-4">
            <i class="fas fa-user-plus me-2"></i>Регистрация
        </a>
        <a href="{{ url_for('login') }}" class="btn btn-outline-primary btn-lg px-4">
            <i class="fas fa-sign-in-alt me-2"></i>Войти
        </a>
    </div>
</div>

<!-- Слайдер -->
<div class="slider-container my-5">
    <div class="slider" id="slider">
        <div class="slide active">
            <div class="slide-content bg-primary text-white">
                <i class="fas fa-laptop-code fa-3x mb-3"></i>
                <h4>Повышение квалификации</h4>
                <p>Python, веб-дизайн и другие IT-направления</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content bg-success text-white">
                <i class="fas fa-sync-alt fa-3x mb-3"></i>
                <h4>Переподготовка</h4>
                <p>Новая профессия за 4-6 месяцев обучения</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content bg-warning text-dark">
                <i class="fas fa-hard-hat fa-3x mb-3"></i>
                <h4>Охрана труда</h4>
                <p>Обязательные курсы для специалистов и руководителей</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content bg-info text-white">
                <i class="fas fa-certificate fa-3x mb-3"></i>
                <h4>Сертификация</h4>
                <p>Официальные документы по окончании обучения</p>
            </div>
        </div>
    </div>
    <button class="slider-btn slider-prev" onclick="prevSlide()">
        <i class="fas fa-chevron-left"></i>
    </button>
    <button class="slider-btn slider-next" onclick="nextSlide()">
        <i class="fas fa-chevron-right"></i>
    </button>
    <div class="slider-dots" id="sliderDots"></div>
</div>

<div class="row g-4 mt-4 animate-on-scroll">
    <div class="col-md-4">
        <div class="card h-100 shadow-sm card-hover">
            <div class="card-body text-center p-4">
                <i class="fas fa-clock fa-2x text-primary mb-3"></i>
                <h5>Гибкий график</h5>
                <p class="text-muted">Выбирайте удобное время начала обучения</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 shadow-sm card-hover">
            <div class="card-body text-center p-4">
                <i class="fas fa-chalkboard-teacher fa-2x text-success mb-3"></i>
                <h5>Опытные преподаватели</h5>
                <p class="text-muted">Практикующие специалисты с опытом</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 shadow-sm card-hover">
            <div class="card-body text-center p-4">
                <i class="fas fa-wallet fa-2x text-warning mb-3"></i>
                <h5>Удобная оплата</h5>
                <p class="text-muted">Несколько способов оплаты на выбор</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}