<main class="welcome-shell">
  <div class="clouds-container">
    <div class="cloud cloud-left">
      <img src="arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
    </div>
    <div class="plane plane-left">
      <img src="arabian-chess/plane.png" alt="Plane" class="plane-body" />
      <img src="arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
    </div>
    <div class="cloud cloud-right">
      <div class="gif-with-halo">
        <img src="arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
      </div>
    </div>
  </div>
  <section class="welcome-card">
    <h1>Welcome to NowChess</h1>
    <p>Pick a mode to begin.</p>

    <div class="mode-grid">
      <button type="button" class="mode mode-active" (click)="toggleDifficultySelector()" [disabled]="creating">
        <span>Bot</span>
        <small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
      </button>

      @if (showDifficultySelector) {
        <div class="difficulty-selector">
          <p>Select difficulty:</p>
          <div class="difficulty-buttons">
            <button type="button" class="difficulty-btn easy" (click)="startVsBot('easy')" [disabled]="creating">
              Easy
            </button>
            <button type="button" class="difficulty-btn medium" (click)="startVsBot('medium')" [disabled]="creating">
              Medium
            </button>
            <button type="button" class="difficulty-btn hard" (click)="startVsBot('hard')" [disabled]="creating">
              Hard
            </button>
          </div>
        </div>
      }

      <button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
        <span>1 vs 1</span>
        <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
      </button>

      <button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
        <span>Join Game</span>
        <small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
      </button>
    </div>

    @if (showJoinGameForm) {
      <div class="join-game-form">
        <p>Enter the game ID:</p>
        <div class="join-game-input-group">
          <input
            type="text"
            class="join-game-input"
            [(ngModel)]="gameIdInput"
            placeholder="Paste game ID here"
            [disabled]="joiningGame"
            (keyup.enter)="joinGame()"
          />
          <button
            type="button"
            class="join-game-btn join"
            (click)="joinGame()"
            [disabled]="joiningGame || !gameIdInput.trim()"
          >
            {{ joiningGame ? 'Joining...' : 'Join' }}
          </button>
          <button
            type="button"
            class="join-game-btn cancel"
            (click)="clearJoinGameForm()"
            [disabled]="joiningGame"
          >
            Cancel
          </button>
        </div>
      </div>
    }

    @if (errorMessage) {
      <p class="error">{{ errorMessage }}</p>
    }
  </section>
</main>
