@php($props = $page['props'])
@if ($page['component'] === 'Landing/Main')
    <main>
        <section class="hero">
            <div class="wrap hero-inner">
                <div class="hero-pretitle">MoonWell · PvP сервер WoW Vanilla {{ $props['realm']['client_version'] }}</div>
                <h1 class="h-display hero-title">История Азерота в твоём темпе<span class="ornament">— Лунный колодец —</span></h1>
                <p class="hero-tagline">Вернись в классический Азерот — в одиночку или с небольшим отрядом.</p>
                <p>{{ $props['realm']['name'] }} · {{ $props['realm']['mode'] }}</p>
                <div class="hero-cta">
                    <a href="{{ $props['playUrl'] }}" class="btn btn-primary">Начни играть</a>
                    <a href="#about" class="btn btn-ghost">Узнай больше</a>
                </div>
            </div>
        </section>
        <section id="about" class="wrap">
            <h2 class="h-display">Эпоха за эпохой</h2>
            <p>MoonWell — русскоязычный PvP сервер World of Warcraft Vanilla {{ $props['realm']['client_version'] }}. Развивай героя до 60-го уровня и исследуй классический Азерот: оригинальные зоны, подземелья и рейды.</p>
            <p>Исследуй опасные земли, готовься к первым рейдам и возвращайся к приключению тогда, когда тебе удобно. Здесь не нужно подстраиваться под общий прогресс сервера.</p>
            <img src="{{ asset('landing.png') }}" alt="Концепт-арт: вход в Лунный колодец, туман и силуэт ночного эльфа" width="1086" height="1448" loading="lazy">
        </section>
        <section id="join" class="wrap">
            <h2 class="h-display">Начни своё приключение</h2>
            <p>Создай игровой аккаунт и установи клиент World of Warcraft {{ $props['realm']['client_version'] }} через лаунчер MoonWell.</p>
            <a href="{{ $props['auth']['login_url'] }}">Войти в личный кабинет</a>
        </section>
        <section class="wrap">
            <h2 class="h-display">Новости сервера</h2>
            @foreach ($props['posts'] as $post)
                <article>
                    <h3><a href="{{ $post['url'] }}">{{ $post['title'] }}</a></h3>
                    <p>{{ $post['excerpt'] }}</p>
                </article>
            @endforeach
            <a href="{{ $props['newsIndexUrl'] }}">Все новости</a>
        </section>
        <footer class="wrap">
            @foreach (['offer' => 'Публичная оферта', 'privacy' => 'Политика обработки персональных данных', 'rules' => 'Правила проекта'] as $key => $label)
                @if ($props['legalUrls'][$key])
                    <a href="{{ $props['legalUrls'][$key] }}">{{ $label }}</a>
                @endif
            @endforeach
        </footer>
    </main>
@elseif ($page['component'] === 'News/Index')
    <main class="wrap portal-news-index">
        <a href="{{ $props['urls']['home'] }}">MoonWell — главная</a>
        <header class="portal-news-index__hero">
            <h1 class="h-display">Новости и обновления</h1>
            <p class="lead">События MoonWell, патчноуты, дневники разработки и важные объявления проекта.</p>
        </header>
        @forelse ($props['articles']['data'] as $article)
            <article>
                <h2><a href="{{ $article['url'] }}">{{ $article['title'] }}</a></h2>
                <p>{{ $article['date'] }}</p>
                <p>{{ $article['excerpt'] }}</p>
            </article>
        @empty
            <p>Первая новость появится здесь после публикации.</p>
        @endforelse
        @if ($props['articles']['last_page'] > 1)
            <nav aria-label="Страницы новостей">
                @foreach ($props['articles']['links'] as $link)
                    @if ($link['url'])
                        <a href="{{ $link['url'] }}">{{ $loop->first ? 'Назад' : ($loop->last ? 'Вперёд' : $link['label']) }}</a>
                    @endif
                @endforeach
            </nav>
        @endif
    </main>
@elseif ($page['component'] === 'News/Show')
    <article class="wrap portal-news-page">
        <a href="{{ $props['article']['back_url'] }}">Все новости</a>
        <header class="portal-news-hero">
            <h1 class="h-display">{{ $props['article']['title'] }}</h1>
            <p>{{ $props['article']['date'] }}</p>
            <p class="lead">{{ $props['article']['excerpt'] }}</p>
        </header>
        @if ($props['article']['image_url'])
            <img class="portal-news-cover" src="{{ $props['article']['image_url'] }}" alt="{{ $props['article']['title'] }}">
        @endif
        <div class="portal-news-body">
            @foreach (preg_split('/\n{2,}/', str_replace(["\r\n", "\r"], "\n", $props['article']['body'])) as $paragraph)
                @if (trim($paragraph) !== '')
                    <p>{{ trim($paragraph) }}</p>
                @endif
            @endforeach
        </div>
        @if ($props['moreNews'])
            <section>
                <h2>Другие новости</h2>
                @foreach ($props['moreNews'] as $article)
                    <h3><a href="{{ $article['url'] }}">{{ $article['title'] }}</a></h3>
                    <p>{{ $article['excerpt'] }}</p>
                @endforeach
            </section>
        @endif
    </article>
@endif