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

/**
 * Hungry-page hero — a bold, appetite-driven slider: a vibrant gradient panel with a punchy
 * prompt, a search, craving chips and a rotating collage of popular-dish photos. Reuses the
 * .qm-heroslider shell (home.js drives it); the slide internals are this page's own design.
 * @var array $popular      popular menu-item rows (for the dish collage)
 */
$popular  = collect($popular ?? [])->values()->all();
$cravings = array_slice($cravingTags ?? [], 0, 6);
$prompts = [
    [t('home.hungry.p1_pre'), t('home.hungry.p1_hl'), t('home.hungry.p1_sub')],
    [t('home.hungry.p2_pre'), t('home.hungry.p2_hl'), t('home.hungry.p2_sub')],
    [t('home.hungry.p3_pre'), t('home.hungry.p3_hl'), t('home.hungry.p3_sub')],
];
// Each slide is switched on its own in Admin -> Pages: HomeSection::HERO_SLIDES registers this
// hero's three and its fields are grouped per slide, so the editor draws a "Visible" switch on
// every slide fold. This deck drew all three whatever those switches said — three controls that
// changed nothing. Read them the way the homepage slider reads its own (sections/hero-slider.php).
// The ORIGINAL index stays as the key so a slide keeps its own dish cluster and field id, while
// $sN below numbers what is left: a hidden slide must not leave a dot that scrolls to nothing.
$slides = [];
foreach (\App\Services\HomeSection::slidesOf('hero-hungry') as $sIdx => $sid) {
    if (isset($prompts[$sIdx]) && \App\Services\HomeSection::slideOn('hero-hungry', $sid)) {
        $slides[$sIdx] = $prompts[$sIdx];
    }
}
if (!$slides) { return; }
$n  = count($slides);
$sN = 0; // running position of the slide being drawn
@endphp
<section class="qm-section pt-0 pb-0 mt-4">
    <div class="container-fluid">
        <div class="qm-heroslider" data-heroslider role="region" aria-roledescription="carousel" aria-label="{{ t_raw('home.hungry.hero_aria') }}">
            <div class="qm-heroslider-track" data-heroslider-track>
                @foreach ($slides as $i => $pr)
@php $sN++; $cluster = array_slice($popular, $i * 4, 5); @endphp
                <div class="qm-heroslide{{ $sN === 1 ? ' is-active' : '' }}" role="group" aria-roledescription="slide" aria-label="{{ t_raw('common.slide_of_n_aria', [':i' => $sN, ':n' => $n]) }}"{!! $sN === 1 ? '' : ' aria-hidden="true"' !!}>
                    <div class="qm-herohg">
                        <div class="qm-herohg-copy">
                            <span class="qm-herohg-eyebrow"><i class="fas fa-bolt" aria-hidden="true"></i> {{ t_raw('home.hungry.eyebrow') }}</span>
                            @php $hgTag = $sN === 1 ? 'h1' : 'h2';
@endphp
                            <{{ $hgTag }} class="qm-herohg-title">{{ $pr[0] }} <span class="qm-hl">{{ $pr[1] }}</span></{{ $hgTag }}>
                            <p class="qm-herohg-sub">{{ $pr[2] }}</p>
                            <form class="qm-hero-search qm-herohg-search" action="{{ route('restaurants') }}" method="get" role="search">
                                <label class="visually-hidden" for="hg-q-{{ $i }}">{{ t_raw('home.hungry.search_label') }}</label>
                                <input type="text" id="hg-q-{{ $i }}" name="q" placeholder="{{ t_raw('home.hungry.search_placeholder') }}" aria-label="{{ t_raw('home.hungry.search_label') }}">
                                <button class="qm-btn" type="submit"><i class="fas fa-search" aria-hidden="true"></i> {{ t_raw('home.hungry.find_food_btn') }}</button>
                            </form>
                            @if ($cravings)
                            <div class="qm-herohg-chips">
                                @php $tagTaken = [];
@endphp @foreach ($cravings as $c)<a href="{!! url('/restaurants?tag=' . e($c['slug'])) !!}" class="qm-herohg-chip {{ tag_color_class((string) $c['name'], $tagTaken) }}">{{ $c['name'] }}</a>@endforeach
                            </div>
                            @endif
                        </div>
                        @if ($cluster)
                        <div class="qm-herohg-art" aria-hidden="true">
                            @foreach ($cluster as $k => $it)<img class="qm-herohg-dish d{{ $k }}" src="{{ media($it['image'] ?? null, 'assets/client/dish/dish-1.png') }}" alt="" loading="{{ $sN === 1 ? 'eager' : 'lazy' }}">@endforeach
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            <button type="button" class="qm-heroslider-btn prev" data-heroslider-prev aria-label="{{ t_raw('common.prev_slide_aria') }}"><i class="fas fa-chevron-left" aria-hidden="true"></i></button>
            <button type="button" class="qm-heroslider-btn next" data-heroslider-next aria-label="{{ t_raw('common.next_slide_aria') }}"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
            <div class="qm-heroslider-dots" role="group" aria-label="{{ t_raw('common.choose_slide_aria') }}" data-heroslider-dots>
                @for ($d = 0; $d < $n; $d++)
                <button type="button" class="qm-heroslider-dot{{ $d === 0 ? ' is-active' : '' }}" data-heroslider-dot="{{ $d }}" aria-current="{{ $d === 0 ? 'true' : 'false' }}" aria-label="{{ t_raw('common.slide_n_aria', [':n' => $d + 1]) }}"></button>
                @endfor
            </div>
        </div>
    </div>
</section>