@props(['data'])

<section class="tx-why tx-intro" data-tx-section>
    <div class="tx-why__inner">
        <div class="tx-why__left">
            <p class="tx-intro__hello">Hello</p>
            <span class="tx-eyebrow tx-eyebrow--light">{{ $data['eyebrow'] ?? 'Why Texora' }}</span>
            <h2 class="tx-why__headline">
                {!! nl2br(e($data['headline'] ?? '')) !!}
            </h2>
        </div>
        <div class="tx-why__right">
            @foreach($data['items'] ?? [] as $item)
            <div class="tx-why__item tx-reveal-card">
                <div class="tx-why__item-icon">{{ $item['icon'] ?? '⚡' }}</div>
                <div>
                    <h4 class="tx-why__item-title">{{ $item['title'] ?? '' }}</h4>
                    <p class="tx-why__item-desc">{{ $item['description'] ?? '' }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>