import NextImage from 'next/image'
import IndoteknikLogo from '@/images/logo.png'
import {
  DevicePhoneMobileIcon,
  EnvelopeIcon,
  PhoneArrowUpRightIcon
} from '@heroicons/react/24/outline'
import Link from '../Link/Link'
import MobileView from '../../views/MobileView'
import DesktopView from '../../views/DesktopView'

const BasicFooter = () => {
  return (
    <>
      <MobileView>
        <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'>
          <div className='w-1/2 flex flex-col gap-y-4 pr-1.5'>
            <div>
              <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} />

              <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div>
            </div>

            <OfficeLocation />
            <WarehouseLocation />
            <InformationCenter />
            <OpenHours />
            <SocialMedias />
          </div>

          <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
            <AboutUs />
            <CustomerGuide />
            <Payments />
          </div>

          <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'>
            Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang
          </div>
        </footer>
      </MobileView>

      <DesktopView>
        <footer className='bg-gray_r-3 py-6'>
          <div className='container mx-auto flex flex-wrap justify-between'>
            <div className='w-3/12'>
              <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={180} height={60} />
              <div className='font-semibold mt-2 mb-4'>PT. Indoteknik Dotcom Gemilang</div>
              <InformationCenter />
            </div>
            <CustomerGuide />
            <AboutUs />
            <div className='w-3/12'>
              <div className='grid grid-cols-1 gap-y-4'>
                <OfficeLocation />
                <WarehouseLocation />
                <OpenHours />
                <Payments />
              </div>
            </div>
            <hr className='w-full my-4 border-gray_r-7' />
            <div className='w-full flex justify-between items-center'>
              <div className='text-caption-1'>
                Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang
              </div>
              <div>
                <SocialMedias />
              </div>
            </div>
          </div>
        </footer>
      </DesktopView>
    </>
  )
}

const headerClassName = 'font-semibold mb-2'

const OfficeLocation = () => (
  <div>
    <div className={headerClassName}>Kantor Pusat</div>
    <div className='leading-6 text-gray_r-12/80'>
      Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara
    </div>
  </div>
)

const WarehouseLocation = () => (
  <div>
    <div className={headerClassName}>Gudang Indoteknik</div>
    <div className='leading-6 text-gray_r-12/80'>
      Jl. Bandengan Utara Komp. 85 A dan B, Penjaringan, Kec. Penjaringan, Jakarta Utara
    </div>
  </div>
)

const AboutUs = () => (
  <div>
    <div className={`${headerClassName} mb-3`}>Tentang Kami</div>
    <ul className='flex flex-col gap-y-2'>
      <li>
        <InternalItemLink href='/'>Company Profile</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Karir</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Pelanggan Kami</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Menjadi Supplier</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Garansi dan Pengembalian</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Metode Pembayaran</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Metode Pengiriman</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Testimonial</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Kebijakan Privacy</InternalItemLink>
      </li>
    </ul>
  </div>
)

const CustomerGuide = () => (
  <div>
    <div className={`${headerClassName} mb-3`}>Panduan Pelanggan</div>
    <ul className='flex flex-col gap-y-2'>
      <li>
        <InternalItemLink href='/'>Panduan Belanja</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>F.A.Q</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Kebijakan Privasi</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Pengajuan Tempo</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Garansi Produk</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Online Quotation</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Pengiriman</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Pembayaran</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/'>Syarat & Ketentuan</InternalItemLink>
      </li>
    </ul>
  </div>
)

const InformationCenter = () => (
  <div>
    <div className={`${headerClassName} mb-3`}>Layanan Informasi</div>
    <ul className='flex flex-col gap-y-2'>
      <li className='text-gray_r-12/80 flex items-center'>
        <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
        <a href='tel:02129338828'>(021) 2933-8828 / 29</a>
      </li>
      <li className='text-gray_r-12/80 flex items-center'>
        <EnvelopeIcon className='w-[18px] mr-2' />
        <a href='mailto:sales@indoteknik.com'>sales@indoteknik.com</a>
      </li>
      <li className='text-gray_r-12/80 flex items-center'>
        <DevicePhoneMobileIcon className='w-[18px] mr-2' />
        <a href='https://wa.me/+628128080622'>0812-8080-622</a>
      </li>
    </ul>
  </div>
)

const OpenHours = () => (
  <div>
    <div className={headerClassName}>Jam Operasional</div>
    <ul className='flex flex-col gap-y-1'>
      <li className='block md:flex md:gap-x-2'>
        <div className='text-gray_r-12'>Senin - Jumat:</div>
        <div className='text-gray_r-12/80'>08:30 - 17:00</div>
      </li>
      <li className='block md:flex md:gap-x-2'>
        <div className='text-gray_r-12'>Sabtu:</div>
        <div className='text-gray_r-12/80'>08:30 - 14:00</div>
      </li>
    </ul>
  </div>
)

const SocialMedias = () => (
  <div>
    <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div>
    <div className='flex flex-wrap gap-2'>
      <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
      <NextImage src='/images/socials/Facebook.png' alt='Facebook Logo' width={24} height={24} />
      <NextImage src='/images/socials/Twitter.png' alt='Twitter Logo' width={24} height={24} />
      <NextImage src='/images/socials/Linkedin.png' alt='Linkedin Logo' width={24} height={24} />
    </div>
  </div>
)

const Payments = () => (
  <div>
    <div className={headerClassName}>Pembayaran</div>
    <div className='flex flex-wrap gap-2'>
      <NextImage src='/images/payments/bca.png' alt='Bank BCA Logo' width={48} height={24} />
      <NextImage src='/images/payments/bni.png' alt='Bank BNI Logo' width={48} height={24} />
      <NextImage src='/images/payments/bri.png' alt='Bank BRI Logo' width={48} height={24} />
      <NextImage src='/images/payments/gopay.png' alt='Gopay Logo' width={48} height={24} />
      <NextImage
        src='/images/payments/mandiri.png'
        alt='Bank Mandiri Logo'
        width={48}
        height={24}
      />
      <NextImage
        src='/images/payments/mastercard.png'
        alt='Mastercard Logo'
        width={48}
        height={24}
      />
      <NextImage
        src='/images/payments/permata.png'
        alt='Bank Permata Logo'
        width={48}
        height={24}
      />
      <NextImage src='/images/payments/visa.png' alt='Visa Logo' width={48} height={24} />
    </div>
  </div>
)

const InternalItemLink = ({ href, children }) => (
  <Link href={href} className='!text-gray_r-12/80 font-normal line-clamp-1'>
    {children}
  </Link>
)

export default BasicFooter