@extends('layout.app')
@section('content')
    <!-- ========== Breadcrumb Section Start ========== -->
    <div class="py-12">
        <div class="container">
            <div class="breadcrumb">
                <ul>
                    <li>
                        <a href='/'>
                <span>
                  <i class="hgi hgi-stroke hgi-home-01 text-[20px]"></i>
                </span>
                            Home
                        </a>
                    </li>
                    <li class="text-light-disabled-text">&#8226;</li>
                    <li><span>Contact us</span></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ========== Breadcrumb Section End ========== -->

    <!-- ========== Happy To Assist Section Start ========== -->
    <section class="pb-[70px]">
        <div class="container">
            <div class="text-center">
                <h3
                    class="pb-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    We are happy to assist you
                </h3>
                <p
                    class="pb-10 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    Here to help, anytime you need us.
                </p>
            </div>
            <div class="grid grid-cols-12 gap-6">
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 border-gray-300 border p-6 rounded-2xl wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    <div>
              <span
                  class="inline-flex items-center justify-center size-12 bg-[#919EAB14] rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-mail-02 text-2xl text-light-primary-text"
                ></i>
              </span>
                        <p class="pt-4 pb-0.5 font-semibold text-light-primary-text">
                            Email
                        </p>
                        <p>support@example.com</p>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 p-6 border-gray-300 border rounded-2xl wow animate__animated animate__fadeInUp"
                    data-wow-delay=".3s"
                >
                    <div>
              <span
                  class="inline-flex items-center justify-center size-12 bg-[#919EAB14] rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-customer-support text-2xl text-light-primary-text"
                ></i>
              </span>
                        <p class="pt-4 pb-0.5 font-semibold text-light-primary-text">
                            Phone
                        </p>
                        <p>+1 (555) 123-4567</p>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 p-6 border-gray-300 border rounded-2xl wow animate__animated animate__fadeInUp"
                    data-wow-delay=".4s"
                >
                    <div>
              <span
                  class="inline-flex items-center justify-center size-12 bg-[#919EAB14] rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-location-06 text-2xl text-light-primary-text"
                ></i>
              </span>
                        <p class="pt-4 pb-0.5 font-semibold text-light-primary-text">
                            Address
                        </p>
                        <p>
                            123 Innovation Street, Suite 456, San Francisco, CA 94107, USA
                        </p>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 p-6 border-gray-300 border rounded-2xl wow animate__animated animate__fadeInUp"
                    data-wow-delay=".5s"
                >
                    <div>
              <span
                  class="inline-flex items-center justify-center size-12 bg-[#919EAB14] rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-internet text-2xl text-light-primary-text"
                ></i>
              </span>
                        <p class="pt-4 pb-0.5 font-semibold text-light-primary-text">
                            Website
                        </p>
                        <p>www.fruitoflabor.com</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== Happy To Assist Section End ========== -->

    <!-- ========== Contact Form Section Start ========== -->
    <section class="mb-[70px]">
        <div
            class="lg:bg-white bg-[#9EE872] py-12 lg:pt-0 lg:pb-[23px] text-center lg:max-w-[704px] mx-auto lg:rounded-[164px] lg:-mb-[103px] relative z-10 lg:before:bg-[#9EE872] lg:after:bg-[#9EE872] lg:before:absolute lg:before:bottom-0 lg:before:left-0 lg:before:h-full lg:before:w-[145px] lg:before:bg-[url('../images/slider-left-shape.png')] lg:before:bg-no-repeat lg:before:z-11 lg:after:absolute lg:after:bottom-0 lg:after:right-0 lg:after:h-full lg:after:w-[145px] lg:after:bg-[url('../images/slider-right-shape.png')] lg:after:bg-no-repeat lg:after:z-11"
        >
            <h3
                class="mb-2 wow animate__animated animate__fadeInUp"
                data-wow-delay=".2s"
            >
                Contact Us
            </h3>
            <p class="wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
                We&apos;d love to hear from you!
            </p>
        </div>
        <div
            class="xl:max-w-[1728px] w-full mx-auto relative bg-[#9EE872] xl:rounded-5xl pb-12 lg:pt-[172px]"
        >
            <div class="container">
                <div class="grid grid-cols-12 gap-6">
                    <div
                        class="lg:col-start-2 md:col-start-2 col-start-1 xl:col-end-12 md:col-end-12 col-end-13 bg-white rounded-2xl gap-y-6 wow animate__animated animate__fadeInUp"
                        data-wow-delay=".2s"
                    >
                        <div class="lg:p-10 p-5">
                            <div class="md:flex gap-x-4 pb-6">
                                <div
                                    class="md:w-1/2 w-full wow animate__animated animate__fadeInUp"
                                    data-wow-delay=".2s"
                                >
                                    <div class="relative w-full">
                                        <input
                                            type="text"
                                            id="first_name"
                                            class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                            placeholder="First Name"
                                        />

                                        <label
                                            for="first_name"
                                            class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1"
                                        >
                                            First Name
                                        </label>
                                    </div>
                                </div>
                                <div
                                    class="md:w-1/2 w-full pt-6 md:pt-0 wow animate__animated animate__fadeInUp"
                                    data-wow-delay=".3s"
                                >
                                    <div class="relative w-full">
                                        <input
                                            type="text"
                                            id="last_name"
                                            class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                            placeholder="Last Name"
                                        />

                                        <label
                                            for="last_name"
                                            class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1"
                                        >
                                            Last Name
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="md:flex gap-x-4 pb-6 wow animate__animated animate__fadeInUp"
                                data-wow-delay=".2s"
                            >
                                <div class="md:w-1/2 w-full">
                                    <div class="relative w-full">
                                        <input
                                            type="tel"
                                            id="phone"
                                            class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                            placeholder="Phone Number"
                                        />

                                        <label
                                            for="phone"
                                            class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1"
                                        >
                                            Phone Number
                                        </label>
                                    </div>
                                </div>
                                <div class="md:w-1/2 w-full pt-6 md:pt-0">
                                    <div class="relative w-full">
                                        <input
                                            type="email"
                                            id="email"
                                            class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                            placeholder="Email Address"
                                        />

                                        <label
                                            for="email"
                                            class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1"
                                        >
                                            Email Address
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="w-full pb-6 wow animate__animated animate__fadeInUp"
                                data-wow-delay=".2s"
                            >
                                <div class="relative w-full">
                                    <input
                                        type="text"
                                        id="subject"
                                        class="peer form-control input-group medium rounded-[80px] px-3.5 placeholder-transparent focus:placeholder-transparent focus:outline-none"
                                        placeholder="Subject"
                                    />

                                    <label
                                        for="subject"
                                        class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1"
                                    >
                                        Subject
                                    </label>
                                </div>
                            </div>
                            <div
                                class="w-full pb-10 wow animate__animated animate__fadeInUp"
                                data-wow-delay=".2s"
                            >
                                <div
                                    class="input-group medium rounded-[20px] px-3.5 resize-none"
                                >
                    <textarea
                        id="message"
                        rows="4"
                        class="peer form-control placeholder-transparent focus:placeholder-transparent"
                        placeholder="Write your message"
                    ></textarea>
                                    <label
                                        for="message"
                                        class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-6 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1"
                                    >
                                        Write your message
                                    </label>
                                </div>
                            </div>
                            <div
                                class="flex justify-end wow animate__animated animate__fadeInUp"
                                data-wow-delay=".2s"
                            >
                                <div
                                    class="btn btn-large btn-primary rounded-[100px] px-[35px] py-[11px]"
                                >
                                    <a href="#">Send Your Message</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== Contact Form Section End ========== -->

    <!-- ========== FAQ Section Start ========== -->
    <section class="mb-[70px] bg-white">
        <div class="container">
            <div class="text-center">
                <h3
                    class="pb-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    Frequently Asked Questions
                </h3>
                <p
                    class="pb-12 text-gray-500 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    Everything you need to know about shopping with Fruit of the Loom.
                </p>
            </div>

            <div class="grid grid-cols-12">
                <div
                    class="lg:col-start-2 md:col-start-2 col-start-1 xl:col-end-12 md:col-end-12 col-end-13"
                >
                    <div class="accordion">

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".2s"
                        >
                            <div class="accordion-header active flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    1. What payment methods do you accept?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign hidden"></i>
                                </div>
                            </div>

                            <div class="accordion-body pb-5">
                                <p class="text-gray-600 leading-7">
                                    We accept all major credit and debit cards including Visa,
                                    MasterCard, American Express, Discover, PayPal, Apple Pay,
                                    and Google Pay. All payments are processed securely to ensure
                                    your personal information stays protected while shopping on
                                    Fruit of the Loom.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".3s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    2. How can I track my order?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    Once your order has shipped, you will receive a confirmation
                                    email with a tracking number and shipping details. You can
                                    also log into your Fruit of the Loom account anytime to view
                                    your order status and track delivery updates in real time.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".4s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    3. How long does shipping take?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    Standard shipping usually takes 3–7 business days within the
                                    United States. Expedited shipping options are available during
                                    checkout for faster delivery. International shipping times may
                                    vary depending on your location and customs processing.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".5s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    4. Do you offer international shipping?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    Yes, Fruit of the Loom ships to selected international
                                    destinations. Shipping fees and delivery times depend on the
                                    destination country. Additional customs duties or import taxes
                                    may apply based on local regulations.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".6s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    5. Can I return or exchange an item?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    Absolutely. If you're not satisfied with your purchase, you
                                    can return or exchange eligible items within 30 days of
                                    delivery. Products must be unused, unwashed, and in their
                                    original packaging. Visit our Returns Center for detailed
                                    instructions and support.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".7s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    6. Do I need an account to place an order?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    No, you can checkout as a guest without creating an account.
                                    However, creating a Fruit of the Loom account allows you to
                                    save addresses, manage orders, track shipments faster, and
                                    receive exclusive offers and promotions.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item border-b border-gray-200 wow animate__animated animate__fadeInUp"
                            data-wow-delay=".8s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    7. Are your products true to size?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    Yes, our products are designed to fit true to size. We also
                                    provide detailed sizing charts on each product page to help
                                    you choose the perfect fit for men, women, and kids.
                                </p>
                            </div>
                        </div>

                        <!-- FAQ Item -->
                        <div
                            class="accordion-item wow animate__animated animate__fadeInUp"
                            data-wow-delay=".9s"
                        >
                            <div class="accordion-header flex items-center justify-between cursor-pointer py-5">
                                <h6 class="font-semibold text-lg">
                                    8. How can I contact customer support?
                                </h6>

                                <div class="relative">
                                    <i class="hgi hgi-stroke hgi-minus-sign hidden"></i>
                                    <i class="hgi hgi-stroke hgi-plus-sign"></i>
                                </div>
                            </div>

                            <div class="accordion-body hidden pb-5">
                                <p class="text-gray-600 leading-7">
                                    Our customer support team is available Monday through Friday
                                    to assist with orders, returns, sizing, and general inquiries.
                                    You can contact us through live chat, email, or the contact
                                    form available on the Fruit of the Loom website.
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== FAQ Section End ========== -->


@endsection