@extends('layouts.public')

@section('content')
@php
 /**
 * Help Centre — the product's only FAQ surface.
 *
 * A hero with a search box over one accordion, and nothing else: the four category cards were
 * shortcuts that only pre-filtered the very accordion sitting below them, and the closing band
 * repeated the Contact link the "no matches" line and the footer already carry.
 *
 * @var array $faqs
 */
@endphp
<div class="qm-page-head">
    <div class="container-fluid">
        <h1 class="qm-page-title">{{ t_raw('footer.help') }}</h1>
        <nav class="breadcrumb" aria-label="{{ t_raw('common.breadcrumb_aria') }}"><a href="{{ route('home') }}">{{ t_raw('common.home') }}</a><span class="mx-2" aria-hidden="true">/</span><span class="active">{{ t_raw('footer.help') }}</span></nav>
    </div>
</div>
@php /* The page's messages belong UNDER its title band, inside the page the reader is
         looking at — not floating above it. getFlashes() consumes, so the layout's own
         call further out finds nothing and does not draw it twice. */
@endphp
<div class="container-fluid">@partial('flash')</div>


@php
// Each line renders only when it has something in it: a cleared field left an empty heading behind,
// which still takes its margins and puts a blank <h2> in front of a search engine. The search box
// stays regardless — it is the section's function, not its wording.
$helpHeroEyebrow = trim(t_raw('help.hero_eyebrow'));
$helpHeroTitle   = trim(t_raw('help.hero_title'));
$helpHeroSub     = trim(t_raw('help.hero_sub'));
$helpFaqEyebrow  = trim(t_raw('help.faq_eyebrow'));
$helpFaqTitle    = trim(t_raw('help.faq_title'));
$helpFaqSub      = trim(t_raw('help.faq_sub'));
@endphp
@if (setting('help_hero_enabled', '1') === '1')
<section class="qm-section">
    <div class="container-fluid">

        <div class="qm-help-hero" data-reveal>
            @if ($helpHeroEyebrow !== '')<span class="qm-eyebrow">{{ $helpHeroEyebrow }}</span>@endif
            @if ($helpHeroTitle !== '')<h2 class="qm-section-title">{{ $helpHeroTitle }}</h2>@endif
            @if ($helpHeroSub !== '')<p class="qm-section-sub">{{ $helpHeroSub }}</p>@endif
            <form class="qm-faq-search" method="get" action="{{ route('help') }}#qm-faq-section" role="search" data-help-search>
                <label class="visually-hidden" for="help-q">{{ t_raw('help.search_aria') }}</label>
                <i class="fas fa-search" aria-hidden="true"></i>
                <input type="search" id="help-q" name="q" class="form-control" placeholder="{{ t_raw('help.search_placeholder') }}" autocomplete="off">
                <button type="submit" class="qm-btn">{{ t_raw('common.search') }}</button>
            </form>
        </div>

    </div>
</section>
@endif

@if (setting('help_faq_enabled', '1') === '1' && ($faqs || $helpFaqEyebrow !== '' || $helpFaqTitle !== '' || $helpFaqSub !== ''))
<section class="qm-section pt-0" id="qm-faq-section">
    <div class="container-fluid">
        <div class="row g-4 align-items-start">
            <div class="col-lg-4" data-reveal>
                @if ($helpFaqEyebrow !== '')<span class="qm-eyebrow">{{ $helpFaqEyebrow }}</span>@endif
                @if ($helpFaqTitle !== '')<h2 class="qm-section-title">{{ $helpFaqTitle }}</h2>@endif
                @if ($helpFaqSub !== '')<p class="qm-section-sub">{{ $helpFaqSub }}</p>@endif
            </div>
            <div class="col-lg-8" data-reveal>
                <div class="accordion qm-faq" id="qmFaq" data-faq-list>
                    @foreach ($faqs as $i => $faq)
@php $isFirst = ($i === 0); @endphp
                    <div class="accordion-item" data-faq-item data-faq-text="{{ strtolower($faq['q'] . ' ' . $faq['a']) }}">
                        <h3 class="accordion-header" id="faqH{{ $i }}">
                            <button class="accordion-button{{ $isFirst ? '' : ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faqC{{ $i }}" aria-expanded="{{ $isFirst ? 'true' : 'false' }}" aria-controls="faqC{{ $i }}">
                                {{ $faq['q'] }}
                            </button>
                        </h3>
                        <div id="faqC{{ $i }}" class="accordion-collapse collapse{{ $isFirst ? ' show' : '' }}" aria-labelledby="faqH{{ $i }}" data-bs-parent="#qmFaq">
                            <div class="accordion-body">{{ $faq['a'] }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <p class="qm-faq-noresult" data-faq-empty hidden>{!! t_raw('help.faq_no_match_full', [':link' => '<a href="' . e(route('contact')) . '">' . e(t_raw('help.contact_support_btn')) . '</a>']) !!}</p>
            </div>
        </div>
    </div>
</section>
@endif
@endsection