import React from "react";
import "./Footer.css"; // Import the CSS file
import call from "../assets/footer//call.png";
import Whatsapp from "../assets/footer/whatsapp.png";
import insta from "../assets/footer/instagram.png";
import world from "../assets/footer/world1.png";

//className="m-h-screen bg-[#28409C] md:bg-[url('world.png')] md:object-right-top md:bg-cover "
{
  /*md:m-h-screen bg-cover" style={{backgroundImage:`url(${fat})`}}*/
}
function Footer() {
  return (
    <>
      <div className="bg-[#28409C] font-montserrat">
        <div className=" bg-[#28409C] md:bg-[url('footer3.png')] md:bg-contain bg-no-repeat">
          <h2 className="text-white text-2xl md:text-5xl font-semibold px-3 md:px-4 py-6 md:py-6 md:font-extrabold">
            OMPOI
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 ">
            <div className="hidden md:block object-right-bottom relative mt-[300px]">
              <img src={world} alt="world" className=" size-[800px]  " />
            </div>
            <div className=" ml-10 md:ml-10  mt-6 md:mt-130 mb-6 grid grid-cols-2 gap-5 md:grid-cols-4 lg:grid-cols-3">
              <div className="text-white  ">
                <h4 className="text-2xl md:text-3xl font-semibold md:font-extrabold py-3">
                  About Us
                </h4>
                <ul className="font-light text-gray-300">
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Pricing
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Contact
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      FAQ
                    </a>
                  </li>
                </ul>
              </div>
              <div className="text-white">
                <h4 className="text-2xl md:text-3xl font-semibold md:font-extrabold py-3">
                  Support
                </h4>
                <ul className="font-light text-gray-300">
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Help Center
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Terms
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Privacy
                    </a>
                  </li>
                </ul>
              </div>
              <div className="text-white">
                <h4 className="text-2xl md:text-3xl font-semibold md:font-extrabold py-3">
                  Policies
                </h4>
                <ul className="font-light text-gray-300">
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Return
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Refund
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Cancellation
                    </a>
                  </li>
                </ul>
              </div>
              <div className="text-white">
                <h4 className="text-2xl md:text-3xl font-semibold md:font-extrabold py-3">
                  Help
                </h4>
                <ul className="font-light text-gray-300">
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Your Account
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      App Download
                    </a>
                  </li>
                </ul>
              </div>
              <div className="text-white">
                <h4 className="text-[13.88px] md:text-[20.88px]  font-semibold md:font-extrabold py-3">
                  Make Money With Us
                </h4>
                <ul className="font-light text-gray-300">
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Sell on OMPOI
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-[17px] md:text-2xl hover:text-white cursor-pointer"
                    >
                      Register as Merchant
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="bg-[#28409C]">
            {/* <div className="hidden md:bg-[#E9FAFF] flex items-center right-68 ml-[560px] rounded-tl-[30px]  p-2"> */}
            <div className="hidden md:flex bg-[#E9FAFF] items-center  mt-[-35px] ml-[560px] right-68 p-1 text-[5px] ">

              <div className="font-semibold  left-[120px] top-[5px] text-[10px] relative">
                <h1>&copy;2025 OMPOI</h1>
              </div>
              <div className="relative mr-4 left-[130px] font-semibold text-[10px] top-[5px] ">
                <h1>Terms</h1>
              </div>
              <div className="relative  left-[140px] mr-17 font-semibold text-[10px] top-[5px] ">
                <h1>Privacy</h1>
              </div>
              <div className="relative font-extrabold text-[10px] left-[130px]  mr-3 top-[5px] ">
                <h1>Made With &#128153; by MIIT</h1>
              </div>
              <div className="relative font-semibold  left-[230px] mr-0 text-[10px] top-[5px] ">
                <h1>Conact Us</h1>
              </div>
              <div className=" flex gap-5 ml-[250px] mt-[5px] ">
                <a href="#">
                  <img src={insta} alt="instagram" className="w-4 h-4" />
                </a>
                <a href="#">
                  <img src={Whatsapp} alt="Whatsapp" className="w-4 h-4" />
                </a>
                <a href="#">
                  <img src={call} alt="call" className="w-4 h-4 "/>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Footer;

{
  /* <div className="w-[1348px] z-50  ">
            <div className="grid grid-cols-5 gap-1 bg-[#E9FAFF]  p-1">
              <div className=" text-[12px] text-black font-semibold flex items-center">
                <h5 className="mt-3 mb-2">&copy;2025 OMPOI</h5>
              </div>
              <div className="flex gap-3 mt-3 items-center">
                <span>Terms</span>
                <span>Privacy</span>
              </div>
              <div className=" flex items-center justify-center">
                <h5 className="font-extrabold mt-3 mb-2">
                  Made With &#128153; by MIIT
                </h5>
              </div>
              <div className=" flex items-center justify-center">
                <h5 className="font-semibold mt-3 mb-2">Contact us</h5>
                <div className=" flex gap-3 mt-3 items-center justify-end">
                  <img src={insta} alt="instagram" className="w-5 h-5" />
                  <img src={Whatsapp} alt="Whatsapp" className="w-5 h-5" />
                  <img src={call} alt="call" className="w-5 h-5" />
                </div>
              </div>
            </div>
          </div> */
}
{
  /* <div className="hidden md:grid grid-cols-5 gap-10 bg-[#E9FAFF]  p-1 w-full">
            <div className="text-[12px]  text-black font-semibold inline-flex ">
              <h5 className="mt-3 mb-2">&copy;2025 OMPOI</h5>
              <div className="flex gap-5 mt-3  ">
                <span className="ml-4">Terms</span> <span>Privacy</span>
              </div>
              <div>
                <h5 className="font-extrabold ml-40 mt-3 mb-2">
                  Made With &#128153; by MIIT{" "}
                </h5>
              </div>
              <div className="inline-flex">
                <h5 className="font-semibold ml-30 mt-3 mb-2"> Conact us</h5>
              </div>
              <div className="flex gap-3 ml-2 mt-3">
                <img src={insta} alt="instgram" className="w-5 h-5" />
                <img src={Whatsapp} alt="Whatsapp" className="w-5 h-5" />
                <img src={call} alt="call" className="w-5 h-5" />
              </div>
            </div>
          </div> */
}