<?php
/**
 * Template Name: BlueSky - Startseite
 * Template Post Type: page
 */

get_header();
bluesky_navbar('home');

$server_name = get_option('bluesky_server_name', 'BlueSky');
$server_ip   = get_option('bluesky_server_ip', 'mc.example.com');
$disc_link   = get_option('bluesky_discord_link', '#');
$logo_url    = get_template_directory_uri() . '/images/logo.png';
if (has_custom_logo()) {
    $logo_id = get_theme_mod('custom_logo');
    $logo_url = wp_get_attachment_image_url($logo_id, 'full');
}
?>

<!-- ===== HEADER ===== -->
<section id="header">
    <div class="content">
        <div class="left">
            <div class="server-name">
                <p><?php echo esc_html(get_option('bluesky_header_subtitle', 'Survival Minecraft Server')); ?></p>
                <h1 class="minecraft-server-ip"><?php echo esc_html($server_ip); ?></h1>
            </div>
            <p class="server-description">
                <?php echo esc_html(get_option('bluesky_header_description', 'Erlebe Survival, eigene Welten, Jobs, Haustiere und ein dynamisches Wirtschaftssystem. Tritt unserer Community bei und starte dein Abenteuer.')); ?>
            </p>
            <div class="buttons">
                <button class="copy-ip">Copy IP</button>
                <a href="#faq"><button class="how-to-join">Siehe mehr</button></a>
            </div>
            <p class="ip-copied">War Erfolgreich!</p>
        </div>

        <div class="right">
            <img src="<?php echo esc_url($logo_url); ?>" alt="Server Logo" class="logo-img logo-img-header">
            <div class="stats">
                <div class="stat">
                    <div class="icon">
                        <img src="<?php echo get_template_directory_uri(); ?>/images/discord.png" alt="Discord" width="40" height="40">
                    </div>
                    <div class="texts">
                        <h5 class="stat-title">Discord Server</h5>
                        <p><span class="stat-number discord-online-users">0</span> Online</p>
                    </div>
                </div>
                <div class="stat">
                    <div class="icon">
                        <img src="<?php echo get_template_directory_uri(); ?>/images/creeper.png" alt="Minecraft" width="40" height="40">
                    </div>
                    <div class="texts">
                        <h5 class="stat-title">Minecraft Server</h5>
                        <p><span class="stat-number minecraft-online-players">0</span> Online</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== ABOUT ===== -->
<section id="about">
    <div class="content">
        <div class="left">
            <h2 class="section-title"><?php echo esc_html(get_option('bluesky_about_title1', 'Wer wir sind?')); ?></h2>
            <p class="about-us"><?php echo esc_html(get_option('bluesky_about_text1', 'Wir sind ein engagiertes Team aus drei kreativen Köpfen, die Minecraft lieben!')); ?></p>

            <h2 class="section-title"><?php echo esc_html(get_option('bluesky_about_title2', 'Was macht BlueSky so besonders?')); ?></h2>
            <p class="about-us"><?php echo esc_html(get_option('bluesky_about_text2', 'BlueSky gibt dir die Freiheit, deine eigene Welt zu erstellen.')); ?></p>
        </div>
        <div class="right">
            <img src="<?php echo get_template_directory_uri(); ?>/images/teambild.png" alt="Team">
            <div class="img-background"></div>
        </div>
    </div>
</section>

<!-- ===== SPIELMODI ===== -->
<section id="minigames">
    <div class="content miniGames-list">
        <?php
        $gamemodes = new WP_Query([
            'post_type'      => 'bluesky_gamemode',
            'posts_per_page' => -1,
            'post_status'    => 'publish',
            'orderby'        => 'menu_order',
            'order'          => 'ASC',
        ]);

        if ($gamemodes->have_posts()):
            while ($gamemodes->have_posts()):
                $gamemodes->the_post();
                $services_raw = get_post_meta(get_the_ID(), '_bluesky_gamemode_services', true);
                $services = $services_raw ? array_map('trim', explode(',', $services_raw)) : [];
                $thumb_url = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), 'large') : get_template_directory_uri() . '/images/survival.png';
        ?>
        <div class="game">
            <img src="<?php echo esc_url($thumb_url); ?>" alt="<?php the_title_attribute(); ?>">
            <div class="info">
                <h2 class="section-title"><?php the_title(); ?></h2>
                <div class="game-description">
                    <?php the_content(); ?>
                    <?php if (!empty($services)): ?>
                    <ul class="services">
                        <?php foreach ($services as $service): ?>
                        <li class="service"><?php echo esc_html($service); ?></li>
                        <?php endforeach; ?>
                    </ul>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php
            endwhile;
            wp_reset_postdata();
        else:
        ?>
        <!-- Fallback: Standard-Spielmodi -->
        <div class="game">
            <img src="<?php echo get_template_directory_uri(); ?>/images/survival.png" alt="Survival">
            <div class="info">
                <h2 class="section-title">Survival</h2>
                <div class="game-description">
                    <p>Tauche ein in ein einzigartiges Minecraft-Survival-Erlebnis! Erkunde eine offene Welt voller Möglichkeiten, verdiene Ingame-Geld durch verschiedene Jobs, sammle wertvolle Ressourcen und handle mit anderen Spielern.</p>
                    <ul class="services">
                        <li class="service">Jobs</li>
                        <li class="service">Pet</li>
                        <li class="service">Shops</li>
                        <li class="service">und mehr</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="game">
            <img src="<?php echo get_template_directory_uri(); ?>/images/survival-minigames-image.jpg" alt="Spielerwelten">
            <div class="info">
                <h2 class="section-title">Spielerwelten</h2>
                <div class="game-description">
                    <p>Bevor du deine eigene Welt betreten kannst, musst du sie beim Welten-NPC am Spawn generieren lassen. Jede Spielerwelt beginnt mit einer Größe von 20x20 Blöcken, begrenzt durch eine World Border.</p>
                    <ul class="services">
                        <li class="service">Wirtschaft</li>
                        <li class="service">Lagersystem</li>
                        <li class="service">Erweiterbare Welt</li>
                        <li class="service">Freie Gestaltung</li>
                    </ul>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- ===== DISCORD ===== -->
