@extends('layouts.landing', ['title' => 'Help Single Article v.2'])

@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">
                <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="row align-items-center position-relative z-1">
                    <div class="col-lg-7 col-xl-5 offset-xl-1 py-5">
                        <div class="px-4 px-sm-5 px-xl-0 pe-lg-4">
                            <h1 class="text-center text-sm-start mb-4">How can we help?</h1>
                            <form class="d-flex flex-column flex-sm-row gap-2">
                                <input type="search" class="form-control form-control-lg"
                                    placeholder="What do you need help with?" aria-label="Search field">
                                <button type="submit" class="btn btn-lg btn-primary px-3">
                                    <i class="ci-search fs-lg ms-n2 ms-sm-0"></i>
                                    <span class="ms-2 d-sm-none">Search</span>
                                </button>
                            </form>
                            <div class="nav gap-2 pt-3 pt-sm-4 mt-1 mt-sm-0">
                                <span class="nav-link text-body-secondary pe-none p-0 me-1">Common topics:</span>
                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
                                    href="#!">payments</a>
                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
                                    href="#!">refunds</a>
                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
                                    href="#!">delivery</a>
                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
                                    href="#!">dashboard</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 offset-xl-1 d-none d-lg-block">
                        <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(356 / 526 * 100%)">
                            <img src="/img/help/hero-light.png" class="d-none-dark" alt="Image">
                            <img src="/img/help/hero-dark.png" class="d-none d-block-dark" alt="Image">
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Help topics -->
        <section class="container py-5">
            <div class="row g-0 pt-md-2 pt-xl-4">
                <div class="col-md-4 col-lg-3 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
                    <h2 class="h5 border-bottom pb-3 pb-sm-4 mb-0">Help topics</h2>

                    <!-- Nav in format of list group -->
                    <nav class="list-group list-group-borderless pt-4 pe-md-4">
                        <a class="list-group-item list-group-item-action d-flex align-items-center active"
                            href="{{ route('second', ['help', 'topics-v2']) }}">
                            <i class="ci-delivery fs-base opacity-75 me-2"></i>
                            Delivery
                        </a>
                        <a class="list-group-item list-group-item-action d-flex align-items-center"
                            href="{{ route('second', ['help', 'topics-v2']) }}">
                            <i class="ci-refresh-cw fs-base opacity-75 me-2"></i>
                            Returns &amp; refunds
                        </a>
                        <a class="list-group-item list-group-item-action d-flex align-items-center"
                            href="{{ route('second', ['help', 'topics-v2']) }}">
                            <i class="ci-credit-card fs-base opacity-75 me-2"></i>
                            Payment options
                        </a>
                        <a class="list-group-item list-group-item-action d-flex align-items-center"
                            href="{{ route('second', ['help', 'topics-v2']) }}">
                            <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
                            Order issues
                        </a>
                        <a class="list-group-item list-group-item-action d-flex align-items-center"
                            href="{{ route('second', ['help', 'topics-v2']) }}">
                            <i class="ci-archive fs-base opacity-75 me-2"></i>
                            Products &amp; stock
                        </a>
                        <a class="list-group-item list-group-item-action d-flex align-items-center"
                            href="{{ route('second', ['help', 'topics-v2']) }}">
                            <i class="ci-settings fs-base opacity-75 me-2"></i>
                            Managing account
                        </a>
                    </nav>
                </div>

                <!-- Article content -->
                <div class="col-md-8 col-lg-9">
                    <div class="d-flex align-items-start border-bottom ps-md-4 pb-3 pb-sm-4">
                        <a class="btn btn-sm btn-outline-secondary border-0 p-0 pe-2" href="{{ route('second', ['help', 'topics-v2']) }}"
                            aria-label="Back to main topic">
                            <i class="ci-chevron-left fs-4"></i>
                        </a>
                        <h2 class="h5 d-flex min-w-0 mb-0">
                            <span class="d-md-none">How does courier delivery work?</span>
                            <span class="text-truncate d-none d-md-inline">How does courier delivery work?</span>
                        </h2>
                    </div>
                    <div class="position-relative">
                        <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
                        <div class="row g-0">
                            <div class="col-xl-11 col-xxl-10 pt-4 ps-md-4">
                                <p class="fs-sm">To avail of the convenience of AsiaGolf courier delivery, please note
                                    that this service is currently available exclusively in specific cities and regions. To
                                    check whether AsiaGolf courier delivery is an option for your location, refer to the
                                    information provided on the product page (don't forget to specify the settlement) or
                                    find details in the delivery block when confirming your order on the website.</p>
                                <p class="fs-sm">It's crucial to ensure that the recipient of the order is available to
                                    answer the courier's call during the specified delivery time. In case of unsuccessful
                                    communication or unavailability, the order will be returned to the warehouse. This step
                                    is taken to maintain the efficiency of the delivery process and minimize any
                                    inconvenience caused.</p>
                                <p class="fs-sm">The cost of AsiaGolf courier delivery varies based on factors such as
                                    location, total weight, and dimensions of the order. Typically, the delivery fee falls
                                    within the range of $5 to $15. It's important to note that the exact cost of delivery is
                                    calculated at the time of placing your order. Therefore, it's advisable to exercise
                                    caution and ensure that the delivery city is specified accurately to avoid any
                                    discrepancies.</p>
                                <p class="fs-sm">When opting for AsiaGolf courier delivery, you have the flexibility to
                                    choose between paying for your order in cash or using a payment card. However, please be
                                    aware that payment by card upon receipt may have certain restrictions or conditions that
                                    you should be mindful of. These details are typically outlined during the checkout
                                    process, providing you with transparency and clarity regarding your payment options for
                                    a seamless delivery experience.</p>
                                <div class="pt-4">
                                    <h4 class="fs-sm pb-1">Was this information helpful?</h4>
                                    <div class="d-flex gap-3">
                                        <button type="button" class="btn btn-outline-secondary">
                                            <i class="ci-thumbs-up fs-base me-1 ms-n1"></i>
                                            Yes
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary">
                                            <i class="ci-thumbs-down fs-base me-1 ms-n1"></i>
                                            No
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact CTA -->
            <div class="pt-4 pb-1 pb-sm-3 pb-md-4 pb-xl-5 mt-2 mt-sm-3">
                <h3 class="fs-sm pb-sm-1">Can't find an answer to your question?</h3>
                <a class="btn btn-lg btn-primary" href="#!">Contact us</a>
            </div>
        </section>


    </main>

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

@section('scripts')
@endsection
