import React from "react";
import { FaFacebookF } from "react-icons/fa";
import { FaInstagram } from "react-icons/fa";
import { FaTiktok } from "react-icons/fa";
import Image from "next/image";
import Contact from "@/components/Contact/Contact";

const Footer = () => {
  return (
    <div className="footer text-white pb-[20px] pt-[35px] sm:px-[200px] px-[50px] bg-slate-800 w-full">
      <div className="flex w-full sm:justify-between justify-center">
        <div className="item flex-1 flex flex-col gap-[10px] text-justify text-sm text-gray-400">
          <h1 className="text-xl font-bold text-gray-200">Categories</h1>
          <span>Men</span>
          <span>Women</span>
          <span>Shoes</span>
          <span>Accessories</span>
          <span>New Arrivals</span>
        </div>
        <div className="item flex-1 flex flex-col gap-[10px] text-justify text-sm text-gray-400">
          <h1 className="text-xl font-bold text-gray-200">Links</h1>
          <span>FAQ</span>
          <span>Pages</span>
          <span>Stores</span>
          <span>Compare</span>
          <span>Cookies</span>
        </div>
      </div>
      <div className="w-full flex justify-center items-center">
        <Contact />
      </div>

      {/* copyright */}
      <div className="bottom text-xs flex tablet:flex-row flex-col gap-4 sm:items-start items-center justify-between mt-[30px] sm:text-start text-center">
        <div className="flex flex-col gap-4">
          <span className="flex max-w-[320px]">
            All items are sold under the belief that they are original works and
            not copyrighted under another company.
          </span>
        </div>
        <div className="relative flex md:w-1/2 w-full h-[50px]">
          <Image
            src="/payment.png"
            fill
            style={{ objectFit: "cover", objectPosition: "center" }}
            className="hidden lg:block bg-slate-300"
            alt="payment systems"
            />
          <Image
            src="/payment.png"
            fill
            style={{ objectFit: "contain", objectPosition: "center" }}
            className="block lg:hidden bg-slate-300"
            alt="payment systems small"
            />
        </div>
      </div>
      <span className="text-xs lg:text-start flex text-center sm:justify-start justify-center items-center w-full mt-[10px]">© 2024 - Kevos Attire LLC. All rights reserved. </span>
    </div>
  );
};

export default Footer;
