import React from 'react'
import { SearchIcons } from '../icons'
import { Input } from '@nextui-org/input'

export default function PPIDBanner() {
    return (
        <div className='relative h-screen'>
            <div className='relative w-full'>
                <img
                    className='w-full opacity-100 dark:opacity-90'
                    src="bannerppid.png"
                    alt="banner"
                />
            </div>
            <div className='flex  flex-col items-center w-[100%] md:w-[80%] leading-10 h-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center bg-inherit text-inherit md:text-white'>
                <p className='text-lg md:text-xl lg:text-4xl font-bold leading-10'>
                    SELAMAT DATANG DI PORTAl PPID HUBUNGAN MASYARAKAT POLISI REPUBLIK INDONESIA  (HUMAS POLRI)
                </p>
                <p className='text-xs md:text-md lg:text-base pt-5'>
                    Layanan ini merupakan fasilitas daring yang disediakan bagi para pemohon informasi publik, sebagai bagian dari <br /> implementasi prinsip keterbukaan informasi publik di Pusat Informasi dan Dokumentasi (PPID) Utama.
                </p>
                <div className='pt-4 w-[50%]'>
                    <Input
                        type="email"
                        placeholder="Informasi Berkala"
                        classNames={{

                            inputWrapper: 'bg-white'
                        }}
                        startContent={
                            <SearchIcons className=" text-default-400 pointer-events-none flex-shrink-0" />
                        }
                    />
                </div>
            </div>
        </div>
    )
}