<?php 
    $settingsModel = new \App\Models\SettingsModel();
    $siteLogo = $settingsModel->getSetting('site_logo');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Saanvi Infratech' ?> | Modern Construction Solutions</title>
    <meta name="description" content="Saanvi Infratech - Leading the way in modern construction, design-build, and infrastructure development.">

    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?= base_url('assets/css/style.css?v=1.4') ?>">
</head>
<body>

    <header class="header">
        <div class="container">
            <nav class="nav">
                <a href="<?= base_url() ?>" class="logo" style="display: flex; align-items: center; gap: 18px; text-decoration: none;">
                    <?php if ($siteLogo): ?>
                        <div style="background: #fff; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 5px; overflow: hidden; border: 2.5px solid var(--primary); flex-shrink: 0; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);">
                            <img src="<?= $siteLogo ?>" alt="Logo" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                        </div>
                    <?php endif; ?>
                    <div style="display: flex; flex-direction: column; line-height: 1;">
                        <span class="logo-text-primary" style="font-size: 1.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Saanvi</span>
                        <span class="logo-text-secondary" style="font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 5px; margin-top: 3px;">Infratech</span>
                    </div>
                </a>




                <ul class="nav-links" id="navLinks">
                    <li><a href="<?= base_url() ?>" class="<?= current_url() == base_url() ? 'active' : '' ?>">Home</a></li>
                    <li><a href="<?= base_url('about') ?>" class="<?= strpos(current_url(), 'about') !== false ? 'active' : '' ?>">About</a></li>
                    <li><a href="<?= base_url('services') ?>" class="<?= strpos(current_url(), 'services') !== false ? 'active' : '' ?>">Services</a></li>
                    <li><a href="<?= base_url('projects') ?>" class="<?= strpos(current_url(), 'projects') !== false ? 'active' : '' ?>">Projects</a></li>
                    <li><a href="<?= base_url('gallery') ?>" class="<?= strpos(current_url(), 'gallery') !== false ? 'active' : '' ?>">Gallery</a></li>
                    <li><a href="<?= base_url('contact') ?>" class="<?= strpos(current_url(), 'contact') !== false ? 'active' : '' ?>">Contact</a></li>
                    <li class="mobile-only-link" style="margin-top: 30px;"><a href="<?= base_url('login') ?>" class="btn-login" style="width: 100%; justify-content: center;"><i class="bi bi-person-lock"></i> Login</a></li>
                </ul>

                <div class="nav-actions">
                    <a href="<?= base_url('login') ?>" class="btn-login desktop-only"><i class="bi bi-person-lock"></i> Login</a>
                    <div class="mobile-toggle" id="mobileToggle" style="align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--primary-soft); border-radius: 12px; transition: all 0.3s;">
                        <i class="bi bi-list" style="font-size: 1.8rem; color: var(--primary);"></i>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <script>
        // Mobile Menu Toggle
        const mobileToggle = document.getElementById('mobileToggle');
        const navLinks = document.getElementById('navLinks');
        
        mobileToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            const icon = mobileToggle.querySelector('i');
            icon.classList.toggle('bi-list');
            icon.classList.toggle('bi-x');
        });

        // Close menu on link click
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                const icon = mobileToggle.querySelector('i');
                icon.classList.add('bi-list');
                icon.classList.remove('bi-x');
            });
        });

        // Header Scroll Effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('.header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
    </script>

    <main>
        <?= $this->renderSection('content') ?>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <div class="logo" style="margin-bottom: 30px;">
                        <a href="<?= base_url() ?>" style="display: flex; align-items: center; gap: 20px; text-decoration: none;">
                            <?php if ($siteLogo): ?>
                                <div style="background: #fff; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; border: 3px solid var(--primary); flex-shrink: 0; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
                                    <img src="<?= $siteLogo ?>" alt="Logo" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                </div>
                            <?php endif; ?>
                            <div style="display: flex; flex-direction: column; line-height: 1;">
                                <span class="logo-text-primary" style="font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Saanvi</span>
                                <span class="logo-text-secondary" style="font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 6px; margin-top: 4px;">Infratech</span>
                            </div>
                        </a>
                    </div>






                    <p style="color: var(--text-muted);">Building the future with excellence and innovation. Our commitment to quality and safety is unparalleled in the industry.</p>
                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="<?= base_url() ?>">Home</a></li>
                        <li><a href="<?= base_url('services') ?>">Our Services</a></li>
                        <li><a href="<?= base_url('projects') ?>">Latest Projects</a></li>
                        <li><a href="<?= base_url('contact') ?>">Contact Us</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Our Services</h4>
                    <ul class="footer-links">
                        <li><a href="#">General Contracting</a></li>
                        <li><a href="#">Design-Build</a></li>
                        <li><a href="#">Renovation</a></li>
                        <li><a href="#">Infrastructure</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Contact Info</h4>
                    <ul class="footer-links">
                        <li><i class="bi bi-geo-alt-fill" style="color: var(--primary);"></i> <?= $settingsModel->getSetting('site_address') ?? '123 Construction Ave, NY 10001' ?></li>
                        <li><i class="bi bi-telephone-fill" style="color: var(--primary);"></i> <?= $settingsModel->getSetting('contact_phone') ?? '+1 (234) 567-890' ?></li>
                        <li><i class="bi bi-envelope-fill" style="color: var(--primary);"></i> <?= $settingsModel->getSetting('contact_email') ?? 'info@saanviinfratech.com' ?></li>
                    </ul>
                    
                    <div style="display: flex; gap: 15px; margin-top: 25px;">
                        <?php 
                            $socials = [
                                ['icon' => 'bi-facebook', 'key' => 'facebook_url'],
                                ['icon' => 'bi-twitter-x', 'key' => 'twitter_url'],
                                ['icon' => 'bi-linkedin', 'key' => 'linkedin_url'],
                                ['icon' => 'bi-instagram', 'key' => 'instagram_url']
                            ];
                            foreach ($socials as $social):
                                $url = $settingsModel->getSetting($social['key']);
                                if ($url):
                        ?>
                            <a href="<?= $url ?>" target="_blank" style="width: 38px; height: 38px; background: var(--bg-alt); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); font-size: 1.1rem; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.05);" onmouseover="this.style.background='var(--primary)'; this.style.color='#fff';" onmouseout="this.style.background='var(--bg-alt)'; this.style.color='var(--text-main)';"
                                <i class="bi <?= $social['icon'] ?>"></i>
                            </a>
                        <?php 
                                endif;
                            endforeach; 
                        ?>
                    </div>
                </div>

            </div>
            <div class="copy">
                &copy; <?= date('Y') ?> Saanvi Infratech. All Rights Reserved.
            </div>

        </div>
    </footer>

    <script src="<?= base_url('assets/js/main.js?v=1.1') ?>"></script>
</body>
</html>
