<?php
require __DIR__ . '/_boot.php';
require __DIR__ . '/partials/mobile_member_shell.php';
$user = pyrk_mobile_member_guard($user);
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#087f5b">
  <title>Rewards | Pyrk</title>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/mobile_member_app.css?v=1">
</head>
<body class="pyrk-native-app mobile-member-app" data-mobile-page="rewards">
<?php pyrk_mobile_member_header('Rewards', 'Badges, points, and prize claims'); ?>
<main class="mobile-member-main">
  <section class="mobile-reward-wallet">
    <div><p class="mobile-kicker">Available balance</p><strong id="mobileRewardPoints">0</strong><span>loyalty points</span></div>
    <button class="mobile-icon-button" type="button" data-mobile-refresh>↻</button>
  </section>

  <section class="mobile-section-block">
    <div class="mobile-page-intro compact"><div><p class="mobile-kicker">Prize marketplace</p><h2>Available rewards</h2></div></div>
    <div id="mobileRewardStore" class="mobile-reward-grid"><div class="mobile-loading-card">Loading rewards…</div></div>
  </section>

  <section class="mobile-section-block">
    <div class="mobile-page-intro compact"><div><p class="mobile-kicker">Achievements</p><h2>My badges</h2></div></div>
    <div id="mobileBadgesList" class="mobile-badge-list"><div class="mobile-loading-card">Loading badges…</div></div>
  </section>

  <section class="mobile-section-block">
    <div class="mobile-page-intro compact"><div><p class="mobile-kicker">Redemptions</p><h2>My prize claims</h2></div></div>
    <div id="mobileRewardClaims" class="mobile-card-list"><div class="mobile-loading-card">Loading claims…</div></div>
  </section>
</main>
<?php pyrk_mobile_member_dock('rewards'); ?>
<script>window.PYRK_API_BASE='../api'; window.PYRK_CSRF='<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>';</script>
<script src="assets/js/api.js"></script>
<script src="assets/js/mobile_member_app.js?v=1"></script>
</body>
</html>
