{% extends "layout.html" %}
{% block content %}
    <div class="logo-wrapper">
        <h2 class="logo-text">MCPanel</h2>
        <p id="quote" class="splash-text"></p>
    </div>

    <div class="tabs">
        {% if is_logged_in %}
            {% if has_server %}
                <a class="tab-button" href="{{ url_for('main.dashboard') }}">Idź do panelu</a>
            {% else %}
                <a class="tab-button" href="{{ url_for('main.setup') }}">Ustaw własny serwer</a>
            {% endif %}
        {% else %}
            <a class="tab-button" href="{{ url_for('main.dashboard') }}">Zaloguj się</a>
        {% endif %}
        <a class="tab-button" href="#news">Wiadomości</a>
    </div>

    <div id="news">
        <!-- Z Tagami jak: WERSJA PANELU, PROBLEM -->
        <h3>Wiadomości:</h3>
        <p>Soon&trade;</p>
    </div>

    <script>
        const quotes = [
            "Twój serwer, Twoje zasady!",
            "Stabilność? Nie znam takiego słowa!",
            "Zero kolejki, tylko gra!",
            "Serwer w 30 sekund. Dosłownie!",
            "Pamiętaj że to BETA!",
        ];

        const quoteTag = document.getElementById("quote");

        function pickQuote() {
            const quote = quotes[Math.floor(Math.random() * quotes.length)];
            quoteTag.textContent = quote;
        }

        pickQuote();
    </script>

    <style>
        .logo-wrapper {
            position: relative;
            text-align: center;
            margin: 50px 0 40px;
        }

        .logo-text {
            font-size: 2.5rem;
            position: relative;
            z-index: 1;
            margin: 0;
        }

        .splash-text {
            position: absolute;
            top: -15px;
            left: 55%;
            transform: rotate(-20deg);
            font-size: 1.1rem;
            color: #ffcc00;
            text-shadow: 2px 2px 3px black;
            font-style: italic;
            white-space: nowrap;
            animation: pulse 1.6s infinite ease-in-out;
            z-index: 2;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1) rotate(-20deg);
            }
            50% {
                transform: scale(1.1) rotate(-20deg);
            }
        }
    </style>
{% endblock %}