@php
/**
 * How it works - the customer's three ordering steps, in the homepage's own numbered-badge style.
 *
 * The WORDS come from Settings -> Business model, which is the one place the customer journey is
 * written; the About page renders the same three in its own card style. This band used to be the
 * only one of the three that read nothing at all - three hardcoded strings that no operator could
 * reach - while the Partner page, whose steps describe a different process entirely, took the
 * shared set instead. The icons stay here: they belong to this layout, not to the wording.
 */
// Switched off in Admin -> Pages: the band does not draw, on any layout that includes it.
if (!section_on('how-it-works')) { return; }
// Icons are per-step content. The trio the product ships with is a real stored value like
// every other field on this section, not a fallback the view carries: a fallback made the
// editor read "no icon" while the page drew a fork, and the operator could not tell why.
$icons = [
    trim(t_raw('home.how.step1_icon')),
    trim(t_raw('home.how.step2_icon')),
    trim(t_raw('home.how.step3_icon')),
];
// The badge is drawn by .qm-how-num::after from data-step, so switching it off means not
// emitting the attribute — no second rule, nothing to keep in step.
$showNums = trim(t_raw('home.how.show_numbers')) !== '';
$howEyebrow = trim(t_raw('home.how.eyebrow'));
$howTitle   = trim(t_raw('home.how_it_works'));
$howSub     = trim(t_raw('home.how.sub'));
@endphp
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-how" data-reveal>
            @if ($howEyebrow !== '' || $howTitle !== '' || $howSub !== '')
            <div class="qm-section-head">
                @if ($howEyebrow !== '')<span class="qm-eyebrow">{{ $howEyebrow }}</span>@endif
                @if ($howTitle !== '')<h2 class="qm-section-title">{{ $howTitle }}</h2>@endif
                @if ($howSub !== '')<p class="qm-section-sub">{{ $howSub }}</p>@endif
            </div>
            @endif
            <div class="row g-4">
                @foreach ($icons as $i => $icon)
@php $n = $i + 1; @endphp
                @php $title = trim(t_raw('home.how.step' . $n . '_title'));
@endphp
                @php $text  = trim(t_raw('home.how.step' . $n . '_text'));
@endphp
                <div class="col-md-4">
                    <div class="qm-how-step">
                        <span class="qm-how-num"{!! $showNums ? ' data-step="' . $n . '"' : '' !!}>{!! icon_html($icon, '') !!}</span>
                        @if ($title !== '')<h3>{{ $title }}</h3>@endif
                        @if ($text !== '')<p>{{ $text }}</p>@endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>