<?php get_header(); bluesky_navbar('home');
$server_ip  = get_option('bluesky_server_ip','mc.example.com');
$disc_link  = get_option('bluesky_discord_link','#');
$logo_url   = bluesky_get_image('bluesky_logo_url','images/logo.png');
$header_bg  = bluesky_get_image('bluesky_header_bg_url','images/header-background.jpg');
$about_img  = bluesky_get_image('bluesky_about_image_url','images/teambild.png');
$copy_label = get_option('bluesky_copy_ip_btn_label','Copy IP');
$more_label = get_option('bluesky_see_more_btn_label','Siehe mehr');
?>
<style>
#header { background-image: url('<?php echo esc_url($header_bg); ?>') !important; }
#discord { background-image: url('<?php echo esc_url($header_bg); ?>') !important; }
</style>

<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.')); ?></p>
            <div class="buttons">
                <button class="copy-ip"><?php echo esc_html($copy_label); ?></button>
                <a href="<?php echo home_url('/wiki/'); ?>"><button class="how-to-join"><?php echo esc_html($more_label); ?></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" width="40" height="40" alt="Discord"></div>
                    <div class="texts"><h5 class="stat-title">Discord Server</h5><p><span class="stat-number discord-online-users">–</span> Online</p></div>
                </div>
                <div class="stat">
                    <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/images/creeper.png" width="40" height="40" alt="MC"></div>
                    <div class="texts"><h5 class="stat-title">Minecraft Server</h5><p><span class="stat-number minecraft-online-players">–</span> Online</p></div>
                </div>
            </div>
        </div>
    </div>
</section>

<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 und zu erweitern.')); ?></p>
        </div>
        <div class="right">
            <img src="<?php echo esc_url($about_img); ?>" alt="Team">
            <div class="img-background"></div>
        </div>
    </div>
</section>

<section id="minigames">
    <div class="content miniGames-list">
    <?php
    $gq = new WP_Query(['post_type'=>'bluesky_gamemode','posts_per_page'=>-1,'post_status'=>'publish','orderby'=>'menu_order','order'=>'ASC']);
    if ($gq->have_posts()): while($gq->have_posts()): $gq->the_post();
        $svcs = get_post_meta(get_the_ID(),'_bluesky_gamemode_services',true);
        $svcs = $svcs ? array_map('trim',explode(',',$svcs)) : [];
        $img  = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(),'large') : get_template_directory_uri().'/images/survival.png';
    ?>
    <div class="game">
        <div class="game-img">
            <img src="<?php echo esc_url($img); ?>" alt="<?php the_title_attribute(); ?>">
        </div>
        <div class="info">
            <h2 class="section-title"><?php the_title(); ?></h2>
            <div class="game-description">
                <?php the_content(); ?>
                <?php if($svcs): ?><ul class="services"><?php foreach($svcs as $s): ?><li class="service"><?php echo esc_html($s); ?></li><?php endforeach; ?></ul><?php endif; ?>
            </div>
        </div>
    </div>
    <?php endwhile; wp_reset_postdata();
    else: ?>
    <div class="game">
        <div class="game-img"><img src="<?php echo get_template_directory_uri(); ?>/images/survival.png" alt="Survival"></div>
        <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 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">
        <div class="game-img"><img src="<?php echo get_template_directory_uri(); ?>/images/survival-minigames-image.jpg" alt="Spielerwelten"></div>
        <div class="info"><h2 class="section-title">Spielerwelten</h2><div class="game-description"><p>Jede Spielerwelt beginnt mit einer Größe von 20x20 Blöcken, begrenzt durch eine World Border. Mit Ingame-Währung kannst du sie nach und nach erweitern.</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>

<section id="discord">
    <div class="content">
        <h2 class="section-title">
        <?php
        $txt = 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", $txt);
        foreach ($lines as $i => $line) {
            echo preg_replace_callback('/\b(Problem|Discord|discord)\b/', fn($m) => '<span>'.esc_html($m[0]).'</span>', esc_html($line));
            if ($i < count($lines)-1) echo '<br>';
        }
        ?>
        </h2>
        <a href="<?php echo esc_url($disc_link); ?>"><button class="join-discord">Join Discord</button></a>
    </div>
</section>

<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 wertvolle Belohnungen!')); ?></p>
        </div>
        <div class="links voteLinks">
        <?php
        $vq = new WP_Query(['post_type'=>'bluesky_vote','posts_per_page'=>-1,'post_status'=>'publish']);
        if ($vq->have_posts()): while($vq->have_posts()): $vq->the_post();
            $vu = get_post_meta(get_the_ID(),'_bluesky_vote_url',true);
            $vd = get_post_meta(get_the_ID(),'_bluesky_vote_description',true)?:'Klicke hier um jetzt zu Voten.';
        ?>
        <a href="<?php echo esc_url($vu); ?>" 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($vd); ?></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>



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