@php
    $naPaginaInicial = request()->routeIs('site.home');

    $urlSolucoes = $naPaginaInicial
        ? '#solucoes'
        : route('site.home') . '#solucoes';

    $urlQuemSomos = $naPaginaInicial
        ? '#quem-somos'
        : route('site.home') . '#quem-somos';

    $urlContato = $naPaginaInicial
        ? '#contato'
        : route('site.home') . '#contato';
@endphp

<header
    class="public-site-header"
    data-public-site-header
>
    <div class="public-site-header__inner">
        <a
            href="{{ route('site.home') }}"
            class="public-site-header__logo"
            aria-label="Ir para o início"
        >
            <img
                src="{{ asset('site/logo.png') }}"
                alt="Logo Conectaê"
            >
        </a>

        <nav
            class="public-site-header__nav"
            aria-label="Navegação principal"
        >
            <a href="{{ $urlSolucoes }}">
                Nossas Soluções
            </a>

            <a href="{{ $urlQuemSomos }}">
                Quem Somos
            </a>

            <a href="{{ $urlContato }}">
                Contato
            </a>

            <a
                href="https://suporte.conecta-e.com"
                target="_blank"
                rel="noopener noreferrer"
            >
                Suporte
            </a>

            @auth
                <a
                    href="{{ route('dashboard') }}"
                    class="public-site-header__restricted"
                >
                    <i class="bi bi-speedometer2"></i>
                    Acessar painel
                </a>
            @else
                <a
                    href="{{ route('login') }}"
                    class="public-site-header__restricted"
                >
                    <i class="bi bi-person-lock"></i>
                    Área restrita
                </a>
            @endauth
        </nav>

        <button
            type="button"
            class="public-site-header__toggle"
            data-public-site-toggle
            aria-label="Abrir menu"
            aria-controls="public-site-mobile-menu"
            aria-expanded="false"
        >
            <i class="bi bi-list"></i>
        </button>
    </div>

    <nav
        id="public-site-mobile-menu"
        class="public-site-header__mobile"
        data-public-site-mobile
        aria-label="Navegação mobile"
    >
        <a href="{{ $urlSolucoes }}">
            Nossas Soluções
        </a>

        <a href="{{ $urlQuemSomos }}">
            Quem Somos
        </a>

        <a href="{{ $urlContato }}">
            Contato
        </a>

        <a
            href="https://suporte.conecta-e.com"
            target="_blank"
            rel="noopener noreferrer"
        >
            Suporte
        </a>

        @auth
            <a
                href="{{ route('dashboard') }}"
                class="public-site-header__restricted"
            >
                <i class="bi bi-speedometer2"></i>
                Acessar painel
            </a>
        @else
            <a
                href="{{ route('login') }}"
                class="public-site-header__restricted"
            >
                <i class="bi bi-person-lock"></i>
                Área restrita
            </a>
        @endauth
    </nav>
</header>

@once
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document
                .querySelectorAll('[data-public-site-header]')
                .forEach(function (header) {
                    const toggle =
                        header.querySelector('[data-public-site-toggle]');

                    const mobileMenu =
                        header.querySelector('[data-public-site-mobile]');

                    if (!toggle || !mobileMenu) {
                        return;
                    }

                    const fecharMenu = function () {
                        mobileMenu.classList.remove('is-open');

                        toggle.setAttribute(
                            'aria-expanded',
                            'false'
                        );
                    };

                    toggle.addEventListener('click', function () {
                        const aberto =
                            mobileMenu.classList.toggle('is-open');

                        toggle.setAttribute(
                            'aria-expanded',
                            aberto ? 'true' : 'false'
                        );
                    });

                    mobileMenu
                        .querySelectorAll('a')
                        .forEach(function (link) {
                            link.addEventListener(
                                'click',
                                fecharMenu
                            );
                        });

                    document.addEventListener(
                        'keydown',
                        function (event) {
                            if (event.key === 'Escape') {
                                fecharMenu();
                            }
                        }
                    );

                    window.addEventListener(
                        'resize',
                        function () {
                            if (window.innerWidth > 900) {
                                fecharMenu();
                            }
                        }
                    );
                });
        });
    </script>
@endonce