import type { GetServerSideProps, GetStaticProps, NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import Header from '@/components/templates/layout/header';
import Footer from '@/components/templates/layout/Footer';
import Newsletter from '@/components/templates/layout/Newsletter';

import Gallery from '@/components/templates/layout/Gallery';
import Head from 'next/head';

import { getGallery } from '@/data/gallery';

import BannerSliderWithprojects from '@/components/templates/layout/BannerSliderWithCities';
import ToBePart from '@/components/templates/layout/ToBePart';
import Welcome from '@/components/organisms/layout/Welcome';
import Values from '@/components/templates/aboutUs/Values';
import { getCities } from '@/data/cities';

type PageProps = { gallery: any; projectCategories: any; cities: any };
const Page: NextPage<PageProps> = ({ gallery, cities }) => {
  const { t } = useTranslation(['common', 'routes', 'humanCapital']);

  return (
    <Fragment>
      <Head>
        <title>{t('humanCapital:metas.title')}</title>
        <meta name="description" content={t('humanCapital:metas.description')} />
        <meta name="robots" content="noindex, nofollow" />
      </Head>
      <Header categories={cities} />
      <BannerSliderWithprojects
        isSmaller={true}
        hero={{
          title: t('humanCapital:banner.title'),
          preTitle: t('humanCapital:banner.preTitle')
        }}
        items={[
          {
            image: {
              url: '/images/humanCapital/banner.webp',
              height: 1060,
              width: 2400
            }
          }
        ]}
      />
      <Welcome
        preTitle={t('humanCapital:welcome.preTitle')}
        title={t('humanCapital:welcome.title')}
        paragraph={t('humanCapital:welcome.text')}
      />
      <Values trans={t} version="card" />
      <ToBePart
        preTitle={t('humanCapital:toBe.preTitle')}
        title={t('humanCapital:toBe.title')}
        text={t('humanCapital:toBe.text')}
        ctaHref="#"
        ctaText={t('humanCapital:toBe.ctaText')}
        imageUrl="/images/contact/quiero-formar-parte.webp"
      />
      <div className="wrapper">
        <div className="container pb-7  text-center">
          <div className="col-12  tw-pb-4 md:tw-pb-8">
            <span className="base-pretitle tw-text-center tw-mb-2 tw-block !tw-text-main-dark ">
              {t('humanCapital:gallery.preTitle')}
            </span>
            <h2 className="base-title">{t('humanCapital:gallery.title')}</h2>
          </div>
          <Gallery
            categories={
              gallery?.categories && gallery?.categories?.length
                ? [{ name: t('common:all'), slug: 'all' }, ...gallery?.categories]
                : []
            }
            images={gallery?.images}
          />
        </div>
      </div>

      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  const gallery: any = await getGallery({ locale: locale, viewSlug: 'capital-humano' });

  const cities = await getCities(locale);
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'humanCapital'])),

      gallery,

      cities
    }
  };
};
export default Page;
