@if(!empty($data))
<section class="service-section section-padding fix section-bg">
    <div class="shape-image">
        <img src="{{ asset('assets/sucesu/img/service/service-shape.png') }}" alt="" loading="lazy" decoding="async" aria-hidden="true" role="presentation">
    </div>
    <div class="container custom-container">
        <div class="section-title text-center">
            <span class="style-2 sub-title wow fadeInUp">{{ $subtitle ?? 'Agenda SUCESU' }}</span>
            <h2 class="wow fadeInUp" data-wow-delay=".3s">{!! $title ?? 'Acompanhe os eventos' !!}</h2>
        </div>
        <div class="row">
            @foreach($data as $event)
            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".{{ ($loop->index + 1) * 2 }}s">
                <div class="service-box-item">
                    <div class="service-icon-item">
                        @if(!empty($event['image']))
                        <div class="service-image pb-4">
                            @include('v2-service-media::components.picture', [
                                'originalPath' => $event['image'],
                                'variants'     => $event['image_variants'] ?? [],
                                'alt'          => $event['title'] ?? '',
                                'lazy'         => true,
                            ])
                        </div>
                        @endif
                        <div class="icon">
                            <i class="bi bi-calendar3 fs-2 theme-color"></i>
                        </div>
                    </div>
                    <div class="content">
                        <h3>
                            <a href="{{ $event['url'] ?? '#' }}">{{ $event['title'] ?? '' }}</a>
                        </h3>
                        <p>{!! $event['details'] ?? '' !!}</p>
                        <a href="{{ $event['url'] ?? '#' }}" class="link-btn mt-3 pt-1">Saiba mais <i class="bi bi-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif