@extends('layouts.landing', ['title' => 'Kontak'])

@section('content')
      <x-layout.header />
      
    <!-- Page content -->
    <main class="content-wrapper">


        <!-- Page title -->
        <section class="position-relative bg-body-tertiary py-4">
            {{-- <img src="{{  asset('img/home/stick.png') }}"
                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Background image"> --}}
            <div class="container position-relative z-2 py-4 py-md-5 my-lg-3 my-xl-4 my-xxl-5">
                <div class="row pt-lg-2 pb-2 pb-sm-3 pb-lg-4">
                    <div class="col-9 col-md-8 col-lg-6">
                        <h1 class="display-4 mb-lg-4">{{ __('contact.title') }}</h1>
                        <p class="mb-0">{{ __('contact.subtitle') }}</p>
                    </div>
                </div>
            </div>
        </section>


        <!-- Contact details -->
        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5 mb-n3">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 pt-lg-2 pt-xl-0">

                <!-- Location -->
                <div class="col">
                    <div class="d-flex align-items-center">
                        <i class="ci-map-pin fs-lg text-dark-emphasis"></i>
                        <h3 class="h6 ps-2 ms-1 mb-0">{{ __('contact.location_title') }}</h3>
                    </div>
                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
                    <ul class="list-unstyled">
                        <li>Jalan Pintu Air Raya No.11 B,D,E,F,G RT.8/RW.1, Ps. Baru, Kecamatan Sawah Besar, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10710</li>
                    </ul>
                </div>

                <!-- Phones -->
                <div class="col">
                    <div class="d-flex align-items-center">
                        <i class="ci-phone-outgoing fs-lg text-dark-emphasis"></i>
                        <h3 class="h6 ps-2 ms-1 mb-0">{{ __('contact.phone_title') }}</h3>
                    </div>
                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
                    <ul class="list-unstyled">
                        <li>(021) 3500703</li>
                    </ul>
                </div>

                <!-- Emails -->
                <div class="col">
                    <div class="d-flex align-items-center">
                        <i class="ci-mail fs-lg text-dark-emphasis"></i>
                        <h3 class="h6 ps-2 ms-1 mb-0">{{ __('contact.email_title') }}</h3>
                    </div>
                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
                    <ul class="list-unstyled">
                        <li>sales@asiagolf.id</li>
                    </ul>
                </div>

                <!-- Working hours -->
                <div class="col">
                    <div class="d-flex align-items-center">
                        <i class="ci-clock fs-lg text-dark-emphasis"></i>
                        <h3 class="h6 ps-2 ms-1 mb-0">{{ __('contact.working_hours_title') }}</h3>
                    </div>
                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
                    <ul class="list-unstyled">
                        <li>Monday - Saturday : 8.30 AM - 6 PM</li>
                        <li>Sunday : 9.30 AM - 5 PM</li>
                        <li>Public Holidays : “Please call  for opening hours.”</li>
                    </ul>
                </div>
            </div>
        </section>


        <!-- Support / Help center -->
        <section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
            <div class="d-sm-flex align-items-center justify-content-between py-xxl-3">
                <div class="mb-4 mb-sm-0 me-sm-4">
                    <h2 class="h3">{{ __('contact.support_title') }}</h2>
                    <p class="mb-0">{{ __('contact.support_message') }}</p>
                </div>
                <a class="btn btn-lg btn-outline-dark" href="{{ route('help') }}">{{ __('contact.help_center_button') }}</a>
            </div>
        </section>


        <!-- Map --><section class="position-relative bg-body-tertiary">
            
        
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4390.267081025999!2d106.831474!3d-6.1661579!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5c5689e2cb3%3A0x401d9806775f8035!2sAsia%20Golf%20Pintu%20Air!5e1!3m2!1sid!2sid!4v1771558448465!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </section>


        <!-- FAQ accordion -->
        {{-- <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
            <h2 class="text-center pt-xxl-3 pb-lg-2 pb-xl-3">Popular questions</h2>
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-9 col-xl-8">

                    <!-- Accordion -->
                    <div class="accordion accordion-alt-icon" 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">{{ __('contact.faq_delivery_question') }}</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
                                data-bs-parent="#faq">
                                <div class="accordion-body">{{ __('contact.faq_delivery_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">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">Do I need to create an account to shop with you?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-7" aria-labelledby="faqHeading-7"
                                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-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">Is there a minimum order value for free shipping?</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="faqCollapse-8" aria-labelledby="faqHeading-8"
                                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>
                    </div>
                </div>
            </div>
        </section> --}}


        <!-- Instagram feed -->
        <x-home.instagram-feed />
    </main>

    @include('layouts.partials.footer3')
@endsection

@section('scripts')
@endsection