import { FaXTwitter } from "react-icons/fa6";
import { GoArrowUpRight } from "react-icons/go";

const Footer = () => {
    
  return (
    <>
    <div className='w-full h-[60vh] bg-[#0E0E0E] text-white px-[3vw] flex flex-col justify-between'>
        <div className="grid sm:flex sm:justify-between mt-[4vh] sm:mt-[8vh]">
            <div>
                <p className='text-[6vw] sm:text-[1.5vw] leading-none'>Relax. We&apos;ve got you.</p>
                <button className="mt-[6vw] mb-[6vw] sm:mt-[1.5vw] px-[3.5vw] sm:px-[1.25vw] py-[1.6vw] sm:py-[0.8vw] border text-[3.5vw] sm:text-[1vw] rounded-full sm:rounded-lg hover:bg-[#FAF8F3] hover:text-black hover:transition-transform duration-500">Take a seat</button>
            </div>
            <div className="flex gap-[20vw] sm:gap-[5vw] text-[4vw] sm:text-[1vw]">
                <div className="flex flex-col ">
                    <a href="">Home</a>
                    <a href="">Work</a>
                    <a href="">About</a>
                    <a href="">Services & Models</a>
                    <a href="">Contact</a>
                </div>
                <div className="flex flex-col">
                    <a href="" className="flex"><FaXTwitter/><GoArrowUpRight className="text-[3vw] sm:text-[0.8vw]"/></a>
                    <a href="" className="flex">Instagram <GoArrowUpRight className="text-[3vw] sm:text-[0.8vw]"/></a>
                    <a href="" className="flex">LinkedIn <GoArrowUpRight className="text-[3vw] sm:text-[0.8vw]"/></a>
                </div>
            </div>
        </div>
        <div className="grid sm:flex sm:justify-between">
            <div className="text-[4vw] sm:text-[1vw]">
                <p>San Diego—California</p>
                <p>Paris—France </p>
            </div>
            <div className="grid sm:flex sm:gap-[5vw] text-[4vw] sm:text-[1vw]">
                <div className="flex flex-col">biz@rejouice.com</div>
                <div className="flex flex-col">©2023 legal</div>
            </div>
        </div>
    </div>
    </>
  )
}

export default Footer