{% extends 'layouts/public.html' %}
{% load static i18n %}

{% block extrahead %}
<link type="text/css" href="{% static 'css/index.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}

  <!-- Hero / Banner -->
  <section class="hero" style="background-image: url('{% if configuracao %}{% if configuracao.imagem_banner %}{{ configuracao.imagem_banner.url }}{% else %}{% static 'assets/img/lineage2-bg.jpg' %}{% endif %}{% else %}{% static 'assets/img/lineage2-bg.jpg' %}{% endif %}'); background-size: cover; background-position: center; padding: 160px 0; text-align: center; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)); backdrop-filter: blur(2px); z-index: 0;"></div>

    <div class="hero-content text-white" style="position: relative; z-index: 1; max-width: 800px; margin: 0 auto;">
      <h1 style="font-size: 4rem; font-weight: bold; color: var(--gold); text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); margin-bottom: 20px;">
        {% if configuracao %}
            {{ configuracao.nome_servidor }}
          {% else %}
            {% trans "Lineage 2 PDL" %}
        {% endif %}
      </h1>
      <p style="font-size: 1.4rem; color: var(--light); margin-bottom: 40px; font-style: italic;">
        {% if configuracao %}
            "{{ configuracao.descricao_servidor }}"
          {% else %}
            {% trans "Onde Lendas Nascem, Heróis Lutam e a Glória É Eterna." %}
        {% endif %}
      </p>
      <a href="#download" class="btn-ruby" style="padding: 15px 40px; font-size: 1.1rem; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(212,175,55,0.4);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
        ⚔️ {% trans "Jogar Agora" %}
      </a>
    </div>

    <div class="hero-overlay-glow" style="position: absolute; top: -100px; left: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,215,0,0.2), transparent 70%); z-index: 0; animation: glow 8s infinite ease-in-out alternate;"></div>

    <style>
      @keyframes glow {
        0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
        100% { transform: translate(100px, 50px) scale(1.2); opacity: 0.1; }
      }
    </style>
  </section>

  <!-- Trailer / Gameplay -->
  <section class="trailer-section">
    <div class="container text-center">
      <h2 class="trailer-title">🎬 {% trans "Trailer Oficial" %}</h2>

      <div class="video-wrapper">
        <div class="video-overlay"></div>
        <iframe src="https://www.youtube.com/embed/{% if configuracao and configuracao.trailer_video_id %}{{ configuracao.trailer_video_id }}{% else %}CsNutvmrHIA?si=2lF1z1jPFkf8uGJB{% endif %}" frameborder="0" allowfullscreen></iframe>
      </div>

      <p class="trailer-description">{% trans "Assista ao trailer e mergulhe no mundo épico do nosso servidor!" %}</p>
    </div>
  </section>

  <!-- Features -->
  <section class="features" id="features" style="padding: 100px 0; background-color: #1f1f1f; text-align: center; position: relative;">
    <div class="container">
      <h2 style="color: var(--gold); margin-bottom: 60px; font-size: 2.5rem; text-shadow: 0 0 10px rgba(212,175,55,0.3);">
        {% trans "O Que Torna Nosso Servidor Único?" %}
      </h2>
      <div class="row justify-content-center">
        <div class="col-md-4 mb-5">
          <div style="background: #1a1a1a; padding: 40px 20px; border-radius: 15px; border: 1px solid rgba(212,175,55,0.3); transition: 0.3s; box-shadow: 0 0 15px rgba(0,0,0,0.5);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            <div style="font-size: 2.5rem; margin-bottom: 20px; color: var(--gold);">⚔️</div>
            <h3 style="color: #fff; margin-bottom: 10px;">{% trans "PvP & Sieges" %}</h3>
            <p style="color: #ccc;">{% trans "Domine castelos, lute por território e mostre sua força no campo de batalha." %}</p>
          </div>
        </div>

        <div class="col-md-4 mb-5">
          <div style="background: #1a1a1a; padding: 40px 20px; border-radius: 15px; border: 1px solid rgba(212,175,55,0.3); transition: 0.3s; box-shadow: 0 0 15px rgba(0,0,0,0.5);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            <div style="font-size: 2.5rem; margin-bottom: 20px; color: var(--gold);">📜</div>
            <h3 style="color: #fff; margin-bottom: 10px;">{% trans "Missões Personalizadas" %}</h3>
            <p style="color: #ccc;">{% trans "Conteúdo exclusivo com recompensas únicas para jogadores dedicados." %}</p>
          </div>
        </div>

        <div class="col-md-4 mb-5">
          <div style="background: #1a1a1a; padding: 40px 20px; border-radius: 15px; border: 1px solid rgba(212,175,55,0.3); transition: 0.3s; box-shadow: 0 0 15px rgba(0,0,0,0.5);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            <div style="font-size: 2.5rem; margin-bottom: 20px; color: var(--gold);">🎉</div>
            <h3 style="color: #fff; margin-bottom: 10px;">{% trans "Eventos & Premiações" %}</h3>
            <p style="color: #ccc;">{% trans "Participe de eventos semanais com itens raros e bônus poderosos." %}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
