@php
    $showGlobalBanner = false;
    $globalBannerImage = null;
    $globalBannerLink = '#';
    $globalBannerAlt = 'Comunicado Global';

    if(isset($layoutConfigs) && $layoutConfigs->has('global_banner')) {
        $bannerConfig = $layoutConfigs['global_banner']->payload ?? [];
        if(!empty($bannerConfig['banner_image'])) {
            $startDate = !empty($bannerConfig['start_date']) ? \Carbon\Carbon::parse($bannerConfig['start_date']) : null;
            $endDate = !empty($bannerConfig['end_date']) ? \Carbon\Carbon::parse($bannerConfig['end_date']) : null;
            $now = \Carbon\Carbon::now();

            $isValidDate = true;
            if($startDate && $now->lt($startDate)) $isValidDate = false;
            if($endDate && $now->gt($endDate)) $isValidDate = false;

            $path = is_array($bannerConfig['banner_image']) ? ($bannerConfig['banner_image']['path'] ?? '') : $bannerConfig['banner_image'];

            if($isValidDate && !empty($path)) {
                $showGlobalBanner = true;
                $globalBannerImage = v2_storage_url($path);
                $globalBannerLink = !empty($bannerConfig['url_destino']) ? $bannerConfig['url_destino'] : '#';
                $globalBannerAlt = $bannerConfig['banner_image_alt'] ?? $bannerConfig['alt_text'] ?? 'Comunicado Global';
            }
        }
    }
@endphp

@if($showGlobalBanner)
{{-- 
    @intent Exibir um banner de comunicação global otimizado semanticamente (e-MAG/WCAG).
--}}
<aside 
    id="global-communication-banner"
    aria-labelledby="banner-comm-title"
    class="d-print-none"
    style="width: 100%; position: relative; z-index: 1000; border-bottom: 1px solid var(--color-bg-canvas, #ddd); padding: 8px 0; text-align: center; background: var(--color-bg-canvas, #f9f9f9);"
>
    <h2 id="banner-comm-title" class="visually-hidden">Comunicado Importante da Administração</h2>

    <div class="container" style="position: relative;">
        <a 
            href="{{ $globalBannerLink }}" 
            class="js-global-banner-link"
            style="display: block; width: 100%; border-radius: 4px; overflow: hidden;"
            aria-label="Detalhes do comunicado: {{ $globalBannerAlt }} (Link Externo)"
        >
            <img 
                src="{{ $globalBannerImage }}" 
                alt="{{ $globalBannerAlt }}"
                loading="lazy"
                class="img-fluid js-global-banner-img"
                style="width: 100%; border-radius: 4px; object-fit: cover; min-height: 40px; max-height: 90px; transition: transform 0.5s;"
            >
        </a>

        {{-- Botão de Fechar Acessível e Discreto --}}
        <button 
            type="button"
            class="btn btn-sm btn-dark js-btn-close-banner"
            style="position: absolute; top: 5px; right: 20px; width: 24px; height: 24px; border-radius: 50%; opacity: 0.7; padding: 0; line-height: 22px; text-align: center; border: 0;"
            aria-controls="global-communication-banner"
            aria-label="Fechar comunicado"
            title="Fechar comunicado"
        >
            <i class="bi bi-x-lg" aria-hidden="true" style="font-size: 0.75rem; vertical-align: middle;"></i>
        </button>
    </div>
</aside>

@push('head-styles')
<style>
    .js-global-banner-link:hover .js-global-banner-img { transform: scale(1.01); }
    .js-global-banner-link:focus { outline: 3px solid var(--tenant-accent, #fbbf24); box-shadow: 0 0 0 3px var(--tenant-accent, #fbbf24); }

    /* Diretiva e-MAG: Respeito à preferência de redução de movimento do SO */
    @media (prefers-reduced-motion: reduce) {
        .js-global-banner-img {
            transition: none !important;
        }
        .js-global-banner-link:hover .js-global-banner-img {
            transform: none !important;
        }
    }
</style>
@endpush

@endif