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 { getOtherBlogs } from '@/data/blogs';

import Head from 'next/head';


import { getCities } from '@/data/cities';
import MapWithCities from '@/components/templates/layout/MapWithCities';
import ToBePart from '@/components/templates/layout/ToBePart';
import ContactForm from '@/components/templates/contact/ContactForm';

type PageProps = { projectCategories: any; cities: any };
const Page: NextPage<PageProps> = ({ cities }) => {
  const { t } = useTranslation(['common', 'contact']);
  const banners = [
    {
      image: {
        url: '/images/contact/slide.webp',
        height: 560,
        width: 1200
      }
    }
  ];

  return (
    <Fragment>
      <Head>
        <title>{t('contact:metas.title')}</title>
        <meta name="description" content={t('contact:metas.description')} />
        <meta name="keywords" content={t('contact:metas.keywords')} />
      </Head>
      <Header categories={cities} />
      <ContactForm trans={t} cities={cities} />
      <div className="tw-bg-main-light">
        <MapWithCities
          preTitle={t('contact:cities.preTitle')}
          title={t('contact:cities.title')}
          text={t('contact:cities.text')}
          cities={cities}
          version='v2'
        />
      </div>
      {/* <ToBePart
        preTitle={t('contact:toBe.preTitle')}
        title={t('contact:toBe.title')}
        textBottom={t('contact:toBe.textBottom')}
        text={t('contact:toBe.text')}
        ctaHref="#"
        ctaText={t('contact:toBe.ctaText')}
        imageUrl="/images/contact/quiero-formar-parte.webp"
      /> */}
      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {

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

      cities
    }
  };
};
export default Page;
