@php
    $howWorkIcons = ['fa-download', 'fa-user-plus', 'fa-wallet', 'fa-motorcycle'];
@endphp
<section class="sec-padd" id="how_work">
    <div class="container">
        <header class="intro-section-head the_title">
            <h2 class="intro-section-title">{{ $settings['how_work_text'] ?: __('intro_site.how_work_title') }}</h2>
        </header>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <div class="intro-how__strip how_work">
                    @foreach ($howWorks->take(\App\Models\IntroHowWork::MAX_SITE_STEPS) as $howWork)
                        <div class="intro-how__item">
                            <div class="intro-how__preview {{ $howWork->hasStoredImage() ? 'intro-how__preview--image' : 'intro-how__preview--icon' }}">
                                @if ($howWork->hasStoredImage())
                                    <img loading="lazy"
                                         src="{{ $howWork->image }}"
                                         alt="{{ $howWork->title }}">
                                @else
                                    <i class="fas {{ $howWorkIcons[$loop->index] ?? 'fa-check' }}"></i>
                                @endif
                            </div>
                            <div class="intro-how__caption">{{ $howWork->title }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>