@php
    $howHref = url('/#how');
    $pricingHref = url('/#pricing');
@endphp
<nav class="sticky top-0 z-50 border-b border-line bg-canvas/85 backdrop-blur-[10px]" aria-label="Main">
    <div class="mx-auto flex h-16 max-w-[1020px] items-center gap-7 px-6 sm:px-6">
        <a href="{{ url('/') }}" class="flex items-center gap-2.5 font-sora text-base font-extrabold text-ink">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M20 4L9 10l3 3-6 7 11-6-3-3 6-7z" fill="#2456E6"/>
            </svg>
            REPLY.REVIEWS
        </a>

        <div class="ml-2 hidden items-center gap-[22px] md:flex">
            <a href="{{ $howHref }}" class="text-sm font-semibold text-muted hover:text-ink">How it works</a>
            <a href="{{ $pricingHref }}" class="text-sm font-semibold text-muted hover:text-ink">Pricing</a>
        </div>

        <div class="ml-auto flex items-center gap-3.5">
            @auth
                <a href="{{ url('/dashboard') }}" class="text-sm font-semibold text-muted hover:text-ink">Dashboard</a>
            @else
                @if (Route::has('login'))
                    <a href="{{ route('login') }}" class="hidden text-sm font-semibold text-muted hover:text-ink sm:inline">Sign in</a>
                @endif
                <a
                    href="#"
                    x-data
                    @click.prevent="$dispatch('open-popup')"
                    class="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-br from-brand-blue to-brand-blue-deep px-[18px] py-2.5 text-sm font-bold text-white shadow-[0_6px_18px_rgba(36,86,230,.28)] transition hover:-translate-y-px motion-reduce:hover:translate-y-0"
                >
                    Start free
                </a>
            @endauth
        </div>
    </div>
</nav>