@extends('layouts.landing', ['title' => 'Help Topics v.1'])

@section('content')
    @include('layouts.partials/offcanvas')

    @include('layouts.partials/navbar', ['wishlist' => true])

    <main class="content-wrapper">

        <!-- Hero -->
        <section class="container pt-3 pt-sm-4">
            <div class="position-relative px-4 px-sm-5 px-xl-0 py-5">
                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
                    style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
                    style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
                <div class="position-relative z-1">
                    <h1 class="h2 text-center pt-md-2 pt-lg-3 pt-xl-4 mb-4">How can we help?</h1>
                    <div class="position-relative mx-auto mb-4" style="max-width: 545px">
                        <i class="ci-search position-absolute top-50 start-0 translate-middle-y text-body fs-lg ms-3"></i>
                        <input type="search" class="form-control form-control-lg form-icon-start"
                            placeholder="What do you need help with?" aria-label="Search field">
                    </div>
                    <div class="row justify-content-center g-4 pt-2 pt-sm-3 pb-md-2 pb-lg-3 pb-xl-4">
                        <div class="col-6 col-md-3 col-xl-2 text-center">
                            <div class="position-relative d-inline-block">
                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
                                    style="width: 48px; height: 48px">
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
                                    <i class="ci-delivery position-relative z-1 fs-xl"></i>
                                </div>
                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
                                    <a class="hover-effect-underline stretched-link text-decoration-none"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Track your order</a>
                                </h3>
                            </div>
                        </div>
                        <div class="col-6 col-md-3 col-xl-2 text-center">
                            <div class="position-relative d-inline-block">
                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
                                    style="width: 48px; height: 48px">
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
                                    <i class="ci-shopping-bag position-relative z-1 fs-xl"></i>
                                </div>
                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
                                    <a class="hover-effect-underline stretched-link text-decoration-none"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Edit or cancel order</a>
                                </h3>
                            </div>
                        </div>
                        <div class="col-6 col-md-3 col-xl-2 text-center">
                            <div class="position-relative d-inline-block">
                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
                                    style="width: 48px; height: 48px">
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
                                    <i class="ci-refresh-cw position-relative z-1 fs-xl"></i>
                                </div>
                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
                                    <a class="hover-effect-underline stretched-link text-decoration-none"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Returns &amp; refunds</a>
                                </h3>
                            </div>
                        </div>
                        <div class="col-6 col-md-3 col-xl-2 text-center">
                            <div class="position-relative d-inline-block">
                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
                                    style="width: 48px; height: 48px">
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
                                    <span
                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
                                    <i class="ci-gift position-relative z-1 fs-xl"></i>
                                </div>
                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
                                    <a class="hover-effect-underline stretched-link text-decoration-none"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">My bonus account</a>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Category cards -->
        <section class="container pt-4">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 g-sm-3 g-md-4">

                <!-- Category -->
                <div class="col">
                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
                        <div class="card-body">
                            <h3 class="h5 d-flex mb-4">
                                <i class="ci-delivery fs-xl pe-1 mt-1 me-2"></i>
                                Delivery
                            </h3>
                            <ul class="nav flex-column gap-3">
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can I track my order in real-time?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Is there an option for express delivery?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Will my parcel be charged customs charges?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Do you offer international delivery?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Why does my statement have a recurring
                                        charge?</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer nav bg-transparent border-0 pt-0">
                            <a class="nav-link animate-underline px-0 py-2" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Category -->
                <div class="col">
                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
                        <div class="card-body">
                            <h3 class="h5 d-flex mb-4">
                                <i class="ci-refresh-cw fs-xl pe-1 mt-1 me-2"></i>
                                Returns &amp; refunds
                            </h3>
                            <ul class="nav flex-column gap-3">
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What is your returns policy?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I paid with Afterpay, how do returns work?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What happens to my refund if I return 45
                                        days?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I return something to you?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can I return an exchange instead of a refund?</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer nav bg-transparent border-0 pt-0">
                            <a class="nav-link animate-underline px-0 py-2" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Category -->
                <div class="col">
                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
                        <div class="card-body">
                            <h3 class="h5 d-flex mb-4">
                                <i class="ci-credit-card fs-xl pe-1 mt-1 me-2"></i>
                                Payment options
                            </h3>
                            <ul class="nav flex-column gap-3">
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I place an order?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">My payment was declined, what should I do?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">When will I be charged for my order?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I pay using Google Pay?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I use my Gift Voucher to pay for an
                                        order?</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer nav bg-transparent border-0 pt-0">
                            <a class="nav-link animate-underline px-0 py-2" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Category -->
                <div class="col">
                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
                        <div class="card-body">
                            <h3 class="h5 d-flex mb-4">
                                <i class="ci-shopping-bag fs-xl pe-1 mt-1 me-2"></i>
                                Order issues
                            </h3>
                            <ul class="nav flex-column gap-3">
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can I amend my order after I've placed it?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I've received a faulty item, what should I
                                        do?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I've received an incorrect item, what do I
                                        do?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I've bought a gift voucher, can I cancel or
                                        return it?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What if isn't right on my customs invoice?</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer nav bg-transparent border-0 pt-0">
                            <a class="nav-link animate-underline px-0 py-2" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Category -->
                <div class="col">
                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
                        <div class="card-body">
                            <h3 class="h5 d-flex mb-4">
                                <i class="ci-archive fs-xl pe-1 mt-1 me-2"></i>
                                Products &amp; stock
                            </h3>
                            <ul class="nav flex-column gap-3">
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Where can I find your size guide?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Where can I find your care instructions?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can you tell me more about Collusion?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I change my Fit Assistant
                                        Information?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What are your adhesive product guidelines?</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer nav bg-transparent border-0 pt-0">
                            <a class="nav-link animate-underline px-0 py-2" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Category -->
                <div class="col">
                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
                        <div class="card-body">
                            <h3 class="h5 d-flex mb-4">
                                <i class="ci-settings fs-xl pe-1 mt-1 me-2"></i>
                                Managing account
                            </h3>
                            <ul class="nav flex-column gap-3">
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I create an account?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I'm having trouble signing into my account.</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I'm having problems using your App.</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Do I need to create an account to shop with
                                        you?</a>
                                </li>
                                <li>
                                    <a class="nav-link hover-effect-underline fw-normal p-0"
                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I'd like to delete my account what should I
                                        do?</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer nav bg-transparent border-0 pt-0">
                            <a class="nav-link animate-underline px-0 py-2" href="#!">
                                <span class="animate-target">View all</span>
                                <i class="ci-chevron-right fs-base ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Popular articles (Carousel) -->
        <section class="container py-5 mt-1 mt-sm-2 mt-md-3 mt-lg-4 mt-xl-5">
            <h2 class="text-center pb-2 pb-sm-3 pb-lg-4">Popular articles</h2>

            <!-- Nav pills -->
            <div class="row g-0 overflow-x-auto pb-3 mb-2 mb-md-3 mb-lg-4">
                <div class="col-auto mx-auto">
                    <ul class="nav nav-pills flex-nowrap text-nowrap">
                        <li class="nav-item">
                            <a class="nav-link rounded active" aria-current="page" href="#!">Delivery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded" href="#!">Returns &amp; refunds</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded" href="#!">Payment</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded" href="#!">Order issues</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded" href="#!">Products &amp; stock</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded" href="#!">Account</a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Carousel -->
            <div class="position-relative pb-xl-2 mx-2 mx-sm-0">
                <div class="swiper"
                    data-swiper='{
            "slidesPerView": 1,
            "spaceBetween": 24,
            "loop": true,
            "autoHeight": true,
            "navigation": {
              "prevEl": ".btn-prev",
              "nextEl": ".btn-next"
            },
            "breakpoints": {
              "500": {
                "slidesPerView": 2
              },
              "992": {
                "slidesPerView": 3
              }
            }
          }'>
                    <div class="swiper-wrapper">

                        <!-- Article -->
                        <article class="swiper-slide">
                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                <img src="/img/help/article01.jpg" class="hover-effect-target" alt="Image">
                            </a>
                            <div class="pt-4">
                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
                                <h3 class="h5 mb-0">
                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">When should I
                                        place an order to ensure Express Delivery?</a>
                                </h3>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="swiper-slide">
                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                <img src="/img/help/article02.jpg" class="hover-effect-target" alt="Image">
                            </a>
                            <div class="pt-4">
                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">July 17, 2024</div>
                                <h3 class="h5 mb-0">
                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">Why does my
                                        statement have a recurring delivery charge?</a>
                                </h3>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="swiper-slide">
                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                <img src="/img/help/article03.jpg" class="hover-effect-target" alt="Image">
                            </a>
                            <div class="pt-4">
                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">June 13, 2024</div>
                                <h3 class="h5 mb-0">
                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">How can I find
                                        information about your international delivery?</a>
                                </h3>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="swiper-slide">
                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                <img src="/img/help/article04.jpg" class="hover-effect-target" alt="Image">
                            </a>
                            <div class="pt-4">
                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">May 30, 2024</div>
                                <h3 class="h5 mb-0">
                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">Will my parcel be
                                        charged additional customs charges?</a>
                                </h3>
                            </div>
                        </article>
                    </div>
                </div>

                <!-- Prev button -->
                <div class="position-absolute top-50 start-0 z-2 translate-middle hover-effect-target mt-n5">
                    <button type="button"
                        class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
                        aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                </div>

                <!-- Next button -->
                <div class="position-absolute top-50 start-100 z-2 translate-middle hover-effect-target mt-n5">
                    <button type="button"
                        class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>
                </div>
            </div>
        </section>

        <hr class="my-0 my-sm-2 my-md-3 my-lg-4">

        <!-- FAQ (Accordion) -->
        <section class="container py-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
            <div class="row pt-xl-2">
                <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>Popular FAQs</h2>
                        <p class="pb-2 pb-md-3">Still have unanswered questions and need to get in touch?</p>
                        <a class="btn btn-lg btn-primary" href="#!">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">How long will delivery take?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Delivery times vary based on your location and the chosen
                                    shipping method. Generally, our standard delivery takes up to 5 days, while our Express
                                    Delivery ensures your order reaches you within 1 day. Please note that these times may
                                    be subject to occasional variations due to unforeseen circumstances, but we do our best
                                    to meet these estimates.</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">What payment methods do you accept?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-2" aria-labelledby="faqHeading-2"
                                data-bs-parent="#faq">
                                <div class="accordion-body">We offer a range of secure payment options to provide you with
                                    flexibility and convenience. Accepted methods include major credit/debit cards, PayPal,
                                    and other secure online payment gateways. You can find the complete list of accepted
                                    payment methods during the checkout process.</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">Do you ship internationally?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-3" aria-labelledby="faqHeading-3"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Yes, we proudly offer international shipping to cater to our
                                    global customer base. Shipping costs and delivery times will be automatically calculated
                                    at the checkout based on your selected destination. Please note that any customs duties
                                    or taxes applicable in your country are the responsibility of the customer.</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">Do I need an account to place an order?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-4" aria-labelledby="faqHeading-4"
                                data-bs-parent="#faq">
                                <div class="accordion-body">While you can place an order as a guest, creating an account
                                    comes with added benefits. By having an account, you can easily track your orders,
                                    manage your preferences, and enjoy a quicker checkout process for future purchases. It
                                    also allows us to provide you with personalized recommendations and exclusive offers.
                                </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">How can I track my order?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-5" aria-labelledby="faqHeading-5"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Once your order is dispatched, you will receive a confirmation
                                    email containing a unique tracking number. You can use this tracking number on our
                                    website to monitor the real-time status of your shipment. Additionally, logging into
                                    your account will grant you access to a comprehensive order history, including tracking
                                    information.</div>
                            </div>
                        </div>

                        <!-- Question -->
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="faqHeading-6">
                                <button type="button" class="accordion-button hover-effect-underline collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-6" aria-expanded="false"
                                    aria-controls="faqCollapse-6">
                                    <span class="me-2">What are the product refund conditions?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-6" aria-labelledby="faqHeading-6"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Our refund policy is designed to ensure customer satisfaction.
                                    Details can be found in our [refund policy page](insert link). In essence, we accept
                                    returns within [insert number] days of receiving the product, provided it is in its
                                    original condition with all tags and packaging intact. Refunds are processed promptly
                                    once the returned item is inspected and approved.</div>
                            </div>
                        </div>

                        <!-- Question -->
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="faqHeading-7">
                                <button type="button" class="accordion-button hover-effect-underline collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-7" aria-expanded="false"
                                    aria-controls="faqCollapse-7">
                                    <span class="me-2">Where can I find your size guide?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-7" aria-labelledby="faqHeading-7"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Our comprehensive size guide is conveniently located on each
                                    product page to assist you in choosing the right fit. Additionally, you can find the
                                    size guide in the main menu under "Size Guide." We recommend referring to these
                                    resources to ensure your selected items match your preferred sizing.</div>
                            </div>
                        </div>

                        <!-- Question -->
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="faqHeading-8">
                                <button type="button" class="accordion-button hover-effect-underline collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-8" aria-expanded="false"
                                    aria-controls="faqCollapse-8">
                                    <span class="me-2">Do I need to create an account to shop with you?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-8" aria-labelledby="faqHeading-8"
                                data-bs-parent="#faq">
                                <div class="accordion-body">While guest checkout is available for your convenience,
                                    creating an account enhances your overall shopping experience. With an account, you can
                                    easily track your order status, save multiple shipping addresses, and enjoy a
                                    streamlined checkout process. Moreover, account holders receive early access to
                                    promotions and exclusive offers. Signing up is quick and hassle-free!</div>
                            </div>
                        </div>

                        <!-- Question -->
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="faqHeading-9">
                                <button type="button" class="accordion-button hover-effect-underline collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-9" aria-expanded="false"
                                    aria-controls="faqCollapse-9">
                                    <span class="me-2">Is there a minimum order value for free shipping?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-9" aria-labelledby="faqHeading-9"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Yes, we offer free shipping on orders exceeding $250. Orders
                                    below this threshold are subject to standard shipping fees, which will be displayed
                                    during the checkout process.</div>
                            </div>
                        </div>

                        <!-- Question -->
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="faqHeading-10">
                                <button type="button" class="accordion-button hover-effect-underline collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-10" aria-expanded="false"
                                    aria-controls="faqCollapse-10">
                                    <span class="me-2">Can I modify or cancel my order after placing it?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-10" aria-labelledby="faqHeading-10"
                                data-bs-parent="#faq">
                                <div class="accordion-body">Once an order is confirmed, our system processes it promptly to
                                    ensure timely dispatch. Therefore, modifications or cancellations are challenging after
                                    this point. However, please contact our customer support as soon as possible, and we
                                    will do our best to assist you based on the order status.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('layouts.partials/footer')
@endsection

@section('scripts')
@endsection
