<?php
$settings = json_decode(file_get_contents('data/settings.json'), true);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
</head>
<body>
    <header class="header">
        <!-- Top Bar -->
        <div class="top-bar">
            <div class="container" style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
                <div class="top-bar-info">
                    <span style="margin-right: 20px;"><i class="fas fa-phone-alt"></i> <?php echo htmlspecialchars($settings['phone']); ?></span>
                    <span><i class="fas fa-envelope"></i> <?php echo htmlspecialchars($settings['email']); ?></span>
                </div>
                <div class="top-bar-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>

        <!-- Main Nav -->
        <div class="container nav">
            <a href="index.php" class="logo" style="display: flex; align-items: center;">
                <img src="<?php echo $settings['logo_url']; ?>" alt="<?php echo htmlspecialchars($settings['site_title']); ?> Logo" style="height: 40px; margin-right: 15px; filter: brightness(0) invert(1);" class="header-logo-img">
                <span class="logo-text"><?php echo htmlspecialchars($settings['site_title']); ?></span>
            </a>
            
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
            
            <ul class="nav-links">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About Us</a></li>
                <li><a href="projects.php">Projects</a></li>
                <li><a href="contact.php">Contacts</a></li>
            </ul>
        </div>
    </header>
    
    <script>
        // Adjust logo color on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('.header');
            const logoImg = document.querySelector('.header-logo-img');
            if (window.scrollY > 50) {
                if(logoImg) logoImg.style.filter = 'none';
            } else {
                if(logoImg) logoImg.style.filter = 'brightness(0) invert(1)';
            }
        });
    </script>
</body>
</html>
