<!-- Tailwind Navigation -->
<nav class="bg-white border-b border-gray-200 shadow-sm">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">

      <!-- Brand -->
      <a href="index.php" class="flex items-center space-x-2 text-blue-600 font-semibold text-lg">
        <i class="fas fa-coins"></i>
        <span>CryptoExchange Pro</span>
      </a>

      <!-- Mobile Menu Button -->
      <button onclick="toggleMobileMenu()" class="md:hidden p-2 text-gray-600 hover:text-blue-600 focus:outline-none">
        <i class="fas fa-bars"></i>
      </button>

      <!-- Desktop Menu -->
      <div class="hidden md:flex space-x-4 items-center">
        <a href="index.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
          <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
          <i class="fas fa-home"></i><span>Home</span>
        </a>

        <?php if (Security::isAuthenticated()): ?>
          <a href="dashboard.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
            <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
            <i class="fas fa-tachometer-alt"></i><span>Dashboard</span>
          </a>
          <a href="wallet.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
            <?php echo basename($_SERVER['PHP_SELF']) == 'wallet.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
            <i class="fas fa-wallet"></i><span>Wallet</span>
          </a>
          <a href="trading.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
            <?php echo basename($_SERVER['PHP_SELF']) == 'trading.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
            <i class="fas fa-exchange-alt"></i><span>Trading</span>
          </a>
          <a href="markets.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
            <?php echo basename($_SERVER['PHP_SELF']) == 'markets.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
            <i class="fas fa-chart-line"></i><span>Markets</span>
          </a>
          <a href="kyc.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
            <?php echo basename($_SERVER['PHP_SELF']) == 'kyc.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
            <i class="fas fa-id-card"></i><span>Verification</span>
          </a>
        <?php endif; ?>

        <a href="support.php" class="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-50 
          <?php echo basename($_SERVER['PHP_SELF']) == 'support.php' ? 'bg-blue-100 text-blue-700' : 'text-gray-700'; ?>">
          <i class="fas fa-headset"></i><span>Support</span>
        </a>
      </div>

      <!-- User Menu (Right) -->
      <div class="hidden md:flex items-center space-x-3">
        <?php if (Security::isAuthenticated()): ?>
          <?php if (Security::isAdmin()): ?>
            <a href="admin/index.php" class="text-sm px-3 py-2 rounded-md border border-blue-500 text-blue-600 hover:bg-blue-50">
              <i class="fas fa-cog"></i> Admin
            </a>
          <?php endif; ?>

          <!-- Dropdown -->
          <div class="relative">
            <button onclick="toggleUserMenu()" class="flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm hover:bg-gray-50">
              <i class="fas fa-user text-gray-600"></i>
              <span class="ml-2"><?php echo $_SESSION['username']; ?></span>
              <i class="fas fa-chevron-down ml-1 text-xs"></i>
            </button>
            <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50">
              <a href="profile.php" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                <i class="fas fa-user-edit"></i> Profile Settings
              </a>
              <a href="security.php" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                <i class="fas fa-shield-alt"></i> Security
              </a>
              <a href="transactions.php" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                <i class="fas fa-history"></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"></i> Logout
              </a>
            </div>
          </div>
        <?php else: ?>
          <a href="login.php" class="text-sm px-3 py-2 border border-blue-500 rounded-md text-blue-600 hover:bg-blue-50">
            <i class="fas fa-sign-in-alt"></i> Login
          </a>
          <a href="register.php" class="text-sm px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
            <i class="fas fa-user-plus"></i> Register
          </a>
        <?php endif; ?>
      </div>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 bg-white">
    <div class="px-4 py-3 space-y-2">
      <a href="index.php" class="block text-gray-700 py-2"><i class="fas fa-home"></i> Home</a>

      <?php if (Security::isAuthenticated()): ?>
        <a href="dashboard.php" class="block text-gray-700 py-2"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
        <a href="wallet.php" class="block text-gray-700 py-2"><i class="fas fa-wallet"></i> Wallet</a>
        <a href="trading.php" class="block text-gray-700 py-2"><i class="fas fa-exchange-alt"></i> Trading</a>
        <a href="markets.php" class="block text-gray-700 py-2"><i class="fas fa-chart-line"></i> Markets</a>
        <a href="kyc.php" class="block text-gray-700 py-2"><i class="fas fa-id-card"></i> Verification</a>
        <?php if (Security::isAdmin()): ?>
          <a href="admin/index.php" class="block text-gray-700 py-2"><i class="fas fa-cog"></i> Admin</a>
        <?php endif; ?>

        <div class="border-t border-gray-200 my-2"></div>
        <a href="profile.php" class="block text-gray-700 py-2"><i class="fas fa-user-edit"></i> Profile</a>
        <a href="security.php" class="block text-gray-700 py-2"><i class="fas fa-shield-alt"></i> Security</a>
        <a href="logout.php" class="block text-red-600 py-2"><i class="fas fa-sign-out-alt"></i> Logout</a>
      <?php else: ?>
        <a href="login.php" class="block text-gray-700 py-2"><i class="fas fa-sign-in-alt"></i> Login</a>
        <a href="register.php" class="block text-gray-700 py-2"><i class="fas fa-user-plus"></i> Register</a>
      <?php endif; ?>
      <a href="support.php" class="block text-gray-700 py-2"><i class="fas fa-headset"></i> Support</a>
    </div>
  </div>
</nav>

<!-- Alert Messages -->
<?php if (isset($_SESSION['alert'])): ?>
  <div class="max-w-7xl mx-auto mt-4 px-4">
    <div class="flex items-center justify-between p-4 rounded-md shadow-md 
      <?php echo $_SESSION['alert']['type'] === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 
             ($_SESSION['alert']['type'] === 'danger' ? 'bg-red-50 text-red-700 border border-red-200' : 
             'bg-blue-50 text-blue-700 border border-blue-200'); ?>">
      <div class="flex items-center space-x-3">
        <i class="fas <?php echo $_SESSION['alert']['type'] === 'success' ? 'fa-check-circle' : 
                          ($_SESSION['alert']['type'] === 'danger' ? 'fa-exclamation-triangle' : 'fa-info-circle'); ?>"></i>
        <p class="font-medium"><?php echo $_SESSION['alert']['message']; ?></p>
      </div>
      <button onclick="this.closest('div').remove()" class="text-gray-400 hover:text-gray-600">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  <?php unset($_SESSION['alert']); ?>
<?php endif; ?>

<!-- JS Controls -->
<script>
function toggleMobileMenu() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
}

function toggleUserMenu() {
  const dropdown = document.getElementById('userDropdown');
  dropdown.classList.toggle('hidden');
}

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