@php
    $icons = is_array($section['parameters']['items'] ?? null) ? $section['parameters']['items'] : [];
    $backgroundColor = $section['parameters']['background_color'] ?? '#f8f9fa';
    $textColor = $section['parameters']['text_color'] ?? 'dark';
    $isCarousel = !empty($section['parameters']['is_carousel']);
    
    $textClass = ($textColor == 'light') ? 'text-white' : 'text-dark';
    
    $count = count($icons);
    $colClass = 'col-md-4';
    if ($count == 1) $colClass = 'col-md-12';
    elseif ($count == 2) $colClass = 'col-md-6';
    elseif ($count == 4) $colClass = 'col-md-3';

    $renderText = function($text) {
        if (is_string($text) && (strpos($text, '{"type"') === 0 || strpos($text, '{"content"') === 0)) {
            return app(\V2\Services\ContentRichEditor\Services\ContentRichEditorRendererService::class)->toHtml($text);
        }
        return $text;
    };
@endphp

<section class="ftco-section services-section {{ $textClass }}" style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }};">
    <div class="container">
        <div class="row {{ $isCarousel ? 'carousel-services owl-carousel' : '' }}" 
             role="{{ $isCarousel ? 'region' : 'list' }}" 
             aria-label="Serviços e Diferenciais">
            
            @foreach($icons as $icon)
                <div class="{{ $isCarousel ? 'item' : $colClass }} ftco-animate" style="{{ !$isCarousel ? 'margin-bottom: 24px;' : '' }}" role="{{ $isCarousel ? 'group' : 'listitem' }}">
                    @php
                        $link = $icon['link'] ?? null;
                        $hasLink = !empty($link);
                        if ($hasLink && !preg_match('/^https?:\/\//i', $link) && strpos($link, '/') !== 0) {
                            $link = '/' . $link;
                        }
                    @endphp

                    @if($hasLink) 
                        <a href="{{ $link }}" style="color: inherit; text-decoration: none;" aria-label="Saiba mais sobre {{ $icon['title'] ?? 'este item' }}"> 
                    @endif
                    
                    <div class="media block-6 services text-center d-block">
                        <div class="icon" style="margin-bottom: 16px; margin-left: auto; margin-right: auto; font-size: 60px; color: var(--tenant-primary); width: 100%; display: flex; align-items: center; justify-content: center;" 
                             aria-hidden="true">
                            <span class="{{ $icon['icon'] ?? 'fa-star' }}"></span>
                        </div>
                        <div class="media-body" style="width: 100%;">
                            <h3 class="heading" style="margin-bottom: 16px; font-size: 20px; font-weight: bold;">{{ $icon['title'] ?? '' }}</h3>
                            <div style="font-size: 16px; opacity: 0.9;">{!! $renderText($icon['text'] ?? '') !!}</div>
                        </div>
                    </div>

                    @if($hasLink) </a> @endif
                </div>
            @endforeach
        </div>
    </div>
</section>

@if($isCarousel)
@section('other-scripts')
<script>
    $(document).ready(function() {
        $('.carousel-services').owlCarousel({
            autoplay: true,
            autoHeight: true,
            loop: true,
            items: 1,
            margin: 30,
            nav: true,
            dots: true,
            navText: [
                '<span class="fa fa-chevron-left" aria-label="Anterior"></span>', 
                '<span class="fa fa-chevron-right" aria-label="Próximo"></span>'
            ],
            responsive: {
                0: { items: 1 },
                600: { items: 2 },
                1000: { items: 3 }
            }
        });
    });
</script>
@append
@endif