@extends('layouts.public')

@section('content')
@php
/**
 * Designed About page - story/intro, stats, values, how-it-works and the closing
 * CTA, on the site's existing qm-* components. All images are local; all dynamic
 * output is escaped with e().
 *
 * The team strip is gone: it described four job functions rather than any real
 * people, which is a section a buyer has to delete before launching.
 *
 * @var array{restaurants:int,cuisines:int,orders:int,menu_items:int} $stats
 */
$stats = $stats ?? [];
$brand = setting('site_name', 'QuickMunch');

$counters = [
    [(int) ($stats['restaurants'] ?? 0), '+', t_raw('home.stats.restaurants')],
    [(int) ($stats['cuisines'] ?? 0),    '+', t_raw('home.stats.cuisines')],
    [(int) ($stats['orders'] ?? 0),      '+', t_raw('home.stats.orders')],
    [(int) ($stats['menu_items'] ?? 0),  '+', t_raw('home.stats.menu_items')],
];

// The story's own lines. Trimmed once here so the markup can ask whether each has anything in it.
$storyEyebrow = trim(t_raw('about.story_eyebrow'));
$storyTitle   = trim(t_raw('about.story_title'));
$storyP1      = trim(t_raw('about.story_p1', [':site' => $brand]));
$storyP2      = trim(t_raw('about.story_p2'));

// Four cards, each owning its own icon, heading and text. Two of them used to borrow their heading
// from the HOMEPAGE (home.features.*), so those two had no field on this page's editor at all and a
// homepage edit silently rewrote About. Every card is now this page's own, icon included.
//
// A card cleared of all three is a card the operator has taken off the page, so it is dropped rather
// than drawn as an empty tile.
$values = [];
for ($vN = 1; $vN <= 4; $vN++) {
    $card = [
        trim(t_raw('about.value' . $vN . '_icon')),
        trim(t_raw('about.value' . $vN . '_title')),
        trim(t_raw('about.value' . $vN . '_text')),
    ];
    if ($card[0] !== '' || $card[1] !== '' || $card[2] !== '') {
        $values[] = $card;
    }
}
$valuesEyebrow = trim(t_raw('about.values_eyebrow'));
$valuesTitle   = trim(t_raw('about.values_title'));
$valuesSub     = trim(t_raw('about.values_sub'));

// The customer's ordering steps, authored once in Settings → Business model and drawn here in this
// page's own card style — the homepage draws the same three as numbered badges. The icons stay here
// because they belong to this page's layout, not to the wording. A step cleared of both its lines is
// dropped, and the "STEP 01" counter numbers what is actually on the page.
$stepIcons = ['fa-search', 'fa-shopping-bag', 'fa-motorcycle'];
$steps = [];
foreach ($stepIcons as $sI => $sIcon) {
    $sN     = $sI + 1;
    $sTitle = trim(t_raw('home.how.step' . $sN . '_title'));
    $sText  = trim(t_raw('home.how.step' . $sN . '_text'));
    if ($sTitle !== '' || $sText !== '') {
        $steps[] = [$sIcon, $sTitle, $sText];
    }
}
$processEyebrow = trim(t_raw('about.process_eyebrow'));
$processTitle   = trim(t_raw('about.process_title', [':site' => $brand]));
$processSub     = trim(t_raw('about.process_sub'));
@endphp
@partial('subheader', [
    'type'   => 'page',
    'title'  => t_raw('about.title'),
    'crumbs' => [['label' => t_raw('common.home'), 'url' => route('home')], ['label' => t_raw('about.crumb')]],
])

@php /* A COPY of the homepage's final hero slide, not a move — the homepage still carries its own.
         Its words live in about.partner_* so editing the homepage never rewrites this page. */
@endphp
@if (setting('about_partner_enabled', '1') === '1')
@partial('sections/about-partner')
@endif

