import Image from "next/image"
import Link from "next/link"
import { BackgroundGradientAnimation } from "@/components/ui/background-gradient-animation"
import niLogo from "@/public/logo.svg"
import netinternet from "@/public/netinternet.svg"
import waf from "@/public/heimwall-logo.svg"
import { FaFacebook } from "react-icons/fa";
import { BsTwitterX } from "react-icons/bs";
import { FaLinkedin } from "react-icons/fa";
import { FaInstagram } from "react-icons/fa";
import { FaGithub } from "react-icons/fa";
import { BsRouter } from "react-icons/bs";
import { HiOutlineServerStack } from "react-icons/hi2";
import { IoMdCloudOutline } from "react-icons/io";
import { MdCampaign } from "react-icons/md";
import { TbWorldWww } from "react-icons/tb";
import { BsHddNetwork } from "react-icons/bs";
import { CgServer } from "react-icons/cg";

export default function Home() {
  return (
    <>
      <BackgroundGradientAnimation>
        <div className="absolute z-50 inset-0 h-screen w-screen bg-black bg-opacity-50 overflow-hidden">
          <div className="absolute z-0 flex flex-col items-center justify-center justify-items-center h-screen w-screen">
            <div className="flex justify-center text-center pt-4 sm:pt-8">
              <button className="inline-flex h-16 w-16 px-4 animate-shimmer items-center justify-center rounded-full border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
                <Link href={"https://netinternet.com.tr"} aria-label="Netinternet">
                  <Image src={niLogo} alt={""} width={48} height={48} />
                </Link>
              </button>
            </div>
            <div className="flex text-center p-4 sm:pt-8 justify-center justify-items-center">
              <Link href={"https://netinternet.com.tr"} aria-label="Netinternet">
                <Image
                  src={netinternet}
                  alt={""}
                  priority={false}
                  loading="lazy"
                  width={200}
                />
              </Link>
            </div>
            <div className="items-center flex justify-center text-white pt-4 pb-2 sm:pt-8 gap-x-6">
              <Link href={"https://www.facebook.com/netinternet"} aria-label="Facebook"><FaFacebook className="w-6 h-6 sm:w-8 sm:h-8" /></Link>
              <Link href={"https://twitter.com/netinternet"} aria-label="Twitter"><BsTwitterX className="w-6 h-6 sm:w-8 sm:h-8" /></Link>
              <Link href={"https://www.instagram.com/netinternet/"} aria-label="Instagram"><FaInstagram className="w-6 h-6 sm:w-8 sm:h-8" /></Link>
              <Link href={"https://www.linkedin.com/company/netinternet"} aria-label="LinkedIn"><FaLinkedin className="w-6 h-6 sm:w-8 sm:h-8" width={8} height={8} /></Link>
              <Link href={"https://github.com/netinternet"} aria-label="GitHub"><FaGithub className="w-6 h-6 sm:w-8 sm:h-8" /></Link>
            </div>
            <div className="flex flex-wrap w-full justify-center pt-4 sm:pt-8">
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <BsRouter className="left-[5%] absolute w-6 h-6" />
                <Link href={"https://www.netinternet.com.tr/altyapi-sorgula"}>
                  <h1>İnternet</h1>
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <BsHddNetwork className="left-[5%] absolute w-6 h-6" />
                <Link href={"https://www.netinternet.com.tr/sunucu-barindirma"}>
                  Veri Merkezi
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <Link href={"https://www.netinternet.com.tr/waf-hizmeti"}>
                  <div className="absolute w-6 h-6 left-[5%]">
                    <Image src={waf} alt="" fill />
                  </div>
                  Heimwall
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <Link href={"https://www.ilkbyte.com"}>
                  <IoMdCloudOutline className="left-[5%] absolute w-6 h-6" />
                  İlkbyte
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <Link href={"https://www.netinternet.com.tr/hosting/cpanel"}>
                  <CgServer className="left-[5%] absolute w-6 h-6" />
                  Hosting
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <Link href={"https://www.netinternet.com.tr/domain"}>
                  <TbWorldWww className="left-[5%] absolute w-6 h-6" />
                  Alan Adı
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <Link href={"https://www.netinternet.com.tr/ssd-vds-sanal-sunucu"}>
                  <HiOutlineServerStack className="left-[5%] absolute w-6 h-6" />
                  SSD VDS Sunucu
                </Link>
              </button>
              <button className="inline-flex h-12 w-2/3 md:h-16 mb-2 sm:mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
                <Link href={"https://www.netinternet.com.tr/campaigns"}>
                  <MdCampaign className="left-[5%] absolute w-6 h-6" />
                  Kampanyalar
                </Link>
              </button>
            </div>
          </div>
        </div >
      </BackgroundGradientAnimation >
    </>
  );
}