@php
    $promo = config('front-navigation.promo', []);
    $promoBarClass = "border-white/10 bg-primary-900 text-white shadow-soft";
    if(!empty($promo['colorClass'])) {
        $promoBarClass = $promo['colorClass'];
    }
@endphp

@if (!empty($promo['enabled']))
    <div
        id="front-promo-bar"
        class="relative z-40 overflow-hidden {{ $promoBarClass }}"
        aria-label="Announcement"
    >
        <div class="container relative flex items-center justify-center gap-2 px-3 py-1.5 sm:gap-3 sm:px-4 sm:py-2">
            <p class="max-w-[min(100%,42rem)] px-6 text-center text-xs font-medium sm:px-8 sm:text-sm">
                {!! $promo['message'] ?? '' !!}
            </p>

            @if (!empty($promo['cta']['label']))
                @php
                    $ctaStyles = ' border border-white/25 bg-white/10 px-2.5 py-1 text-white hover:bg-white/20';
                    if (!empty($promo['cta']['class'])) {
                        $ctaStyles = ' '.$promo['cta']['class'];
                    }
                @endphp
                <a
                    href="javascript:void(0)"
                    class="hidden shrink-0 rounded-md text-xs font-semibold transition-colors sm:inline-flex{{ $ctaStyles }}"
                    {{ isset($promo['cta']['click']) && !empty($promo['cta']['click']) ? ' @click.prevent='.$promo['cta']['click'].'' : '' }}
                >
                    {{ $promo['cta']['label'] }}
                </a>
            @endif

            <button
                type="button"
                @click="closePromo()"
                class="absolute right-2 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-white/75 transition-colors hover:bg-white/15 hover:text-white sm:right-3"
                aria-label="Dismiss announcement"
            >
                <x-heroicon-o-x-mark class="h-4 w-4" />
            </button>
        </div>
    </div>
@endif