<!-- Classes Jogáveis -->
<section style="background-color: #1a1a1a; padding: 80px 0; text-align: center;">
  <div class="container">
    <h2 style="color: var(--gold); margin-bottom: 50px; font-size: 2.5rem; text-shadow: 0 0 10px rgba(212,175,55,0.4);">
      {% trans "Escolha Sua Classe" %}
    </h2>
    <div class="row justify-content-center">
      {% for classe in classes_info %}
      <div class="col-md-2 col-6 mb-4">
        <div class="classe-card position-relative"
             data-bs-toggle="modal"
             data-bs-target="#modalClasse{{ forloop.counter }}"
             style="background-color: #0d0d0d; padding: 15px; border: 1px solid rgba(212,175,55,0.2); border-radius: 12px; transition: 0.3s; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.5); cursor: pointer;">
          <img src="{% static 'assets/img/l2/characters/'|add:classe.name|add:'.png' %}" alt="{{ classe }}" class="img-fluid mb-2" style="height: 300px; z-index: 1; position: relative;">
          <p style="color: #ccc; font-weight: 500;">{{ classe.name }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Modais das Classes -->
{% for classe in classes_info %}
<div class="modal fade" id="modalClasse{{ forloop.counter }}" tabindex="-1" aria-labelledby="modalClasseLabel{{ forloop.counter }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content bg-dark text-white border-secondary">
      <div class="modal-header">
        <h5 class="modal-title" id="modalClasseLabel{{ forloop.counter }}">{{ classe.name }}</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% trans 'Fechar' %}"></button>
      </div>
      <div class="modal-body text-center">
        <img src="{% static 'assets/img/l2/characters/'|add:classe.name|add:'.png' %}" alt="{{ classe.name }}" class="img-fluid mb-4" style="max-height: 250px;">
        <p style="color: #ccc;">{{ classe.descricao }}</p>
      </div>
    </div>
  </div>
</div>
{% endfor %}

<!-- Top Clãs Horizontal -->
<section id="top-clans-section">
  <div class="container text-center">
    <h2>{% trans "Top Clãs" %}</h2>

    <!-- Destaque para o 1º colocado -->
    <div class="row justify-content-center mb-5">
      <div class="col-md-4">
        <div class="top-clan-first">
          <h3>🏆 1º</h3>
          <div>
            <strong>{% trans "Clã:" %}</strong> {{ clanes.0.clan_name }}<br>
            <strong>{% trans "Nível:" %}</strong> {{ clanes.0.clan_level }}<br>
            <strong>{% trans "Pontuação de Reputação:" %}</strong> {{ clanes.0.reputation_score }}<br>
            <strong>{% trans "Aliança:" %}</strong> {{ clanes.0.ally_name|default:"Nenhuma" }}<br>
            <strong>{% trans "Personagem:" %}</strong> {{ clanes.0.char_name }}<br>
            <strong>{% trans "Membros:" %}</strong> {{ clanes.0.membros }}
          </div>
        </div>
      </div>
    </div>

    <!-- Demais em grupos de 3 -->
    {% for clan in clanes|slice:"1:" %}
      {% if forloop.first or forloop.counter0|divisibleby:3 %}
        <div class="row justify-content-center mb-4">
      {% endif %}

      <div class="col-md-3 col-sm-6 mb-3">
        <div class="top-clan-card">
          <strong>{{ forloop.counter|add:"1" }}º</strong><br>
          <strong>{% trans "Clã:" %}</strong> {{ clan.clan_name }}<br>
          <strong>{% trans "Nível:" %}</strong> {{ clan.clan_level }}<br>
          <strong>{% trans "Pontuação de Reputação:" %}</strong> {{ clan.reputation_score }}<br>
          <strong>{% trans "Aliança:" %}</strong> {{ clan.ally_name|default:"Nenhuma" }}<br>
          <strong>{% trans "Personagem:" %}</strong> {{ clan.char_name }}<br>
          <strong>{% trans "Membros:" %}</strong> {{ clan.membros }}
        </div>
      </div>

      {% if forloop.counter0|add:"1"|divisibleby:3 or forloop.last %}
        </div>
      {% endif %}
    {% endfor %}
  </div>
</section>

<!-- Contador de jogadores online -->
<section class="online-section">
  <div class="container text-center">
    <h2 class="online-title">
      {% if configuracao %}
        {{ configuracao.jogadores_online_texto }}
      {% else %}
        {% trans "Jogadores online Agora" %}
      {% endif %}
    </h2>
    <div class="online-counter">
      <span class="icon">🧙‍♂️</span>
      <span id="player-count">{{ online }}</span>
      <span class="icon">🗡️</span>
    </div>
    <p class="status-text">{% trans "O campo de batalha está ativo!" %}</p>
  </div>
</section>

<!-- Download -->
<section id="download" style="background-color: #121212; padding: 60px 0; text-align: center;">
  <div class="container">
    <h2 class="online-title">{% trans "Download & Instalação" %}</h2>
    <p style="color: #ccc; margin-bottom: 30px;">{% trans "Baixe agora o cliente e patch oficial e comece sua jornada em nosso servidor." %}</p>
    <a href="{% if configuracao %}{{ configuracao.link_patch }}{% else %}#{% endif %}" class="btn highlight-btn btn-lg me-3">{% trans "Baixar Patch" %}</a>
    <a href="{% if configuracao %}{{ configuracao.link_cliente }}{% else %}#{% endif %}" class="btn highlight-btn btn-lg">{% trans "Baixar Cliente" %}</a>
  </div>
</section>

<!-- Comunidade -->
<section id="comunidade" style="background-color: #121212; padding: 60px 0; text-align: center; display: flex;">
  <div class="container">
    <h2 class="online-title">{% trans "Junte-se à Comunidade" %}</h2>
    <p style="color: #ccc; margin-bottom: 30px;">{% trans "Conecte-se com outros jogadores, tire dúvidas e participe dos eventos via Discord." %}</p>
    <a href="{% if configuracao %}{{ configuracao.link_discord }}{% else %}#{% endif %}" target="_blank" class="custom-btn-ruby" style="max-width: 250px">{% trans "Entrar no Discord" %}</a>
  </div>
</section>

<script>
  document.querySelectorAll('.classe-card').forEach(card => {
    card.addEventListener('click', function () {
      this.classList.toggle('active');
    });
  });
</script>

{% endblock %}