<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include_once 'config.php';
include_once 'classes/Security.php';
//define('SITE_URL', 'https://localhost:8080/crypto-app'); 
$defaultTitle = 'HORPEX Pro - Professional Cryptocurrency Trading Platform';
$defaultDescription = 'Professional cryptocurrency exchange platform with advanced P2P trading, secure escrow system, and comprehensive KYC verification. Trade Bitcoin, Ethereum, and other digital assets safely.';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo isset($pageTitle) ? $pageTitle : $defaultTitle; ?></title>
   <title><?php echo isset($pageTitle) ? $pageTitle : $defaultTitle; ?></title>
    <!-- SEO Meta Tags -->
    <meta name="keywords" content="cryptocurrency exchange, bitcoin trading, ethereum, P2P trading, crypto exchange, blockchain, digital currency, secure trading, escrow, KYC verification, professional trading">
    <meta name="author" content="CryptoExchange Pro">
    <meta name="robots" content="index, follow">
  <meta name="description" content="<?php echo isset($pageDescription) ? $pageDescription : $defaultDescription; ?>">
  <meta name="csrf-token" content="<?php echo Security::generateCSRFToken(); ?>">

  <link rel="canonical" href="<?php echo SITE_URL . $_SERVER['REQUEST_URI']; ?>">
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="<?php echo isset($pageTitle) ? $pageTitle : 'CryptoExchange Pro - Professional Cryptocurrency Trading'; ?>">
    <meta property="og:description" content="<?php echo isset($pageDescription) ? $pageDescription : 'Professional cryptocurrency exchange with secure P2P trading and escrow protection.'; ?>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo SITE_URL . $_SERVER['REQUEST_URI']; ?>">
    <meta property="og:image" content="<?php echo SITE_URL; ?>/assets/images/og-image.jpg">
    <meta property="og:site_name" content="CryptoExchange Pro">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo isset($pageTitle) ? $pageTitle : 'CryptoExchange Pro'; ?>">
    <meta name="twitter:description" content="<?php echo isset($pageDescription) ? $pageDescription : 'Professional cryptocurrency exchange with secure P2P trading.'; ?>">
    <meta name="twitter:image" content="<?php echo SITE_URL; ?>/assets/images/twitter-card.jpg">

  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="assets/css/style.css" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-800">

<!-- ====== NAVBAR ====== -->
<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 text-primary font-bold text-lg hover:text-blue-500 transition">
        <i class="fas fa-coins mr-2 text-yellow-500"></i>
        HORPEX Pro
      </a>

      <!-- Desktop Menu -->
      <div class="hidden md:flex space-x-6 items-center">
        <a href="index.php" class="flex items-center space-x-1 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'text-blue-600 font-semibold' : ''; ?>">
          <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 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'text-blue-600 font-semibold' : ''; ?>">
            <i class="fas fa-tachometer-alt"></i><span>Dashboard</span>
          </a>
          <a href="wallet.php" class="flex items-center space-x-1 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'wallet.php' ? 'text-blue-600 font-semibold' : ''; ?>">
            <i class="fas fa-wallet"></i><span>Wallet</span>
          </a>
          <a href="trading.php" class="flex items-center space-x-1 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'trading.php' ? 'text-blue-600 font-semibold' : ''; ?>">
            <i class="fas fa-exchange-alt"></i><span>Trading</span>
          </a>
          <a href="markets.php" class="flex items-center space-x-1 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'markets.php' ? 'text-blue-600 font-semibold' : ''; ?>">
            <i class="fas fa-chart-line"></i><span>Markets</span>
          </a>
          <a href="kyc.php" class="flex items-center space-x-1 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'kyc.php' ? 'text-blue-600 font-semibold' : ''; ?>">
            <i class="fas fa-id-card"></i><span>Verification</span>
          </a>
        <?php endif; ?>

        <a href="support.php" class="flex items-center space-x-1 hover:text-blue-500 <?php echo basename($_SERVER['PHP_SELF']) == 'support.php' ? 'text-blue-600 font-semibold' : ''; ?>">
          <i class="fas fa-headset"></i><span>Support</span>
        </a>

        <!-- User Area -->
        <?php if (Security::isAuthenticated()): ?>
          <?php if (Security::isAdmin()): ?>
            <a href="admin/index.php" class="px-3 py-1 border border-blue-500 rounded-full text-blue-600 hover:bg-blue-50 text-sm flex items-center space-x-1">
              <i class="fas fa-cog"></i><span>Admin</span>
            </a>
          <?php endif; ?>
          
          <!-- Dropdown -->
          <div class="relative" x-data="{ open: false }">
            <button onclick="toggleUserMenu()" class="flex items-center space-x-1 border border-gray-300 px-3 py-1 rounded-full hover:bg-gray-100">
              <i class="fas fa-user text-blue-500"></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-48 bg-white shadow-lg rounded-lg py-2">
              <a href="profile.php" class="block px-4 py-2 text-gray-700 hover:bg-gray-100"><i class="fas fa-user-edit mr-2"></i>Profile</a>
              <a href="security.php" class="block px-4 py-2 text-gray-700 hover:bg-gray-100"><i class="fas fa-shield-alt mr-2"></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 mr-2"></i>Transactions</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-3 py-1 border border-blue-500 rounded-full hover:bg-blue-50 text-blue-600 flex items-center space-x-1">
            <i class="fas fa-sign-in-alt"></i><span>Login</span>
          </a>
          <a href="register.php" class="px-3 py-1 bg-blue-600 text-white rounded-full hover:bg-blue-700 flex items-center space-x-1">
            <i class="fas fa-user-plus"></i><span>Register</span>
          </a>
        <?php endif; ?>
      </div>

      <!-- Mobile Menu Button -->
      <button onclick="toggleMobileMenu()" class="md:hidden flex items-center text-gray-700 hover:text-blue-500">
        <i class="fas fa-bars text-xl"></i>
      </button>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200">
    <div class="flex flex-col space-y-2 p-4">
      <a href="index.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
      <?php if (Security::isAuthenticated()): ?>
        <a href="dashboard.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-tachometer-alt"></i><span>Dashboard</span></a>
        <a href="wallet.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-wallet"></i><span>Wallet</span></a>
        <a href="markets.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Markets</span></a>
        <a href="kyc.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-id-card"></i><span>Verification</span></a>
        <a href="logout.php" class="hover:text-red-600 flex items-center space-x-2"><i class="fas fa-sign-out-alt"></i><span>Logout</span></a>
      <?php else: ?>
        <a href="login.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-sign-in-alt"></i><span>Login</span></a>
        <a href="register.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-user-plus"></i><span>Register</span></a>
      <?php endif; ?>
      <a href="support.php" class="hover:text-blue-500 flex items-center space-x-2"><i class="fas fa-headset"></i><span>Support</span></a>
    </div>
  </div>
</nav>

<script>
function toggleMobileMenu() {
  document.getElementById('mobileMenu').classList.toggle('hidden');
}
function toggleUserMenu() {
  document.getElementById('userDropdown').classList.toggle('hidden');
}
</script>

<!-- ====== FOOTER (Keep your Tailwind version as is) ====== -->
<?php include 'footer_tailwind.php'; ?>
</body>
</html>
