import React from 'react'
import { FbIcon, Hotline, IgIcon, Location, Mail, TtIcon, TwIcon, WorldIcon, YtIcon } from '../icons'

export default function FooterSatker() {
    return (
        <>
            <div id='footer-satker' className='w-full  bg-[#1F1A17] flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4 gap-0 md:gap-3 lg:gap-7 p-2 lg:p-16  text-sm'>
                <div className=' flex-col hidden lg:block'>
                    <img src="/e-ppid.png" alt="logo" />
                </div>
                <div className='text-sm space-y-3 text-white'>
                    <div className='border-b-2 border-white border-dashed pb-0 md:pb-2 font-semibold'>Kontak Kami</div>
                    <div className='flex gap-2'>
                        <div><Location /></div>
                        <div>Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia</div>
                    </div>
                    <div className='flex gap-2'>
                        <div><Hotline /></div>
                        <div>Hotline Divisi HumasPolri (021) 72120599</div>
                    </div>
                    <div className='flex gap-2'>
                        <div><Hotline /></div>
                        <div>Call Center 110</div>
                    </div>
                    <div className='flex gap-2'>
                        <div><Mail /></div>
                        <div>ppid@polri.go.id</div>
                    </div>
                </div>
                <div>
                    <div className='text-sm space-y-3 text-white'>
                        <div className='border-b-2 border-white border-dashed pb-2 text-white font-semibold'>Tautan</div>
                        <div className='grid grid-cols-2 gap-2'>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>Polri.go.id</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>TBNews</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>Humas Polri</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>MediaHub</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>Satu Data</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>PUSIKNAS</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>SPIT</div>
                            </div>
                            <div className='flex gap-2'>
                                <div><WorldIcon /></div>
                                <div>POLRI TV</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div className='text-sm space-y-3 text-white'>
                        <div className='border-b-2 border-white border-dashed pb-2 '>Social Media Humas</div>
                        <div className="flex gap-1 lg:gap-3 items-center">
                            <div><FbIcon /></div>
                            <div><IgIcon /></div>
                            <div><YtIcon /></div>
                            <div><TwIcon /></div>
                            <div><TtIcon /></div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='dark:bg-black text-black dark:text-white text-center py-2 text-xs md:text-sm flex justify-center font-normal'>&copy; Copyright Humas<p className='text-red-700'>&nbsp; POLRI &reg;</p>&nbsp; All Rights Reserved</div>
        </>

    )
}