@extends('layouts.public')

@section('content')
@php

/** @var array $plans @var array $stats @var array $partnerSpotlights */
$cur = setting('currency_symbol', '$');
$cycleMap = [
    'monthly'  => t_raw('partner.cycle_monthly'),
    'yearly'   => t_raw('partner.cycle_yearly'),
    'lifetime' => t_raw('partner.cycle_lifetime'),
];
// The plan we visually highlight as "Most popular" (the first paid tier).
$popularSlug = '';
foreach ($plans as $p) {
    if ((float) $p['price'] > 0) { $popularSlug = (string) $p['slug']; break; }
}
// Icons resolve through t() like the words beside them, so a benefit is editable end to end rather
// than being five-sixths editable with a glyph nobody can reach.
$benefits = [];
for ($bN = 1; $bN <= 6; $bN++) {
    $benefits[] = [
        t_raw('partner.benefit' . $bN . '_icon'),
        t_raw('partner.benefit' . $bN . '_title'),
        t_raw('partner.benefit' . $bN . '_text'),
    ];
}
// This page's OWN three steps — how a RESTAURANT joins — written on its content editor beside its
// other sections. They used to be the customer's ordering steps shared from Settings → Business
// model, so the page that recruits restaurants described the diner's journey back to them. Two
// different processes, two different audiences, and two different layouts to draw them in.
//
// A step cleared of both its lines is a step the operator has taken off the page, so it is dropped
// rather than drawn as an empty numbered bubble — and the ones left renumber, because "step 1,
// step 3" describes a process with a hole in it.
$steps = [];
for ($pS = 1; $pS <= 3; $pS++) {
    $pTitle = trim(t_raw('partner.step' . $pS . '_title'));
    $pText  = trim(t_raw('partner.step' . $pS . '_text'));
    if ($pTitle === '' && $pText === '') {
        continue;
    }
    $steps[] = [(string) (count($steps) + 1), $pTitle, $pText];
}
$pHowEyebrow = trim(t_raw('partner.how_eyebrow'));
$pHowTitle   = trim(t_raw('partner.how_title'));

/*
 * What a restaurant would actually be operating here.
 *
 * The benefits above say why to join; this says what you get. Each row is one of the
 * services the platform switches on in Settings → Business model, so a service the
 * operator turned off is not advertised to people it will not be given to — the page
 * and the switches can never disagree.
 *
 * The eyebrow comes from Capability::label() rather than a key of its own, so a section
 * is always named exactly what the switch that governs it is named. The two entries with
 * no switch behind them (the online storefront and languages) carry their own.
 *
 * An empty capability means the row always shows. The online-storefront row is one of those
 * on purpose: turning the storefront off removes this controller entirely
 * (Capability::blocksStorefront), so there is no state in which this page renders and that
 * row should not.
 *
 * Each row shows TWO things, because a restaurant is deciding about both: the room — a short
 * silent clip of the moment the system is for — and, under it, the screen their staff would
 * actually touch. A page of screenshots alone reads as a manual; a page of stock footage
 * alone says nothing about the product. The clip is the headline and the screen is the proof.
 *
 * Rows with no clip (a printed menu, an interface in Arabic) carry the screen alone rather
 * than borrowing footage that is about something else.
 *
 * The clip is a fixed 4:3 box that crops to fit, so every film renders at the same size. The
 * screen keeps its own shape and carries its real pixel size, because the shots are not all
 * one ratio and a single hard-coded pair would hand the browser the wrong box to reserve.
 */
