{% extends 'base.html.twig' %}

{% block title %}CSI World — Simulateurs{% endblock %}

{% block stylesheets %}
<style>
  main.sim-hub {
    flex: 1;
    padding: 32px 24px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }

  .sim-hub-intro { text-align: center; margin-bottom: 32px; }
  .sim-hub-intro h1 {
    color: var(--text);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 8px 0;
  }
  .sim-hub-intro p {
    color: var(--muted);
    font-size: .92rem;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.55;
  }

  /* ── Grille 2×2 des jeux ── */
  .sim-games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  @media (max-width: 720px) {
    .sim-games-grid { grid-template-columns: 1fr; }
  }

  /* ── Zone d'un jeu (bannière + simulateurs) ── */
  .sim-game-section {
    background: rgba(22, 27, 34, .55);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .sim-game-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .sim-game-title::after {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--border);
  }
  .sim-game-title img {
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border: 2px solid var(--text);
    border-radius: 6px;
    padding: 1px;
  }

  /* ── Cartes simulateurs (une colonne à l'intérieur d'un jeu) ── */
  .sim-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sim-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, transform .15s;
  }
  .sim-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  .sim-card.is-wip {
    border-style: dashed;
  }
  .sim-card.is-wip:hover {
    border-color: var(--muted);
    transform: none;
  }

  .sim-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .sim-card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .sim-card-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }
  .sim-card.is-wip .sim-card-icon img { filter: grayscale(1); opacity: .6; }
  .sim-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
    flex: 1;
  }
  .sim-card.is-wip .sim-card-title { color: var(--muted); }

  .sim-card-desc {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
    flex: 1;
  }

  .sim-card-badge {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(139, 148, 158, .12);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .sim-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: .88rem;
    font-style: italic;
    background: rgba(22, 27, 34, .5);
    border: 1px dashed var(--border);
    border-radius: 10px;
  }
</style>
{% endblock %}

{% block body %}
{# ── Configuration : bannières + simulateurs par jeu ────────────────────────
   Ajouter un simulateur = insérer une entrée `{route, title, desc, wip?}` dans
   la liste du jeu concerné. Les jeux vides affichent un placeholder.        #}
{% set gameBanners = {
  0: 'CSI_Banner.png',
  1: 'CSII_Banner.png',
  2: 'CSR_Banner.png',
  3: 'Narval_Banner.png',
} %}
{% set gameLabels = {0: 'CSI Forever', 1: 'CSII Forever', 2: 'CSI Rogue', 3: 'Narval Souls'} %}
{# Logos partagés — un par type de simulateur, pas par jeu. #}
{% set simulatorLogos = {
  combat:   'BattleSimulatorLogo.png',
  infusion: 'InfusionSimulatorLogo.png',
} %}
{# Ordre des jeux = ordre visuel dans la grille 2×2 (haut-gauche, haut-droit, bas-gauche, bas-droit). #}
{% set simulatorsByGame = {
  0: [
    {
      route: 'calculator_index',
      title: 'Simulateur de combat',
      desc:  'Construisez votre personnage comme bon vous semble pour trouver la combinaison de vos rêves !',
      logo:  'combat',
    },
    {
      route: 'simulator_csi_forever_infusion',
      title: 'Simulateur d\'infusion',
      desc:  'Appliquez une gemme sur une arme pour prévisualiser les changements de stats, les résistances gagnées et les statuts infligés.',
      logo:  'infusion',
    },
  ],
  1: [],
  2: [],
  3: [
    {
      route: 'simulator_narval_souls_combat',
      title: 'Simulateur de combat',
      desc:  'Construisez votre personnage comme bon vous semble pour trouver la combinaison de vos rêves !',
      logo:  'combat',
    },
  ],
} %}

<main class="sim-hub">
  <div class="sim-hub-intro">
    <h1>Simulateurs</h1>
    <p>Outils interactifs pour tester des builds, comparer des synergies et anticiper les combats — organisés par jeu.</p>
  </div>

  <div class="sim-games-grid">
  {% for gameId, sims in simulatorsByGame %}
    <div class="sim-game-section">
      <div class="sim-game-title">
        {% if gameBanners[gameId] is defined %}
          <img src="{{ asset('images/' ~ gameBanners[gameId]) }}"
               alt="{{ gameLabels[gameId] ?? ('Jeu ' ~ gameId) }}">
        {% else %}
          {{ gameLabels[gameId] ?? ('Jeu ' ~ gameId) }}
        {% endif %}
      </div>

      {% if sims is empty %}
        <div class="sim-empty">Aucun simulateur disponible pour le moment.</div>
      {% else %}
        <div class="sim-grid">
          {% for sim in sims %}
            <a href="{{ path(sim.route) }}" class="sim-card {{ sim.wip ?? false ? 'is-wip' }}">
              <div class="sim-card-head">
                <div class="sim-card-icon">
                  {% set logoFile = simulatorLogos[sim.logo] ?? simulatorLogos.combat %}
                  <img src="{{ asset('images/' ~ logoFile) }}" alt="">
                </div>
                <h3 class="sim-card-title">{{ sim.title }}</h3>
              </div>
              <div class="sim-card-desc">{{ sim.desc }}</div>
              {% if sim.wip ?? false %}
                <span class="sim-card-badge">Bientôt disponible</span>
              {% endif %}
            </a>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  {% endfor %}
  </div>
</main>
{% endblock %}