<?php
// Get current page name to highlight menu items
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!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($page_title) ? $page_title : 'Calligraph HR Consultants'; ?> | Crafting Talent, Shaping Futures</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    
    <style>
        body { font-family: 'Inter', sans-serif; }
        .brand-blue { color: #003366; }
        .bg-brand-blue { background-color: #003366; }
        .text-brand-blue { color: #003366; }
        html { scroll-behavior: smooth; }
        
        /* Smooth Mobile Menu Transition */
        #mobile-menu {
            transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        #mobile-menu.open {
            max-height: 500px; 
            opacity: 1;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 flex flex-col min-h-screen">

    <div class="bg-gray-900 text-white text-xs py-3">
        <div class="container mx-auto px-6 flex justify-center md:justify-start">
            
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-6 text-center sm:text-left">
                <a href="mailto:support@calligraphconsultants.com" class="hover:text-blue-300 transition flex items-center justify-center sm:justify-start">
                    <i class="fas fa-envelope mr-2 text-blue-400"></i> support@calligraphconsultants.com
                </a>
                <span class="hidden sm:inline text-gray-600">|</span>
                <a href="tel:+919309362998" class="hover:text-blue-300 transition flex items-center justify-center sm:justify-start">
                    <i class="fas fa-phone mr-2 text-blue-400"></i> +91-9309362998
                </a>
            </div>

        </div>
    </div>

    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                
                <a href="./" class="text-xl md:text-2xl font-bold brand-blue flex items-center gap-2 z-50 relative">
                    Calligraph<span class="text-gray-500">HR</span>
                </a>
                
                <div class="hidden md:flex space-x-8 font-medium items-center text-sm">
                    <a href="./" class="<?php echo ($current_page == 'index.php') ? 'text-blue-900 font-bold' : 'text-gray-600 hover:text-blue-600'; ?> transition">Home</a>
                    <a href="about" class="<?php echo ($current_page == 'about.php') ? 'text-blue-900 font-bold' : 'text-gray-600 hover:text-blue-600'; ?> transition">About Us</a>
                    <a href="services" class="<?php echo ($current_page == 'services.php') ? 'text-blue-900 font-bold' : 'text-gray-600 hover:text-blue-600'; ?> transition">Services</a>
                    <a href="blog" class="<?php echo ($current_page == 'blog.php' || $current_page == 'post.php') ? 'text-blue-900 font-bold' : 'text-gray-600 hover:text-blue-600'; ?> transition">Blog</a>
                    <a href="careers" class="<?php echo ($current_page == 'careers.php') ? 'text-blue-900 font-bold' : 'text-gray-600 hover:text-blue-600'; ?> transition">Careers</a>
                    
                    <a href="./#contact" class="bg-brand-blue text-white px-5 py-2.5 rounded-lg font-bold hover:bg-blue-800 transition shadow-lg transform hover:-translate-y-0.5">
                        Request Candidates
                    </a>
                </div>

                <button id="mobile-menu-btn" class="md:hidden text-2xl text-brand-blue focus:outline-none z-50 p-2">
                    <i class="fas fa-bars transition-transform duration-300"></i>
                </button>
            </div>
        </div>

        <div id="mobile-menu" class="md:hidden bg-white border-t border-gray-100 absolute w-full shadow-xl">
            <div class="flex flex-col p-4 space-y-2">
                <a href="./" class="block py-3 px-4 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Home</a>
                <a href="about" class="block py-3 px-4 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">About Us</a>
                <a href="services" class="block py-3 px-4 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Services</a>
                <a href="blog" class="block py-3 px-4 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Blog</a>
                <a href="careers" class="block py-3 px-4 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Careers</a>
                
                <div class="pt-4 mt-2 border-t border-gray-100">
                    <a href="./#contact" class="block w-full bg-brand-blue text-white text-center py-4 rounded-lg font-bold shadow-md">
                        Request Candidates
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <script>
        const btn = document.getElementById('mobile-menu-btn');
        const menu = document.getElementById('mobile-menu');
        const icon = btn.querySelector('i');

        // Toggle Menu Function
        btn.addEventListener('click', (e) => {
            e.stopPropagation(); 
            menu.classList.toggle('open');
            
            // Icon Animation
            if (menu.classList.contains('open')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
                icon.style.transform = 'rotate(90deg)';
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
                icon.style.transform = 'rotate(0deg)';
            }
        });

        // Close Menu when clicking outside
        document.addEventListener('click', (e) => {
            if (menu.classList.contains('open') && !menu.contains(e.target) && !btn.contains(e.target)) {
                menu.classList.remove('open');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
                icon.style.transform = 'rotate(0deg)';
            }
        });
    </script>