(function() {
    // Determine path prefix for subfolders if any
    const pathPrefix = '';

    // Create a style element for fixed-top padding
    const style = document.createElement('style');
    style.innerHTML = `
        body { padding-top: 76px; }
    `;
    document.head.appendChild(style);

    // Fetch session details
    fetch(pathPrefix + 'api/csrf_token.php')
        .then(res => res.json())
        .then(data => {
            renderHeader(data, pathPrefix);
            renderFooter(data);
            
            // Dispatch event when ready
            const event = new CustomEvent('public-ready', { detail: data });
            window.dispatchEvent(event);
        })
        .catch(err => {
            console.error('Session check failed', err);
        });

    function renderHeader(data, prefix) {
        const header = document.querySelector('header');
        if (!header) return;

        const siteName = 'EventPortal';
        
        let actionsHtml = '';
        if (data.is_logged_in) {
            actionsHtml = `
                <li class="nav-item"><a class="btn btn-outline-primary btn-sm px-3 fw-bold ms-lg-2" href="${prefix}dashboard.html">Dashboard</a></li>
                <li class="nav-item"><a class="btn btn-primary btn-sm px-3 fw-bold ms-lg-2" href="${prefix}logout.php">Log Out</a></li>
            `;
        } else {
            actionsHtml = `
                <li class="nav-item"><a class="btn btn-outline-primary btn-sm px-3 fw-bold ms-lg-2" href="${prefix}login.html">Log In</a></li>
                <li class="nav-item"><a class="btn btn-primary btn-sm px-3 fw-bold ms-lg-2" href="${prefix}register.html">Register</a></li>
            `;
        }

        header.innerHTML = `
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom shadow-sm py-3 fixed-top">
                <div class="container-fluid px-md-5">
                    <a class="navbar-brand text-primary d-flex align-items-center" href="${prefix}index.html">
                        <i class="bi bi-calendar-event-fill me-2"></i>
                        <span class="fw-bold text-dark">${siteName}</span>
                    </a>
                    
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                        <ul class="navbar-nav align-items-center gap-2 mt-3 mt-lg-0">
                            <li class="nav-item"><a class="nav-link px-3" href="${prefix}index.html">Home</a></li>
                            <li class="nav-item"><a class="nav-link px-3" href="${prefix}public_events.html">Browse Events</a></li>
                            <li class="nav-item"><a class="nav-link px-3" href="${prefix}our_team.html">Our Team</a></li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle px-3" href="#" id="publicDirDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Directories
                                </a>
                                <ul class="dropdown-menu shadow border-0 mt-2" aria-labelledby="publicDirDropdown">
                                    <li><a class="dropdown-item py-2 px-3 rounded" href="${prefix}speakers.html"><i class="bi bi-mic text-success me-2"></i>Keynote Speakers</a></li>
                                    <li><a class="dropdown-item py-2 px-3 rounded" href="${prefix}organizers.html"><i class="bi bi-person-workspace text-info me-2"></i>Event Organizers</a></li>
                                    <li><a class="dropdown-item py-2 px-3 rounded" href="${prefix}sponsors.html"><i class="bi bi-briefcase text-secondary me-2"></i>Corporate Sponsors</a></li>
                                </ul>
                            </li>
                            ${actionsHtml}
                        </ul>
                    </div>
                </div>
            </nav>
        `;
    }

    function renderFooter(data) {
        const footer = document.querySelector('footer');
        if (!footer) return;

        footer.innerHTML = `
            <div class="container-fluid px-md-5 py-4 bg-white border-top mt-auto">
                <div class="row align-items-center justify-content-between g-3">
                    <div class="col-12 col-md-auto text-center text-md-start">
                        <span class="text-secondary small">&copy; 2026 <strong>EventPortal</strong>. All rights reserved.</span>
                    </div>
                    <div class="col-12 col-md-auto text-center text-md-end">
                        <a href="terms.html" class="text-secondary text-decoration-none small me-3">Terms of Service</a>
                        <a href="privacy.html" class="text-secondary text-decoration-none small">Privacy Policy</a>
                    </div>
                </div>
            </div>
        `;
    }
})();
