@php
    $logoHeaderUrl = null;
    $logoContrasteUrl = null;
    $logoHeaderAlt = $siteTitle;

    if(isset($layoutConfigs) && $layoutConfigs->has('logos')) {
        $logos = $layoutConfigs['logos']->payload ?? [];
        
        // Logo Normal
        if(!empty($logos['logo_header'])) {
            $path = is_array($logos['logo_header']) ? ($logos['logo_header']['path'] ?? '') : $logos['logo_header'];
            if($path) {
                $logoHeaderUrl = v2_storage_url($path);
                $logoHeaderAlt = $logos['logo_header_alt'] ?? $logoHeaderAlt;
            }
        }

        // Logo Alto Contraste
        if(!empty($logos['logo_header_contraste'])) {
            $pathContraste = is_array($logos['logo_header_contraste']) ? ($logos['logo_header_contraste']['path'] ?? '') : $logos['logo_header_contraste'];
            if($pathContraste) {
                $logoContrasteUrl = v2_storage_url($pathContraste);
            }
        }
    }
@endphp

<a href="{{ url('/') }}" class="group d-block text-decoration-none overflow-hidden" aria-label="Voltar para a página inicial">
    @if($logoHeaderUrl)
        <img src="{{ $logoHeaderUrl }}" alt="{{ $logoHeaderAlt }}" loading="eager" class="js-logo-normal d-block mw-100" style="max-height: 60px;">
        
        @if($logoContrasteUrl)
            <img src="{{ $logoContrasteUrl }}" alt="{{ $logoHeaderAlt }} (Alto Contraste)" loading="lazy" class="js-logo-contraste d-none mw-100" style="max-height: 60px;">
        @endif
    @else
        <div class="d-flex align-items-center gap-3">
            <div class="bg-primary text-white shadow-sm d-flex align-items-center justify-content-center rounded-1 flex-shrink-0" style="width: 50px; height: 50px;">
                <i class="bi bi-bank fs-4"></i>
            </div>
            <div>
                <span class="h6 text-dark tracking-tight mb-0 d-block fw-800" style="line-height: 1.2;">{{ $siteTitle }}</span>
                <span class="small text-muted text-uppercase d-block fw-800 tracking-wider fs-xs">Portal Oficial</span>
            </div>
        </div>
    @endif
</a>

@push('head-styles')
<style>
    .group:hover .bg-primary { background-color: var(--tenant-secondary, #0a4c8c) !important; }
    .group:hover .text-dark { color: var(--tenant-primary, #1075ad) !important; }

    /* Lógica e-MAG para troca de logo em Alto Contraste */
    html.acessibilidade-alto-contraste .js-logo-normal {
        display: none !important;
    }
    html.acessibilidade-alto-contraste .js-logo-contraste {
        display: block !important;
    }
</style>
@endpush