@php
// Switched off in Admin -> Pages: the hero does not draw.
if (!section_on('hero-order-builder')) { return; }

/**
 * Page hero for /order-builder — the drag-&-drop teaser that introduces the real
 * builder sitting directly below it.
 *
 * Same .qm-hero shell every homepage hero uses, minus the .qm-heroslider carousel
 * chrome (this is a single panel, not a deck). Because it is the page's own hero
 * the headline is the page <h1>, so it takes the shared .qm-hero h1 ramp rather
 * than the .qm-hero-headline class the promo *slides* need for their <h2>s.
 *
 * The plate is driven by js/hero-plate.js, which self-guards on #qm-hx-chips.
 *
 * The homepage separates this hero from the food-type strip with mt-4, because
 * there the strip sits above it. Here the strip sits below, so the same 24px
 * separator is mirrored onto the bottom edge — same relationship, same value.
 *
 * @var array $hxDishes the first four dishes of the builder's own payload, so the
 *                      teaser shows real menu items at their real prices. Each row
 *                      carries 'name', 'price' and an already-resolved 'image'.
 */
$hxDishes = collect($hxDishes ?? [])->all();   // accepts an array or a collection
@endphp
<section class="qm-section pt-0 pb-0 mt-4 mb-4">
    <div class="container-fluid">
        <div class="qm-hero qm-hero-promo qm-hero-promo-c">
            <div class="qm-hero-inner">
                <div class="qm-hero-copy">
                    <span class="qm-eyebrow"><i class="fas fa-hand-pointer" aria-hidden="true"></i> {{ t_raw('order_builder.hero_eyebrow') }}</span>
                    <h1>{{ t_raw('order_builder.hero_title_pre') }} <span class="qm-hl">{{ t_raw('order_builder.hero_title_hl') }}</span></h1>
                    <p>{{ t_raw('order_builder.hero_sub') }}</p>
                    <div class="qm-hero-cta">
                        <a href="{{ pc_link('order_builder.hero_cta_build_url') }}" class="qm-btn qm-btn-lg">{{ t_raw('order_builder.hero_cta_build') }}</a>
                        <a href="{{ route('restaurants') }}" class="qm-btn qm-btn-light qm-btn-lg">{{ t_raw('restaurant.browse') }}</a>
                    </div>
                    <div class="qm-hero-trust">
                        <span><i class="fas fa-bolt" aria-hidden="true"></i> {{ t_raw('order_builder.hero_trust_seconds') }}</span>
                        <span><i class="fas fa-mobile-alt" aria-hidden="true"></i> {{ t_raw('order_builder.hero_trust_mobile') }}</span>
                        <span><i class="fas fa-check-circle" aria-hidden="true"></i> {{ t_raw('order_builder.hero_trust_checkout') }}</span>
                    </div>
                </div>
                <div class="qm-hero-art qm-hx-art">
                    <div class="qm-hx">
                        <div class="qm-hx-menu">
                            <span class="qm-hx-label"><i class="fas fa-utensils" aria-hidden="true"></i> {{ t_raw('order_builder.hero_menu_label') }}</span>
                            <div class="qm-hx-chips" id="qm-hx-chips">
                                @foreach ($hxDishes as $hxItem)
@php $hxN = (string) $hxItem['name']; $hxP = (float) $hxItem['price']; $hxImg = (string) $hxItem['image']; @endphp
                                <div class="qm-hx-chip" role="button" tabindex="0" aria-label="{{ t_raw('order_builder.hero_add_to_plate_aria', [':name' => $hxN]) }}" data-name="{{ $hxN }}" data-price="{{ number_format($hxP, 2, '.', '') }}" data-img="{{ $hxImg }}">
                                    <img src="{{ $hxImg }}" alt="" draggable="false">
                                    <span class="qm-hx-chip-name">{{ $hxN }}</span>
                                    <span class="qm-hx-chip-price">{{ money($hxP) }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="qm-hx-plate" id="qm-hx-plate" role="group" aria-label="{{ t_raw('order_builder.hero_plate_empty') }}">
                            <div class="qm-hx-plate-empty" id="qm-hx-plate-empty"><i class="fas fa-utensils" aria-hidden="true"></i><span>{{ t_raw('order_builder.hero_plate_empty') }}</span></div>
                            <div class="qm-hx-plate-stack" id="qm-hx-plate-stack" hidden></div>
                            <div class="qm-hx-foot"><span id="qm-hx-count" data-item-singular="{{ t_raw('order_builder.hero_item_singular') }}" data-item-plural="{{ t_raw('order_builder.hero_item_plural') }}">0 {{ t_raw('order_builder.hero_item_plural') }}</span><strong id="qm-hx-total">{{ setting('currency_symbol', '$') }}0.00</strong></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>