<!-- Story / intro -->
@php $storyBtn = trim(t_raw('about.btn_label'));
@endphp
@php $storyPhotos = array_values(array_filter(array_map('trim', explode(',', t_raw('about.photos')))));
@endphp
@if (setting('about_story_enabled', '1') === '1'
    && ($storyEyebrow !== '' || $storyTitle !== '' || $storyP1 !== '' || $storyP2 !== '' || $storyBtn !== '' || $storyPhotos))
<section class="qm-section">
    <div class="container-fluid">
        <div class="row g-4 g-lg-5 align-items-center">
            <div class="col-lg-6" data-reveal>
                @php // Each line renders only when it has something in it. A cleared field left an
                      // empty heading or paragraph behind, which still takes its margins on the page
                      // and puts an empty <h2> in front of a search engine.
@endphp
                @if ($storyEyebrow !== '')<span class="qm-eyebrow">{{ $storyEyebrow }}</span>@endif
                @if ($storyTitle !== '')<h2 class="qm-section-title">{{ $storyTitle }}</h2>@endif
                @if ($storyP1 !== '')<p>{{ $storyP1 }}</p>@endif
                @if ($storyP2 !== '')<p>{{ $storyP2 }}</p>@endif
                @php /* Label and destination are both editable. The button used to carry a hardcoded
                         caption and a hardcoded /restaurants link, so an operator could rewrite every
                         word around it and not the one thing people click. A blank label hides the
                         button rather than rendering an empty pill. */
@endphp
                @if ($storyBtn !== '')
                @php /* Resolved by pc_link(), the one place a LINK field is turned into an href —
                         about.btn_url is declared as one (PageContent::LINK) exactly like the
                         Partner buttons and the header ticker, both of which already go through it.
                         The inline test that stood here recognised nothing but http(s), so the other
                         destinations that field accepts and stores — an anchor, a mailto:, a tel: —
                         were passed to url() and came back as site routes that answer 404, and a
                         cleared URL under a kept label pointed at the site root. */
@endphp
                <a class="qm-btn" href="{{ pc_link('about.btn_url') }}">{{ $storyBtn }}</a>
                @endif
            </div>
            <div class="col-lg-6" data-reveal>
                @php /* The paths resolve through t() like every other string on this page, so the
                         pictures are swappable from Pages → About with no second mechanism. media()
                         still resolves and falls back, so a cleared or missing file cannot break the
                         row — it substitutes rather than rendering a broken image. */
@endphp
                @php
                // One field, several pictures: the collage takes the first three of a single list
                // rather than three separately-named slots, so choosing them is one trip to the media
                // library instead of three. Short lists still render — the layout just uses what it
                // has — and media() substitutes for anything missing rather than breaking the row.
                $photos = $storyPhotos;
@endphp
                @if ($photos)
                <div class="row g-3 align-items-center">
                    <div class="col-6">
                        <img src="{{ media($photos[0]) }}" class="img-fluid rounded w-100" alt="{{ t_raw('about.img_alt_kitchen') }}" loading="lazy">
                    </div>
                    @if (isset($photos[1]))
                    <div class="col-6">
                        <img src="{{ media($photos[1]) }}" class="img-fluid rounded w-100{{ isset($photos[2]) ? ' mb-3' : '' }}" alt="{{ t_raw('about.img_alt_courier') }}" loading="lazy">
                        @if (isset($photos[2]))
                        <img src="{{ media($photos[2]) }}" class="img-fluid rounded w-100" alt="{{ t_raw('about.img_alt_customer') }}" loading="lazy">
                        @endif
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

<!-- Stats band (real platform numbers) -->
@if (setting('about_stats_enabled', '1') === '1')
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-stats" data-reveal>
            <div class="qm-stats-grid">
                @foreach ($counters as [$num, $suffix, $label])
                <div>
                    <div class="qm-stat-num"><span data-count="{{ (string) $num }}">{{ number_format($num) }}</span><span class="qm-stat-suffix">{{ $suffix }}</span></div>
                    <div class="qm-stat-label">{{ $label }}</div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif

