<?php
// Start session if not already started
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><?= isset($page_title) ? $page_title . ' - Gau Seva Foundation' : 'Gau Seva Foundation' ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Header Styles */
        .site-header {
            background: linear-gradient(135deg, #2c5f2d 0%, #1a3a1a 100%);
            padding: 0.8rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        .header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .logo i {
            font-size: 1.8rem;
            color: #ffd700;
        }

        .logo h1 {
            color: white;
            font-size: 1.3rem;
            font-weight: 700;
        }

        .logo span {
            font-size: 0.7rem;
            color: #ffd700;
            display: block;
            margin-top: -5px;
        }

        .nav-menu {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .nav-menu a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.9rem;
        }

        .nav-menu a:hover {
            background: rgba(255,215,0,0.2);
            transform: translateY(-2px);
        }

        .nav-menu a.active {
            background: rgba(255,215,0,0.3);
            color: #ffd700;
        }

        .btn-login {
            background: #ffd700;
            color: #1a3a1a !important;
        }

        .btn-login:hover {
            background: #ffed4a;
        }

        .btn-register {
            background: transparent;
            border: 1px solid #ffd700;
            color: #ffd700 !important;
        }

        .btn-register:hover {
            background: #ffd700;
            color: #1a3a1a !important;
        }

        .user-dropdown {
            position: relative;
            display: inline-block;
        }

        .user-dropdown-btn {
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .user-dropdown-btn:hover {
            background: rgba(255,215,0,0.2);
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background: white;
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            border-radius: 10px;
            z-index: 1001;
            overflow: hidden;
        }

        .dropdown-content a {
            color: #333;
            padding: 0.8rem 1rem;
            display: block;
            text-decoration: none;
            font-size: 0.85rem;
            border-bottom: 1px solid #eee;
        }

        .dropdown-content a:hover {
            background: #f0f2f5;
            color: #2c5f2d;
        }

        .dropdown-content a:last-child {
            border-bottom: none;
        }

        .user-dropdown:hover .dropdown-content {
            display: block;
        }

        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .site-header {
                padding: 0.8rem 1rem;
            }

            .menu-toggle {
                display: block;
            }

            .nav-menu {
                display: none;
                width: 100%;
                flex-direction: column;
                align-items: center;
                padding: 1rem 0;
            }

            .nav-menu.show {
                display: flex;
            }

            .nav-menu a {
                width: 100%;
                text-align: center;
            }

            .user-dropdown {
                width: 100%;
            }

            .user-dropdown-btn {
                width: 100%;
                justify-content: center;
            }

            .dropdown-content {
                position: static;
                width: 100%;
                margin-top: 0.5rem;
            }
        }
    </style>
</head>
<body>
<header class="site-header">
    <div class="header-container">
        <a href="index.php" class="logo">
            <i class="fas fa-cow"></i>
            <div>
                <h1>Gau Seva Foundation</h1>
                <span>Save Cows, Serve Humanity</span>
            </div>
        </a>

        <button class="menu-toggle" onclick="toggleMenu()">
            <i class="fas fa-bars"></i>
        </button>

        <div class="nav-menu" id="navMenu">
            <a href="index.php" class="<?= basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : '' ?>">
                <i class="fas fa-home"></i> Home
            </a>
            <a href="#features" class="<?= strpos($_SERVER['PHP_SELF'], 'index.php') !== false ? '' : '' ?>">
                <i class="fas fa-star"></i> Features
            </a>
            <a href="#transactions" class="<?= strpos($_SERVER['PHP_SELF'], 'index.php') !== false ? '' : '' ?>">
                <i class="fas fa-history"></i> Transactions
            </a>
            <a href="#contact" class="<?= strpos($_SERVER['PHP_SELF'], 'index.php') !== false ? '' : '' ?>">
                <i class="fas fa-envelope"></i> Contact
            </a>
            
            <?php if(isset($_SESSION['user_id'])): ?>
                <div class="user-dropdown">
                    <button class="user-dropdown-btn">
                        <i class="fas fa-user-circle"></i> 
                        <?= htmlspecialchars($_SESSION['username'] ?? 'Account') ?>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <?php if($_SESSION['role'] == 'admin'): ?>
                            <a href="admin/dashboard.php"><i class="fas fa-tachometer-alt"></i> Admin Dashboard</a>
                        <?php else: ?>
                            <a href="user/dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
                            <a href="user/profile.php"><i class="fas fa-user"></i> My Profile</a>
                            <a href="user/view_id_card.php"><i class="fas fa-id-card"></i> ID Card</a>
                            <a href="user/submit_kyc.php"><i class="fas fa-upload"></i> Submit KYC</a>
                            <a href="user/upload_payment.php"><i class="fas fa-donate"></i> Donate</a>
                        <?php endif; ?>
                        <a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
                    </div>
                </div>
            <?php else: ?>
                <a href="login.php" class="btn-login"><i class="fas fa-sign-in-alt"></i> Login</a>
                <a href="register.php" class="btn-register"><i class="fas fa-user-plus"></i> Register</a>
            <?php endif; ?>
        </div>
    </div>
</header>

<script>
    function toggleMenu() {
        const navMenu = document.getElementById('navMenu');
        navMenu.classList.toggle('show');
    }

    // Close menu when clicking outside
    document.addEventListener('click', function(event) {
        const navMenu = document.getElementById('navMenu');
        const menuToggle = document.querySelector('.menu-toggle');
        if (!navMenu.contains(event.target) && !menuToggle.contains(event.target)) {
            navMenu.classList.remove('show');
        }
    });
</script>