@php
    $redes = [];
    if(isset($layoutConfigs) && $layoutConfigs->has('social_media')) {
        $redes = $layoutConfigs['social_media']->payload ?? [];
        // Ordenar redes se houver 'order'
        usort($redes, function($a, $b) {
            return ($a['order'] ?? 99) <=> ($b['order'] ?? 99);
        });
    }

    // Mapeador dinâmico de FontAwesome para Bootstrap Icons
    $mapSocialIcon = function($faIcon) {
        $cleanIcon = trim(str_replace('fa-', '', $faIcon));
        $map = [
            'facebook' => 'bi-facebook',
            'facebook-f' => 'bi-facebook',
            'facebook-official' => 'bi-facebook',
            'instagram' => 'bi-instagram',
            'twitter' => 'bi-twitter-x',
            'twitter-square' => 'bi-twitter-x',
            'youtube' => 'bi-youtube',
            'youtube-play' => 'bi-youtube',
            'linkedin' => 'bi-linkedin',
            'linkedin-square' => 'bi-linkedin',
            'flickr' => 'bi-flickr',
            'github' => 'bi-github',
            'globe' => 'bi-globe',
            'link' => 'bi-link-45deg',
            'envelope' => 'bi-envelope'
        ];
        return $map[$cleanIcon] ?? 'bi-link-45deg';
    };
@endphp

<div class="social-networks d-flex flex-wrap gap-3">
    @foreach($redes as $rede)
        @if(($rede['active'] ?? false) && !empty($rede['url']))
            <a href="{{ $rede['url'] }}" target="_blank" rel="noopener noreferrer" 
               class="text-light text-light-hover fs-4"
               aria-label="{{ $rede['network'] ?? 'Rede Social' }}">
                <i class="bi {{ $mapSocialIcon($rede['icon'] ?? 'fa-link') }}" aria-hidden="true"></i>
            </a>
        @endif
    @endforeach
</div>

@push('head-styles')
<style>
    .text-light-hover:hover { color: var(--bs-white) !important; }
</style>
@endpush