import { NextPage, GetStaticPropsContext, GetStaticPropsResult } from 'next';
import Layout from '../components/Layout';
import SupportForm from 'components/SupportForm';
import FAQ from 'components/FAQ';
//Icons
import PhoneIcon from '../../public/icons/phone.svg';
import SupportIcon from '../../public/icons/email.svg';
import WPIcon from '../../public/icons/wp.svg';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

const Support: NextPage = () => {
  const { t } = useTranslation('support');

  return (
    <Layout pageTitle={t('pageTitle')} metaDescription={t('metaDescription')} currentRoute='/soporte'>
      <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-12 text-center'>{t('contentTitle')}</h1>
        <div className='flex flex-col items-center sm:flex-row sm:space-x-20 max-w-2xl mb-28'>
          <div>
            <PhoneIcon className='w-24 h-24 sm:w-36 sm:h-36 mb-4 sm:mb-0' fill='#367DEE' />
          </div>
          <p className='text-lg 2xl:text-xl'>{t('supportDetails')}</p>
        </div>
        <div className='flex flex-col items-center bg-primary p-4 xs:p-10 text-lg 2xl:text-xl text-center text-white space-y-5 w-full max-w-4xl'>
          <h1 className='text-2xl 2xl:text-3xl'>{t('formTitle')}</h1>
          <p>{t('formSubtitle')}</p>
          <div className='flex justify-around w-full flex-wrap'>
            {/* <div className='flex flex-col items-center mt-6 mx-2'>
              <LocationIcon className='w-7 h-7 mb-4 sm:mb-0' fill='#FFFFFF' />
              <p>{t('ccnLocation')}</p>
            </div> */}
            <div className='flex flex-col items-center mt-6 mx-2'>
              <SupportIcon className='w-7 h-7 mb-4 sm:mb-0' fill='#FFFFFF' />
              <p>{t('ccnEmail')}</p>
            </div>
            <div className='flex flex-col items-center mt-6 mx-2'>
              <PhoneIcon className='w-7 h-7 mb-4 sm:mb-0' fill='#FFFFFF' />
              <p>{t('ccnPhone')}</p>
            </div>
            <div className='flex flex-col items-center mt-6 mx-2'>
              <WPIcon className='w-7 h-7 mb-4 sm:mb-0' fill='#FFFFFF' />
              <p>{t('ccnWp')}</p>
            </div>
          </div>
          <SupportForm />
        </div>

        <div className='mt-28 mb-20 border-t-2 border-primary w-11/12 xs:w-1/3' id='FAQS' />
        <h1 className='text-4xl 2xl:text-6xl mb-12 text-center'>{t('FAQSTitle')}</h1>
        <div className='flex flex-col items-center w-full max-w-5xl'>
          <FAQ question={t('FAQ1')} answer={t('ANSW1')} />
          <FAQ question={t('FAQ2')} answer={t('ANSW2')} />
          <FAQ question={t('FAQ3')} answer={t('ANSW3')} />
          <FAQ question={t('FAQ4')} answer={t('ANSW4')} />
        </div>
      </div>
    </Layout>
  );
};

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

export default Support;