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

{% block title %}Lavender Beauty — твоя гармония{% endblock %}

{% block content %}

<!-- Исправленный слайдер -->
<section class="position-relative" style="height: 60vh; min-height: 400px;">
    <div id="heroSlider" class="carousel slide carousel-fade h-100" data-bs-ride="carousel" data-bs-interval="4000" data-bs-pause="false">
        <div class="carousel-inner h-100">
            <!-- Активный слайд -->
            <div class="carousel-item active h-100">
                <img src="{% static 'images/1.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="Lavender Beauty">
                <div class="carousel-caption d-flex flex-column align-items-center justify-content-center h-100">
                    <div class="bg-dark bg-opacity-50 p-5 rounded-4" style="max-width: 80%;">
                        <h1 class="display-4 fw-bold mb-3 text-white">Lavender Beauty</h1>
                        <p class="lead fs-4 mb-4 text-white">Красота в каждом мгновении</p>
                        <a href="{% url 'create_appointment' %}" class="btn btn-light btn-lg px-5 py-3 fw-bold">Записаться</a>
                    </div>
                </div>
            </div>
            
            <!-- Слайд 2 -->
            <div class="carousel-item h-100">
                <img src="{% static 'images/2.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="Маникюр">
                <div class="carousel-caption d-flex flex-column align-items-center justify-content-center h-100">
                    <div class="bg-dark bg-opacity-50 p-5 rounded-4" style="max-width: 80%;">
                        <h1 class="display-4 fw-bold mb-3 text-white">Идеальные ногти</h1>
                        <p class="lead fs-4 mb-4 text-white">Маникюр и педикюр</p>
                        <a href="{% url 'create_appointment' %}" class="btn btn-light btn-lg px-5 py-3 fw-bold">Записаться</a>
                    </div>
                </div>
            </div>
            
            <!-- Слайд 3 -->
            <div class="carousel-item h-100">
                <img src="{% static 'images/3.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="Брови">
                <div class="carousel-caption d-flex flex-column align-items-center justify-content-center h-100">
                    <div class="bg-dark bg-opacity-50 p-5 rounded-4" style="max-width: 80%;">
                        <h1 class="display-4 fw-bold mb-3 text-white">Совершенные брови</h1>
                        <p class="lead fs-4 mb-4 text-white">Ламинирование и окрашивание</p>
                        <a href="{% url 'create_appointment' %}" class="btn btn-light btn-lg px-5 py-3 fw-bold">Записаться</a>
                    </div>
                </div>
            </div>
            
            <!-- Слайд 4 -->
            <div class="carousel-item h-100">
                <img src="{% static 'images/4.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="Уход за кожей">
                <div class="carousel-caption d-flex flex-column align-items-center justify-content-center h-100">
                    <div class="bg-dark bg-opacity-50 p-5 rounded-4" style="max-width: 80%;">
                        <h1 class="display-4 fw-bold mb-3 text-white">Сияющая кожа</h1>
                        <p class="lead fs-4 mb-4 text-white">Уход и релакс</p>
                        <a href="{% url 'create_appointment' %}" class="btn btn-light btn-lg px-5 py-3 fw-bold">Записаться</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Кнопки навигации -->
        <button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon bg-dark bg-opacity-50 rounded-circle p-3" aria-hidden="true"></span>
            <span class="visually-hidden">Предыдущий</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next">
            <span class="carousel-control-next-icon bg-dark bg-opacity-50 rounded-circle p-3" aria-hidden="true"></span>
            <span class="visually-hidden">Следующий</span>
        </button>
    </div>
</section>
                    <p style="color: red; font-size: 10px;">
                    Создано: {% now "H:i:s" %}
                    </p>
<!-- Услуги -->
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold fs-1 text-dark">Наши услуги</h2>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="card border-0 shadow h-100 text-center">
                    <div class="card-body p-4">
                        <div class="fs-1 mb-3">💅</div>
                        <h5 class="fw-bold text-dark">Маникюр</h5>
                        <p class="text-muted small">Классика, дизайн, укрепление</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow h-100 text-center">
                    <div class="card-body p-4">
                        <div class="fs-1 mb-3">👁️</div>
                        <h5 class="fw-bold text-dark">Ресницы</h5>
                        <p class="text-muted small">Наращивание, ламинирование</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow h-100 text-center">
                    <div class="card-body p-4">
                        <div class="fs-1 mb-3">✨</div>
                        <h5 class="fw-bold text-dark">Брови</h5>
                        <p class="text-muted small">Окрашивание, коррекция</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-5 text-center" style="background: linear-gradient(135deg, #ffab91, #ffdab9);">
    <div class="container py-4">
        <h3 class="fw-bold mb-3 text-white">Готова к преображению?</h3>
        <a href="{% url 'create_appointment' %}" class="btn btn-light btn-lg px-5 py-3 fw-bold shadow">Записаться</a>
    </div>
</section>
<!-- Время генерации страницы -->

<!-- Дополнительные стили -->
<style>
    .carousel-caption {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent !important;
    }
    
    .carousel-item {
        transition: transform 1s ease-in-out;
    }
    
    .carousel-fade .carousel-item {
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    
    .carousel-fade .carousel-item.active {
        opacity: 1;
    }
</style>

<!-- Подключение Bootstrap JS (если его нет в base.html) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Инициализация слайдера (на всякий случай) -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var myCarousel = document.getElementById('heroSlider');
        if (myCarousel) {
            var carousel = new bootstrap.Carousel(myCarousel, {
                interval: 4000,
                wrap: true,
                pause: false
            });
        }
    });
</script>
{% endblock %}