<div class="match-card" *ngIf="latestMatch">
  <div class="match-background">
    <img src="./assets/duel.webp" alt="Escrime" class="background-image" />
    <div class="image-overlay"></div>
  </div>

  <div class="match-header">
    <div class="match-weapon">
      <i class="sword-icon">⚔️</i>
      <span class="weapon-type">{{ latestMatch.weapon }}</span>
    </div>
    <div
      class="match-status"
      [ngClass]="'status-' + getMatchStateColor(latestMatch.state)"
    >
      <span class="status-dot"></span>
      {{ getMatchStateLabel(latestMatch.state) }}
    </div>
  </div>

  <div class="match-versus">
    <div class="fencer fencer-left">
      <div class="fencer-name">
        {{ player1?.name }} {{ player1?.firstName }}
      </div>
      <div class="fencer-club">{{ player1?.club }}</div>
      <div class="score">{{ latestMatch.score1 }}</div>
    </div>

    <div class="vs-divider">
      <span class="vs-text">VS</span>
      <div class="crossed-swords">⚔️</div>
    </div>

    <div class="fencer fencer-right">
      <div class="fencer-name">
        {{ player2?.name }} {{ player2?.firstName }}
      </div>
      <div class="fencer-club">{{ player2?.club }}</div>
      <div class="score">{{ latestMatch.score2 }}</div>
    </div>
  </div>

  <div class="combat-arena">
    <div class="arena-header">
      <span class="arena-title">ARENA COMBAT</span>
      <div class="arena-pulse"></div>
    </div>

    <div class="combat-grid">
      <div class="combat-stat venue">
        <div class="stat-icon">
          <div class="location-radar"></div>
          <span>🏛️</span>
        </div>
        <div class="stat-content">
          <span class="stat-label">BATTLEFIELD</span>
          <span class="stat-value">{{ latestMatch.city }}</span>
          <span class="stat-sub">{{ latestMatch.country }}</span>
        </div>
        <div class="stat-glow venue-glow"></div>
      </div>

      <div class="combat-stat referee">
        <div class="stat-icon">
          <div class="referee-badge"></div>
          <span>⚖️</span>
        </div>
        <div class="stat-content">
          <span class="stat-label">COMBAT JUDGE</span>
          <span class="stat-value"
            >{{ referee?.name }} {{ referee?.firstName }}</span
          >
          <span class="stat-sub">OFFICIAL REFEREE</span>
        </div>
        <div class="stat-glow referee-glow"></div>
      </div>

      <div
        class="combat-stat timing"
        *ngIf="latestMatch?.state === MatchState.NOT_STARTED"
      >
        <div class="stat-icon">
          <div class="time-ring"></div>
          <span>⚡</span>
        </div>
        <div class="stat-content">
          <span class="stat-label">COMBAT START</span>
          <span class="stat-value">{{ getTimeUntilMatch() }}</span>
          <span class="stat-sub">LIVE BATTLE</span>
        </div>
        <div class="stat-glow timing-glow"></div>
      </div>
      <div
        class="combat-stat funfact"
        *ngIf="latestMatch?.state !== MatchState.NOT_STARTED"
      >
        <div class="stat-icon">
          <span>🎯</span>
        </div>
        <div class="stat-content">
          <span class="stat-label">FUN FACT</span>
          <span class="stat-value">
            Saviez-vous que l'escrime est l'un des sports les plus anciens aux
            Jeux Olympiques ?
          </span>
          <span class="stat-sub">Inspiration et tradition au rendez-vous</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="weapons-container">
   <div class="weapon-card" style="background-image: url('./assets/epee_escrime.jpg');">
    <h2>Épée</h2>
    <p>Tout le corps est cible valable. Pas de priorité.</p>
  </div>

  <div class="weapon-card" style="background-image: url('./assets/fleuret_escrime.jpg');">
    <h2>Fleuret</h2>
    <p>Cible : torse. La priorité s'applique.</p>
  </div>

  <div class="weapon-card" style="background-image: url('./assets/sabre_escrime.jpg');">
    <h2>Sabre</h2>
    <p>Cible : haut du corps. Priorité en cas de touche simultanée.</p>
  </div>

  <div class="weapon-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
  <h2>Sabre Laser</h2>
  <p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.</p>
</div>

</div>


<app-sponsort></app-sponsort>