$cap = \App\Services\Capability::class;
$svcRows = [
    ['', 'online', 'online', 1000, 760, true, t_raw('partner.svc_online_eyebrow')],
    [$cap::POS, 'pos', 'pos', 1000, 645, true, ''],
    [$cap::QR, 'qr', 'qr', 1000, 760, true, ''],
    [$cap::KIOSK, 'kiosk', 'kiosk', 1000, 625, true, ''],
    [$cap::KDS, 'kds', 'kds', 1000, 760, true, ''],
    [$cap::SCREENS, 'screens', 'screens', 1000, 760, true, ''],
    [$cap::PRINT_MENU, 'print_menu', 'print-menu', 1100, 779, false, ''],
    [$cap::RESERVATIONS, 'reservations', 'reservations', 1000, 627, true, ''],
    [$cap::LOYALTY, 'loyalty', 'loyalty', 1000, 760, true, ''],
    ['', 'languages', 'languages', 1000, 760, false, t_raw('partner.svc_languages_eyebrow')],
];
$services = [];
foreach ($svcRows as [$capability, $key, $img, $w, $h, $hasFilm, $eyebrow]) {
    if ($capability !== '' && $cap::lacks($capability)) {
        continue;
    }
    // Artwork resolves through t() like the copy, so each row's screenshot, clip and poster are
    // chosen from the media library rather than derived from its key. A blank video simply hides the
    // clip — which is how the two rows that never had one (print menu, languages) now behave, with
    // no special case: they ship blank.
    $svcFilm = trim(t_raw('partner.svc_' . $key . '_video'));
    $svcPost = trim(t_raw('partner.svc_' . $key . '_poster'));
    $services[] = [
        'cap'     => $capability,
        'eyebrow' => $eyebrow !== '' ? $eyebrow : $cap::label($capability),
        'img'     => t_raw('partner.svc_' . $key . '_image'),
        'film'    => $svcFilm !== '' ? media($svcFilm) : '',
        'poster'  => $svcPost !== '' ? media($svcPost) : '',
        'w'       => $w,
        'h'       => $h,
        'title'   => t_raw('partner.svc_' . $key . '_title'),
        'text'    => t_raw('partner.svc_' . $key . '_text'),
        'bullets' => [
            t_raw('partner.svc_' . $key . '_b1'),
            t_raw('partner.svc_' . $key . '_b2'),
            t_raw('partner.svc_' . $key . '_b3'),
        ],
    ];
}
@endphp
@php // The whole top of the page — heading, buttons and the owner faces beside them. Its switch
      // used to cover only the faces, so the section itself could not be hidden.
@endphp
@if (setting('partner_hero_enabled', '1') === '1')
<section class="qm-partner-hero">
    <div class="container-fluid">
        <div class="qm-partner-hero-inner" data-reveal>
            <div class="qm-partner-hero-copy">
                <span class="qm-eyebrow">{{ t_raw('partner.hero_eyebrow') }}</span>
                <h1>{{ t_raw('partner.hero_title', [':site' => setting('site_name', 'QuickMunch')]) }}</h1>
                <p>{{ t_raw('partner.hero_sub') }}</p>
                @php /* Both buttons carry an editable glyph, and each shows only while it has a
                         label — a blank label used to render an empty pill. The first button's icon
                         was hardcoded here, so the one thing people click was the one thing the
                         Partner page's editor could not change. */
@endphp
                @php
                $ctaGo    = trim(t_raw('partner.cta_get_started'));
                $ctaGoIco = trim(t_raw('partner.cta_get_started_icon'));
                $ctaSee    = trim(t_raw('partner.cta_see_pricing'));
                $ctaSeeIco = trim(t_raw('partner.cta_see_pricing_icon'));
