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 Head from 'next/head';


import { getReviews } from '@/data/reviews';
import { getCities } from '@/data/cities';
import CitiesCarouselDark from '@/components/templates/layout/CitiesCarouselDark';
import Reviews from '@/components/templates/layout/Reviews';
import Facts from '@/components/templates/layout/Facts';
import Welcome from '@/components/organisms/layout/Welcome';
import BannerSliderWithprojects from '@/components/templates/layout/BannerSliderWithCities';
import Values from '@/components/templates/aboutUs/Values';
import Brands from '@/components/templates/aboutUs/Brands';
import MapWithCities from '@/components/templates/layout/MapWithCities';

type PageProps = { cities: any; reviews: any };
const Page: NextPage<PageProps> = ({ cities, reviews }) => {
  const { t } = useTranslation(['common', 'aboutUs']);

  return (
    <Fragment>
      <Head>
        <title>{t('aboutUs:metas.title')}</title>
        <meta name="description" content={t('aboutUs:metas.description')} />
        <meta name="keywords" content={t('aboutUs:metas.keywords')} />
      </Head>
      <Header categories={cities} />
      <BannerSliderWithprojects
        isSmaller={true}
        hero={{
          title: t('aboutUs:banner.title'),
          preTitle: t('aboutUs:banner.preTitle')
        }}
        items={[
          {
            image: {
              url: '/images/aboutUS/Nosotros-Slide.webp',
              height: 560,
              width: 1200
            }
          }
        ]}
      />

      <Welcome
        preTitle={t('aboutUs:welcome.preTitle')}
        title={t('aboutUs:welcome.title')}
        paragraph={t('aboutUs:welcome.text')}
      />
      <Values trans={t} />
      <MapWithCities
        preTitle={t('aboutUs:cities.preTitle')}
        title={t('aboutUs:cities.title')}
        text={t('aboutUs:cities.text')}
        cities={cities}
      />
      <Brands trans={t} />
      <Facts
        background="tw-bg-white"
        title={t('aboutUs:facts.title')}
        preTitle={t('aboutUs:facts.preTitle')}
        text={t('aboutUs:facts.text')}
      />
      {(cities && Array?.isArray(cities) && cities?.length && (
        <CitiesCarouselDark cities={cities} preTitle={t('common:cities.preTitle')} title={t('common:cities.title')} />
      )) ||
        ''}
      {(reviews && reviews?.length && <Reviews items={reviews} />) || ''}
      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {

  const cities = await getCities(locale);
  const reviews = (await getReviews({ locale: locale, showOnAboutUs: true })) || [];
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'aboutUs'])),
      cities,
      reviews,

    }
  };
};
export default Page;
