@php $imageRight = ($data['image_position'] ?? 'left') === 'right'; @endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        @include('builder.partials.head')

        <div class="home-split home-split--equal home-split--center mt-12">
            @if(filled($data['image'] ?? null))
                <figure @class(['home-figure', 'lg:order-2' => $imageRight])>
                    <x-ui.optimized-img
                        :src="$url($data['image'])"
                        :alt="$data['image_alt'] ?? ''"
                        base="images/home/optimized/team-collaboration"
                        :widths="[720, 900]"
                        sizes="(max-width: 1023px) 92vw, 665px"
                        width="720"
                        height="480"
                        class="home-editorial-photo"
                    />
                    @if(filled($data['caption'] ?? null))
                        <figcaption class="home-figure-caption">{{ $data['caption'] }}</figcaption>
                    @endif
                </figure>
            @endif

            <ul class="home-benefit-grid">
                @foreach(($data['items'] ?? []) as $item)
                    <li class="home-benefit-card">
                        <h3 class="home-benefit-card__title">{{ $item['title'] ?? '' }}</h3>
                        <p class="home-benefit-card__text">{{ $item['text'] ?? '' }}</p>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>