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

  <!-- HEADER -->
  <header class="top-bar">
    <h2>Profile & Settings</h2>
    <a href="dashboard.html" class="back-link">← Back</a>
  </header>

  <!-- PROFILE CARD -->
  <div class="balance-card profile-card">
    <div class="profile-row">
      <div class="avatar large">👤</div>
      <div>
        <h3 id="fullName">User Name</h3>
        <p class="sub" id="phone">+256xxxxxxxxx</p>
        <p class="sub" id="email">user@email.com</p>
      </div>
    </div>
  </div>

  <!-- KYC STATUS -->
  <div class="balance-card">
    <h4>KYC Status</h4>
    <p id="kycStatus" class="kyc-pill pending">Pending</p>
    <button class="btn-primary small" onclick="goToKYC()">
      Manage Verification
    </button>
  </div>

  <!-- LIMITS -->
  <div class="balance-card">
    <h4>Transaction Limits</h4>
    <ul class="limits-list">
      <li>Daily Send: <strong id="sendLimit">—</strong></li>
      <li>Daily Withdraw: <strong id="withdrawLimit">—</strong></li>
    </ul>
  </div>

  <!-- SECURITY -->
  <div class="balance-card">
    <h4>Security</h4>
    <button class="settings-btn">Change PIN</button>
    <button class="settings-btn">Enable Biometrics</button>
  </div>

  <!-- ACCOUNT -->
  <div class="balance-card danger">
    <h4>Account</h4>
    <button class="settings-btn danger-text">Log out</button>
  </div>

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