<section id="discord">
    <div class="content">
        <h2 class="section-title">
            <?php
            $discord_text = get_option('bluesky_discord_section_text', "Du hast ein Problem oder möchtest mit anderen in Kontakt treten?\nTritt unserem Discord bei!");
            $lines = explode("\n", $discord_text);
            foreach ($lines as $i => $line) {
                $parts = preg_split('/\b(Problem|Discord|discord)\b/i', $line, -1, PREG_SPLIT_DELIM_CAPTURE);
                foreach ($parts as $part) {
                    if (preg_match('/^(Problem|Discord|discord)$/i', $part)) {
                        echo '<span>' . esc_html($part) . '</span>';
                    } else {
                        echo esc_html($part);
                    }
                }
                if ($i < count($lines) - 1) echo '<br>';
            }
            ?>
        </h2>
        <a href="<?php echo esc_url($disc_link); ?>" class="discord-link">
            <button class="join-discord">Join Discord</button>
        </a>
    </div>
</section>

<!-- ===== VOTE ===== -->
<section id="vote">
    <div class="content">
        <div class="info">
            <h2 class="section-title">Warum Voten?</h2>
            <p class="section-description">
                <?php echo esc_html(get_option('bluesky_vote_description', 'Durchs Voten erhältst du nicht nur wertvolle Belohnungen, sondern auch eine zeitbegrenzte Premium-Berechtigung mit zahlreichen Vorteilen!')); ?>
            </p>
        </div>
        <div class="links voteLinks">
            <?php
            $votes = new WP_Query([
                'post_type'      => 'bluesky_vote',
                'posts_per_page' => -1,
                'post_status'    => 'publish',
            ]);
            if ($votes->have_posts()):
                while ($votes->have_posts()):
                    $votes->the_post();
                    $vote_url  = get_post_meta(get_the_ID(), '_bluesky_vote_url', true);
                    $vote_desc = get_post_meta(get_the_ID(), '_bluesky_vote_description', true) ?: 'Klicke hier um jetzt zu Voten.';
            ?>
            <a href="<?php echo esc_url($vote_url); ?>" class="url" target="_blank" rel="noopener">
                <div class="link">
                    <h5><?php the_title(); ?></h5>
                    <div class="link-description">
                        <p class="description"><?php echo esc_html($vote_desc); ?></p>
                        <div class="icon">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/pfeil.png" width="40" height="40" alt="→">
                        </div>
                    </div>
                </div>
            </a>
            <?php
                endwhile;
                wp_reset_postdata();
            else:
            ?>
            <a href="https://minecraft-server.eu/vote/index/23242" class="url">
                <div class="link">
                    <h5>servers-minecraft</h5>
                    <div class="link-description">
                        <p class="description">Klicke hier um jetzt zu Voten.</p>
                        <div class="icon">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/pfeil.png" width="40" height="40" alt="→">
                        </div>
                    </div>
                </div>
            </a>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- ===== FAQ ===== -->
<section id="faq">
    <div class="content">
        <div class="info">
            <h2 class="section-title">Server <span>FAQs.</span></h2>
            <p class="section-description"><?php echo esc_html(get_option('bluesky_faq_description', 'Meist gestellte Fragen und Antworten')); ?></p>
        </div>
        <div class="accordion faqList">
            <?php
            $faqs = new WP_Query([
                'post_type'      => 'bluesky_faq',
                'posts_per_page' => -1,
                'post_status'    => 'publish',
                'orderby'        => 'menu_order',
                'order'          => 'ASC',
            ]);
            if ($faqs->have_posts()):
                while ($faqs->have_posts()):
                    $faqs->the_post();
            ?>
            <div class="accordion-item">
                <div class="accordion-item-header"><?php the_title(); ?></div>
                <div class="accordion-item-body">
                    <div class="accordion-item-body-content"><?php the_content(); ?></div>
                </div>
            </div>
            <?php
                endwhile;
                wp_reset_postdata();
            else:
            ?>
            <div class="accordion-item">
                <div class="accordion-item-header">Wie bekomme ich meine eigene Welt?</div>
                <div class="accordion-item-body">
                    <div class="accordion-item-body-content">Du kannst deine eigene Welt am Spawn über einen NPC namens "Welten" betreten.</div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php bluesky_footer(); ?>
<?php get_footer(); ?>
