{% extends "layout.html" %}

{% block bodyClass %}page-index{% endblock %}

{% block content %}
  <section class="home-hero">
    <div class="hero-sky" aria-hidden="true">
      <span class="hero-cloud hero-cloud-one"></span>
      <span class="hero-cloud hero-cloud-two"></span>
    </div>

    <div class="home-hero-inner">
      <p class="hero-badge">Minecraft-магазин сервера</p>
      <h2 class="hero-title">
        {{ store.name }}
      </h2>
      <p class="hero-subtitle">
        Донат, ранги и наборы для игроков, которые любят честное выживание,
        сильное сообщество и красивый прогресс без лишней суеты.
      </p>

      {% if config('server-url') %}
        <button class="hero-ip" data-copy="{{ config('server-url') }}">
          <span>IP сервера</span>
          <strong>{{ config('server-url') }}</strong>
          <em>Скопировать</em>
        </button>
      {% endif %}

      <div class="hero-actions">
        <a href="#store-content" class="btn-primary">Открыть магазин</a>

        {% if config('discord-link') %}
          <a href="{{ config('discord-link') }}" target="_blank" class="btn-secondary">Discord</a>
        {% else %}
          <a href="#awesome_things" class="btn-secondary">Что внутри</a>
        {% endif %}
      </div>
    </div>

  </section>

  <section class="stats-section" aria-label="Статистика сервера">
    <div class="stats-container">
      <article class="stat-card reveal">
        <span class="stat-icon stat-icon-online" aria-hidden="true"></span>
        <strong class="stat-number" data-stat-target="24" data-stat-suffix="/7">0</strong>
        <span class="stat-label">сервер открыт</span>
      </article>

      <article class="stat-card reveal">
        <span class="stat-icon stat-icon-chest" aria-hidden="true"></span>
        <strong class="stat-number" data-stat-target="{{ store.categories|length }}">0</strong>
        <span class="stat-label">категорий магазина</span>
      </article>

      <article class="stat-card reveal">
        <span class="stat-icon stat-icon-shield" aria-hidden="true"></span>
        <strong class="stat-number" data-stat-target="99" data-stat-suffix="%">0</strong>
        <span class="stat-label">защита покупок</span>
      </article>

      <article class="stat-card reveal">
        <span class="stat-icon stat-icon-diamond" aria-hidden="true"></span>
        <strong class="stat-number" data-stat-target="1" data-stat-suffix=".21+">0</strong>
        <span class="stat-label">актуальные режимы</span>
      </article>
    </div>
  </section>

  <section id="awesome_things" class="awesome-things">
    <div class="section-heading reveal">
      <p class="section-kicker">Инвентарь возможностей</p>
      <h2>Выбирай стиль игры как предмет в хотбаре</h2>
    </div>

    <div class="mc-inventory reveal" id="mcInventory" aria-label="Возможности сервера">
      <button class="mc-slot selected" type="button" data-feature="rank" aria-label="Ранги">
        <span class="mc-item mc-item-crown"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="kits" aria-label="Наборы">
        <span class="mc-item mc-item-chest"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="survival" aria-label="Выживание">
        <span class="mc-item mc-item-pickaxe"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="pvp" aria-label="PvP">
        <span class="mc-item mc-item-sword"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="cosmetics" aria-label="Косметика">
        <span class="mc-item mc-item-diamond"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="keys" aria-label="Ключи">
        <span class="mc-item mc-item-key"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="events" aria-label="Ивенты">
        <span class="mc-item mc-item-star"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="discord" aria-label="Сообщество">
        <span class="mc-item mc-item-orb"></span>
      </button>
      <button class="mc-slot" type="button" data-feature="support" aria-label="Поддержка">
        <span class="mc-item mc-item-heart"></span>
      </button>
    </div>

    <article class="inventory-feature-box reveal" id="featureBox">
      <div class="inventory-feature-header">
        <span class="inventory-feature-icon mc-item mc-item-crown" id="featureIcon" aria-hidden="true"></span>
        <h3 id="featureTitle">Ранги без хаоса</h3>
      </div>
      <p id="featureDescription">
        Привилегии усиливают комфорт игры, но не ломают баланс сервера.
      </p>
      <ul class="inventory-feature-benefits" id="featureBenefits">
        <li>Понятные бонусы для ежедневной игры</li>
        <li>Красивый префикс и полезные команды</li>
        <li>Покупка быстро проходит через защищенную корзину</li>
      </ul>
    </article>
  </section>

  <section class="home-features" aria-label="Особенности сервера">
    <div class="section-heading reveal">
      <p class="section-kicker">Почему игроки остаются</p>
      <h2>Все нужное для уверенного старта</h2>
    </div>

    <div class="features-grid">
      <article class="feature-card reveal">
        <span class="feature-icon feature-icon-lag" aria-hidden="true"></span>
        <h3>Стабильный онлайн</h3>
        <p>Чистая структура категорий, быстрые покупки и понятные карточки для рангов, ключей и наборов.</p>
      </article>

      <article class="feature-card reveal">
        <span class="feature-icon feature-icon-safe" aria-hidden="true"></span>
        <h3>Честная выдача</h3>
        <p>Покупки аккуратно попадают в корзину, а наборы, подписки и подарки остаются понятными для каждого игрока.</p>
      </article>

      <article class="feature-card reveal">
        <span class="feature-icon feature-icon-world" aria-hidden="true"></span>
        <h3>Живой мир</h3>
        <p>Ивенты, квесты, PvP-зоны и сезонные цели дают повод возвращаться, строить базу и собирать команду.</p>
      </article>
    </div>
  </section>

  {% if config('home-categories') == 'On' %}
    <section class="site-home-categories" aria-label="Категории магазина">
      {% for category in store.categories %}
        <a class="category reveal" href="/category/{{ category.slug ? category.slug : category.id }}">
          {% if category.image != packageImageDefault %}
            <img class="image" src="{{ category.image }}" alt="{{ category.name }}"/>
          {% else %}
            <div class="image image-default"></div>
          {% endif %}

          <span>{{ category.name }}</span>
        </a>
      {% endfor %}
    </section>
  {% endif %}

  <div id="store-content" class="site-content {% if config('home-sidebar') == 'On' %}site-content-widgets{% endif %}">
    <main class="store-text store-lore text-content">
      <p class="section-kicker">Описание сервера</p>
      {{ index.description|raw }}
    </main>

    {% if config('home-sidebar') == 'On' %}
      {% include "sidebar.twig" %}
    {% endif %}
  </div>
{% endblock %}