<div class="w-full fixed top-0 z-50 bg-[#F8F4DF] shadow-md">
    <nav class="flex justify-between py-3 sm:py-5 px-3 sm:px-4 md:px-14 items-center border-b-2 border-gray-700">
        <a href="#">
            <img src="{{ asset('images/logo.svg') }}" alt="logo" class="h-8 sm:h-9 md:h-10" />
        </a>

        <ul class="hidden lg:flex flex-row space-x-7 text-base font-medium">
            <li><a href="#" class="nav-link text-gray-600 hover:text-gray-700">Beranda</a></li>
            <li><a href="#article" class="nav-link text-gray-600 hover:text-gray-700">Artikel</a></li>
            <li><a href="#forum" class="nav-link text-gray-600 hover:text-gray-700">Forum</a></li>
            <li><a href="#about-us" class="nav-link text-gray-600 hover:text-gray-700">Tentang Kami</a></li>
            <li><a href="#faq" class="nav-link text-gray-600 hover:text-gray-700">FAQ</a></li>
        </ul>

        <button id="mobile-menu-button" class="block lg:hidden text-gray-700" aria-label="Toggle menu" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 menu-open-icon" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>

            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 menu-close-icon hidden" fill="none"
                viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <div class="hidden lg:flex items-center space-x-6">
            @if (Route::has('login'))
                <a href="{{ route('login') }}">
                    <x-primary-button
                        class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-pewterBlue text-gray-700">
                        Masuk
                    </x-primary-button>
                </a>
                <div class="h-7 border-l-2 border-gray-700"></div>
                <a href="{{ route('register') }}">
                    <x-primary-button
                        class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-orangeCrayola">
                        Daftar
                    </x-primary-button>
                </a>
            @endif
        </div>
    </nav>

    <div id="mobile-menu"
        class="mobile-menu-container hidden lg:hidden bg-[#F8F4DF] px-3 py-3 space-y-3 shadow-md border-t border-gray-300 max-h-[80vh] overflow-y-auto">
        <ul class="space-y-2 text-sm font-medium">
            <li><a href="#" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Beranda</a></li>
            <li><a href="#article" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Artikel</a></li>
            <li><a href="#forum" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Forum</a></li>
            <li><a href="#about-us" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Tentang Kami</a>
            </li>
            <li><a href="#faq" class="mobile-nav-link block text-gray-600 hover:text-gray-700">FAQ</a></li>
        </ul>
        <div class="flex flex-col space-y-4 pt-3">
            @if (Route::has('login'))
                <a href="{{ route('login') }}">
                    <x-primary-button
                        class="w-full justify-center text-sm ring-2 ring-gray-700 shadow-[3px_3px_0px_1px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-pewterBlue text-gray-700">
                        Masuk
                    </x-primary-button>
                </a>
                <a href="{{ route('register') }}">
                    <x-primary-button
                        class="w-full justify-center text-sm ring-2 ring-gray-700 shadow-[3px_3px_0px_1px_#374151] text-white hover:translate-y-0.5 hover:translate-x-0.5 bg-orangeCrayola">
                        Daftar
                    </x-primary-button>
                </a>
            @endif
        </div>
    </div>
</div>

<style>
    .mobile-menu-container {
        transition: all 0.3s ease-in-out;
        transform-origin: top center;
        transform: scaleY(0);
        opacity: 0;
        max-height: 0;
    }

    .mobile-menu-active {
        transform: scaleY(1);
        opacity: 1;
        max-height: 80vh;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', initNavbar);

    if (typeof window.Livewire !== 'undefined') {
        document.addEventListener('livewire:load', initNavbar);
    }

    document.addEventListener('turbolinks:load', initNavbar);

    function initNavbar() {
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        if (!mobileMenuButton || !mobileMenu) return;

        const menuOpenIcon = mobileMenuButton.querySelector('.menu-open-icon');
        const menuCloseIcon = mobileMenuButton.querySelector('.menu-close-icon');
        const navLinks = document.querySelectorAll('.nav-link, .mobile-nav-link');
        const sections = document.querySelectorAll('section[id]');

        function toggleMenuIcons(isOpen) {
            if (!menuOpenIcon || !menuCloseIcon) return;

            if (isOpen) {
                menuOpenIcon.classList.add('hidden');
                menuCloseIcon.classList.remove('hidden');
            } else {
                menuOpenIcon.classList.remove('hidden');
                menuCloseIcon.classList.add('hidden');
            }
        }

        function toggleMobileMenu() {
            if (mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.remove('hidden');
                mobileMenu.offsetHeight;
                mobileMenu.classList.add('mobile-menu-active');
                toggleMenuIcons(true);
            } else {
                mobileMenu.classList.remove('mobile-menu-active');
                toggleMenuIcons(false);
                setTimeout(() => {
                    mobileMenu.classList.add('hidden');
                }, 300);
            }
        }

        mobileMenuButton.removeEventListener('click', toggleMobileMenu);
        mobileMenuButton.addEventListener('click', toggleMobileMenu);

        document.querySelectorAll('.mobile-nav-link').forEach(link => {
            link.removeEventListener('click', closeMobileMenuOnClick);
            link.addEventListener('click', closeMobileMenuOnClick);
        });

        function closeMobileMenuOnClick() {
            mobileMenu.classList.remove('mobile-menu-active');
            toggleMenuIcons(false);
            setTimeout(() => {
                mobileMenu.classList.add('hidden');
            }, 300);
        }

        document.removeEventListener('click', documentClickHandler);
        document.addEventListener('click', documentClickHandler);

        function documentClickHandler(e) {
            if (!mobileMenuButton.contains(e.target) &&
                !mobileMenu.contains(e.target) &&
                !mobileMenu.classList.contains('hidden')) {
                closeMobileMenuOnClick();
            }
        }

        if (sections.length > 0) {
            const setActiveLink = () => {
                let scrollY = window.scrollY;
                let found = false;

                sections.forEach((section) => {
                    const top = section.offsetTop - 100;
                    const height = section.offsetHeight;
                    const id = section.getAttribute('id');

                    if (scrollY >= top && scrollY < top + height) {
                        navLinks.forEach(link => link.classList.remove('font-bold', 'text-gray-700'));
                        document.querySelectorAll(`a[href="#${id}"]`).forEach(link => link.classList
                            .add('font-bold', 'text-gray-700'));
                        found = true;
                    }
                });

                if (!found && scrollY < 100) {
                    navLinks.forEach(link => link.classList.remove('font-bold', 'text-gray-700'));
                    document.querySelectorAll('.nav-link:first-child, .mobile-nav-link:first-child').forEach(
                        link => {
                            link.classList.add('font-bold', 'text-gray-700');
                        });
                }
            };

            setActiveLink();
            window.removeEventListener('scroll', setActiveLink);
            window.addEventListener('scroll', setActiveLink);
        }

        window.removeEventListener('resize', handleResize);
        window.addEventListener('resize', handleResize);

        function handleResize() {
            if (window.innerWidth >= 1024) {
                mobileMenu.classList.add('hidden');
                toggleMenuIcons(false);
            }
        }
    }

    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        setTimeout(initNavbar, 1);
    }
</script>
