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';
import whatsappUrl from '@/core/utils/whatsappUrl';

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-8 pr-2'>
            <div>
              <NextImage
                src={IndoteknikLogo}
                alt='Logo Indoteknik'
                width={90}
                height={30}
              />

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

            <OfficeLocation />
            <AboutUs />
            {/* <WarehouseLocation /> */}
            <InformationCenter />
            <OpenHours />
            <SocialMedias />
          </div>

          <div className='w-1/2 flex flex-col gap-y-8 pl-2'>
            <Form />
            <CustomerGuide />
            <Payments />
            <Shippings />
            <Secures />
          </div>

          <div className='w-full mt-8 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-4/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 className='h-4' />
              <OfficeLocation />
              <div className='h-4' />
              <OpenHours />
            </div>

            <div className='w-2/12'>
              <CustomerGuide />
              <div className='h-6' />
              <Form />
            </div>

            <div className='w-2/12'>
              <AboutUs />
            </div>

            <div className='w-3/12'>
              <div className='grid grid-cols-1 gap-y-6'>
                <Payments />
                <Shippings />
                <Secures />
              </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-4';

const OfficeLocation = () => (
  <div>
    <div className={headerClassName}>Kantor Pusat</div>
    <div className='leading-6 text-gray_r-12/80'>
      <a
        href='https://goo.gl/maps/3DCJxtki8jUV32pR7'
        target='_blank'
        rel='noreferrer'
        className='text-gray_r-12/80'
      >
        Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec.
        Penjaringan, Jakarta Utara
      </a>
    </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}>Tentang Kami</div>
    <ul className='flex flex-col gap-y-3'>
      <li>
        <InternalItemLink href='/tentang-kami'>
          Company Profile
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/pelanggan-kami'>
          Pelanggan Kami
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/hubungi-kami'>Hubungi Kami</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/karir'>Karir</InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/syarat-ketentuan'>
          Syarat & Ketentuan
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/kebijakan-privasi'>
          Kebijakan Privasi
        </InternalItemLink>
      </li>
    </ul>
  </div>
);

const CustomerGuide = () => (
  <div>
    <div className={headerClassName}>Bantuan & Panduan</div>
    <ul className='flex flex-col gap-y-3'>
      <li>
        <InternalItemLink href='/metode-pembayaran'>
          Metode Pembayaran
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/metode-pengiriman'>
          Metode Pengiriman
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/panduan-belanja'>
          Panduan Belanja
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/panduan-quotation'>
          Panduan Quotation
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/pengembalian-barang-dana'>
          Pengembalian Barang & Dana
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/informasi-garansi'>
          Informasi Garansi
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/panduan-pick-up-service'>
          Panduan Pick Up Service
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/tracking-order'>
          Tracking Order
        </InternalItemLink>
      </li>
    </ul>
  </div>
);

const Form = () => (
  <div>
    <div className={headerClassName}>Formulir</div>
    <ul className='flex flex-col gap-y-3'>
      <li>
        <InternalItemLink href='/my/request-for-quotation'>
          Request for Quotation
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/my/kunjungan-sales'>
          Kunjungan Sales
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/my/kunjungan-service'>
          Kunjungan Service
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/my/pembayaran-tempo'>
          Pembayaran Tempo
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/my/surat-dukungan'>
          Surat Dukungan
        </InternalItemLink>
      </li>
      <li>
        <InternalItemLink href='/my/daftar-merchant'>
          Daftar Merchant
        </InternalItemLink>
      </li>
    </ul>
  </div>
);

const InformationCenter = () => (
  <div>
    <div className={headerClassName}>Layanan Informasi</div>
    <ul className='flex flex-col gap-y-3'>
      <li className='text-gray_r-12/80 flex items-center'>
        <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
        <a href='tel:02129338828' target='_blank' rel='noreferrer'>
          (021) 2933-8828
        </a>
      </li>
      <li className='text-gray_r-12/80 flex items-center'>
        <EnvelopeIcon className='w-[18px] mr-2' />
        <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'>
          sales@indoteknik.com
        </a>
      </li>
      <li className='text-gray_r-12/80 flex items-center'>
        <DevicePhoneMobileIcon className='w-[18px] mr-2' />
        <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
          0817-1718-1922
        </a>
      </li>
    </ul>
  </div>
);

const OpenHours = () => (
  <div>
    <div className={headerClassName}>Jam Operasional</div>
    <ul className='flex flex-col gap-y-3'>
      <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-3 mt-2 items-center'>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.youtube.com/@indoteknikcom'
      >
        <NextImage
          src='/images/socials/youtube.webp'
          alt='Youtube - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.tiktok.com/@indoteknikcom'
      >
        <NextImage
          src='/images/socials/tiktok.png'
          alt='TikTok - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
      <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
        <NextImage
          src='/images/socials/Whatsapp.png'
          alt='Whatsapp - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.facebook.com/indoteknikcom'
      >
        <NextImage
          src='/images/socials/Facebook.png'
          alt='Facebook - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.instagram.com/indoteknikcom/'
      >
        <NextImage
          src='/images/socials/Instagram.png'
          alt='Instagram - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
      >
        <NextImage
          src='/images/socials/Linkedin.png'
          alt='Linkedin - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
      <a
        target='_blank'
        rel='noreferrer'
        href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
      >
        <NextImage
          src='/images/socials/g_maps.png'
          alt='Maps - Indoteknik.com'
          width={24}
          height={24}
        />
      </a>
    </div>
  </div>
);

const Payments = () => (
  <div>
    <div className={headerClassName}>Metode Pembayaran</div>
    <NextImage
      src='/images/footer/payment-method-new.png'
      alt='Metode Pembayaran - Indoteknik'
      width={512}
      height={512}
      quality={85}
      className='w-full'
    />
  </div>
);

const Shippings = () => (
  <div>
    <div className={headerClassName}>Jasa Pengiriman</div>
    <NextImage
      src='/images/footer/shippings.png'
      alt='Jasa Pengiriman - Indoteknik'
      width={512}
      height={512}
      quality={85}
      className='w-full'
    />
  </div>
);

const Secures = () => (
  <div>
    <div className={headerClassName}>Keamanan Belanja</div>
    <NextImage
      src='/images/footer/secures.png'
      alt='Keamanan Belanja - Indoteknik'
      width={512}
      height={512}
      quality={85}
      className='w-full'
    />
  </div>
);

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

export default BasicFooter;