import { NextPage, GetStaticPropsContext, GetStaticPropsResult } from 'next';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Link from 'next/link';
import Layout from '../components/Layout';

const Offices: NextPage = () => {
  const { t } = useTranslation('offices');

  return (
    <Layout pageTitle={t('pageTitle')} metaDescription={t('metaDescription')} currentRoute='/oficinas'>
      <div className='flex flex-col items-center text-customBlack px-4 lg:px-20 xl:px-40 pt-10 pb-28 font-light'>
        <div className='flex flex-col items-center sm:p-14 text-lg 2xl:text-xl img-cont bg-cover xmd:bg-contain'>
          <h1 className='text-4xl 2xl:text-6xl mb-8 text-center'>{t('contentTitle')}</h1>
          <div className='flex flex-col max-w-5xl shadow-lg p-8 space-y-16 mt-10 text-customBlack font-light opacity-cont'>
            <div id='saltillo' className='flex flex-col sm:flex-row sm:space-x-10'>
              <div className='flex flex-col sm:w-5/12'>
                <h1 className='text-4xl 2xl:text-6xl mb-8'>{t('saltillo')}</h1>
                <span className='text-primary'>{t('saltilloSchedule')}</span>
                <span className='text-primary'>8:00 am - 2:00 pm</span>
                <span className='text-primary'>4:00 pm - 7:00 pm</span>
              </div>
              <div className='sm:w-7/12'>
                <div className='border-b-2 border-primary'>
                  <p className='text-right'>01</p>
                </div>
                <p className='text-justify mt-7'>{t('saltilloDetails')}</p>
              </div>
            </div>

            <div id='monclova' className='flex flex-col sm:flex-row sm:space-x-10'>
              <div className='flex flex-col sm:w-5/12'>
                <h1 className='text-4xl 2xl:text-6xl mb-8'>{t('monclova')}</h1>
                <span className='text-primary'>{t('monclovaSchedule')}</span>
                <span className='text-primary'>8:00 am - 2:00 pm</span>
                <span className='text-primary'>4:00 pm - 7:00 pm</span>
              </div>
              <div className='sm:w-7/12'>
                <div className='border-b-2 border-primary'>
                  <p className='text-right'>02</p>
                </div>
                <p className='text-justify mt-7'>{t('monclovaDetails')}</p>
              </div>
            </div>

            <div className='flex flex-col items-center sm:flex-row sm:space-x-10'>
              <h1 className='sm:w-5/12 text-4xl 2xl:text-6xl mb-8'>{t('zacatecas')}</h1>
              <div className='sm:w-7/12'>
                <div className='border-b-2 border-primary'>
                  <p className='text-right'>03</p>
                </div>
                <div className='flex items-center space-x-4'>
                  <p className='text-justify mt-7 w-1/2'>{t('monclovaDetails')}</p>
                  <div className='flex flex-col items-center w-1/2'>
                    <img className='object-cover w-24 h-24' src='/images/rehead.png' alt='Rehead+' />
                    <Link href='https://www.rehedmas.com/' target='_blank' className='text-3xl 2xl:text-4xl text-center font-bold text-primary underline'>
                      {t('vistSite')}
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        .img-cont {
          background-position: center; /* Center the image */
          background-repeat: no-repeat; /* Do not repeat the image */
          background-image: url('/images/wifi.png');
        }
        .opacity-cont {
          background-color: rgba(255, 255, 255, 0.6);
        }
      `}</style>
    </Layout>
  );
};

export const getStaticProps = async (
  { locale }: GetStaticPropsContext
): Promise<GetStaticPropsResult<object>> => ({
  props: {
    ...(await serverSideTranslations(locale ?? 'es', ['offices', 'navbar', 'footer']))
  }
});

export default Offices;