@endphp
                @if (($ctaGo !== '' && vendor_signup_open()) || $ctaSee !== '')
                <div class="qm-partner-hero-cta">
                    @if ($ctaGo !== '' && vendor_signup_open())
                    <a href="{{ pc_link('partner.cta_signup_url') }}" class="qm-btn qm-btn-lg">@if ($ctaGoIco !== ''){!! icon_html($ctaGoIco, '') !!} @endif{{ $ctaGo }}</a>
                    @endif
                    @if ($ctaSee !== '')
                    <a href="{{ pc_link('partner.cta_pricing_url') }}" class="qm-btn qm-btn-outline qm-btn-lg">@if ($ctaSeeIco !== ''){!! icon_html($ctaSeeIco, '') !!} @endif{{ $ctaSee }}</a>
                    @endif
                </div>
                @endif
                <div class="qm-partner-stats">
                    <div><strong>{{ number_format($stats['restaurants']) }}+</strong><span>{{ t_raw('home.stats.restaurants') }}</span></div>
                    <div><strong>{{ number_format($stats['orders']) }}+</strong><span>{{ t_raw('home.stats.orders') }}</span></div>
                    <div><strong>{{ number_format($stats['cuisines']) }}</strong><span>{{ t_raw('partner.stat_cuisines') }}</span></div>
                </div>
            </div>
            @if ($partnerSpotlights->isNotEmpty())
            <div class="qm-partner-hero-art" aria-hidden="true">
                @foreach ($partnerSpotlights->take(5) as $k => $sp)
@php $flag = cuisine_flag((string) ($sp['cuisine_slug'] ?? '')); @endphp
                <span class="qm-partner-hero-face f{{ (int) $k }}">
                    <img src="{{ avatar_src($sp['owner_avatar']) }}" alt="" loading="{{ $k === 0 ? 'eager' : 'lazy' }}">
                    <img class="qm-partner-hero-face-logo" src="{{ media($sp['logo']) }}" alt="">
                    @if ($flag)<img class="qm-partner-hero-face-flag" src="{{ $flag }}" alt="">@endif
                </span>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</section>
@endif

@php /* Pricing leads the page: the plans are the decision a prospective partner
         came to make, so they sit first under the fold (the operator's ask), with the
         why-partner story following. Section toggles in the editor mirror this order. */
@endphp
@if (setting('partner_plans_enabled', '1') === '1')
@php /* THE pricing section lives in partials/pricing-plans.php now, because the
         signup page's Change-plan popup shows the very same section — one markup,
         one set of figures, wherever a tier is chosen. */
@endphp
@partial('pricing-plans', ['plans' => $plans, 'annualOn' => $annualOn ?? false, 'annualPct' => $annualPct ?? 0.0])
@endif

