import { Button } from "@heroui/button";
import { Input } from "@heroui/input";
import { MailIcon, SendIcon } from "../icons";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";

export default function Footer() {
  const t2 = useTranslations("Navbar");
  const t3 = useTranslations("LandingInformasiPublik");

  return (
    <div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
      <div className="h-[500px] md:h-[720px] lg:h-auto  bg-black">
        <img
          src="/assets/Footer.jpg"
          alt=""
          className="w-full h-full object-cover object-left-top opacity-80"
        />
      </div>
      <div className="hidden md:grid absolute top-0 left-0 w-full grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-2 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="/">Berita Terkini</Link>
          <Link href="https://www.kpai.go.id/" target="_blank">
            Info Komnas Anak
          </Link>
          <Link href="https://komnasperempuan.go.id/" target="_blank">
            Info Komnas Perempuan
          </Link>
          <Link href="/kontak-kami">Kontak</Link>
        </div>
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="/static/humas-polri">{t2("tentang")} PPID</Link>
          <Link href="/static/profile-kapolri">{t2("profilPimpinan")}</Link>
          <Link href="/static/struktur-mabes">{t2("strukturOrganisasi")}</Link>
          <Link href="/static/visi-misi-polri">
            {t2("visi")} & {t2("misi")}
          </Link>
          <Link href="/static/logo">Logo</Link>
        </div>
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link
            href="https://siberpresisi.com/informasi-publik/informasi-berkala"
            target="_blank"
          >
            {t3("InformasiBerkala")}
          </Link>
          <Link
            href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
            target="_blank"
          >
            {t3("InformasiSertaMerta")}
          </Link>
          <Link
            href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
            target="_blank"
          >
            {t3("InformasiSetiapSaat")}
          </Link>
          <Link
            href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
            target="_blank"
          >
            {t3("InformasiDikecualikan")}
          </Link>
          <Link
            href="https://sisdivkum.id/library/peraturan-kepolisian"
            target="_blank"
          >
            {t3("UUdanPeraturan")}
          </Link>
          {/* <Link href="#">Penerangan Satuan</Link> */}
        </div>
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="https://sp2hp.bareskrim.polri.go.id/" target="_blank">
            SP2HP
          </Link>
          <Link href="/form-permohonan-informasi">
            Formulir Permohonan Informasi
          </Link>
          <Link href="https://www.digitalkorlantas.id/sim/" target="_blank">
            Pelayanan SIM
          </Link>
          <Link href="https://erikkes.id/" target="_blank">
            Pelayanan E-Rikkes SIM
          </Link>
          <Link href="https://eppsi.id/" target="_blank">
            Pelayana Test Psikologi SIM
          </Link>
          <Link href="https://e-avis.korlantas.polri.go.id/" target="_blank">
            Pelayanan E-Avis
          </Link>
          <Link href="https://samsatdigital.id/" target="_blank">
            Pelayanan STNK & BPKP
          </Link>
          <Link href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US">
            Pelayanan SKCK
          </Link>
          {/* <Link href="#">Pelayanan Karantina Presisi</Link> */}
          <Link
            href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
            target="_blank"
          >
            Pelayanan Propam Presisi
          </Link>
          <Link href="https://dumaspresisi.polri.go.id/" target="_blank">
            Pelayanan Dumas Presisi
          </Link>
          <Link href="https://polisiku.co.id/" target="_blank">
            Pelayanan Polisiku
          </Link>
          <Link href="https://bos.polri.go.id/login" target="_blank">
            Pelayanan BINMAS
          </Link>
        </div>
        <div className="w-min lg:w-max">
          <p className="text-xl font-bold">Subscribe</p>
          <p>Dapatkan info & event terupdate dari kami.</p>
          <div className="flex ">
            <Input
              label="Email"
              placeholder="Email Anda"
              className="pt- rounded-none"
              classNames={{
                inputWrapper: "rounded-none rounded-l-lg",
              }}
              startContent={
                <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
              }
            />
            <div className="bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
              <SendIcon />
            </div>
          </div>
          <Link href={`/auth`}>
            <Button className="mt-1 bg-[#bb3523] text-white">
              Kontributor Wilayah
            </Button>
          </Link>
        </div>
      </div>
      <div className="grid grid-cols-2 justify-center md:hidden absolute top-0 left-0 w-full  gap-5 md:gap-4 px-5 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="/">Berita Terkini</Link>
          <Link href="https://www.kpai.go.id/" target="_blank">
            Info Komnas Anak
          </Link>
          <Link href="https://komnasperempuan.go.id/" target="_blank">
            Info Komnas Perempuan
          </Link>
          <Link href="/kontak-kami">Kontak</Link>
        </div>
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="/static/humas-polri">{t2("tentang")} PPID</Link>
          <Link href="/static/profile-kapolri">{t2("profilPimpinan")}</Link>
          <Link href="/static/struktur-mabes">{t2("strukturOrganisasi")}</Link>
          <Link href="/static/visi-misi-polri">
            {t2("visi")} & {t2("misi")}
          </Link>
          <Link href="/static/logo">Logo</Link>
        </div>
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="https://sp2hp.bareskrim.polri.go.id/" target="_blank">
            SP2HP
          </Link>
          <Link href="/form-permohonan-informasi">
            Formulir Permohonan Informasi
          </Link>
          <Link href="https://www.digitalkorlantas.id/sim/" target="_blank">
            Pelayanan SIM
          </Link>
          <Link href="https://erikkes.id/" target="_blank">
            Pelayanan E-Rikkes SIM
          </Link>
          <Link href="https://eppsi.id/" target="_blank">
            Pelayana Test Psikologi SIM
          </Link>
          <Link href="https://e-avis.korlantas.polri.go.id/" target="_blank">
            Pelayanan E-Avis
          </Link>
          <Link href="https://samsatdigital.id/" target="_blank">
            Pelayanan STNK & BPKP
          </Link>
          <Link href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US">
            Pelayanan SKCK
          </Link>
          {/* <Link href="#">Pelayanan Karantina Presisi</Link> */}
          <Link
            href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
            target="_blank"
          >
            Pelayanan Propam Presisi
          </Link>
          <Link href="https://dumaspresisi.polri.go.id/" target="_blank">
            Pelayanan Dumas Presisi
          </Link>
          <Link href="https://polisiku.co.id/" target="_blank">
            Pelayanan Polisiku
          </Link>
          <Link href="https://bos.polri.go.id/login" target="_blank">
            Pelayanan BINMAS
          </Link>
        </div>
        <div className="flex flex-col gap-2">
          <div className="pb-2 md:pb-0 flex flex-col gap-2">
            <Link
              href="https://siberpresisi.com/informasi-publik/informasi-berkala"
              target="_blank"
            >
              {t3("InformasiBerkala")}
            </Link>
            <Link
              href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
              target="_blank"
            >
              {t3("InformasiSertaMerta")}
            </Link>
            <Link
              href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
              target="_blank"
            >
              {t3("InformasiSetiapSaat")}
            </Link>
            <Link
              href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
              target="_blank"
            >
              {t3("InformasiDikecualikan")}
            </Link>
            <Link
              href="https://sisdivkum.id/library/peraturan-kepolisian"
              target="_blank"
            >
              {t3("UUdanPeraturan")}
            </Link>
            {/* <Link href="#">Penerangan Satuan</Link> */}
          </div>
          <div className="w-min lg:w-max">
            <p className="text-xl font-bold">Subscribe</p>
            <p>Dapatkan info & event terupdate dari kami.</p>
            <div className="flex ">
              <Input
                label="Email"
                placeholder="Email Anda"
                className="rounded-none mt-2"
                classNames={{
                  inputWrapper: "rounded-none rounded-l-lg",
                }}
                // startContent={
                //   <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
                // }
              />
              <div className="bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
                <SendIcon />
              </div>
            </div>
            <Link href={`/auth`}>
              <Button className="mt-1 bg-[#bb3523] text-white ">
                Kontributor Wilayah
              </Button>
            </Link>
          </div>
        </div>
      </div>
      <div className="dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal">
        &copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p>
        &nbsp; All Rights Reserved
      </div>
    </div>
  );
}