{% extends "base.html" %}

{% block title %}Капитал & Рынок - Экономическая стратегия{% endblock %}

{% block content %}
<div class="screen active">
    <!-- Шапка -->
    <div class="header">
        <div class="logo-container">
            {% if url_for('static', filename='images/logo.png') %}
                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                <span class="logo-text" style="display: none; color: white; font-weight: bold; font-size: 1.2rem;">💰 Капитал & Рынок</span>
            {% else %}
                <span class="logo-text" style="color: white; font-weight: bold; font-size: 1.2rem;">💰 Капитал & Рынок</span>
            {% endif %}
        </div>
    </div>

    <!-- Основной контент -->
    <div class="container">
        <!-- Приветственная карточка -->
        <div class="card text-center">
            <h1 style="margin-bottom: 15px;">Капитал & Рынок</h1>
            <p style="margin: 15px 0; font-size: 1.1rem; color: var(--light-text);">
                Стань успешным инвестором в динамичной экономической стратегии!
            </p>

            <div style="margin: 25px 0;">
                <div style="font-size: 4rem; margin-bottom: 20px;">💰📈🏦</div>
            </div>

            <div class="flex flex-col gap-3" style="max-width: 300px; margin: 0 auto;">
                <a href="{{ url_for('login') }}" class="button" style="font-size: 1.1rem; padding: 15px;">
                    Войти в игру
                </a>
                <a href="{{ url_for('register') }}" class="button success" style="font-size: 1.1rem; padding: 15px;">
                    Создать аккаунт
                </a>
                <a href="{{ url_for('quick_login', username='Гость') }}" class="button secondary" style="padding: 12px;">
                    Быстрый старт (гостевая игра)
                </a>
            </div>
        </div>

        <!-- Особенности игры -->
        <div class="card">
            <h3 style="text-align: center; margin-bottom: 20px;">Особенности игры</h3>
            <div style="display: grid; grid-template-columns: 1fr; gap: 15px;">
                <div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; flex-shrink: 0;">🎮</div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Динамичный геймплей</h4>
                        <p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
                            Каждый месяц - новые решения, события и вызовы. Адаптируйтесь к меняющемуся рынку!
                        </p>
                    </div>
                </div>

                <div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; flex-shrink: 0;">👥</div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Мультиплеер до 10 игроков</h4>
                        <p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
                            Соревнуйтесь с друзьями или случайными соперниками. Создавайте альянсы и заключайте сделки!
                        </p>
                    </div>
                </div>

                <div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; flex-shrink: 0;">💡</div>
                    <div>
                        <h4 style="margin-bottom: 5px;">13 уникальных способностей</h4>
                        <p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
                            Каждый игрок получает особую способность: от Кризисного инвестора до Теневого бухгалтера.
                        </p>
                    </div>
                </div>

                <div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; flex-shrink: 0;">📊</div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Реалистичная экономика</h4>
                        <p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
                            Рынок реагирует на действия всех игроков. Ваши решения влияют на цены активов!
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Как начать играть -->
        <div class="card">
            <h3 style="text-align: center; margin-bottom: 20px;">Как начать играть?</h3>
            <div style="counter-reset: step-counter;">
                <div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
                    <div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
                        1
                    </div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Создайте аккаунт</h4>
                        <p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
                            Зарегистрируйтесь или войдите как гость. Это займет менее минуты!
                        </p>
                    </div>
                </div>

                <div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
                    <div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
                        2
                    </div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Присоединитесь к комнате</h4>
                        <p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
                            Выберите существующую комнату или создайте свою. Настройте правила игры.
                        </p>
                    </div>
                </div>

                <div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
                    <div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
                        3
                    </div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Выберите способность</h4>
                        <p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
                            Получите случайную уникальную способность и стартовый капитал 100,000 ₽.
                        </p>
                    </div>
                </div>

                <div style="display: flex; align-items: flex-start; gap: 15px;">
                    <div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
                        4
                    </div>
                    <div>
                        <h4 style="margin-bottom: 5px;">Станьте самым богатым!</h4>
                        <p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
                            Инвестируйте в акции, недвижимость, бизнес. Обыграйте конкурентов за 12 месяцев!
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Статистика (заглушка) -->
        <div class="card text-center">
            <h3 style="margin-bottom: 15px;">Игровая статистика</h3>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">
                <div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">1,234</div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Активных игроков</div>
                </div>
                <div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">567</div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Игровых комнат</div>
                </div>
                <div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">89</div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Турниров</div>
                </div>
                <div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">12</div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Уникальных способностей</div>
                </div>
            </div>
        </div>

        <!-- Футер -->
        <div style="text-align: center; padding: 20px 0; color: var(--light-text); font-size: 0.9rem;">
            <p>© 2024 Капитал & Рынок. Экономическая стратегия в реальном времени.</p>
            <p style="margin-top: 10px;">
                <a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 10px;">Правила</a> |
                <a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 10px;">Контакты</a> |
                <a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 10px;">Поддержка</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Простая анимация для привлечения внимания
    document.addEventListener('DOMContentLoaded', function() {
        const emojis = document.querySelector('.text-center .flex');
        if (emojis) {
            emojis.style.opacity = '0';
            emojis.style.transform = 'translateY(20px)';

            setTimeout(() => {
                emojis.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                emojis.style.opacity = '1';
                emojis.style.transform = 'translateY(0)';
            }, 300);
        }

        // Подсветка кнопок при наведении
        const buttons = document.querySelectorAll('.button');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
            });
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    });
</script>
{% endblock %}