@if($categoriesWithSuppliers->count() > 1)

<section class="fornecedores-navigation py-3 bg-white sticky-top shadow-sm">
    <div class="container">
        <div class="nav-content">
            <h5 class="nav-title d-none d-md-block">Categorias:</h5>
            <div class="categories-nav">
                <div class="nav-scroll">
                    @foreach($categoriesWithSuppliers as $category)
                        <a href="#categoria-{{ $category->id }}" class="category-nav-link" data-category="{{ $category->id }}">
                            <span class="category-name">{{ $category->name }}</span>
                            <span class="suppliers-count">({{ $category->suppliers->count() }})</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {

    const categoryLinks = document.querySelectorAll('.category-nav-link');

    categoryLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {

                categoryLinks.forEach(l => l.classList.remove('active'));

                this.classList.add('active');

                const offsetTop = targetElement.offsetTop - 120;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    function updateActiveCategory() {
        const categories = document.querySelectorAll('.categoria-section');
        const scrollPos = window.scrollY + 150;

        let currentCategory = null;

        categories.forEach(category => {
            const categoryTop = category.offsetTop;
            const categoryBottom = categoryTop + category.offsetHeight;

            if (scrollPos >= categoryTop && scrollPos < categoryBottom) {
                currentCategory = category.id;
            }
        });

        categoryLinks.forEach(link => {
            link.classList.remove('active');

            if (currentCategory && link.getAttribute('href') === `#${currentCategory}`) {
                link.classList.add('active');
            }
        });
    }

    function throttle(func, limit) {
        let inThrottle;
        return function() {
            const args = arguments;
            const context = this;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        }
    }

    window.addEventListener('scroll', throttle(updateActiveCategory, 100));

    updateActiveCategory();
});
</script>
@endif