{% extends 'base.html' %}
{% load static %}
{% block title %}Sharp Cut — главная{% endblock %}
{% block content %}
<section class="container py-4">
    <div id="sharpCutCarousel" class="carousel slide hero-carousel shadow-lg mb-4" data-bs-ride="carousel" data-bs-interval="4000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#sharpCutCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#sharpCutCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#sharpCutCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner rounded-5 overflow-hidden">
            <div class="carousel-item active">
                <img src="{% static 'img/Рисунок1.jpg' %}" class="d-block w-100 carousel-img" alt="Стрижка">
                <div class="carousel-overlay"></div>
                <div class="carousel-caption text-start">
                    <span class="badge text-bg-light mb-2">Sharp Cut</span>
                    <h1 class="display-5 fw-bold">Онлайн-запись в барбершоп</h1>
                    <p class="lead">Выберите услугу, мастера и удобное время визита.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{% static 'img/Рисунок2.jpg' %}" class="d-block w-100 carousel-img" alt="Мастер">
                <div class="carousel-overlay"></div>
                <div class="carousel-caption text-start">
                    <span class="badge text-bg-light mb-2">Мастера</span>
                    <h2 class="display-6 fw-bold">Опытные специалисты</h2>
                    <p class="lead">На странице каталога можно посмотреть мастеров и их специализацию.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{% static 'img/Рисунок3.jpg' %}" class="d-block w-100 carousel-img" alt="Запись">
                <div class="carousel-overlay"></div>
                <div class="carousel-caption text-start">
                    <span class="badge text-bg-light mb-2">Личный кабинет</span>
                    <h2 class="display-6 fw-bold">Контроль статуса записи</h2>
                    <p class="lead">После записи клиент видит статус визита в личном кабинете.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#sharpCutCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#sharpCutCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
    <div class="row text-center g-3 my-4">
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ clients_count|default:"5000" }}+</div>
                <div class="text-muted">Довольных клиентов</div>
            </div>
        </div>
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ years_on_market|default:"10" }}+</div>
                <div class="text-muted">Лет на рынке</div>
            </div>
        </div>
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ active_masters_count|default:"4" }}</div>
                <div class="text-muted">Профессиональных мастера</div>
            </div>
        </div>
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ positive_percent|default:"98" }}%</div>
                <div class="text-muted">Положительных отзывов</div>
            </div>
        </div>
    </div>
    <div class="my-5 fade-up">
        <h3 class="text-center fw-bold mb-4">Почему выбирают нас</h3>
        <div class="row g-3">
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-user-tie fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Опытные мастера</h6>
                    <p class="small text-muted">Наши барьеры имеют более 5 лет опыта и регулярно повышают квалификацию</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-flask fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Премиум материалы</h6>
                    <p class="small text-muted">Используем только профессиональную косметику ведущих мировых брендов</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-calendar-check fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Удобная запись</h6>
                    <p class="small text-muted">Онлайн-бронирование в любое удобное время без звонков и ожидания</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-coffee fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Комфортная атмосфера</h6>
                    <p class="small text-muted">Современный интерьер, кофе и приятная музыка во время стрижки</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row align-items-center bg-white rounded-5 shadow-sm p-4 p-md-5 my-5 fade-up">
        <div class="col-md-6">
            <h2 class="fw-bold">О нас</h2>
            <p class="text-muted">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
            <p class="text-muted">
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class="col-md-6 text-center">
            <img src="{% static 'img/Рисунок1.jpg' %}" alt="О нас" class="img-fluid rounded-4 shadow" style="max-height: 300px; object-fit: cover;">
        </div>
    </div>
    <div class="text-center bg-white rounded-5 shadow-sm p-4 p-md-5 fade-up">
        <h3 class="fw-bold">Готовы к новому образу?</h3>
        <p class="text-muted">Запишитесь онлайн за 1 минуту и выберите удобное время</p>
        <a href="{% url 'appointment_create' %}" class="btn btn-dark rounded-pill px-5 py-2">Записаться онлайн</a>
    </div>
</section>
{% endblock %}