<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Menu Test - Shubank</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .test-content {
            padding: 20px;
            margin-top: 20px;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- Include Header -->
    <?php include 'header.php'; ?>
    
    <div class="test-content">
        <div class="test-section">
            <h2>📱 Mobile Menu Test Page</h2>
            <p><strong>Instructions:</strong></p>
            <ol>
                <li>Open this page on mobile device or resize browser to mobile width (&lt;768px)</li>
                <li>Look for hamburger menu button (☰) in the top right</li>
                <li>Click the menu button to open mobile navigation</li>
                <li>Verify menu appears centered and doesn't shift to the right</li>
                <li>Test all navigation links</li>
                <li>Close menu by clicking X or outside the menu</li>
            </ol>
        </div>
        
        <div class="test-section">
            <h3>🔧 Mobile Menu Fixes Applied:</h3>
            <ul>
                <li>✅ Fixed mobile nav positioning to prevent right shift</li>
                <li>✅ Added proper viewport width (100vw) and height (100vh)</li>
                <li>✅ Used flexbox layout for proper centering</li>
                <li>✅ Added box-sizing: border-box for consistent width calculation</li>
                <li>✅ Removed problematic padding that caused horizontal shift</li>
                <li>✅ Set proper text alignment for nav links</li>
                <li>✅ Added responsive CSS for different mobile screen sizes</li>
                <li>✅ Prevented horizontal scrolling on mobile</li>
            </ul>
        </div>
        
        <div class="test-section">
            <h3>📊 Test Results:</h3>
            <div id="testResults">
                <p><strong>Screen Width:</strong> <span id="screenWidth"></span>px</p>
                <p><strong>Device Type:</strong> <span id="deviceType"></span></p>
                <p><strong>Menu Status:</strong> <span id="menuStatus">Closed</span></p>
            </div>
        </div>
        
        <div class="test-section">
            <h3>🎯 Expected Behavior:</h3>
            <ul>
                <li>Mobile menu should appear centered on screen</li>
                <li>Menu should not shift to the right side</li>
                <li>Navigation links should be properly aligned</li>
                <li>No horizontal scrolling should occur</li>
                <li>Menu should close when clicking outside or on close button</li>
                <li>Smooth animations should work properly</li>
            </ul>
        </div>
    </div>
    
    <script>
        // Update test information
        function updateTestInfo() {
            document.getElementById('screenWidth').textContent = window.innerWidth;
            
            if (window.innerWidth <= 480) {
                document.getElementById('deviceType').textContent = 'Small Mobile';
            } else if (window.innerWidth <= 768) {
                document.getElementById('deviceType').textContent = 'Mobile/Tablet';
            } else {
                document.getElementById('deviceType').textContent = 'Desktop';
            }
        }
        
        // Monitor menu state
        function monitorMenuState() {
            const mobileNav = document.getElementById('mobileNav');
            if (mobileNav) {
                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            const isActive = mobileNav.classList.contains('active');
                            document.getElementById('menuStatus').textContent = isActive ? 'Open ✅' : 'Closed';
                        }
                    });
                });
                
                observer.observe(mobileNav, {
                    attributes: true,
                    attributeFilter: ['class']
                });
            }
        }
        
        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            updateTestInfo();
            monitorMenuState();
        });
        
        // Update on resize
        window.addEventListener('resize', updateTestInfo);
    </script>
</body>
</html>