import Image from "next/image";
import Link from "next/link";

export default function Footer() {
  return (
    <footer className="bg-black text-[#c7dbe3] px-6 md:px-20 py-16">
      <div className="flex flex-col md:flex-row gap-10">
        <div className="w-full md:w-4/12">
          <Image
            src="/jaecoobot.png"
            alt="Jaecoo"
            width={300}
            height={200}
            className="ml-4"
          />

          <div className="flex gap-4 mt-6 ml-8 md:ml-8 text-xl text-[#c7dbe3]">
            <Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
              <div className="hover:text-white cursor-pointer">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                >
                  <g
                    fill="none"
                    stroke="currentColor"
                    // stroke-width="1.5"
                  >
                    <path
                      // stroke-linecap="round"
                      // stroke-linejoin="round"
                      d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
                    />
                    <path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z" />
                    <path
                      // stroke-linecap="round"
                      // stroke-linejoin="round"
                      d="m17.5 6.51l.01-.011"
                    />
                  </g>
                </svg>
              </div>
            </Link>
            <Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
              <div className="hover:text-white cursor-pointer">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="M16 8.245V15.5a6.5 6.5 0 1 1-5-6.326v3.163a3.5 3.5 0 1 0 2 3.163V2h3a5 5 0 0 0 5 5v3a7.97 7.97 0 0 1-5-1.755"
                  />
                </svg>
              </div>
            </Link>
          </div>
        </div>
        <div className="md:w-8/12 ">
          <div className="flex flex-wrap md:flex-row gap-10 md:gap-28">
            <div>
              <h4 className="font-semibold text-white mb-4">ABOUT</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="#">Partnership</a>
                </li>
                <li>
                  <a href="#">Terms of Use</a>
                </li>
                <li>
                  <a href="#">Privacy</a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-white mb-4">PRODUCT</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="#">About</a>
                </li>
                <li>
                  <a href="#">Features</a>
                </li>
                <li>
                  <a href="#">Support</a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-white mb-4">RESOURCES</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a href="#">Career</a>
                </li>
                <li>
                  <a href="#">Blog</a>
                </li>
                <li>
                  <a href="#">Legal</a>
                </li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">CONTACT</h4>
              <ul className="space-y-4 text-sm">
                <li>
                  <a
                    href="mailto:jaecookelapagading@gmail.com"
                    className="hover:underline"
                  >
                    jaecookelapagading@gmail.com
                  </a>
                </li>

                <li>0816 1124 631</li>
                <li>
                  <p className="font-semibold text-white">
                    Jaecoo Kelapa Gading
                  </p>
                  <p>
                    Jl. Boulevard Raya Blok LA 6 No. 34-35,
                    <br />
                    Kelapa Gading, Jakarta Utara 14240
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
