import React from "react";
import { FaShoppingCart } from "react-icons/fa";
import { GiShoppingCart } from "react-icons/gi";
import { Link } from "react-router-dom";
import LandingPage from "./landingPage";
import Footer from "../components/Elements/Footer";
import { FaFacebookF, FaTwitter, FaWhatsapp } from "react-icons/fa"
import { CiLinkedin } from "react-icons/ci"
import { IoLocationOutline } from "react-icons/io5";
import { MdOutlineLocalPhone } from "react-icons/md";
import { LuAlarmClock } from "react-icons/lu";
import FAButton from '../components/Elements/FAButton';
import Navbar1 from '../components/Elements/Navbar1';

const ContactUs = () => {
    return (
        <>
            {/* Navbar */}
            <Navbar1/>

            <div className='main-container w-[1440px] h-[812px] relative mx-auto my-0'>
                <div className='w-[1440px] h-[812px] bg-[#f7f4ff] absolute top-0 left-0' />
                <div className='w-[676px] h-[725px] text-[0px] absolute top-[48px] left-[683px] z-[17]'>
                    <span className="flex w-[425px] h-[57px] justify-center items-center font-['Fredoka_One'] text-[45px] font-normal leading-[54.45px] text-[#fff] tracking-[0.9px] relative text-center whitespace-nowrap z-[19] mt-[30px] mr-0 mb-0 ml-[133px]">
                        Got any enquiries?
                    </span>
                    <div className='w-[578px] h-[530px] text-[0px] rounded-[10px] relative z-20 mt-[20px] mr-0 mb-0 ml-[56px]'>
                        <span className="flex w-[311px] h-[40px] items-center font-['Poppins'] text-[27px] font-medium leading-[37px] text-[#fff] relative whitespace-nowrap z-[21] mt-0 mr-0 mb-0 ml-0">
                            Fill in your information
                        </span>
                        <div className='w-[578px] h-[470px] rounded-[10px] relative z-[22] mt-[20px] mr-0 mb-0 ml-0'>
                            <div className='w-[578px] h-[65px] text-[0px] rounded-[10px] relative overflow-hidden z-[23] mt-0 mr-0 mb-0 ml-0'>
                                <span className="flex w-[311px] h-[23px] items-center font-['Poppins'] text-[22px] font-normal leading-[23px] text-[rgba(0,0,0,0.6)] relative whitespace-nowrap z-[25] mt-[21px] mr-0 mb-0 ml-[24px]">
                                    Full Name
                                </span>
                                <div className='w-[578px] h-[65px] bg-[#f1f1f1] rounded-[10px] absolute top-0 left-1/2 translate-x-[-50%] translate-y-0 z-[24]' />
                                <input className='w-[578px] h-[65px] bg-transparent border-none absolute top-0 left-0 z-[26]' />
                            </div>
                            <div className='w-[578px] h-[65px] text-[0px] rounded-[10px] relative overflow-hidden z-[27] mt-[25px] mr-0 mb-0 ml-0'>
                                <span className="flex w-[311px] h-[23px] items-center font-['Poppins'] text-[22px] font-normal leading-[23px] text-[rgba(0,0,0,0.6)] relative whitespace-nowrap z-[29] mt-[21px] mr-0 mb-0 ml-[24px]">
                                    Email
                                </span>
                                <div className='w-[578px] h-[65px] bg-[#f1f1f1] rounded-[10px] absolute top-0 left-1/2 translate-x-[-50%] translate-y-0 z-[28]' />
                                <input className='w-[578px] h-[65px] bg-transparent border-none absolute top-0 left-0 z-30' />
                            </div>
                            <div className='w-[578px] h-[65px] text-[0px] rounded-[10px] relative overflow-hidden z-[31] mt-[25px] mr-0 mb-0 ml-0'>
                                <span className="flex w-[311px] h-[23px] items-center font-['Poppins'] text-[22px] font-normal leading-[23px] text-[rgba(0,0,0,0.6)] relative whitespace-nowrap z-[33] mt-[21px] mr-0 mb-0 ml-[24px]">
                                    Phone Number
                                </span>
                                <div className='w-[578px] h-[65px] bg-[#f1f1f1] rounded-[10px] absolute top-0 left-1/2 translate-x-[-50%] translate-y-0 z-[32]' />
                                <input className='w-[578px] h-[65px] bg-transparent border-none absolute top-0 left-0 z-[34]' />
                            </div>
                            <div className='w-[578px] h-[200px] text-[0px] rounded-[10px] relative z-[35] mt-[25px] mr-0 mb-0 ml-0'>
                                <span className="flex w-[311px] h-[23px] items-center font-['Poppins'] text-[22px] font-normal leading-[23px] text-[rgba(0,0,0,0.6)] relative whitespace-nowrap z-[37] mt-[21px] mr-0 mb-0 ml-[24px]">
                                    Message
                                </span>
                                <div className='w-[578px] h-[200px] bg-[#f1f1f1] rounded-[10px] absolute top-0 left-1/2 translate-x-[-50%] translate-y-0 z-[36]' />
                            </div>
                        </div>
                    </div>
                    <button className='w-[120px] h-[45px] text-[0px] rounded-[10px] border-none relative z-[38] pointer mt-[22px] mr-0 mb-0 ml-[514px]'>
                        <span className="flex w-[58px] h-[24px] justify-center items-center font-['Poppins'] text-[20px] font-bold leading-[24px] text-[#fff] tracking-[0.6px] relative text-center whitespace-nowrap z-40 mt-[10px] mr-0 mb-0 ml-[31px]">
                            Send
                        </span>
                        <div className='w-[120px] h-[45px] bg-[#afa0d7] rounded-[10px] border-solid border-2 border-[#fff] absolute top-0 left-0 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] z-[39]' />
                    </button>
                    <div className='w-[676px] h-[725px] bg-[#afa0d7] rounded-[20px] absolute top-0 left-0 z-[18]' />
                </div>
                <span className="flex h-[67px] justify-start items-center font-['Fredoka_One'] text-[48px] font-normal leading-[58.08px] text-[#000] tracking-[2.4px] absolute top-[85px] left-[calc(50%-640px)] text-left whitespace-nowrap z-[1]">
                    Talk To Us
                </span>
                <span className="flex w-[547px] h-[261px] items-center font-['Poppins'] text-[27px] font-normal leading-[37px] text-[#000] absolute top-[177px] left-[calc(50%-640px)] z-[2]">
                    Have a question about our products and services? Perhaps you'd like to
                    send us a message about how our products have helped you, or maybe
                    you're curious about getting started on your journey as an Eskayvie
                    entrepreneur? Drop us a line, and we'll get back to you.
                </span>
                <div className='w-[570.5px] h-px bg-[url(../assets/images/42720da3-4a92-4e67-b80c-9b08feed30b5.png)] bg-cover bg-no-repeat absolute top-[462.5px] left-[80px] z-[16]' />
                <div className='w-[570px] h-[117px] text-[0px] absolute top-[488px] left-[80px] z-[11]'>
                    <span className="flex w-[363px] h-[30px] items-center font-['Poppins'] text-[26px] font-bold leading-[30px] text-[#000] relative whitespace-nowrap z-[12] mt-0 mr-0 mb-0 ml-0">
                        Our Official Social Channel
                    </span>
                    <div className='w-[570px] h-[72px] relative z-[13] mt-[15px] mr-0 mb-0 ml-0'>
                        <span className="flex w-[260px] h-[72px] items-center font-['Poppins'] text-[24px] font-normal leading-[36px] text-[#000] absolute top-0 left-[calc(50%-285px)] overflow-hidden z-[14]">
                            eskayviemalaysia
                            <br />
                            @eskayviemalaysia_
                        </span>
                        <span className="flex w-[235px] h-[68px] items-center font-['Poppins'] text-[24px] font-normal leading-[36px] text-[#000] absolute top-[2px] left-[calc(50%--50px)] z-[15]">
                            www.eskayvie.com
                            <br />
                            info@eskayvie.com
                        </span>
                    </div>
                </div>
                <div className='w-[363px] h-[105px] text-[0px] absolute top-[651px] left-[80px] z-[3]'>
                    <span className="flex w-[363px] h-[30px] items-center font-['Poppins'] text-[26px] font-semibold leading-[30px] text-[#000] relative whitespace-nowrap z-10 mt-0 mr-0 mb-0 ml-0">
                        Follow Us
                    </span>
                    <div className='h-[35%] flex gap-4 z-[4] mt-[5%] mr-0 mb-0 ml-0'>
                    <a
                href=""
                className="flex p-2 items-center justify-center rounded-full bg-[#E2D7FF]  text-xl"
              >
                <FaFacebookF className="text-xl" />
              </a>
                    <a
                href=""
                className="flex p-2 items-center justify-center rounded-full bg-[#E2D7FF]  text-xl"
              >
               <FaTwitter className="text-xl" />
              </a>
                    <a
                href=""
                className="flex p-2 items-center justify-center rounded-full bg-[#E2D7FF]  text-xl"
              >
              <FaWhatsapp className="text-xl" />
              </a>
                    <a
                href=""
                className="flex p-2 items-center justify-center rounded-full bg-[#E2D7FF]  text-xl"
              >
              <CiLinkedin className="text-xl" />
              </a>
                       
                    </div>
                </div>
            </div>

            <div className='main-container w-full h-[640px] relative mx-auto my-0'>
                <div className=''>
                    <div className='w-[395px] h-[145px] bg-[#fff] rounded-[10px] relative z-[17] mt-[8px] mr-0 mb-0 ml-[8px]'>
                        <div className='absolute top-[20%] left-1/2 translate-x-[-20%] translate-y- z-[21] flex '>
                            {/* <div className='w-[31px] h-[31px] bg-[url(../assets/images/c35a1213981e232d1f7c079c485497d87e65ee0f.png)] bg-cover bg-no-repeat relative z-[21] mt-0 mr-0 mb-0 ml-[10px]' /> */}
                            <iframe className="" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15859.712465414488!2d106.8332136!3d-6.4032629!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69eb8f14c42065%3A0x5027cd751b952f13!2sPT%20Abbauf%20Mulia%20Konsultan%20Teknologi!5e0!3m2!1sen!2sid!4v1724312730280!5m2!1sen!2sid" width="600" height="600" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
                
                <div className='w-[29.201px] h-[6.56%] bg-cover bg-no-repeat absolute top-[-0.23%] left-1/2 translate-x-[-54.79%] translate-y-0 z-[3]' />
                <span className="flex h-[30px] justify-start items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-[49px] left-[calc(50%-14.5px)] text-left capitalize whitespace-nowrap z-[2]">
                    HEADQUARTERS
                </span>
                <span className="flex w-[654px] h-[108px] justify-start items-center font-['Poppins'] text-[26px] font-normal leading-[35px] text-[#000] absolute top-[89px] left-[calc(50%-14.5px)] text-left z-[4]">
                    No. G43, Block, 6, <br />
                    Persiaran Laman Seri Business Park, Seksyen 13, 40100, Shah Alam,
                    Selangor Darul Ehsan, Malaysia
                </span>
                <div className='w-[3.05%] h-[6.09%] bg-[url(../public/image/telephone.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[37.81%] left-[48.87%] z-[6]' />
                <span className="flex h-[30px] justify-start items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-[291px] left-[calc(50%-14.5px)] text-left capitalize whitespace-nowrap z-[7]">
                    CONTACT INFO
                </span>
                <span className="flex w-[492px] h-[67px] justify-start items-center font-['Poppins'] text-[26px] font-normal leading-[35px] text-[#000] absolute top-[331px] left-[calc(50%-14.5px)] text-left z-[8]">
                    Telephone : +6 03 5511 1050 <br />
                    E-mail : customercare@eskayvie.com
                </span>
                <div className='w-[3.05%] h-[6.09%] bg-[url(../public/image/clock.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[69.22%] left-[48.87%] z-10' />
                <span className="flex h-[30px] justify-start items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-[492px] left-[calc(50%-14.5px)] text-left capitalize whitespace-nowrap z-[11]">
                    OPENING HOURS
                </span>
                <span className="flex w-[356px] h-[108px] justify-start items-center font-['Poppins'] text-[26px] font-normal leading-[35px] text-[#000] absolute top-[532px] left-[calc(50%-14.5px)] text-left overflow-hidden z-[12]">
                    Monday - Firday
                    <br />
                    9:00 AM - 6:00 PM
                    <br />
                    Saturday & Sunday Closed
                </span>
            </div>

            <div className='main-container w-[1440px] h-[400px] text-[0px] relative mx-auto my-0'>
                <span className="flex w-[490px] h-[58px] justify-center items-center font-['Fredoka_One'] text-[48px] font-normal leading-[58px] text-[#000] tracking-[2.4px] relative text-center whitespace-nowrap z-[3] mt-[59px] mr-0 mb-0 ml-[475px]">
                    Distribution Centre
                </span>
                <div className='w-[1003.201px] h-[39px] relative z-[19] mt-[40px] mr-0 mb-0 ml-[219px]'>
                    <div className='w-[29.201px] h-[107.69%] bg-[url(../public/image/locate.png)] bg-cover bg-no-repeat absolute top-[-3.85%] left-1/2 translate-x-[-1722.89%] translate-y-0 z-[7]' />
                    <div className='w-[29.201px] h-[107.69%] bg-[url(../public/image/locate.png)] bg-cover bg-no-repeat absolute top-[-3.85%] left-1/2 translate-x-[-514.03%] translate-y-0 z-[11]' />
                    <div className='w-[29.201px] h-[107.69%] bg-[url(../public/image/locate.png)] bg-cover bg-no-repeat absolute top-[-3.85%] left-1/2 translate-x-[513.34%] translate-y-0 z-[15]' />
                    <div className='w-[29.201px] h-[107.69%] bg-[url(../public/image/locate.png)] bg-cover bg-no-repeat absolute top-[-3.85%] left-1/2 translate-x-[1622.89%] translate-y-0 z-[19]' />
                </div>
                <div className='w-[1202px] h-[30px] relative z-[18] mt-[10px] mr-0 mb-0 ml-[120px]'>
                    <span className="flex w-[225px] h-[30px] justify-center items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-0 left-[calc(50%-601px)] text-center capitalize whitespace-nowrap z-[6]">
                        Kota Bharu
                    </span>
                    <span className="flex w-[225px] h-[30px] justify-center items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-0 left-[calc(50%-248px)] text-center capitalize whitespace-nowrap z-10">
                        Sabah
                    </span>
                    <span className="flex w-[131px] h-[30px] justify-center items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-0 left-[calc(50%--99px)] text-center capitalize whitespace-nowrap z-[14]">
                        Sarawak
                    </span>
                    <span className="flex w-[225px] h-[30px] justify-center items-center font-['Poppins'] text-[28px] font-bold leading-[30px] text-[#000] absolute top-0 left-[calc(50%--376px)] text-center capitalize whitespace-nowrap z-[18]">
                        Singapore
                    </span>
                </div>
                <div className='w-[1282px] h-[89px] relative z-20 mt-[10px] mr-0 mb-0 ml-[80px]'>
                    <span className="flex w-[305px] h-[89px] justify-center items-center font-['Poppins'] text-[24px] font-normal leading-[33px] text-[#000] absolute top-0 left-[calc(50%-641px)] text-center overflow-hidden z-[8]">
                        Kartika & Co, <br />
                        48 Jln Pengkalan Chepa, Kota Bahru, Kelantan
                    </span>
                    <span className="flex w-[258px] h-[89px] justify-center items-center font-['Poppins'] text-[24px] font-normal leading-[33px] text-[#000] absolute top-0 left-[calc(50%-265px)] text-center z-[12]">
                        1-1, Lebuhraya Pantai Baru, Kota Kinabalu, Sabah
                    </span>
                    <span className="flex w-[201px] h-[56px] justify-center items-center font-['Poppins'] text-[24px] font-normal leading-[33px] text-[#000] absolute top-0 left-[calc(50%--64px)] text-center z-[16]">
                        75, Jalan Repok, <br />
                        Sarikei, Sarawak
                    </span>
                    <span className="flex w-[305px] h-[89px] justify-center items-center font-['Poppins'] text-[24px] font-normal leading-[33px] text-[#000] absolute top-0 left-[calc(50%--336px)] text-center z-20">
                        Primadona Singapore, 390 Victoria St, Golden Landmark, Singapore
                    </span>
                </div>
                <div className='h-[400px] bg-[url(../assets/images/06229897-7893-4670-b740-e3877348ae13.png)] bg-cover bg-no-repeat absolute top-0 left-0 right-0 z-[1]' />
            </div>
        <Footer/> 
        <FAButton/>
        </>
    )
}

export default ContactUs;