@php
// Switched off in Admin -> Pages: the band does not draw, on any layout that includes it.
/* Same band, more than one page. Each page owns its switch and its heading; the values fall back
   to the homepage's, so the homepage include is untouched by this. */
$sectionId = $sectionId ?? 'food-stories';
if (!section_on($sectionId)) { return; }

/**
 * Food stories & tips — latest blog posts, rendered in the modern blog-card style
 * (qm-blogm-card) so the section matches the modern blog surfaces site-wide.
 * @var array  $posts  blog-post rows
 * @var string $cols   Bootstrap column classes per post card (default 3-up on lg)
 */
$posts = collect($posts ?? [])->all();   // accepts an array or a collection
if (empty($posts)) { return; }
$cols  = $cols ?? 'col-lg-4 col-md-6';
$limit = (int) ($limit ?? 0);            // 0 = show all
if ($limit > 0) { $posts = array_slice($posts, 0, $limit); }
$storiesEyebrow   = trim($storiesEyebrow ?? t_raw('home.stories.eyebrow'));
$storiesTitle     = trim($storiesTitle   ?? t_raw('home.stories.title'));
$storiesSub       = trim($storiesSub     ?? t_raw('home.stories.sub'));
$storiesBtn       = trim($storiesBtn     ?? t_raw('home.stories.read_blog'));
$storiesBtnUrlKey = $storiesBtnUrlKey ?? 'home.stories.read_blog_url';
@endphp
<section class="qm-section pt-0 qm-stories-section">
    <div class="container-fluid">
        <div class="qm-rail-head" data-reveal>
            <div>
                @if ($storiesEyebrow !== '')<span class="qm-eyebrow">{{ $storiesEyebrow }}</span>@endif
                @if ($storiesTitle !== '')<h2 class="qm-section-title">{{ $storiesTitle }}</h2>@endif
                @if ($storiesSub !== '')<p class="qm-section-sub">{{ $storiesSub }}</p>@endif
            </div>
            @if ($storiesBtn !== '')<a href="{{ pc_link($storiesBtnUrlKey) }}" class="qm-btn qm-btn-sm qm-btn-outline">{{ $storiesBtn }}</a>@endif
        </div>
        <div class="row g-4 qm-stagger">
            @foreach ($posts as $p)
            <div class="{{ $cols }}" data-reveal>
                <article class="qm-blogm-card">
                    <a class="qm-blogm-card-media" href="{!! url('/blog/' . e($p['slug'])) !!}" tabindex="-1" aria-hidden="true">
                        <img src="{{ media($p['featured_image'], 'assets/client/blog/blog-1.png') }}" alt="" width="426" height="266" loading="lazy">
                        @if (!empty($p['category_name']))
                        <span class="qm-blogm-card-cat">{{ $p['category_name'] }}</span>
                        @endif
                    </a>
                    <div class="qm-blogm-card-body">
                        <h3 class="qm-blogm-card-title"><a href="{!! url('/blog/' . e($p['slug'])) !!}">{{ $p['title'] }}</a></h3>
                        <p class="qm-blogm-card-excerpt">{{ str_excerpt((string) $p['excerpt'], 18) }}</p>
                        <div class="qm-blogm-card-foot">
                            <span class="qm-blogm-author">
                                <img class="qm-blogm-author-img" src="{{ avatar_src($p['author_avatar'] ?? null) }}" alt="" width="38" height="38" loading="lazy">
                                <span class="qm-blogm-author-text">
                                    <span class="qm-blogm-author-name">{!! !empty($p['author_name']) ? e((string) $p['author_name']) : t('home.stories.admin_fallback') !!}</span>
                                    @if (!empty($p['published_at']))
                                    <span class="qm-blogm-author-date"><time datetime="{{ date('Y-m-d', strtotime((string) $p['published_at'])) }}">{!! fmt_day($p['published_at']) !!}</time></span>
                                    @endif
                                </span>
                            </span>
                            <a class="qm-blogm-more" href="{!! url('/blog/' . e($p['slug'])) !!}">{{ t_raw('home.stories.read_more') }} <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </article>
            </div>
            @endforeach
        </div>
    </div>
</section>