@php
    $title = $data['title'] ?? '';
    $subtitle = $data['subtitle'] ?? '';
    $text = $data['text'] ?? '';
    $buttonText = $data['button_text'] ?? '';
    $buttonLink = $data['button_link'] ?? '';
    $items = $data['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 text-carousel-section" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="row" style="display: flex; align-items: center;">
            <div class="col-md-5 ftco-animate">
                @if(!empty($subtitle))
                    <span class="subheading text-danger" style="text-transform: uppercase; font-weight: 700; letter-spacing: 1px; display: block; margin-bottom: 8px;">
                        {{ $subtitle }}
                    </span>
                @endif
                <h2 style="font-weight: 800; font-size: 2.8rem; line-height: 1.2; color: #333; margin-bottom: 24px;">
                    {{ $title }}
                </h2>
                <div class="text-content" style="font-size: 1.1rem; line-height: 1.8; color: #666; margin-bottom: 24px;">
                    {!! $renderText($text) !!}
                </div>
                @if(!empty($buttonText) && !empty($buttonLink))
                    <p>
                        <a href="{{ $buttonLink }}" class="btn btn-outline-danger" style="padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; border-radius: 8px; font-weight: 700;">
                            {{ $buttonText }}
                        </a>
                    </p>
                @endif
            </div>

            <div class="col-md-7 ftco-animate">
                <div class="text-carousel-wrapper" style="position: relative;">
                    @if(count($items) > 3)
                        <div class="carousel-gradient-overlay"></div>
                    @endif
                    <div class="owl-carousel text-carousel-owl">
                        @foreach($items as $item)
                            <div class="item">
                                <div class="mini-card text-center" style="border-radius: 15px; height: 100%; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: transform 0.3s ease; background-color: #fff; padding: 24px; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);">
                                    <div class="symbol-wrapper" style="height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                                        @if(($item['symbol_type'] ?? 'icon') == 'icon')
                                            <span class="{{ $item['icon'] ?? 'fa fa-star' }}" style="font-size: 50px; color: var(--tenant-primary);"></span>
                                        @elseif(!empty($item['image_url']))
                                            <img src="{{ $item['image_url'] }}" alt="{{ $item['image_alt'] ?? $item['title'] }}" style="max-height: 70px; width: auto; margin: 0 auto;">
                                        @endif
                                    </div>
                                    <h3 style="font-size: 1.2rem; font-weight: 700; color: #444; margin-top: 15px;">
                                        {{ $item['title'] }}
                                    </h3>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .text-carousel-section { padding: 80px 0; overflow: hidden; }
    .text-carousel-owl .owl-stage-padding { padding-bottom: 20px; }
    .text-carousel-section .mini-card:hover { transform: translateY(-5px); }
    
    .text-carousel-wrapper .carousel-gradient-overlay {
        position: absolute;
        top: 0;
        right: -2px;
        width: 120px;
        height: calc(100% - 20px);
        background: linear-gradient(to right, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);
        z-index: 10;
        pointer-events: none;
        border-radius: 0 15px 15px 0;
    }

    /* Ajuste para esconder o peek da esquerda que o Owl Carousel força com stagePadding */
    .text-carousel-owl.owl-loaded {
        margin-left: -30px;
        width: calc(100% + 30px);
    }
</style>

@section('other-scripts')
<script>
    $(document).ready(function() {
        const itemCount = {{ count($items) }};
        $('.text-carousel-owl').owlCarousel({
            autoplay: true,
            loop: itemCount > 3,
            items: 1,
            margin: 20,
            stagePadding: itemCount > 3 ? 60 : 5,
            nav: false,
            dots: true,
            responsive: {
                0: { 
                    items: 1,
                    stagePadding: itemCount > 1 ? 30 : 0
                },
                600: { 
                    items: 2,
                    stagePadding: itemCount > 2 ? 40 : 0
                },
                1000: { 
                    items: 3,
                    stagePadding: itemCount > 3 ? 80 : 0
                }
            }
        });
    });
</script>
@append