{% extends "base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<main>
  <section class="hero">
    <div class="container hero-grid">
      <div class="hero-text">
        <span class="eyebrow">Мрачное фэнтези · интерактивная проза</span>
        <h1>Ваш выбор — клинок, который меняет судьбу.</h1>
        <p class="hero-lead">
          Пройдите историю в духе «Ведьмака»: выбирайте действия прямо в диалоге, проходите проверки навыков,
          собирайте добычу и отслеживайте квесты в удобном журнале.
        </p>
        <div class="hero-actions">
          {% if character %}
          <a class="btn btn-primary btn-lg" href="{% url 'story' %}">Продолжить сюжет</a>
          <a class="btn btn-outline-light btn-lg" href="{% url 'character_detail' character.id %}">Профиль героя</a>
          {% else %}
          <a class="btn btn-primary btn-lg" href="{% url 'character_create' %}">Создать героя</a>
          <a class="btn btn-outline-light btn-lg" href="{% url 'story' %}">Посмотреть пролог</a>
          {% endif %}
        </div>
        <div class="hero-tags">
          <span>Выборы и последствия</span>
          <span>Сцены с проверками</span>
          <span>Лут и экипировка</span>
          <span>Перки и развитие</span>
        </div>
      </div>
      <div class="hero-card">
        <div class="glass-card">
          <h3>Статус похода</h3>
          {% if character %}
          <div class="stat-grid">
            <div>
              <p class="stat-label">Герой</p>
              <p class="stat-value">{{ character.name }}</p>
            </div>
            <div>
              <p class="stat-label">Уровень</p>
              <p class="stat-value">Lv {{ character.level }}</p>
            </div>
            <div>
              <p class="stat-label">Ви́гор</p>
              <p class="stat-value">{{ character.vigor }}</p>
            </div>
            <div>
              <p class="stat-label">Фокус</p>
              <p class="stat-value">{{ character.focus }}</p>
            </div>
            <div>
              <p class="stat-label">Алхимия</p>
              <p class="stat-value">{{ character.alchemy }}</p>
            </div>
          </div>
          <a class="btn btn-outline-light w-100" href="{% url 'story' %}">Открыть текущую сцену</a>
          {% else %}
          <p class="muted">
            Создайте персонажа, чтобы открыть сюжет, журнал заданий и инвентарь.
          </p>
          <a class="btn btn-outline-light w-100" href="{% url 'character_create' %}">Начать пролог</a>
          {% endif %}
        </div>
        <div class="hero-ornament"></div>
      </div>
    </div>
  </section>

  <section class="container section-grid">
    <div class="section-card">
      <h2>Текущие задания</h2>
      {% if character %}
        {% if quests %}
        <ul class="info-list">
          {% for quest in quests %}
          <li>
            <a href="{% url 'quest_detail' quest.id %}">{{ quest.title }}</a>
            <span class="badge bg-dark-subtle text-light">{{ quest.get_status_display }}</span>
          </li>
          {% endfor %}
        </ul>
        <a class="text-link" href="{% url 'quest_list' %}">Открыть весь журнал →</a>
        {% else %}
        <p class="muted">В журнале пока пусто — начните сюжет, чтобы получить первое задание.</p>
        {% endif %}
      {% else %}
      <p class="muted">Создайте героя, чтобы получать квесты и отслеживать последствия.</p>
      {% endif %}
    </div>
    <div class="section-card">
      <h2>Инвентарь и экипировка</h2>
      {% if character %}
        {% if inventory %}
        <ul class="info-list">
          {% for entry in inventory %}
          <li>
            <span>{{ entry.item.name }}</span>
            <span class="badge bg-dark-subtle text-light">{{ entry.item.get_slot_display }}</span>
          </li>
          {% endfor %}
        </ul>
        <a class="text-link" href="{% url 'inventory' %}">Управлять лутом →</a>
        {% else %}
        <p class="muted">Пока нет предметов. Пройдите пролог, чтобы получить добычу.</p>
        {% endif %}
      {% else %}
      <p class="muted">Лут и экипировка появятся после создания персонажа.</p>
      {% endif %}
    </div>
    <div class="section-card">
      <h2>Как работает выбор</h2>
      <p class="muted">
        Каждая сцена — это диалог. Вы выбираете действие, и система бросает проверку навыка.
        Успех открывает лучшие сцены и редкий лут, провал запускает опасные ветки.
      </p>
      <div class="stat-grid">
        <div>
          <p class="stat-label">Бросок</p>
          <p class="stat-value">d20 + навык</p>
        </div>
        <div>
          <p class="stat-label">Порог</p>
          <p class="stat-value">Сцена</p>
        </div>
      </div>
      <a class="text-link" href="{% url 'story' %}">Перейти к сцене →</a>
    </div>
  </section>
</main>
{% endblock %}