<!-- Navigation -->
<!-- <nav class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white shadow-lg sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">

      
      <a href="index.php" class="flex items-center space-x-2">
        <i class="fas fa-coins text-yellow-400 text-2xl"></i>
        <span class="font-semibold text-lg tracking-wide">CryptoExchange Pro</span>
      </a>

      
      <div class="hidden md:flex items-center space-x-6">
        <a href="index.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-home"></i> Home
        </a>

        <?php if (Security::isAuthenticated()): ?>
        <a href="dashboard.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-tachometer-alt"></i> Dashboard
        </a>
        <a href="wallet.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'wallet.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-wallet"></i> Wallet
        </a>
        <a href="trading.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'trading.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-exchange-alt"></i> Trading
        </a>
        <a href="markets.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'markets.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-chart-line"></i> Markets
        </a>
        <a href="kyc.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'kyc.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-id-card"></i> Verification
        </a>
        <?php endif; ?>

        <a href="support.php"
          class="flex items-center gap-1 hover:text-yellow-400 transition <?php echo basename($_SERVER['PHP_SELF']) == 'support.php' ? 'text-yellow-400 font-medium' : ''; ?>">
          <i class="fas fa-headset"></i> Support
        </a>
      </div>

      
      <div class="hidden md:flex items-center space-x-4">
        <?php if (Security::isAuthenticated()): ?>
          <?php if (Security::isAdmin()): ?>
          <a href="admin/index.php" class="px-3 py-1.5 text-sm border border-yellow-400 rounded-lg hover:bg-yellow-400 hover:text-black transition">
            <i class="fas fa-cog"></i> Admin
          </a>
          <?php endif; ?>

          
          <div class="relative">
            <button onclick="toggleUserMenu()" class="flex items-center gap-2 bg-gray-800 px-3 py-1.5 rounded-md hover:bg-gray-700 transition">
              <i class="fas fa-user text-yellow-400"></i>
              <span><?php echo $_SESSION['username']; ?></span>
              <i class="fas fa-chevron-down text-xs"></i>
            </button>

            <div id="userDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white text-gray-800 rounded-lg shadow-xl overflow-hidden">
              <a href="profile.php" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-user-edit mr-2 text-primary"></i> Profile Settings</a>
              <a href="security.php" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-shield-alt mr-2 text-primary"></i> Security</a>
              <a href="transactions.php" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-history mr-2 text-primary"></i> Transaction History</a>
              <a href="logout.php" class="block px-4 py-2 text-red-600 hover:bg-red-50"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a>
            </div>
          </div>

        <?php else: ?>
          <a href="login.php" class="px-4 py-1.5 rounded-md border border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black transition">
            <i class="fas fa-sign-in-alt"></i> Login
          </a>
          <a href="register.php" class="px-4 py-1.5 rounded-md bg-yellow-400 text-black font-medium hover:bg-yellow-300 transition">
            <i class="fas fa-user-plus"></i> Register
          </a>
        <?php endif; ?>
      </div>

      
      <button class="md:hidden text-yellow-400 text-2xl" onclick="toggleMobileMenu()">
        <i class="fas fa-bars"></i>
      </button>
    </div>
  </div>

  
  <div id="mobileMenu" class="hidden md:hidden bg-gray-800 text-white px-4 py-3 space-y-3">
    <a href="index.php" class="block hover:text-yellow-400"><i class="fas fa-home mr-1"></i> Home</a>
    <?php if (Security::isAuthenticated()): ?>
      <a href="dashboard.php" class="block hover:text-yellow-400"><i class="fas fa-tachometer-alt mr-1"></i> Dashboard</a>
      <a href="wallet.php" class="block hover:text-yellow-400"><i class="fas fa-wallet mr-1"></i> Wallet</a>
      <a href="trading.php" class="block hover:text-yellow-400"><i class="fas fa-exchange-alt mr-1"></i> Trading</a>
      <a href="markets.php" class="block hover:text-yellow-400"><i class="fas fa-chart-line mr-1"></i> Markets</a>
      <a href="kyc.php" class="block hover:text-yellow-400"><i class="fas fa-id-card mr-1"></i> Verification</a>
      <?php if (Security::isAdmin()): ?>
      <a href="admin/index.php" class="block hover:text-yellow-400"><i class="fas fa-cog mr-1"></i> Admin</a>
      <?php endif; ?>
      <div class="border-t border-gray-700 my-2"></div>
      <a href="profile.php" class="block hover:text-yellow-400"><i class="fas fa-user-edit mr-1"></i> Profile</a>
      <a href="security.php" class="block hover:text-yellow-400"><i class="fas fa-shield-alt mr-1"></i> Security</a>
      <a href="logout.php" class="block text-red-400 hover:text-red-500"><i class="fas fa-sign-out-alt mr-1"></i> Logout</a>
    <?php else: ?>
      <a href="login.php" class="block hover:text-yellow-400"><i class="fas fa-sign-in-alt mr-1"></i> Login</a>
      <a href="register.php" class="block hover:text-yellow-400"><i class="fas fa-user-plus mr-1"></i> Register</a>
    <?php endif; ?>
    <a href="support.php" class="block hover:text-yellow-400"><i class="fas fa-headset mr-1"></i> Support</a>
  </div>
