import Corner1 from "@/image/footer/corner-footer-1.svg";
import Corner2 from "@/image/footer/corner-footer-2.svg";
import LogoWhite from "@/image/logo-white.png";
import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
import Image from "next/image";

export default function Footer() {
  return (
    <div id="kontak" className="bg-primary-800 w-full relative">
      <div className="flex flex-col gap-4 px-4 py-6 z-10 text-white md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
        <div className="flex flex-col gap-4 md:justify-between">
          <div className="flex flex-col gap-3">
            <Image src={LogoWhite} className="h-7.5 w-fit" alt="logo-white" />
            <p className="text-sm md:text-lg">The Kensington Office Tower Lantai 2 Ruang B2, Jl. Boulevard Raya No. 1, Kelapa Gading Timur, Kelapa Gading, Jakarta Utara 14240</p>
          </div>
          <div className="w-full pt-4 border-t border-primary-600 text-lg">Mulia Informasi Teknologi @2026. All Right Reserved</div>
        </div>

        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-4 md:gap-6">
            <div className="flex flex-col gap-2 md:gap-6">
              <p className="text-[32px] md:text-[40px] font-semibold">Let’s Collaborate</p>
              <p className="md:text-lg">Let’s build something that works and grows.</p>
            </div>
            <div className="primary-button pl-3">
              Contact Us
              <div className="p-2 bg-secondary-400">
                <ArrowUpRightIcon className="size-5 text-white" />
              </div>
            </div>
          </div>

          <p className="text-center z-10 pt-4 border-t border-primary-600 flex w-full md:hidden">Mulia Informasi Teknologi @2026. All Right Reserved</p>
        </div>
      </div>

      <Image src={Corner1} className="w-20 absolute z-0 top-0 right-0" alt="corner-1" />
      <Image src={Corner2} className="w-20 absolute z-0 bottom-0 left-0" alt="corner-1" />
    </div>
  );
}