// Generate navigation items
const sections = [
    { id: 'endpoints', title: 'Endpoints' },
    { id: 'register', title: 'Register' },
    { id: 'login', title: 'Login' },
    { id: 'refresh', title: 'Refresh Token' },
    { id: 'generate', title: 'Generate' },
    { id: 'workflow', title: 'Workflow Example' }
];

const navItems = document.querySelector('.nav-items');
sections.forEach(section => {
    const item = document.createElement('div');
    item.className = 'nav-item';
    item.textContent = section.title;
    item.setAttribute('data-section', section.id);
    item.addEventListener('click', () => {
        document.getElementById(section.id).scrollIntoView({ behavior: 'smooth' });
    });
    navItems.appendChild(item);
});

// Highlight current section in navigation
const observerCallback = (entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const currentNav = document.querySelector(`.nav-item[data-section="${entry.target.id}"]`);
            if (currentNav) {
                document.querySelectorAll('.nav-item').forEach(item => {
                    item.style.backgroundColor = '';
                });
                currentNav.style.backgroundColor = '#f3f4f6';
            }
        }
    });
};

const observer = new IntersectionObserver(observerCallback, {
    threshold: 0.2
});

document.querySelectorAll('section').forEach(section => {
    observer.observe(section);
});