<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Math Quest Adventure - Empower Academy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" id="landingPage">
  <div class="emoji">🧮🎯</div>
  <h1>Math Quest Adventure</h1>
  <p class="subtitle">Belajar matematik sambil bermain! Tahun 1-6</p>

  <div class="section">
    <h3>📋 Pilih Tahap (Tahun):</h3>
    <div class="grade-grid">
      <button class="grade-btn" data-grade="1">Tahun 1</button>
      <button class="grade-btn" data-grade="2">Tahun 2</button>
      <button class="grade-btn" data-grade="3">Tahun 3</button>
      <button class="grade-btn" data-grade="4">Tahun 4</button>
      <button class="grade-btn" data-grade="5">Tahun 5</button>
      <button class="grade-btn" data-grade="6">Tahun 6</button>
    </div>
  </div>

  <div class="section">
    <h3>🎯 Pilih Topik:</h3>
    <div class="topic-grid">
      <button class="topic-btn" data-topic="tambah">➕ Tambah</button>
      <button class="topic-btn" data-topic="tolak">➖ Tolak</button>
      <button class="topic-btn" data-topic="darab">✖️ Darab</button>
      <button class="topic-btn" data-topic="bahagi">➗ Bahagi</button>
      <button class="topic-btn" data-topic="pecahan">🔢 Pecahan</button>
    </div>
  </div>

  <div class="badge-list" id="badgeList"></div>

  <button class="start-btn" id="startBtn" disabled>Mula Pengembaraan! 🚀</button>

  <div class="features">
    <h3>✨ Apa yang anda akan belajar:</h3>
    <ul>
      <li>📝 Jalan kira langkah-demi-langkah setiap soalan</li>
      <li>💡 Tip dan panduan utk berfikir</li>
      <li>🏆 Mata + badge utk pencapaian</li>
      <li>📊 Progres tracking</li>
      <li>🎨 Menarik dan interaktif!</li>
    </ul>
  </div>
</div>

<!-- GAME PAGE -->
<div class="container hidden" id="gamePage">
  <div class="header">
    <a href="?" class="back-btn">← Kembali</a>
    <div class="score-box">⭐ Skor: <span id="score">0</span></div>
    <div class="streak-box" id="streakBox">🔥 Streak: <span id="streak">0</span></div>
  </div>

  <div class="badges" id="gameBadges"></div>

  <div class="question-card" id="questionCard">
    <p class="topic-label" id="topicLabel"></p>
    <div class="question" id="question">Memuat soalan...</div>
    <input type="text" class="answer-input" id="answerInput" placeholder="Jawapan" onkeypress="if(event.key==='Enter')checkAnswer()">
    <br>
    <button class="btn btn-primary" onclick="checkAnswer()">Semak Jawapan ✅</button>
    <button class="hint-btn" onclick="showHint()" id="hintBtn">💡 Minta Tip</button>
    <div class="hint hidden" id="hintBox"></div>
  </div>

  <div class="feedback hidden" id="feedback"></div>
  <div class="steps-box hidden" id="stepsBox">
    <h4>📝 Jalan Kira Langkah-demi-Langkah:</h4>
    <ol id="stepsList"></ol>
  </div>

  <button class="btn btn-primary hidden" id="nextBtn" onclick="loadQuestion()">Soalan Seterusnya →</button>
</div>

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