import Layout from '../components/Layout';
import { NextPage } from 'next';
import CompaniesForm from 'components/CompaniesForm';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

const Companies: NextPage = () => {
  const { t } = useTranslation('companies');

  return (
    <Layout
      pageTitle={t('pageTitle')}
      metaDescription={t('metaDescription')}
      currentRoute='/empresas'
      navBarColor='bg-customBlack'
    >
      <div className='flex flex-col items-center bg-customOrange text-white px-4 md:px-20 pt-10 md:pt-20 pb-36 font-light'>
        <h1 className='text-4xl 2xl:text-6xl text-white mb-12 text-center'>{t('contentTitle')}</h1>
        <p className='max-w-3xl 2xl:max-w-5xl text-center text-lg 2xl:text-xl mb-20'>{t('companyDescription')}</p>
        <h1 className='text-4xl 2xl:text-6xl text-white mb-6'>{t('features')}</h1>
        <p className='max-w-3xl 2xl:max-w-5xl text-center text-lg 2xl:text-xl mb-10'>{t('featuresDetails')}</p>

        <div className='grid-cont max-w-8xl text-customBlack text-xl 2xl:text-3xl font-bold whitespace-pre-wrap mb-24'>
          <div className='flex items-center justify-center p-7 2xl:p-9' style={{ backgroundColor: '#ffd5b9' }}>
            <p className='text-center'>{t('support')}</p>
          </div>
          <div className='flex items-center justify-center p-7 2xl:p-9' style={{ backgroundColor: '#ffd5b9' }}>
            <p className='text-center'>{t('speed')}</p>
          </div>
          <div className='flex items-center justify-center p-7 2xl:p-9' style={{ backgroundColor: '#ffd5b9' }}>
            <p className='text-center'>{t('innovation')}</p>
          </div>
          <div className='flex items-center justify-center p-7 2xl:p-9' style={{ backgroundColor: '#ffd5b9' }}>
            <p className='text-center'>{t('highTech')}</p>
          </div>
        </div>

        <h1 className='text-4xl 2xl:text-6xl text-white mb-4 text-center'>{t('formTitle')}</h1>
        <p className='max-w-3xl 2xl:max-w-5xl text-center text-lg 2xl:text-xl mb-12'>{t('formDetails')}</p>

        <CompaniesForm />
      </div>

      <style jsx>{`
        .grid-cont {
          display: grid;
          width: 100%;
          grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
          grid-column-gap: 25px;
          grid-row-gap: 15px;
        }
      `}</style>
    </Layout>
  );
};

import type { GetStaticProps, GetStaticPropsContext } from 'next';

export const getStaticProps: GetStaticProps = async ({ locale }: GetStaticPropsContext) => {
  const lng = locale ?? 'es';
  return {
    props: {
      ...(await serverSideTranslations(lng, ['companies', 'navbar', 'footer']))
    }
  };
};

export default Companies;