</nav> -->

<script>
// function toggleMobileMenu() {
//   document.getElementById('mobileMenu').classList.toggle('hidden');
// }
// function toggleUserMenu() {
//   document.getElementById('userDropdown').classList.toggle('hidden');
// }
// document.addEventListener('click', function(e) {
//   const dropdown = document.getElementById('userDropdown');
//   if (dropdown && !e.target.closest('[onclick="toggleUserMenu()"]')) dropdown.classList.add('hidden');
// });
</script>

<!-- Top Announcement Bar -->
<div class="bg-gradient-to-r from-purple-800 via-purple-700 to-purple-900 text-white text-sm text-center py-2 font-medium shadow-md">
  One Powerful Wallet for all Your Crypto Needs. 
  <a href="wallet.php" class="text-yellow-300 hover:text-yellow-400 ml-1 underline underline-offset-2">Explore Here!</a>
  <i class="fas fa-arrow-right ml-1 text-yellow-400"></i>
</div>

<!-- Navigation Bar -->
<nav class="bg-white shadow-md sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">

      <!-- Logo -->
      <a href="index.php" class="flex items-center space-x-2">
        <i class="fas fa-coins text-purple-600 text-2xl"></i>
        <span class="font-extrabold text-lg tracking-wide text-gray-800">CryptoExchange<span class="text-purple-600">Pro</span></span>
      </a>

      <!-- Desktop Menu -->
      <div class="hidden md:flex items-center space-x-6">
        <a href="index.php"
          class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'text-purple-600' : ''; ?>">
          <i class="fas fa-home"></i> Home
        </a>

        <?php if (Security::isAuthenticated()): ?>
          <a href="dashboard.php"
            class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'text-purple-600' : ''; ?>">
            <i class="fas fa-tachometer-alt"></i> Dashboard
          </a>
          <a href="wallet.php"
            class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'wallet.php' ? 'text-purple-600' : ''; ?>">
            <i class="fas fa-wallet"></i> Wallet
          </a>
          <a href="trading.php"
            class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'trading.php' ? 'text-purple-600' : ''; ?>">
            <i class="fas fa-exchange-alt"></i> Trading
          </a>
          <a href="markets.php"
            class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'markets.php' ? 'text-purple-600' : ''; ?>">
            <i class="fas fa-chart-line"></i> Markets
          </a>
          <a href="kyc.php"
            class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'kyc.php' ? 'text-purple-600' : ''; ?>">
            <i class="fas fa-id-card"></i> Verification
          </a>
        <?php endif; ?>

        <a href="support.php"
          class="flex items-center gap-1 transition font-medium text-gray-700 hover:text-purple-600 <?php echo basename($_SERVER['PHP_SELF']) == 'support.php' ? 'text-purple-600' : ''; ?>">
          <i class="fas fa-headset"></i> Support
        </a>
      </div>

      <!-- User Actions -->
      <div class="hidden md:flex items-center space-x-4">
        <?php if (Security::isAuthenticated()): ?>
          <?php if (Security::isAdmin()): ?>
          <a href="admin/index.php" class="px-3 py-1.5 text-sm border border-purple-600 rounded-lg hover:bg-purple-600 hover:text-white text-purple-600 transition">
            <i class="fas fa-cog"></i> Admin
          </a>
          <?php endif; ?>

          <!-- User Dropdown -->
          <div class="relative">
            <button onclick="toggleUserMenu()" class="flex items-center gap-2 bg-purple-100 px-3 py-1.5 rounded-md hover:bg-purple-200 transition">
              <i class="fas fa-user text-purple-700"></i>
              <span class="text-gray-800"><?php echo $_SESSION['username']; ?></span>
              <i class="fas fa-chevron-down text-xs text-gray-600"></i>
            </button>

            <div id="userDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white text-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-100">
              <a href="profile.php" class="block px-4 py-2 hover:bg-gray-50"><i class="fas fa-user-edit mr-2 text-purple-600"></i> Profile Settings</a>
              <a href="security.php" class="block px-4 py-2 hover:bg-gray-50"><i class="fas fa-shield-alt mr-2 text-purple-600"></i> Security</a>
              <a href="transactions.php" class="block px-4 py-2 hover:bg-gray-50"><i class="fas fa-history mr-2 text-purple-600"></i> Transaction History</a>
              <a href="logout.php" class="block px-4 py-2 text-red-600 hover:bg-red-50"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a>
            </div>
          </div>

        <?php else: ?>
          <a href="login.php" class="text-gray-700 hover:text-purple-700 font-medium">
            <i class="fas fa-sign-in-alt"></i> Login
          </a>
          <a href="register.php" class="px-4 py-2 rounded-md bg-purple-600 text-white font-semibold hover:bg-purple-700 transition">
            <i class="fas fa-user-plus"></i> Register
          </a>
        <?php endif; ?>
      </div>

      <!-- Mobile Menu Button -->
      <button class="md:hidden text-purple-700 text-2xl" onclick="toggleMobileMenu()">
        <i class="fas fa-bars"></i>
      </button>
    </div>
  </div>

  <!-- Mobile Dropdown -->
  <div id="mobileMenu" class="hidden md:hidden bg-purple-50 text-gray-800 px-4 py-3 space-y-3">
    <a href="index.php" class="block hover:text-purple-600"><i class="fas fa-home mr-1"></i> Home</a>
    <?php if (Security::isAuthenticated()): ?>
      <a href="dashboard.php" class="block hover:text-purple-600"><i class="fas fa-tachometer-alt mr-1"></i> Dashboard</a>
      <a href="wallet.php" class="block hover:text-purple-600"><i class="fas fa-wallet mr-1"></i> Wallet</a>
      <a href="trading.php" class="block hover:text-purple-600"><i class="fas fa-exchange-alt mr-1"></i> Trading</a>
      <a href="markets.php" class="block hover:text-purple-600"><i class="fas fa-chart-line mr-1"></i> Markets</a>
      <a href="kyc.php" class="block hover:text-purple-600"><i class="fas fa-id-card mr-1"></i> Verification</a>
      <?php if (Security::isAdmin()): ?>
      <a href="admin/index.php" class="block hover:text-purple-600"><i class="fas fa-cog mr-1"></i> Admin</a>
      <?php endif; ?>
      <div class="border-t border-gray-200 my-2"></div>
      <a href="profile.php" class="block hover:text-purple-600"><i class="fas fa-user-edit mr-1"></i> Profile</a>
      <a href="security.php" class="block hover:text-purple-600"><i class="fas fa-shield-alt mr-1"></i> Security</a>
      <a href="logout.php" class="block text-red-600 hover:text-red-700"><i class="fas fa-sign-out-alt mr-1"></i> Logout</a>
    <?php else: ?>
      <a href="login.php" class="block hover:text-purple-600"><i class="fas fa-sign-in-alt mr-1"></i> Login</a>
      <a href="register.php" class="block hover:text-purple-600"><i class="fas fa-user-plus mr-1"></i> Register</a>
    <?php endif; ?>
    <a href="support.php" class="block hover:text-purple-600"><i class="fas fa-headset mr-1"></i> Support</a>
  </div>
</nav>

<script>
function toggleMobileMenu() {
  document.getElementById('mobileMenu').classList.toggle('hidden');
}
function toggleUserMenu() {
  document.getElementById('userDropdown').classList.toggle('hidden');
}
document.addEventListener('click', function(e) {
  const dropdown = document.getElementById('userDropdown');
  if (dropdown && !e.target.closest('[onclick="toggleUserMenu()"]')) dropdown.classList.add('hidden');
});
</script>
