@php
    $logoSiteExiste = file_exists(
        public_path('logomarca.png')
    );

    $linkElenco = request()->routeIs(
        'site.index'
    )
        ? '#elenco'
        : route('site.index') . '#elenco';
@endphp

<header
    class="
        fixed
        inset-x-0
        top-0
        z-40
        border-b
        border-white/5
        bg-black/60
        backdrop-blur-xl
    "
>

    <div
        class="
            mx-auto
            flex
            min-h-[88px]
            max-w-7xl
            items-center
            justify-between
            gap-2
            px-4
            py-3
            sm:min-h-[96px]
            sm:gap-4
            sm:px-5
            lg:px-8
        "
    >

        {{-- ================================================== --}}
        {{-- MARCA / LOGOMARCA --}}
        {{-- ================================================== --}}

        <a
            href="{{ route('site.index') }}"
            class="
                flex
                min-w-0
                flex-1
                items-center
                transition
                duration-200
                hover:opacity-90
            "
            aria-label="{{ config('app.name') }}"
        >

            @if($logoSiteExiste)

                <img
                    src="{{ asset('logomarca.png') }}"
                    alt="{{ config('app.name') }}"
                    class="
                        h-12
                        w-auto
                        max-w-[155px]
                        object-contain
                        object-left
                        sm:h-14
                        sm:max-w-[290px]
                        lg:h-16
                        lg:max-w-[350px]
                    "
                >

            @else

                <span
                    class="
                        truncate
                        text-lg
                        font-black
                        uppercase
                        tracking-[0.12em]
                        text-white
                        sm:text-2xl
                        sm:tracking-[0.18em]
                    "
                >
                    {{ config('app.name') }}
                </span>

            @endif

        </a>


        {{-- ================================================== --}}
        {{-- NAVEGAÇÃO --}}
        {{-- ================================================== --}}

        <nav
            class="
                flex
                shrink-0
                items-center
                gap-2
                text-sm
                font-bold
                text-gray-300
                sm:gap-6
                sm:text-base
            "
            aria-label="Navegação principal"
        >

            {{-- ELENCO --}}
            <a
                href="{{ $linkElenco }}"
                class="
                    whitespace-nowrap
                    transition
                    duration-200
                    hover:text-white
                "
            >
                Elenco
            </a>


            {{-- ACESSO AO SISTEMA --}}
            <a
                href="{{ route('login') }}"
                class="
                    inline-flex
                    shrink-0
                    items-center
                    justify-center
                    whitespace-nowrap
                    rounded-full
                    border
                    border-white/10
                    bg-white/[0.03]
                    px-3
                    py-2
                    text-xs
                    font-bold
                    text-gray-300
                    transition
                    duration-200
                    hover:border-white/30
                    hover:bg-white/[0.07]
                    hover:text-white
                    sm:px-5
                    sm:py-2.5
                    sm:text-sm
                "
            >

                {{-- MOBILE --}}
                <span class="sm:hidden">
                    Entrar
                </span>

                {{-- TABLET / DESKTOP --}}
                <span class="hidden sm:inline">
                    Acesso
                </span>

            </a>

        </nav>

    </div>

</header>