@php
    $title = $section['parameters']['title'] ?? '';
    $subtitle = $section['parameters']['subtitle'] ?? '';
    $backgroundImageUrl = $section['parameters']['background_image_url'] ?? asset('layouts/lotep/images/Untitled-16.png');
    $items = $section['parameters']['items'] ?? [];

    $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 ftco-team img" 
         style="background-image: url('{{ $backgroundImageUrl }}'); position: relative; background-attachment: fixed; background-size: cover; padding-top: 48px; padding-bottom: 48px;" 
         aria-labelledby="carousel-title-{{ $section['id'] }}">
    
    <div class="overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5);" aria-hidden="true"></div>
    
    <div class="container" style="position: relative; z-index: 1;">
        @if($title || $subtitle)
            <header class="row text-center" style="padding-bottom: 48px;">
                <div class="col-md-10 col-md-offset-1 ftco-animate" style="color: #fff;">
                    @if($subtitle) <p class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px;">{{ $subtitle }}</p> @endif
                    @if($title) <h2 id="carousel-title-{{ $section['id'] }}" style="font-size: 40px; font-weight: bold;">{{ $title }}</h2> @endif
                </div>
            </header>
        @endif

        <div class="row" role="list">
            <div class="col-md-12">
                <div class="carousel-team2 owl-carousel ftco-animate">
                    @foreach($items as $item)
                        <article class="item" role="listitem">
                            <div class="team-wrap text-center" style="background-color: #fff; padding: 24px; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 0.25rem;">
                                <div class="icon" style="margin-bottom: 16px; font-size: 48px; color: var(--tenant-primary);" aria-hidden="true">
                                    <span class="{{ $item['icon'] ?? 'fa-star' }}"></span>
                                </div>
                                <header class="text">
                                    <h3 style="margin-bottom: 8px; font-size: 22px; font-weight: bold; color: #333;">{{ $item['title'] ?? '' }}</h3>
                                    <div class="position" style="font-size: 15px; color: #666;">{!! $renderText($item['text'] ?? '') !!}</div>
                                </header>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@section('other-scripts')
<script>
    $(document).ready(function() {
        $('.carousel-team2').owlCarousel({
            autoplay: true,
            loop: true,
            items: 1,
            margin: 30,
            stagePadding: 0,
            nav: false,
            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