import { NextPage, GetStaticPropsContext, GetStaticPropsResult } from 'next';
import Layout from '../components/Layout';
//icons
import MisionIcon from '../../public/icons/flag.svg';
import VisionIcon from '../../public/icons/vision.svg';
import ManifestIcon from '../../public/icons/manifest.svg';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

const AboutUs: NextPage = () => {
  const { t } = useTranslation('about');

  return (
    <Layout pageTitle={t('pageTitle')} metaDescription={t('metaDescription')} currentRoute='/nosotros'>
      <div className='flex flex-col items-center text-customBlack px-4 md:px-20 pt-10 md:pt-20 pb-36 font-light'>
        <h1 className='text-4xl 2xl:text-6xl mb-8 text-center'>{t('contentTitle')}</h1>
        <div className='grid grid-cols-1 xl:grid-cols-3 gap-8 justify-center max-w-8xl text-lg 2xl:text-xl'>
          <div id='mission' className='flex flex-col items-center sm:mx-8 xmd:max-w-xs mt-8 space-y-8'>
            <h1 className='text-2xl 2xl:text-3xl'>{t('mission')}</h1>
            <MisionIcon width='50' height='50' />
            <p className='text-justify font-light'>{t('missionDetails')}</p>
          </div>

          <div id='vision' className='flex flex-col items-center sm:mx-8 xmd:max-w-xs mt-8 space-y-8'>
            <h1 className='text-2xl 2xl:text-3xl'>{t('vision')}</h1>
            <VisionIcon width='50' height='50' />
            <p className='text-justify font-light'>{t('visionDetails')}</p>
          </div>

          <div className='flex flex-col items-center sm:mx-8 xmd:max-w-xs mt-8 space-y-8'>
            <h1 className='text-2xl 2xl:text-3xl'>{t('manifest')}</h1>
            <ManifestIcon width='50' height='50' fill='#367DEE' />
            <p className='text-justify font-light'>{t('manifestDetails')}</p>
          </div>
        </div>

        <h1 className='text-4xl 2xl:text-6xl mb-8 mt-20 text-center'>{t('bestChoice')}</h1>
        <p className='font-light text-center text-lg 2xl:text-xl'>
          {t('bestChoiceText1')} <br />
          {t('bestChoiceText2')}
        </p>

        <div className='max-w-4xl 2xl:max-w-6xl mt-16'>
          <img className='w-auto h-auto object-cover' src='/images/about-img.png' alt='HOLA' />
        </div>
      </div>
    </Layout>
  );
};

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

export default AboutUs;