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

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

{% block stylesheets %}
<style>
  .home-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
  }

  /* 4 cartes par ligne max. Les lignes incomplètes (ex. 7 cartes = 4 + 3)
     sont automatiquement centrées grâce à justify-content: center + flex-wrap. */
  .home-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    max-width: calc(4 * 240px + 3 * 24px);
    margin: 0 auto;
  }

  .home-card {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(22, 27, 34, 0.85);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 28px;
    text-decoration: none;
    color: var(--text);
    backdrop-filter: blur(6px);
    transition: border-color .2s, transform .2s, box-shadow .2s;
    cursor: pointer;
  }
  .home-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(240, 136, 62, 0.15);
  }

  .home-card-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .home-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .home-card-icon svg {
    width: 72px;
    height: 72px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
  }

  .home-card-desc {
    font-size: .85rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.55;
  }

  .home-card-cta {
    margin-top: 4px;
    padding: 8px 22px;
    border-radius: 6px;
    background: rgba(240, 136, 62, 0.12);
    border: 1px solid rgba(240, 136, 62, 0.35);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s, border-color .15s;
  }
  .home-card:hover .home-card-cta {
    background: rgba(240, 136, 62, 0.22);
    border-color: var(--accent);
  }
</style>
{% endblock %}

{% block body %}
<main class="home-main">
  <div class="home-cards">

    <a href="{{ path('search_index') }}" class="home-card">
      <div class="home-card-icon">
        <img src="{{ asset('images/SearchLogo.png') }}" width="75" height="75" style="object-fit:contain;">
      </div>
      <div class="home-card-title">Encyclopédie</div>
      <div class="home-card-desc">Vous cherchez un objet ? Une pièce d'équipement ? Les effets précis d'un statut ? <br/>C'est par ici que ça se passe !</div>
      <span class="home-card-cta">Rechercher →</span>
    </a>

    <a href="{{ path('characters_index') }}" class="home-card">
      <div class="home-card-icon">
        <img src="{{ asset('images/CharacterLogo.png') }}" width="75" height="75" style="object-fit:contain;">
      </div>
      <div class="home-card-title">Personnages</div>
      <div class="home-card-desc">De quoi est capable votre personnage favori ? Quelle est son activité dominicale préférée ? <br/>Venez le découvrir ici !</div>
      <span class="home-card-cta">Consulter →</span>
    </a>

    <a href="{{ path('enemies_index') }}" class="home-card">
      <div class="home-card-icon">
        <img src="{{ asset('images/EnemyLogo.png') }}" width="75" height="75" style="object-fit:contain;">
      </div>
      <div class="home-card-title">Ennemis</div>
      <div class="home-card-desc">Que vaut ce type qui vous a regardé de travers avant de vous mettre un coup critique ? <br/>Toutes ses infos sont ici !</div>
      <span class="home-card-cta">Consulter →</span>
    </a>

    <a href="{{ path('elements_default') }}" class="home-card">
      <div class="home-card-icon">
        <img src="{{ asset('images/ElementsLogo.png') }}" width="75" height="75" style="object-fit:contain;">
      </div>
      <div class="home-card-title">Éléments</div>
      <div class="home-card-desc">Qui frappe fort sur qui ? Qui résiste à quoi ? <br/>La matrice complète des affinités élémentaires et leurs effets passifs, jeu par jeu !</div>
      <span class="home-card-cta">Explorer →</span>
    </a>

    <a href="{{ path('simulators_index') }}" class="home-card">
      <div class="home-card-icon">
        <img src="{{ asset('images/CalculatorLogo.png') }}" width="75" height="75" style="object-fit:contain;">
      </div>
      <div class="home-card-title">Simulateurs</div>
      <div class="home-card-desc">Comment savoir si cette boule de feu sera efficace contre ce type si je porte cette arme ? <br/>Ces simulateurs sont là pour éclairer votre lanterne !</div>
      <span class="home-card-cta">Simuler →</span>
    </a>

    {% if app.environment == 'dev' %}
    <a href="{{ path(app.user ? 'map_index' : 'player_login') }}" class="home-card">
      <div class="home-card-icon">
        <img src="{{ asset('images/CSIWOLogo.png') }}" width="75" height="75" style="object-fit:contain;">
      </div>
      <div class="home-card-title">CSI World Online</div>
      <div class="home-card-desc">{% if app.user %}Retour dans le monde persistant — la carte t'attend.{% else %}Le MMO Team CSI. <br/>Connecte-toi pour explorer, combattre et faire équipe !{% endif %}</div>
      <span class="home-card-cta">{% if app.user %}Continuer →{% else %}Se connecter →{% endif %}</span>
    </a>
    {% endif %}

    <a href="https://github.com/Darumacho/CSI-Launcher/releases/download/prod/CSILauncher.zip" class="home-card" download>
      <div class="home-card-icon">
        <img src="{{ asset('images/LauncherLogo.png') }}" style="width:125px;height:125px;object-fit:contain;">
      </div>
      <div class="home-card-title">CSI Launcher</div>
      <div class="home-card-desc">Tous les jeux Team CSI réunis au même endroit ! <br/>Téléchargez le launcher officiel</div>
      <span class="home-card-cta">Télécharger →</span>
    </a>

  </div>
</main>
{% endblock %}