import images from '@/assets/images/images';
import InnerPageBanner from '@/components/layout/innerPages/banner';
import ContactMap from '@/components/layout/map';
import ContactForm from '@/components/pages/contact/ContactMeForm';
import TouchUs from '@/components/pages/contact/TouchUs';
import Image from 'next/image';
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { IPageParams } from '@/models/layout';
import Head from 'next/head';

export async function generateMetadata({ params }: { params: IPageParams }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });

  return {
    title: t('page_contact_metadata_title'),
    description: t('page_contact_metadata_description'),
  };
}

export default async function Contact({ params }: { params: IPageParams }) {
  const { locale } = await params;

  const t = await getTranslations({ locale });

  return (
    <main className="flex flex-col items-center justify-between">
      <InnerPageBanner
        title={t('pages_contact_title')}
        imageSrc={images.blogBanner.src}
      />

      <div className="relative flex w-full flex-col bg-gray-200 pt-12 lg:pt-28">
        <div className="absolute inset-x-0 inset-y-64 z-2 flex items-end justify-start">
          <div className="max-md:hidden md:w-1/2">
            <Image
              alt="footer-bg"
              src={images.factoryVector}
              className="h-full w-full object-cover"
            />
          </div>
        </div>
        <div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg lg:flex-row">
          <TouchUs className="p-8 lg:w-1/2" />
          <ContactForm className="p-4 lg:w-1/2" />
        </div>

        <div className="mt-4 w-full md:mt-28">
          <div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
            <ContactMap />
          </div>
        </div>
      </div>
    </main>
  );
}