@if (!empty($content) && ($content['enabled'] ?? false))
    <div x-data="{ dismissed: localStorage.getItem('announcement_dismissed_{{ $content['id'] ?? 'default' }}') === 'true' }" x-show="!dismissed" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 max-h-16" x-transition:leave-end="opacity-0 max-h-0"
        class="bg-primary text-secondary-foreground overflow-hidden" id="topbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative flex items-center justify-center gap-x-3 gap-y-1 flex-wrap min-h-10 py-2 pr-8 text-sm">
                @if (isset($content['badge']))
                    <span
                        class="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-white/20 shrink-0">
                        {{ $content['badge'] }}
                    </span>
                @endif

                <span class="font-medium text-center leading-snug">
                    {{ $content['text'] ?? '' }}
                </span>

                @if (isset($content['link_text']) && isset($content['link_url']))
                    <a href="{{ $content['link_url'] }}"
                        class="inline-flex items-center gap-1 font-semibold underline underline-offset-2 decoration-white/50 hover:decoration-white transition-colors shrink-0">
                        {{ $content['link_text'] }}
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                        </svg>
                    </a>
                @endif

                <button
                    @click="dismissed = true; localStorage.setItem('announcement_dismissed_{{ $content['id'] ?? 'default' }}', 'true')"
                    class="absolute right-0 top-1/2 -translate-y-1/2 p-1.5 text-white/60 hover:text-white transition-colors"
                    aria-label="{{ __('ui.announcement_close') }}">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
@endif