<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Flowpesa — Dashboard</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="dashboard">

  <!-- HEADER -->
  <header class="top-bar">
    <div>
      <p class="greeting" id="greetingText"></p>
      <h2 id="userName">User</h2>
    </div>
    <div class="avatar">👤</div>
  </header>

  <!-- KYC BANNER -->
  <div class="kyc-banner" id="kycBanner">
    <div>
      <strong>Verify your ID</strong>
      <p>Unlock all features and higher limits</p>
    </div>
    <button onclick="goTo('kyc.html')" class="btn-primary small">
      Verify
    </button>
  </div>

  <!-- BALANCE -->
  <div class="balance-card">
    <p>Wallet Balance</p>
    <h1>UGX 0.00</h1>
    <span class="sub">Available balance</span>
  </div>

  <!-- QUICK ACTIONS -->
  <div class="actions-grid">
    <button class="action locked" onclick="blocked()">💸 Send</button>
    <button class="action" onclick="goTo('add-money.html')">➕ Add Money</button>
    <button class="action locked" onclick="blocked()">🏦 Withdraw</button>
    <button class="action" onclick="goTo('transactions.html')">📄 Transactions</button>
    <button class="action locked" onclick="blocked()">💳 Cards</button>
    <button class="action" onclick="goTo('profile.html')">👤 Profile</button>
  </div>

  <!-- BOTTOM NAV -->
  <nav class="bottom-nav">
    <button class="active">🏠</button>
    <button onclick="goTo('transactions.html')">📄</button>
    <button onclick="goTo('profile.html')">👤</button>
  </nav>

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