export async function loadArena() {
  const ui = document.querySelector(".building-ui");

  ui.innerHTML = `
<div id="arena-ui">

  <div class="arena-title">⚔️ Kampfarena</div>
  <p class="arena-subtitle">Wähle deinen Kampfmodus</p>

  <div class="arena-modes">

    <div class="arena-mode-card" data-mode="1v1">
      <div class="arena-mode-icon">🗡️</div>
      <div class="arena-mode-label">1v1</div>
      <div class="arena-mode-desc">Einzelkampf – Beweis deine Stärke im Duell</div>
    </div>

    <div class="arena-mode-card" data-mode="2v2">
      <div class="arena-mode-icon">⚔️</div>
      <div class="arena-mode-label">2v2</div>
      <div class="arena-mode-desc">Verbünde dich mit einem Kameraden im Kampf</div>
    </div>

    <div class="arena-mode-card" data-mode="4v4">
      <div class="arena-mode-icon">🛡️</div>
      <div class="arena-mode-label">4v4</div>
      <div class="arena-mode-desc">Schlachtruf – Führe deine Truppe zum Sieg</div>
    </div>

  </div>

</div>
`;

  initArenaModes();
}

function initArenaModes() {
  document.querySelectorAll(".arena-mode-card").forEach((card) => {
    card.addEventListener("click", () => {
      const mode = card.dataset.mode;
      // TODO: Ziel noch nicht definiert
      console.log("Arena Modus gewählt:", mode);
    });
  });
}