import LogoIcon from "./icons/LogoIcon";

const Footer = () => {
  return (
    <footer className="grid xl:grid-cols-12 sm:grid-cols-8 bg-white px-7 py-8 gap-4">
      <div className="flex flex-col justify-between sm:row-span-2 sm:col-span-2 col-span-8">
        <LogoIcon />
        <p className="text-caption-s text-[#73787C] font-semibold hidden sm:block">
          Privacy Policy
        </p>
      </div>
      <div className="border-t flex justify-between 2xl:col-start-7 2xl:col-span-3 xl:col-span-4 xl:col-start-5 sm:col-start-4 sm:col-span-5 col-span-8">
        <p className="text-[#73787C] py-3">COMPANY</p>
        <div className="flex flex-col text-m text-[#73787C]">
          <p className="py-3">Masterplan</p>
          <p className="py-3">Search</p>
          <p className="py-3">Favorites</p>
          <p className="py-3 text-[#0D1922] text-s">Company</p>
        </div>
      </div>
      <div className="border-t flex justify-between 2xl:col-span-3 xl:col-span-4 sm:col-start-4 sm:col-span-5 col-span-8">
        <p className="text-[#73787C] py-3">FOLLOW US</p>
        <div className="flex flex-col text-m text-[#73787C]">
          <p className="py-3">Facebook</p>
          <p className="py-3">Instagram</p>
          <p className="py-3">LinkedIn</p>
        </div>
      </div>
      <div className="block sm:hidden col-span-8 border-t">
        <p className="text-caption-s text-[#73787C] font-semibold pt-3">
          Privacy Policy
        </p>
      </div>
    </footer>
  );
};

export default Footer;
