@php
    use App\Helpers\Helper;
@endphp

@php
    use App\Enum\MenuTypeEnum;
@endphp

<section class="w-full section-y-sm relative z-0">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Sticky Navigation Bar -->
        <div id="yourGateway-carousel"
            class="relative flex flex-col lg:flex-row items-center justify-center gap-3 lg:gap-8 w-full max-w-[960px] mx-auto bg-brand-gradient rounded-2xl shadow-lg p-4 sm:p-5 lg:px-8 lg:py-5 z-10">
            <!-- Title -->
            <div class="w-full lg:w-[380px] mb-4 lg:mb-0 flex items-center justify-center lg:justify-start">
                <h2 class="text-white font-heading font-semibold text-xl sm:text-base lg:text-4xl text-center">
                    {!! Helper::content('homepage.your_gateway_to_growth') !!}
                </h2>
            </div>

            <div class="flex flex-col slider-container items-center w-full lg:w-auto gap-3">
                <div
                    class="flex slides-wrapper overflow-x-auto no-scrollbar cursor-grab overscroll-x-contain [&.is-dragging]:cursor-grabbing [&.is-dragging]:select-none w-full max-w-full lg:w-[500px] bg-transparent px-1 gap-3 sm:gap-4 py-1.5 rounded-lg mask-[linear-gradient(to_right,#000_92%,transparent)]">
                    @foreach ($quickNavs as $quickNav)
                        <a href="{{ $quickNav->type == MenuTypeEnum::SLUG->value ? url($quickNav->slug) : $quickNav->external_link }}" id="slideItem" draggable="false" class="shrink-0 w-[96px] sm:w-[104px] h-[96px] sm:h-[104px] rounded-xl bg-accent transition-colors flex flex-col items-center justify-center gap-2 px-2 py-3">

                            <span class="flex items-center justify-center h-7 text-primary" aria-hidden="true">
                                <i class="{{ $quickNav->icon }} text-2xl leading-none"></i>
                            </span>

                            <p class="font-semibold text-xs sm:text-[0.8125rem] leading-tight text-primary text-center line-clamp-2">
                                {{ app()->getLocale() == 'en' ? $quickNav->name_en : (isset($quickNav->name_np) ? $quickNav->name_np : $quickNav->name_en) }}
                            </p>
                        </a>
                    @endforeach
                </div>

                <!-- Dots: where you are in the strip -->
                <div id="qn-dots" class="flex items-center justify-center gap-2" aria-hidden="true"></div>
            </div>
        </div>
    </div>
</section>