{% extends 'base.html' %}

{% block title %}Пассажиры.РФ — Курсы обучения водителей{% endblock %}

{% block content %}
<!-- Hero секция -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center min-vh-75">
            <div class="col-lg-6">
                <h1 class="hero-title">Станьте профессиональным водителем</h1>
                <p class="hero-subtitle">Очные курсы обучения водителей автобусов, электробусов и трамваев. Получите профессию, которая всегда востребована.</p>
                <div class="d-flex gap-3 mt-4">
                    <a href="{{ url_for('register') }}" class="btn btn-accent btn-lg">Записаться</a>
                    <a href="#courses" class="btn btn-outline-light btn-lg">Курсы</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-illustration">
                    <i class="fas fa-bus fa-8x text-white opacity-25"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Слайдер с изображениями -->
<section class="slider-section py-5" id="slider">
    <div class="container">
        <h2 class="section-title text-center mb-4">Галерея</h2>
        <div class="slider-wrapper">
            <div class="slider-track slider-images">
                <div class="slide active">
                    <img src="https://placehold.co/800x400/6c5ce7/ffffff?text=Фото+1" alt="Слайд 1" class="slider-img">
                </div>
                <div class="slide">
                    <img src="https://placehold.co/800x400/0984e3/ffffff?text=Фото+2" alt="Слайд 2" class="slider-img">
                </div>
                <div class="slide">
                    <img src="https://placehold.co/800x400/00b894/ffffff?text=Фото+3" alt="Слайд 3" class="slider-img">
                </div>
                <div class="slide">
                    <img src="https://placehold.co/800x400/e17055/ffffff?text=Фото+4" alt="Слайд 4" class="slider-img">
                </div>
            </div>
            <div class="slider-controls">
                <button class="slider-btn slider-prev"><i class="fas fa-chevron-left"></i></button>
                <div class="slider-dots"></div>
                <button class="slider-btn slider-next"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </div>
</section>

<!-- Курсы -->
<section class="courses-section py-5" id="courses">
    <div class="container">
        <h2 class="section-title text-center mb-5">Наши курсы</h2>
        <div class="row g-4">
            <div class="col-md-4 fade-in">
                <div class="course-card glass-card h-100">
                    <div class="course-icon"><i class="fas fa-bus"></i></div>
                    <h4>Водитель автобуса</h4>
                    <p class="text-muted">Полный курс подготовки водителей автобусов городских маршрутов</p>
                    <div class="course-meta">
                        <span><i class="fas fa-clock me-1"></i>3 месяца</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4 fade-in">
                <div class="course-card glass-card h-100">
                    <div class="course-icon electric"><i class="fas fa-bolt"></i></div>
                    <h4>Водитель электробуса</h4>
                    <p class="text-muted">Обучение управлению электробусом с учётом особенностей электротранспорта</p>
                    <div class="course-meta">
                        <span><i class="fas fa-clock me-1"></i>2 месяца</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4 fade-in">
                <div class="course-card glass-card h-100">
                    <div class="course-icon tram"><i class="fas fa-train"></i></div>
                    <h4>Водитель трамвая</h4>
                    <p class="text-muted">Курс подготовки водителей трамвая для городских перевозок</p>
                    <div class="course-meta">
                        <span><i class="fas fa-clock me-1"></i>4 месяца</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="cta-section py-5">
    <div class="container text-center">
        <h2 class="text-white mb-3">Готовы начать обучение?</h2>
        <p class="text-white-50 mb-4">Зарегистрируйтесь и подайте заявку на интересующий курс</p>
        <a href="{{ url_for('register') }}" class="btn btn-light btn-lg px-5">Начать</a>
    </div>
</section>
{% endblock %}