@php
    $title = $title ?? 'Need help?';
    $description = $description ?? 'Use the help guides when the fastest next step is still unclear.';
    $showReset = $showReset ?? false;
    $showLogin = $showLogin ?? false;
@endphp

<div class="mt-6 rounded-2xl border border-sky-400/15 bg-sky-400/10 p-4">
    <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">{{ $title }}</p>
    <p class="mt-2 text-sm leading-6 text-slate-200/85">{{ $description }}</p>

    <div class="mt-4 flex flex-wrap gap-3 text-sm">
        <a href="{{ route('help.auth') }}" class="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]">Read signup and login help</a>
        <a href="{{ route('help.troubleshooting') }}" class="rounded-full border border-white/10 bg-black/20 px-4 py-2 font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Open troubleshooting</a>

        @if($showReset)
            <a href="{{ route('password.request') }}" class="rounded-full border border-white/10 bg-black/20 px-4 py-2 font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Reset password</a>
        @endif

        @if($showLogin)
            <a href="{{ route('login') }}" class="rounded-full border border-white/10 bg-black/20 px-4 py-2 font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Open login</a>
        @endif
    </div>
</div>