<section class="container py-5">
    <div class="row py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5">
        <div class="col-md-4 col-xl-3 mb-4 mb-md-0" style="margin-top: -120px;">
            <div class="sticky-md-top text-center text-md-start pe-md-4 pe-lg-5 pe-xl-0"
                style="padding-top: 120px;">
                <h2>{{ __('help.popular_faqs') }}</h2>
                <p class="pb-2 pb-md-3">{{ __('help.still_have_questions') }}</p>
                <a class="btn btn-lg btn-primary" href="#!">{{ __('help.contact_us') }}</a>
            </div>
        </div>
        <div class="col-md-8 offset-xl-1">
            <!-- Accordion of questions -->
            <div class="accordion" id="faq">
                <!-- Question -->
                <div class="accordion-item">
                    <h3 class="accordion-header" id="faqHeading-1">
                        <button type="button" class="accordion-button hover-effect-underline collapsed"
                            data-bs-toggle="collapse" data-bs-target="#faqCollapse-1" aria-expanded="false"
                            aria-controls="faqCollapse-1">
                            <span class="me-2">{{ __('help.faq_delivery_time') }}</span>
                        </button>
                    </h3>
                    <div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
                        data-bs-parent="#faq">
                        <div class="accordion-body">{{ __('help.faq_delivery_time_answer') }}</div>
                    </div>
                </div>

                <!-- Question -->
                <div class="accordion-item">
                    <h3 class="accordion-header" id="faqHeading-2">
                        <button type="button" class="accordion-button hover-effect-underline collapsed"
                            data-bs-toggle="collapse" data-bs-target="#faqCollapse-2" aria-expanded="false"
                            aria-controls="faqCollapse-2">
                            <span class="me-2">{{ __('help.faq_payment_methods') }}</span>
                        </button>
                    </h3>
                    <div class="accordion-collapse collapse" id="faqCollapse-2" aria-labelledby="faqHeading-2"
                        data-bs-parent="#faq">
                        <div class="accordion-body">{{ __('help.faq_payment_methods_answer') }}</div>
                    </div>
                </div>

                <!-- Question -->
                <div class="accordion-item">
                    <h3 class="accordion-header" id="faqHeading-3">
                        <button type="button" class="accordion-button hover-effect-underline collapsed"
                            data-bs-toggle="collapse" data-bs-target="#faqCollapse-3" aria-expanded="false"
                            aria-controls="faqCollapse-3">
                            <span class="me-2">{{ __('help.faq_international_shipping') }}</span>
                        </button>
                    </h3>
                    <div class="accordion-collapse collapse" id="faqCollapse-3" aria-labelledby="faqHeading-3"
                        data-bs-parent="#faq">
                        <div class="accordion-body">{{ __('help.faq_international_shipping_answer') }}</div>
                    </div>
                </div>

                <!-- Question -->
                <div class="accordion-item">
                    <h3 class="accordion-header" id="faqHeading-4">
                        <button type="button" class="accordion-button hover-effect-underline collapsed"
                            data-bs-toggle="collapse" data-bs-target="#faqCollapse-4" aria-expanded="false"
                            aria-controls="faqCollapse-4">
                            <span class="me-2">{{ __('help.faq_account_needed') }}</span>
                        </button>
                    </h3>
                    <div class="accordion-collapse collapse" id="faqCollapse-4" aria-labelledby="faqHeading-4"
                        data-bs-parent="#faq">
                        <div class="accordion-body">{{ __('help.faq_account_needed_answer') }}</div>
                    </div>
                </div>

                <!-- Question -->
                <div class="accordion-item">
                    <h3 class="accordion-header" id="faqHeading-5">
                        <button type="button" class="accordion-button hover-effect-underline collapsed"
                            data-bs-toggle="collapse" data-bs-target="#faqCollapse-5" aria-expanded="false"
                            aria-controls="faqCollapse-5">
                            <span class="me-2">{{ __('help.faq_track_order') }}</span>
                        </button>
                    </h3>
                    <div class="accordion-collapse collapse" id="faqCollapse-5" aria-labelledby="faqHeading-5"
                        data-bs-parent="#faq">
                        <div class="accordion-body">{{ __('help.faq_track_order_answer') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
