{% extends "layout.html" %}

{% block title %}Главная - ZontikGram Lite{% endblock %}

{% block content %}
<div style="background: white; padding: 40px; border-radius: 10px; text-align: center;">
    <h1 style="color: #667eea; margin-bottom: 20px;">💬 Добро пожаловать в ZontikGram Lite!</h1>
    <p style="font-size: 18px; color: #4a5568; margin-bottom: 30px;">
        Простой мессенджер, который хранит все данные в папке на вашем компьютере.<br>
        Без баз данных, без сложных настроек. Просто запусти и общайся!
    </p>
    
    <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 40px;">
        <div style="background: #f7fafc; padding: 20px; border-radius: 10px; width: 200px;">
            <h3>📁 Локальное хранение</h3>
            <p>Все сообщения сохраняются в папке data/ на вашем ПК</p>
        </div>
        
        <div style="background: #f7fafc; padding: 20px; border-radius: 10px; width: 200px;">
            <h3>🔐 Простая регистрация</h3>
            <p>Создайте аккаунт за 30 секунд без сложных форм</p>
        </div>
        
        <div style="background: #f7fafc; padding: 20px; border-radius: 10px; width: 200px;">
            <h3>💬 Общение в реальном времени</h3>
            <p>Отправляйте сообщения и получайте их мгновенно</p>
        </div>
    </div>
    
    <div style="margin-top: 30px;">
        {% if not session.user_id %}
            <a href="{{ url_for('register') }}" class="btn btn-primary" style="font-size: 18px; padding: 15px 30px;">
                🚀 Начать бесплатно
            </a>
            <a href="{{ url_for('login') }}" class="btn btn-secondary" style="font-size: 18px; padding: 15px 30px; margin-left: 10px;">
                🔑 Уже есть аккаунт
            </a>
        {% else %}
            <a href="{{ url_for('chat') }}" class="btn btn-primary" style="font-size: 18px; padding: 15px 30px;">
                💬 Перейти в чат
            </a>
        {% endif %}
    </div>
    
    <div style="margin-top: 40px; padding: 20px; background: #edf2f7; border-radius: 10px;">
        <h3>Как это работает:</h3>
        <ol style="text-align: left; max-width: 600px; margin: 20px auto;">
            <li>Зарегистрируйте двух пользователей (в разных браузерах)</li>
            <li>Войдите под обоими пользователями</li>
            <li>Найдите друг друга через поиск в чате</li>
            <li>Начните общение!</li>
            <li>Все сообщения сохранятся в папке data/messages/</li>
        </ol>
    </div>
</div>
{% endblock %}