<?php
session_start();
if (!isset($_SESSION['user'])) {
  header("Location: index.php");
  exit();
}
$user = $_SESSION['user']; // username, role, id
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MainBoard - Memory Card Game</title>
  <link rel="stylesheet" href="mainboard.css">
</head>

<body>

  <!-- Floating Fruits -->
  <img src="img/banana.png" class="fruit f1">
  <img src="img/apple.png" class="fruit f2">
  <img src="img/watermelon.png" class="fruit f3">
  <img src="img/orange.png" class="fruit f4">
  <img src="img/pineapple.png" class="fruit f5">
  <img src="img/pear.png" class="fruit f6">
  <img src="img/dragonfruit.png" class="fruit f7">

  <div class="container glass">

    <header class="header">
      <div class="user-profile">
        <div class="avatar">
          <?php echo strtoupper(substr($user['username'], 0, 1)); ?>
        </div>
        <div>
          <h2><?php echo $user['username']; ?> <?php echo $user['role'] === 'admin' ? '👑' : '🎮'; ?></h2>
          <p><?php echo $user['role'] === 'admin' ? "Administrator" : "Player"; ?></p>
        </div>
      </div>

      <div class="actions">
        <button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
        <button id="logoutBtn" class="btn gray">🚪 Logout</button>
      </div>
    </header>

    <h1 class="page-title">Pilih Tingkat Kesulitan</h1>

    <div class="stage-grid">
      <button class="stage-btn" onclick="selectStage('easy')">😊 Easy<br>3 x 4</button>
      <button class="stage-btn" onclick="selectStage('medium')">🤔 Medium<br>4 x 4</button>
      <button class="stage-btn" onclick="selectStage('hard')">😤 Hard<br>4 x 5</button>
    </div>
  </div>

<script src="mainboard.js"></script>
</body>
</html>
