<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TennisHub - Ваше теннисное сообщество</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --tennis-green: #2ecc71;
            --tennis-blue: #3498db;
            --tennis-orange: #e67e22;
            --tennis-dark: #2c3e50;
            --tennis-light: #ecf0f1;
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.8rem;
        }

        .tennis-bg {
            background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)),
                        url('https://avatars.mds.yandex.net/get-altay/1880524/2a0000016ef11d02f18395e01a44f0ddbdb7/XXL_height');
            background-size: cover;
            background-position: center;
            color: white;
        }

        .hero-section {
            padding: 180px 0 120px;
            position: relative;
            overflow: hidden;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .ball-animation {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--tennis-green);
            border-radius: 50%;
            animation: bounce 3s infinite alternate;
            opacity: 0.2;
        }

        @keyframes bounce {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-500px) rotate(360deg); }
        }

        .ball-1 {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .ball-2 {
            top: 40%;
            right: 15%;
            animation-delay: 1s;
            background: var(--tennis-orange);
        }

        .ball-3 {
            bottom: 30%;
            left: 20%;
            animation-delay: 2s;
            background: var(--tennis-blue);
        }

        .card-hover {
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        .card-hover:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .club-card {
            border-top: 4px solid var(--tennis-green);
        }

        .event-card {
            border-top: 4px solid var(--tennis-orange);
        }

        .admin-card {
            border-top: 4px solid var(--tennis-blue);
        }

        .court-icon {
            width: 60px;
            height: 60px;
            background: var(--tennis-green);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin: 0 auto 15px;
        }

        .event-date {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--tennis-orange);
            color: white;
            padding: 8px 15px;
            border-radius: 10px;
            font-weight: 600;
        }

        .badge-tennis {
            background: var(--tennis-green);
            color: white;
        }

        .stats-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--tennis-green);
            line-height: 1;
        }

        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--tennis-green);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 30px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -33px;
            top: 5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--tennis-green);
            border: 3px solid white;
            box-shadow: 0 0 0 3px var(--tennis-green);
        }

        .form-control:focus {
            border-color: var(--tennis-green);
            box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.25);
        }

        .btn-tennis {
            background: var(--tennis-green);
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-tennis:hover {
            background: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
            color: white;
        }

        .btn-outline-tennis {
            border: 2px solid var(--tennis-green);
            color: var(--tennis-green);
            padding: 10px 25px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-outline-tennis:hover {
            background: var(--tennis-green);
            color: white;
            transform: translateY(-2px);
        }

        .nav-pills .nav-link.active {
            background: var(--tennis-green);
        }

        .tab-content {
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 30px;
        }

        .court-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .court-table th {
            background: var(--tennis-green);
            color: white;
            padding: 15px;
            text-align: center;
        }

        .court-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
        }

        .court-available {
            background: rgba(46, 204, 113, 0.1);
            color: var(--tennis-green);
            font-weight: 600;
        }

        .court-booked {
            background: rgba(231, 76, 60, 0.1);
            color: #e74c3c;
            font-weight: 600;
        }

        .court-time {
            font-weight: 600;
            color: var(--tennis-dark);
        }

        footer {
            background: var(--tennis-dark);
            color: white;
            padding: 60px 0 30px;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            transition: all 0.3s;
        }

        .social-icon:hover {
            background: var(--tennis-green);
            transform: translateY(-3px);
        }

        .admin-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            margin-top: 30px;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-section {
                padding: 120px 0 80px;
            }

            .stats-number {
                font-size: 2rem;
            }
        }

        .court-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .court-item {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
        }

        .court-item.available {
            border-color: var(--tennis-green);
        }

        .court-item.booked {
            border-color: #e74c3c;
            opacity: 0.7;
        }

        .court-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- Навигация -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-tennis-ball me-2 text-success"></i>TennisHub
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#clubs">Клубы</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#events">События</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#booking">Бронирование</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#admin">Админка</a>
                    </li>
                </ul>
                <button class="btn btn-tennis ms-3" onclick="showLoginModal()">
                    <i class="fas fa-sign-in-alt me-2"></i>Войти
                </button>
            </div>
        </div>
    </nav>

    <!-- Герой секция -->
    <section class="tennis-bg hero-section">
        <div class="ball-animation ball-1"></div>
        <div class="ball-animation ball-2"></div>
        <div class="ball-animation ball-3"></div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="hero-title mb-4">Ваше теннисное сообщество</h1>
                    <p class="lead mb-4">Находите клубы, участвуйте в турнирах, бронируйте корты и управляйте событиями в одном месте</p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="#clubs" class="btn btn-tennis">
                            <i class="fas fa-search me-2"></i>Найти клуб
                        </a>
                        <a href="#events" class="btn btn-outline-light">
                            <i class="fas fa-calendar-alt me-2"></i>События
                        </a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="https://avatars.mds.yandex.net/get-altay/1880524/2a0000016ef11d02f18395e01a44f0ddbdb7/XXL_height"
                         class="img-fluid rounded-3 shadow-lg"
                         alt="Теннисный корт">
                </div>
            </div>
        </div>
    </section>

    <!-- Статистика -->
    <section class="py-5">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3 col-6 mb-4">
                    <div class="stats-number" id="clubsCount">24</div>
                    <p class="text-muted">Теннисных клубов</p>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stats-number" id="courtsCount">156</div>
                    <p class="text-muted">Кортов доступно</p>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stats-number" id="eventsCount">18</div>
                    <p class="text-muted">Предстоящих событий</p>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stats-number" id="playersCount">1,250+</div>
                    <p class="text-muted">Активных игроков</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Теннисные клубы -->
    <section id="clubs" class="py-5 bg-light">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="fw-bold mb-3">Теннисные клубы</h2>
                    <p class="text-muted">Найдите идеальный клуб для тренировок и игр</p>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card card-hover club-card">
                        <img src="https://avatars.mds.yandex.net/get-altay/13234017/2a0000018f10863585acfe01f89a2cc9f5bf/XXL_height"
                             class="card-img-top"
                             height="200"
                             style="object-fit: cover;"
                             alt="Премиум клуб">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0">Tennis Premium</h5>
                                <span class="badge badge-tennis">Премиум</span>
                            </div>
                            <p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Москва, ул. Спортивная, 15</p>
                            <div class="mb-3">
                                <span class="badge bg-light text-dark me-1">12 кортов</span>
                                <span class="badge bg-light text-dark me-1">Тренеры</span>
                                <span class="badge bg-light text-dark">Ресторан</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-success">от 1,200₽/час</span>
                                <button class="btn btn-sm btn-tennis" onclick="viewClubDetails(1)">Подробнее</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-hover club-card">
                        <img src="https://avatars.mds.yandex.net/get-altay/9717139/2a00000189f35961d519003fa4d01c7abc03/XXXL"
                             class="card-img-top"
                             height="200"
                             style="object-fit: cover;"
                             alt="Семейный клуб">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0">Family Tennis</h5>
                                <span class="badge bg-info">Семейный</span>
                            </div>
                            <p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Санкт-Петербург, пр. Победы, 28</p>
                            <div class="mb-3">
                                <span class="badge bg-light text-dark me-1">8 кортов</span>
                                <span class="badge bg-light text-dark me-1">Детские секции</span>
                                <span class="badge bg-light text-dark">Спа</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-success">от 800₽/час</span>
                                <button class="btn btn-sm btn-tennis" onclick="viewClubDetails(2)">Подробнее</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-hover club-card">
                        <img src="https://avatars.mds.yandex.net/get-altay/9704097/2a000001879afb065e3d55101628110130ad/XXL_height"
                             class="card-img-top"
                             height="200"
                             style="object-fit: cover;"
                             alt="Клуб для начинающих">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0">Start Tennis</h5>
                                <span class="badge bg-warning">Для начинающих</span>
                            </div>
                            <p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Казань, ул. Теннисная, 5</p>
                            <div class="mb-3">
                                <span class="badge bg-light text-dark me-1">6 кортов</span>
                                <span class="badge bg-light text-dark me-1">Групповые занятия</span>
                                <span class="badge bg-light text-dark">Прокат инвентаря</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-success">от 500₽/час</span>
                                <button class="btn btn-sm btn-tennis" onclick="viewClubDetails(3)">Подробнее</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-5">
                <button class="btn btn-outline-tennis">
                    <i class="fas fa-plus me-2"></i>Показать все клубы (24)
                </button>
            </div>
        </div>
    </section>

    <!-- События и турниры -->
    <section id="events" class="py-5">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="fw-bold mb-3">События и турниры</h2>
                    <p class="text-muted">Участвуйте в соревнованиях и теннисных событиях</p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="card card-hover event-card position-relative">
                                <div class="event-date">
                                    15-18 НОЯ
                                </div>
                                <img src="https://shvsm-penza.ru/wp-content/uploads/2021/08/%D0%A2%D0%B5%D0%BD%D0%BD%D0%B8%D1%81-3.jpg"
                                     class="card-img-top"
                                     height="180"
                                     style="object-fit: cover;"
                                     alt="Чемпионат города">
                                <div class="card-body">
                                    <h5 class="card-title">Чемпионат города Москвы</h5>
                                    <p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Tennis Premium Club</p>
                                    <p class="card-text">Открытый чемпионат среди любителей и полупрофессионалов.</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="badge bg-success">Регистрация открыта</span>
                                        <button class="btn btn-sm btn-tennis" onclick="registerForEvent(1)">Участвовать</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card card-hover event-card position-relative">
                                <div class="event-date">
                                    22-24 НОЯ
                                </div>
                                <img src="https://cspovsmo.ru/wp-content/uploads/2022/06/%D1%82%D0%B5%D0%BD%D0%BD%D0%B8%D1%81-3.jpg"
                                     class="card-img-top"
                                     height="180"
                                     style="object-fit: cover;"
                                     alt="Детский турнир">
                                <div class="card-body">
                                    <h5 class="card-title">Детский турнир "Ракетка"</h5>
                                    <p class="text-muted"><i class="fas fa-map-marker-alt me-2"></i>Family Tennis Club</p>
                                    <p class="card-text">Турнир для юных теннисистов до 14 лет.</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="badge bg-warning">Осталось 5 мест</span>
                                        <button class="btn btn-sm btn-tennis" onclick="registerForEvent(2)">Участвовать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-5">
                        <h4 class="mb-4">Расписание событий</h4>
                        <div class="timeline">
                            <div class="timeline-item">
                                <h5>Открытый урок для начинающих</h5>
                                <p class="text-muted mb-1">25 ноября, 18:00 • Start Tennis Club</p>
                                <p>Бесплатный мастер-класс от профессионального тренера</p>
                            </div>
                            <div class="timeline-item">
                                <h5>Турнир ветеранов</h5>
                                <p class="text-muted mb-1">1 декабря, 10:00 • Tennis Premium Club</p>
                                <p>Соревнования для игроков 50+</p>
                            </div>
                            <div class="timeline-item">
                                <h5>Зимний кубок</h5>
                                <p class="text-muted mb-1">15-17 декабря • Все клубы сети</p>
                                <p>Крупнейший зимний турнир с призовым фондом</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">Создать событие</h5>
                        </div>
                        <div class="card-body">
                            <form id="createEventForm">
                                <div class="mb-3">
                                    <label class="form-label">Название события</label>
                                    <input type="text" class="form-control" placeholder="Турнир, мастер-класс..." required>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label">Дата</label>
                                        <input type="date" class="form-control" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Время</label>
                                        <input type="time" class="form-control" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Клуб</label>
                                    <select class="form-select" required>
                                        <option value="">Выберите клуб</option>
                                        <option>Tennis Premium</option>
                                        <option>Family Tennis</option>
                                        <option>Start Tennis</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Описание</label>
                                    <textarea class="form-control" rows="3" placeholder="Опишите ваше событие..."></textarea>
                                </div>
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-tennis">
                                        <i class="fas fa-calendar-plus me-2"></i>Создать событие
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Бронирование кортов -->
    <section id="booking" class="py-5 bg-light">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="fw-bold mb-3">Бронирование кортов</h2>
                    <p class="text-muted">Забронируйте корт онлайн в удобное время</p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-pills mb-4" id="bookingTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="today-tab" data-bs-toggle="pill" data-bs-target="#today">Сегодня</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tomorrow-tab" data-bs-toggle="pill" data-bs-target="#tomorrow">Завтра</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="week-tab" data-bs-toggle="pill" data-bs-target="#week">Неделя</button>
                                </li>
                            </ul>

                            <div class="tab-content" id="bookingTabContent">
                                <div class="tab-pane fade show active" id="today">
                                    <h5 class="mb-3">Доступные корты на сегодня</h5>
                                    <div class="court-grid">
                                        <div class="court-item available" onclick="bookCourt(1)">
                                            <div class="fw-bold">Корт #1</div>
                                            <div class="text-success">10:00 - 11:00</div>
                                            <small>800₽/час</small>
                                        </div>
                                        <div class="court-item available" onclick="bookCourt(2)">
                                            <div class="fw-bold">Корт #2</div>
                                            <div class="text-success">11:00 - 12:00</div>
                                            <small>800₽/час</small>
                                        </div>
                                        <div class="court-item booked">
                                            <div class="fw-bold">Корт #3</div>
                                            <div class="text-danger">12:00 - 14:00</div>
                                            <small>Занято</small>
                                        </div>
                                        <div class="court-item available" onclick="bookCourt(4)">
                                            <div class="fw-bold">Корт #4</div>
                                            <div class="text-success">15:00 - 16:00</div>
                                            <small>1,200₽/час</small>
                                        </div>
                                        <div class="court-item available" onclick="bookCourt(5)">
                                            <div class="fw-bold">Корт #5</div>
                                            <div class="text-success">16:00 - 18:00</div>
                                            <small>1,200₽/час</small>
                                        </div>
                                        <div class="court-item booked">
                                            <div class="fw-bold">Корт #6</div>
                                            <div class="text-danger">18:00 - 20:00</div>
                                            <small>Турнир</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tomorrow">
                                    <!-- Контент для завтра -->
                                </div>

                                <div class="tab-pane fade" id="week">
                                    <!-- Контент для недели -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">Мои бронирования</h5>
                        </div>
                        <div class="card-body">
                            <div id="myBookings">
                                <p class="text-muted">У вас пока нет активных бронирований</p>
                            </div>
                            <div class="d-grid mt-3">
                                <button class="btn btn-outline-tennis" onclick="showBookingHistory()">
                                    <i class="fas fa-history me-2"></i>История бронирований
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Админка -->
    <section id="admin" class="py-5">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="fw-bold mb-3">Панель управления</h2>
                    <p class="text-muted">Управляйте клубами, событиями и пользователями</p>
                </div>
            </div>

            <div class="admin-section">
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="card admin-card card-hover">
                            <div class="card-body text-center p-4">
                                <div class="court-icon mb-3">
                                    <i class="fas fa-building"></i>
                                </div>
                                <h4>Управление клубами</h4>
                                <p class="text-muted">Добавляйте и редактируйте теннисные клубы</p>
                                <button class="btn btn-tennis w-100" onclick="manageClubs()">
                                    <i class="fas fa-cog me-2"></i>Управлять
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-4">
                        <div class="card admin-card card-hover">
                            <div class="card-body text-center p-4">
                                <div class="court-icon mb-3">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <h4>Управление событиями</h4>
                                <p class="text-muted">Создавайте и модерируйте турниры</p>
                                <button class="btn btn-tennis w-100" onclick="manageEvents()">
                                    <i class="fas fa-edit me-2"></i>Управлять
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-4">
                        <div class="card admin-card card-hover">
                            <div class="card-body text-center p-4">
                                <div class="court-icon mb-3">
                                    <i class="fas fa-users"></i>
                                </div>
                                <h4>Пользователи</h4>
                                <p class="text-muted">Управление игроками и администраторами</p>
                                <button class="btn btn-tennis w-100" onclick="manageUsers()">
                                    <i class="fas fa-user-cog me-2"></i>Управлять
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Статистика системы</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="text-center p-3 border rounded">
                                            <div class="stats-number" id="activeBookings">12</div>
                                            <p class="text-muted mb-0">Активных броней</p>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="text-center p-3 border rounded">
                                            <div class="stats-number" id="pendingEvents">3</div>
                                            <p class="text-muted mb-0">Событий на модерации</p>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="text-center p-3 border rounded">
                                            <div class="stats-number" id="totalRevenue">124,500₽</div>
                                            <p class="text-muted mb-0">Общая выручка</p>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="text-center p-3 border rounded">
                                            <div class="stats-number" id="newUsers">8</div>
                                            <p class="text-muted mb-0">Новых пользователей</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Быстрые действия</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-flex flex-wrap gap-3">
                                    <button class="btn btn-outline-tennis" onclick="addNewClub()">
                                        <i class="fas fa-plus-circle me-2"></i>Добавить клуб
                                    </button>
                                    <button class="btn btn-outline-tennis" onclick="createTournament()">
                                        <i class="fas fa-trophy me-2"></i>Создать турнир
                                    </button>
                                    <button class="btn btn-outline-tennis" onclick="sendNotification()">
                                        <i class="fas fa-bell me-2"></i>Отправить уведомление
                                    </button>
                                    <button class="btn btn-outline-tennis" onclick="generateReport()">
                                        <i class="fas fa-chart-bar me-2"></i>Создать отчет
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Футер -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h3><i class="fas fa-tennis-ball me-2"></i>TennisHub</h3>
                    <p class="mt-3">Объединяем теннисное сообщество: клубы, игроки, турниры и события.</p>
                    <div class="mt-4">
                        <a href="#" class="social-icon"><i class="fab fa-vk"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-telegram"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>

                <div class="col-lg-2 col-md-4 mb-4">
                    <h5>Разделы</h5>
                    <ul class="list-unstyled">
                        <li><a href="#clubs" class="text-light text-decoration-none">Клубы</a></li>
                        <li><a href="#events" class="text-light text-decoration-none">События</a></li>
                        <li><a href="#booking" class="text-light text-decoration-none">Бронирование</a></li>
                        <li><a href="#admin" class="text-light text-decoration-none">Админка</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 mb-4">
                    <h5>Помощь</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-light text-decoration-none">FAQ</a></li>
                        <li><a href="#" class="text-light text-decoration-none">Правила бронирования</a></li>
                        <li><a href="#" class="text-light text-decoration-none">Условия турниров</a></li>
                        <li><a href="#" class="text-light text-decoration-none">Контакты</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 mb-4">
                    <h5>Контакты</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="fas fa-phone me-2"></i> 8 (800) 555-87-23</li>
                        <li class="mb-2"><i class="fas fa-envelope me-2"></i> info@tennishub.ru</li>
                        <li><i class="fas fa-map-marker-alt me-2"></i> Москва, ул. Спортивная, 10</li>
                    </ul>
                </div>
            </div>

            <hr class="my-4">

            <div class="row">
                <div class="col-md-6">
                    <p>© 2024 TennisHub. Все права защищены.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <a href="#" class="text-light text-decoration-none me-3">Политика конфиденциальности</a>
                    <a href="#" class="text-light text-decoration-none">Пользовательское соглашение</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Модальные окна -->
    <div class="modal fade" id="loginModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Вход в систему</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="loginForm">
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Пароль</label>
                            <input type="password" class="form-control" required>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input">
                            <label class="form-check-label">Запомнить меня</label>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-tennis">Войти</button>
                            <button type="button" class="btn btn-outline-secondary">Регистрация</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bookingModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Бронирование корта</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="courtInfo"></p>
                    <form id="bookingForm">
                        <div class="mb-3">
                            <label class="form-label">Дата и время</label>
                            <input type="text" class="form-control" id="bookingDateTime" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Длительность (часов)</label>
                            <select class="form-select" id="duration">
                                <option value="1">1 час</option>
                                <option value="2">2 часа</option>
                                <option value="3">3 часа</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Количество игроков</label>
                            <input type="number" class="form-control" min="1" max="4" value="2">
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-tennis">Забронировать</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Инициализация модальных окон
        const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
        const bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));

        // Данные системы
        let bookings = [];
        let events = [];
        let clubs = [
            { id: 1, name: 'Tennis Premium', courts: 12, price: 1200 },
            { id: 2, name: 'Family Tennis', courts: 8, price: 800 },
            { id: 3, name: 'Start Tennis', courts: 6, price: 500 }
        ];

        // Функции показа модальных окон
        function showLoginModal() {
            loginModal.show();
        }

        // Бронирование корта
        function bookCourt(courtNumber) {
            const courtInfo = `Корт #${courtNumber} • Tennis Premium Club`;
            document.getElementById('courtInfo').textContent = courtInfo;
            document.getElementById('bookingDateTime').value = 'Сегодня, 10:00-11:00';
            bookingModal.show();
        }

        // Просмотр деталей клуба
        function viewClubDetails(clubId) {
            const club = clubs.find(c => c.id === clubId);
            alert(`Клуб: ${club.name}\nКортов: ${club.courts}\nЦена от: ${club.price}₽/час`);
        }

        // Регистрация на событие
        function registerForEvent(eventId) {
            alert('Вы зарегистрированы на событие! Подтверждение отправлено на email.');
        }

        // Админские функции
        function manageClubs() {
            alert('Переход в панель управления клубами');
            // Здесь будет переход на страницу управления
        }

        function manageEvents() {
            alert('Переход в панель управления событиями');
        }

        function manageUsers() {
            alert('Переход в панель управления пользователями');
        }

        function addNewClub() {
            alert('Форма добавления нового клуба');
        }

        function createTournament() {
            alert('Создание нового турнира');
        }

        function sendNotification() {
            alert('Отправка уведомления пользователям');
        }

        function generateReport() {
            alert('Генерация отчета по активности');
        }

        function showBookingHistory() {
            alert('Показать историю бронирований');
        }

        // Обработка форм
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Вход выполнен успешно!');
            loginModal.hide();
        });

        document.getElementById('bookingForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Корт успешно забронирован!');
            bookingModal.hide();

            // Добавляем бронирование
            const booking = {
                id: bookings.length + 1,
                court: document.getElementById('courtInfo').textContent,
                date: document.getElementById('bookingDateTime').value,
                duration: document.getElementById('duration').value
            };

            bookings.push(booking);
            updateBookingsDisplay();
            updateStats();
        });

        document.getElementById('createEventForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Событие создано! Ожидает модерации.');
            this.reset();
            updateStats();
        });

        // Обновление отображения бронирований
        function updateBookingsDisplay() {
            const bookingsContainer = document.getElementById('myBookings');
            if (bookings.length === 0) {
                bookingsContainer.innerHTML = '<p class="text-muted">У вас пока нет активных бронирований</p>';
            } else {
                bookingsContainer.innerHTML = bookings.map(booking => `
                    <div class="border-bottom pb-2 mb-2">
                        <div class="fw-bold">${booking.court}</div>
                        <div class="text-muted small">${booking.date} • ${booking.duration} час</div>
                    </div>
                `).join('');
            }
        }

        // Обновление статистики
        function updateStats() {
            document.getElementById('activeBookings').textContent = bookings.length;
            document.getElementById('pendingEvents').textContent = Math.floor(Math.random() * 5) + 1;
            document.getElementById('newUsers').textContent = Math.floor(Math.random() * 10) + 1;
        }

        // Инициализация
        document.addEventListener('DOMContentLoaded', function() {
            updateBookingsDisplay();
            updateStats();

            // Плавная прокрутка
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;

                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // Анимация при прокрутке
            window.addEventListener('scroll', function() {
                const nav = document.querySelector('.navbar');
                if (window.scrollY > 100) {
                    nav.classList.add('shadow');
                } else {
                    nav.classList.remove('shadow');
                }
            });
        });
    </script>
</body>
</html>