path: root/src/core/components/elements/Footer/BasicFooter.jsx

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'

const BasicFooter = () => {
  return (
    <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 - 2022, PT. Indoteknik Dotcom Gemilang
      </div>
    </footer>
  )
}

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>
        <div className='text-gray_r-12'>Senin - Jumat:</div>
        <div className='text-gray_r-12/80'>08:30 - 17:00</div>
      </li>
      <li>
        <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}>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