<!-- Why choose us / values -->
@if (setting('about_values_enabled', '1') === '1' && ($values || $valuesEyebrow !== '' || $valuesTitle !== '' || $valuesSub !== ''))
<section class="qm-section pt-0">
    <div class="container-fluid">
        @if ($valuesEyebrow !== '' || $valuesTitle !== '' || $valuesSub !== '')
        <div class="qm-section-head" data-reveal>
            @if ($valuesEyebrow !== '')<span class="qm-eyebrow">{{ $valuesEyebrow }}</span>@endif
            @if ($valuesTitle !== '')<h2 class="qm-section-title">{{ $valuesTitle }}</h2>@endif
            @if ($valuesSub !== '')<p class="qm-section-sub">{{ $valuesSub }}</p>@endif
        </div>
        @endif
        <div class="row g-4 qm-stagger">
            @foreach ($values as [$icon, $title, $text])
            <div class="col-lg-3 col-md-6" data-reveal>
                <div class="qm-feature">
                    @if ($icon !== '')<span class="qm-feature-icon">{!! icon_html($icon, '') !!}</span>@endif
                    @if ($title !== '')<h3>{{ $title }}</h3>@endif
                    @if ($text !== '')<p>{{ $text }}</p>@endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- How it works — shown only while the delivery steps are switched on (Settings → Business model) -->
@if (setting('about_steps_enabled', '1') === '1'
    && ($steps || $processEyebrow !== '' || $processTitle !== '' || $processSub !== ''))
<section class="qm-section pt-0">
    <div class="container-fluid">
        @if ($processEyebrow !== '' || $processTitle !== '' || $processSub !== '')
        <div class="qm-section-head" data-reveal>
            @if ($processEyebrow !== '')<span class="qm-eyebrow">{{ $processEyebrow }}</span>@endif
            @if ($processTitle !== '')<h2 class="qm-section-title">{{ $processTitle }}</h2>@endif
            @if ($processSub !== '')<p class="qm-section-sub">{{ $processSub }}</p>@endif
        </div>
        @endif
        <div class="row g-4 qm-stagger">
            @foreach ($steps as $i => [$icon, $title, $text])
            <div class="col-lg-4 col-md-6" data-reveal>
                <div class="qm-feature">
                    <span class="qm-feature-icon">{!! icon_html($icon, '') !!}</span>
                    <h3><span class="qm-eyebrow d-block mb-1">{{ t_raw('about.step_label') }} {{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</span>{{ $title }}</h3>
                    @if ($text !== '')<p>{{ $text }}</p>@endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@php /* The blog band, after How it works. Same partial the homepage uses, drawing the same latest
         posts, with this page's own heading and its own on/off switch. */
@endphp
@if (setting('about_stories_enabled', '1') === '1')
@partial('sections/food-stories', [
    'posts'            => $posts ?? [],
    // Three, exactly as the homepage draws it (HomeSection::BAND_VARS marketplace food-stories).
    'limit'            => 3,
    'sectionId'        => 'about-food-stories',
    'storiesEyebrow'   => t_raw('about.stories_eyebrow'),
    'storiesTitle'     => t_raw('about.stories_title'),
    'storiesSub'       => t_raw('about.stories_sub'),
    'storiesBtn'       => t_raw('about.stories_btn'),
    'storiesBtnUrlKey' => 'about.stories_btn_url',
])
@endif

@php /* Closing call to action, last band before the footer. */
@endphp
@if (setting('about_cta_enabled', '1') === '1')
@partial('sections/cta', [
    'sectionId'    => 'about-cta',
    'ctaImage'     => t_raw('about.cta_image'),
    'ctaTitle'     => t_raw('about.cta_title'),
    'ctaSub'       => t_raw('about.cta_sub', [':site' => $brand]),
    'ctaBtn'       => t_raw('about.cta_btn'),
    'ctaBtnUrlKey' => 'about.cta_btn_url',
])
@endif
@endsection