@php
    $features = $home['features'] ?? [];
    $imgPath = $features['image'] ?? '/images/home/team-collaboration.jpg';
    $imgSrc = str_starts_with($imgPath, 'http') ? $imgPath : asset(ltrim($imgPath, '/'));
@endphp
<section class="home-section bg-white">
    <div class="container-page">
        @include('pages.home._section-head', [
            'kicker' => $features['kicker'] ?? '',
            'title' => $features['title'] ?? '',
            'lead' => $features['lead'] ?? '',
            'centered' => true,
        ])

        <div class="home-split home-split--equal home-split--center mt-12">
            <figure class="home-figure">
                <x-ui.optimized-img
                    :src="$imgSrc"
                    :alt="$features['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"
                />
                <figcaption class="home-figure-caption">{{ $features['caption'] ?? '' }}</figcaption>
            </figure>

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