@if (setting('partner_benefits_enabled', '1') === '1')
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-section-head" data-reveal>
            <span class="qm-eyebrow">{{ t_raw('partner.benefits_eyebrow') }}</span>
            <h2 class="qm-section-title">{{ t_raw('partner.benefits_title') }}</h2>
            <p class="qm-section-sub">{{ t_raw('partner.benefits_sub') }}</p>
        </div>
        <div class="row g-4 qm-stagger">
            @foreach ($benefits as [$icon, $title, $text])
            <div class="col-lg-4 col-md-6" data-reveal>
                <div class="qm-card qm-partner-benefit h-100">
                    <span class="qm-partner-benefit-ico">{!! icon_html($icon, '') !!}</span>
                    <h3>{{ $title }}</h3>
                    <p>{{ $text }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@php /* One row per service the platform actually runs, alternating sides. Built on the same
         split the About page uses — Bootstrap's grid with .qm-eyebrow / .qm-section-title over
         it — so there is no new CSS and right-to-left comes from the logical grid rather than
         from a mirrored rule. The whole block goes if every service is switched off, exactly as
         Capability::filterNav() drops a group that loses all its children. */
@endphp
@if ($services && setting('partner_services_enabled', '1') === '1')
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-section-head" data-reveal>
            <span class="qm-eyebrow">{{ t_raw('partner.svc_eyebrow') }}</span>
            <h2 class="qm-section-title">{{ t_raw('partner.svc_title') }}</h2>
            <p class="qm-section-sub">{{ t_raw('partner.svc_sub') }}</p>
        </div>
        @foreach ($services as $i => $s)
@php $flip = $i % 2 === 1; @endphp
        <div class="row g-4 g-lg-5 align-items-center qm-partner-row">
            @php // qm-partner-copy insets the text so the screen can straddle the film's
                  // edge without reaching it. See the rule for why the gutter itself is
                  // left alone.
@endphp
            <div class="col-lg-6 qm-partner-copy{{ $flip ? ' order-lg-2' : '' }}" data-reveal>
              @php // One measured block, centred in its column: the copy keeps the same distance from
                    // the media and from the page edge whichever side it sits on, instead of hugging
                    // the outer edge on left rows and the media on flipped ones.
@endphp
              <div class="qm-partner-copy-inner">
                <span class="qm-eyebrow">{{ $s['eyebrow'] }}</span>
                @php // The page's heading ladder is 30px for a section, 17-18px for a card.
                      // A service row is a sub-section of its own - its title sits one step under
                      // the section h2 (qm-partner-title), not at card size: beside a film and a
                      // screenshot, a 20px title read as a caption.
@endphp
                <h3 class="qm-partner-title">{{ $s['title'] }}</h3>
                <p>{{ $s['text'] }}</p>
                @php // The same ticked list the pricing tiers below already use — one bullet
                      // style on this page, and no CSS added for a second one.
@endphp
                <ul class="qm-plan-features mb-0">
                    @foreach ($s['bullets'] as $b)
                    <li><i class="fas fa-check" aria-hidden="true"></i> {{ $b }}</li>
                    @endforeach
                </ul>
              </div>
            </div>
            <div class="col-lg-6{{ $flip ? ' order-lg-1' : '' }}" data-reveal>
                @php /* The clip is the room and the screen lies over it, the way the landing
                         page pairs them: the screen straddles the film's inner corner so the two
                         read as one object rather than two panes. .qm-partner-media is the
                         positioning context; --end marks the rows where the media sits on the
                         left, so the screen always overhangs the edge facing the copy.

                         Both frames are .qm-card with its padding removed — the product's own
                         white/hairline/shadow surface, which is what a white screenshot needs on
                         this pink page or it dissolves into it. overflow-hidden clips the media
                         to the card radius.

                         A row with no clip has no film to lie on, so its screen is simply the
                         media, full width and unpositioned. */
@endphp
                <div class="qm-partner-media{{ $flip ? ' qm-partner-media--end' : '' }}">
                    @if ($s['film'] !== '')
                    @php /* Silent and looping, the same autoplay contract the sponsored cards
                             and the hero slider already use. preload="metadata" keeps eight clips
                             from downloading up front, and the poster is a real still of the same
                             clip so a row is never an empty black box while it arrives.
                             playsinline stops iOS hijacking it into a fullscreen player. */
@endphp
                    <div class="qm-card p-0 overflow-hidden mb-0">
                        <div class="ratio ratio-4x3">
                            <video class="w-100 h-100 object-fit-cover" poster="{{ $s['poster'] }}"
                                   autoplay muted loop playsinline preload="metadata" disablepictureinpicture
                                   aria-label="{{ $s['title'] }}">
                                <source src="{{ $s['film'] }}" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    @endif
                    <div class="qm-card p-0 overflow-hidden mb-0{{ $s['film'] !== '' ? ' qm-partner-shot' : '' }}">
                        @php // img-fluid carries height:auto. Without it the width/height
                              // attributes act as a presentational hint that pins a DEFINITE
                              // height, and the shot renders stretched.
@endphp
                        <img src="{{ media($s['img']) }}" class="d-block img-fluid w-100" alt="{{ $s['title'] }}" width="{{ (int) $s['w'] }}" height="{{ (int) $s['h'] }}" loading="lazy" decoding="async">
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>
@endif

@php // Its own switch. This section shares the spotlight data with the hero faces but is a separate
      // part of the page, so the hero's control must not govern it.
@endphp
@if ($partnerSpotlights->isNotEmpty() && setting('partner_owners_enabled', '1') === '1')
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-section-head" data-reveal>
            <span class="qm-eyebrow">{{ t_raw('partner.spotlight_eyebrow') }}</span>
            <h2 class="qm-section-title">{{ t_raw('partner.spotlight_title') }}</h2>
            <p class="qm-section-sub">{{ t_raw('partner.spotlight_sub', [':site' => setting('site_name', 'QuickMunch')]) }}</p>
        </div>
        @php /* A rail rather than a grid: eight owners in one row of four and a stray row of
                 four reads as a directory, while one strip that keeps going reads as a
                 community. The product's own carousel — .qm-carousel + .qm-carousel-track,
                 driven by the shared [data-carousel] handler in app.js, which does the drag,
                 the scroll-snap and the end-aware arrows. qm-rail-dense sets the 256px column
                 these portrait cards want. No new CSS and no new script. */
@endphp
        <div class="qm-carousel qm-rail-dense" data-carousel data-reveal>
            <div class="qm-rail-track qm-carousel-track">
                @foreach ($partnerSpotlights as $sp)
@php $flag = cuisine_flag((string) ($sp['cuisine_slug'] ?? '')); @endphp
                <div class="qm-rail-item">
                    <div class="qm-partner-face-card h-100">
                        <span class="qm-partner-face-photo">
                            <img src="{{ avatar_src($sp['owner_avatar']) }}" alt="{{ $sp['owner_name'] }}" loading="lazy" width="266" height="330">
                            @if ($flag)<img class="qm-partner-face-flag" src="{{ $flag }}" alt="{{ (string) ($sp['cuisine_name'] ?? '') }}" loading="lazy" width="28" height="28">@endif
                        </span>
                        <div class="qm-partner-face-body">
                            <strong class="qm-partner-face-name">{{ $sp['owner_name'] }}</strong>
                            <span class="qm-partner-face-shop">
                                <img src="{{ media($sp['logo']) }}" alt="" loading="lazy" width="20" height="20">
                                {{ $sp['name'] }}
                            </span>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @php // Centred under the rail: this page's section heads are centred, so the
                  // left-aligned .qm-rail-head the other rails use would break the column.
@endphp
            <div class="d-flex justify-content-center mt-3">
                @partial('sections/carousel-nav')
            </div>
        </div>
    </div>
</section>
@endif


<!-- How it works — this page's own steps, written on its content editor and shown while it is on.
     The heading used to read home.how_it_works: a homepage key borrowed onto the partner page, so
     renaming the customer-facing section here would have renamed it there too. -->
@if (setting('partner_steps_enabled', '1') === '1' && ($steps || $pHowEyebrow !== '' || $pHowTitle !== ''))
<section class="qm-section pt-0">
    <div class="container-fluid">
        @if ($pHowEyebrow !== '' || $pHowTitle !== '')
        <div class="qm-section-head" data-reveal>
            @if ($pHowEyebrow !== '')<span class="qm-eyebrow">{{ $pHowEyebrow }}</span>@endif
            @if ($pHowTitle !== '')<h2 class="qm-section-title">{{ $pHowTitle }}</h2>@endif
        </div>
        @endif
        <div class="row g-4">
            @foreach ($steps as [$num, $title, $text])
            <div class="col-md-4" data-reveal>
                <div class="qm-partner-step">
                    <span class="qm-partner-step-num">{{ $num }}</span>
                    @if ($title !== '')<h3>{{ $title }}</h3>@endif
                    @if ($text !== '')<p>{{ $text }}</p>@endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@if (setting('partner_cta_enabled', '1') === '1')
<section class="qm-section pt-0">
    <div class="container-fluid">
        <div class="qm-cta-band" data-reveal>
            <div class="qm-cta-text">
                <h2>{{ t_raw('partner.cta_title') }}</h2>
                <p>{{ t_raw('partner.cta_sub', [':site' => setting('site_name', 'QuickMunch')]) }}</p>
            </div>
            @if (vendor_signup_open())<a href="{{ pc_link('partner.cta_signup_url') }}" class="qm-btn qm-cta-btn qm-btn-lg">{{ t_raw('partner.cta_btn') }}</a>@endif
        </div>
    </div>
</section>
@endif
@endsection