import { Button } from '@nextui-org/button'
import { Input } from '@nextui-org/input'
import React from 'react'
import { MailIcon } from '../icons'
import Link from 'next/link'

export default function Footer() {
    return (
        <div className='relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold '>
            <div className='h-[620px] md:h-[720px] lg:h-auto  bg-black'>
                <img src="/footer.png" alt="" className='w-full h-full object-cover object-left-top opacity-50' />

            </div>
            <div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-2 md:gap-4 px-1 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'>
                    <Link href={'/detail'}>
                        <p>Berita Terkini</p>
                    </Link>
                    <p>Info Komnas Anak</p>
                    <p>Info Komnas Perempuan</p>
                    <p>Kontak</p>
                </div>
                <div className='pb-2 md:pb-0'>
                    <p>Tentang PPID</p>
                    <p>Profil Pimpinan Polri</p>
                    <p>Struktur Organisasi</p>
                    <p>Visi & Misi</p>
                    <p>Logo</p>
                </div>
                <div className='pb-2 md:pb-0'>
                    <p>Informasi Berkala</p>
                    <p>Informasi Serta Merta</p>
                    <p>Informasi Setiap Saat</p>
                    <p>Informasi Dikecualikan</p>
                    <p>UU & Peraturan</p>
                    <p>Penerangan Satuan</p>
                </div>
                <div className='pb-2 md:pb-0'>
                    <p>SP2HP</p>
                    <p>Formulir Permohonan Informasi</p>
                    <p>Pelayanan SIM</p>
                    <p>Pelayanan E-Rikkes SIM</p>
                    <p>Pelayana Test Psikologi SIM</p>
                    <p>Pelayanan E-Avis</p>
                    <p>Pelayanan STNK & BPKP</p>
                    <p>Pelayanan SKCK</p>
                    <p>Pelayanan Karantina Presisi</p>
                    <p>Pelayanan Propam Presisi</p>
                    <p>Pelayanan Dumas Presisi</p>
                    <p>Pelayanan Polisiku</p>
                    <p>Pelayanan BINMAS</p>
                </div>
                <div className=''>
                    <p className='text-xl font-bold'>Subscribe</p>
                    <p>Dapatkan info & event terupdate dari kami.</p>
                    <Input
                        label="Email"
                        placeholder="Email Anda"
                        className='w-min pt-2'
                        startContent={
                            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
                        }
                        endContent={
                            <div className="pointer-events-none flex items-center">
                                <span className="text-default-400 text-small">@gmail.com</span>
                            </div>
                        }
                    />
                    <Button className='mt-3 bg-[#DD8306]'>Kontributor Wilayah</Button>
                </div>
            </div>
            <div className='dark:bg-black text-black dark:text-white text-center py-5 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>
    )
}