document.addEventListener('DOMContentLoaded', () => {
    // Add Favicon
    const favicon = document.createElement('link');
    favicon.rel = 'icon';
    favicon.href = 'https://konn3kt.teallvbs.xyz/logo.jpeg';
    document.head.appendChild(favicon);

    // Generate Sidebar HTML
    const sidebarHtml = `
        <div class="sidebar-header">
            <div class="sidebar-logo"><img src="https://konn3kt.teallvbs.xyz/logo.jpeg" alt="k"></div>
            <div class="sidebar-title">konn3kt</div>
        </div>
        <nav class="sidebar-nav">
            <a href="index.html" class="nav-item" data-page="index">Introduction</a>
            <a href="getting-started.html" class="nav-item" data-page="getting-started">Getting Started</a>
            <a href="pairing.html" class="nav-item" data-page="pairing">Pairing Your Device</a>
            <a href="dashboard.html" class="nav-item" data-page="dashboard">Dashboard Overview</a>
            <a href="device-overview.html" class="nav-item" data-page="device-overview">Device Overview</a>
            <a href="drive-playback.html" class="nav-item" data-page="drive-playback">Drive Playback</a>
            <a href="files-view.html" class="nav-item" data-page="files-view">Files & Data</a>
            <a href="live-view.html" class="nav-item" data-page="live-view">Live View & Tools</a>
            <a href="mobile-interface.html" class="nav-item" data-page="mobile-interface">Mobile Interface</a>
            <a href="settings.html" class="nav-item" data-page="settings">Device Settings</a>
        </nav>
    `;

    const sidebar = document.createElement('aside');
    sidebar.className = 'sidebar';
    sidebar.innerHTML = sidebarHtml;
    document.querySelector('.layout').insertBefore(sidebar, document.querySelector('.main-content'));

    // Highlight active link
    const path = window.location.pathname.split('/').pop();
    const currentPage = path.replace('.html', '') || 'index';
    const activeLink = document.querySelector(`.nav-item[data-page="${currentPage}"]`);
    if (activeLink) {
        activeLink.classList.add('active');
    }

    // Add Footer
    const footer = document.createElement('footer');
    footer.innerHTML = `
        <div class="footer-top">
            <div class="footer-logo">
                <img src="https://konn3kt.teallvbs.xyz/logo.jpeg" alt="konn3kt logo" class="footer-logo-img">
                <span class="footer-logo-text">Konn3kt</span>
            </div>
            <p class="footer-tagline">Join today, we are live! Built for the community with <span style="color: #ef4444;">&hearts;</span></p>
            <a href="https://discord.konn3kt.com" class="footer-link">discord.konn3kt.com</a>
        </div>
        <div class="footer-divider"></div>
        <div class="footer-bottom">
            <div class="footer-copyright">
                <p>Copyright 2026 Teal Lvbs Inc. All rights reserved.</p>
                <p class="footer-disclaimer">IQ.Pilot is a trademark of Teal Lvbs Inc. Konn3kt is a third-party service and is not affiliated with, endorsed by, or associated with comma.ai. "openpilot" is a trademark of comma.ai. All other trademarks are the property of their respective owners.</p>
            </div>
            <div class="footer-links">
                <a href="https://konn3kt.com/privacy">Privacy</a>
                <a href="https://konn3kt.com/tos">Terms</a>
                <a href="https://konn3kt.com/tos">Cookies</a>
            </div>
        </div>
    `;
    document.querySelector('.main-content').appendChild(footer);

    // Mobile toggle
    const toggleBtn = document.createElement('button');
    toggleBtn.className = 'mobile-toggle';
    toggleBtn.innerHTML = 'Menu';
    document.body.appendChild(toggleBtn);
    toggleBtn.addEventListener('click', () => sidebar.classList.toggle('open'));
});
