@extends('layouts.app')

@section('content')
    <div class="page-shell">
        <header class="topbar">
            <a class="brand" href="#top">
                <span class="brand-mark"></span>
                <span>
                    <strong>{{ $realm['server_name'] }}</strong>
                    <small>{{ $realm['tagline'] }}</small>
                </span>
            </a>

            <nav class="topnav">
                <a href="#about">О сервере</a>
                <a href="#features">Преимущества</a>
                <a href="#start">Как начать</a>
                <a href="#register">Регистрация</a>
            </nav>

            <div class="topbar-actions">
                @auth
                    <a class="button button--ghost" href="{{ route('cabinet.index') }}">Личный кабинет</a>

                    @if (auth()->user()->canAccessAdminPanel())
                        <a class="button button--ghost" href="{{ route('admin.accounts.index') }}">Админка</a>
                    @endif
                @else
                    <a class="button button--ghost" href="{{ route('login') }}">Войти</a>
                @endauth
            </div>
        </header>

        <main>
            <section class="hero" id="top">
                <div class="hero-copy">
                    <span class="eyebrow">Wrath of the Lich King • Прогрессия • PvE</span>
                    <h1>Добро пожаловать на {{ $realm['server_name'] }}</h1>
                    <p class="hero-text">
                        Классический Нордскол с персональной прогрессией, гибкой сложностью под состав группы,
                        собственным лаунчером и комфортным стартом без лишней рутины. Создай аккаунт, настрой
                        клиент и заходи в игру на {{ $realm['realm_name'] }}.
                    </p>

                    <div class="hero-actions">
                        <a class="button button--gold" href="#register">Создать аккаунт</a>
                        <a class="button button--ghost" href="#start">Как войти в игру</a>
                    </div>

                    <div class="highlight-grid">
                        @foreach ($highlights as $highlight)
                            <article class="highlight-card">
                                <strong>{{ $highlight['value'] }}</strong>
                                <span>{{ $highlight['label'] }}</span>
                            </article>
                        @endforeach
                    </div>
                </div>

                <aside class="hero-panel" id="register">
                    <div class="panel-header">
                        <span class="eyebrow">Регистрация</span>
                        <h2>Создать игровой аккаунт</h2>
                        <p>Укажи инвайт-код, логин, почту и пароль — аккаунт будет готов к входу в игру сразу после регистрации.</p>
                    </div>

                    @if (session('registration_success'))
                        <div class="alert alert--success">{{ session('registration_success') }}</div>
                    @endif

                    @if (session('registration_error'))
                        <div class="alert alert--error">{{ session('registration_error') }}</div>
                    @endif

                    <form class="register-form" method="POST" action="{{ route('game-account.store') }}">
                        @csrf

                        <label class="form-field">
                            <span>Логин</span>
                            <input
                                class="form-control @error('username') is-invalid @enderror"
                                type="text"
                                name="username"
                                value="{{ old('username') }}"
                                autocomplete="username"
                                placeholder="Moonwalker"
                                maxlength="32"
                                required
                            >
                            <small>Используй латиницу и цифры. Регистр символов при входе не имеет значения.</small>
                            @error('username')<span class="form-error">{{ $message }}</span>@enderror
                        </label>

                        <label class="form-field">
                            <span>Email</span>
                            <input
                                class="form-control @error('email') is-invalid @enderror"
                                type="email"
                                name="email"
                                value="{{ old('email') }}"
                                autocomplete="email"
                                placeholder="player@example.com"
                                maxlength="255"
                                required
                            >
                            @error('email')<span class="form-error">{{ $message }}</span>@enderror
                        </label>

                        <label class="form-field">
                            <span>Инвайт-код</span>
                            <input
                                class="form-control @error('invite_code') is-invalid @enderror"
                                type="text"
                                name="invite_code"
                                value="{{ old('invite_code') }}"
                                autocomplete="off"
                                placeholder="ABCD-EFGH-IJKL"
                                maxlength="32"
                                required
                            >
                            <small>Регистрация доступна только по действующему инвайт-коду.</small>
                            @error('invite_code')<span class="form-error">{{ $message }}</span>@enderror
                        </label>

                        <div class="form-row">
                            <label class="form-field">
                                <span>Пароль</span>
                                <input
                                    class="form-control @error('password') is-invalid @enderror"
                                    type="password"
                                    name="password"
                                    autocomplete="new-password"
                                    placeholder="Минимум 8 символов"
                                    maxlength="32"
                                    required
                                >
                            </label>

                            <label class="form-field">
                                <span>Повтор пароля</span>
                                <input
                                    class="form-control @error('password') is-invalid @enderror"
                                    type="password"
                                    name="password_confirmation"
                                    autocomplete="new-password"
                                    placeholder="Повтори пароль"
                                    maxlength="32"
                                    required
                                >
                            </label>
                        </div>

                        @error('password')<span class="form-error form-error--stack">{{ $message }}</span>@enderror

                        <label class="checkbox-field @error('terms') is-invalid @enderror">
                            <input type="checkbox" name="terms" value="1" {{ old('terms') ? 'checked' : '' }}>
                            <span>Я принимаю правила сервера и согласен на обработку данных для создания игрового аккаунта.</span>
                        </label>
                        @error('terms')<span class="form-error form-error--stack">{{ $message }}</span>@enderror

                        <button class="button button--gold button--full" type="submit">Зарегистрировать аккаунт</button>
                    </form>

                    <div class="server-card">
                        <div>
                            <span class="eyebrow">Информация о мире</span>
                            <h3>{{ $realm['realm_name'] }}</h3>
                        </div>

                        <dl>
                            <div>
                                <dt>Клиент</dt>
                                <dd>{{ $realm['client_version'] }}</dd>
                            </div>
                            <div>
                                <dt>Опыт</dt>
                                <dd>{{ $realm['rates']['experience'] }}</dd>
                            </div>
                            <div>
                                <dt>Золото</dt>
                                <dd>{{ $realm['rates']['gold'] }}</dd>
                            </div>
                            <div>
                                <dt>Профессии</dt>
                                <dd>{{ $realm['rates']['profession'] }}</dd>
                            </div>
                        </dl>
                    </div>
                </aside>
            </section>

            <section class="section" id="about">
                <div class="section-heading">
                    <span class="eyebrow">О сервере</span>
                    <h2>Wrath of the Lich King, где важен путь персонажа</h2>
                    <p>Сервер сочетает поэтапную прогрессию, комфортный PvE для малого состава и удобные игровые мелочи, которые экономят время.</p>
                </div>

                <div class="pillar-grid">
                    @foreach ($pillars as $pillar)
                        <article class="content-card">
                            <h3>{{ $pillar['title'] }}</h3>
                            <p>{{ $pillar['description'] }}</p>
                        </article>
                    @endforeach
                </div>
            </section>

            <section class="section section--split" id="features">
                @foreach ($featureRows as $feature)
                    <article class="feature-card">
                        <span class="eyebrow">{{ $feature['eyebrow'] }}</span>
                        <h2>{{ $feature['title'] }}</h2>
                        <p>{{ $feature['description'] }}</p>

                        <ul class="feature-points">
                            @foreach ($feature['points'] as $point)
                                <li>{{ $point }}</li>
                            @endforeach
                        </ul>
                    </article>
                @endforeach
            </section>

            <section class="section">
                <div class="section-heading">
                    <span class="eyebrow">Игровые особенности</span>
                    <h2>Сервер собран вокруг комфорта, но не теряет дух классики</h2>
                    <p>Основные системы уже настроены под комфортную игру: прогрессия по персонажу, гибкая сложность инстов и быстрый сбор добычи.</p>
                </div>

                <div class="adventure-grid">
                    @foreach ($adventures as $adventure)
                        <article class="adventure-card">
                            <h3>{{ $adventure['title'] }}</h3>
                            <p>{{ $adventure['description'] }}</p>
                        </article>
                    @endforeach
                </div>
            </section>

            <section class="section start-section" id="start">
                <div class="section-heading">
                    <span class="eyebrow">С чего начать</span>
                    <h2>Как начать играть</h2>
                    <p>Аккаунт, собственный лаунчер и несколько простых действий — после этого можно заходить в игру.</p>
                </div>

                <div class="steps-grid">
                    @foreach ($steps as $index => $step)
                        <article class="step-card">
                            <span class="step-index">0{{ $index + 1 }}</span>
                            <h3>{{ $step['title'] }}</h3>
                            <p>{{ $step['description'] }}</p>
                        </article>
                    @endforeach
                </div>

                <div class="realmlist-box">
                    <span class="eyebrow">Адрес сервера</span>
                    <pre>{{ $realm['realmlist'] }}</pre>
                </div>
            </section>
        </main>

        <footer class="footer">
            <div>
                <strong>{{ $realm['server_name'] }}</strong>
                <p>Русскоязычный сервер Wrath of the Lich King с акцентом на комфортный PvE</p>
            </div>

            <a class="button button--ghost" href="#register">Перейти к регистрации</a>
        </footer>
    </div>
@endsection