@if(!empty($data))
<section class="about-section section-padding fix">
    <div class="container">
        <div class="section-title mb-4">
            <span class="sub-title d-inline-block wow fadeInUp">{{ $data['subtitle'] ?? '' }}</span>
            <h2 class="wow col-7 fadeInUp" data-wow-delay=".3s">{{ $data['title'] ?? '' }}</h2>
        </div>
        <div class="about-wrapper pt-2">
            <div class="row g-4">
                <div class="col-xl-11">
                    <div class="about-image" style="position:relative; overflow:hidden;">
                        {{-- Imagem de fundo com picture component para WebP responsivo --}}
                        {{-- O ::before do CSS (gradient overlay) já fica entre a imagem e o counter-wrapper naturalmente --}}
                        @include('v2-service-media::components.picture', [
                            'originalPath' => $data['image'] ?? '',
                            'variants'     => $data['image_variants'] ?? [],
                            'alt'          => $data['title'] ?? '',
                            'lazy'         => true,
                            'style'        => 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;',
                        ])
                        @if(!empty($data['counters']))
                        <div class="counter-wrapper"><!-- CSS gerencia position:absolute e stacking natural -->
                            @foreach($data['counters'] as $counter)
                            <div class="counter-item style-2 wow fadeInUp" data-wow-delay=".{{ ($loop->index + 1) * 2 }}s">
                                @if(!empty($counter['icon']))
                                <div class="icon pt-2 mt-1">
                                    @include('v2-service-media::components.picture', [
                                        'originalPath' => $counter['icon'],
                                        'variants'     => $counter['icon_variants'] ?? [],
                                        'alt'          => $counter['label'] ?? '',
                                        'lazy'         => true,
                                    ])
                                </div>
                                @endif
                                <div class="content">
                                    <h2><span class="count">{{ $counter['value'] ?? '' }}</span>{{ $counter['suffix'] ?? '' }}</h2>
                                    <p>{{ $counter['label'] ?? '' }}</p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
                <div class="col-xl-2">
                    <div class="about-box">
                        <h4>{{ $data['description'] ?? '' }}</h4>
                        @if(!empty($data['cta_text']))
                        <div class="about-button mt-4">
                            <a href="{{ $data['cta_url'] ?? '#' }}" class="theme-btn">
                                <span>{{ $data['cta_text'] }}</span> <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif