import ContactCards from "@/components/contact-us/ContactCards";
import Container from "@/components/reusableComponent/Container";
import SectionTitle from "@/components/sectionTitle/SectionTitle";
import { getContactUsData } from "@/lib/serverActions";
import ContactUsForm from "../../../src/components/contact-us/ContactUsForm";
import { getTranslations } from "next-intl/server";
import { Metadata } from "next";
import { PageProps } from "@/types/page";
 

 
export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("seo.contact_us");

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

const page =async ({ params }: PageProps) => {
   const { locale } = await params;
  const data = await getContactUsData(locale);
   const contactHeaders = data?.data?.headers?.["contact-us-page"]?.locales;
  const t = await getTranslations("contactUs");
  return (
    <Container className="mb-[120px]">
      <div className="pb-[48px]">
        <SectionTitle
          // title="Contact Us "
          title={contactHeaders?.name}
          // description="Get in touch with us for any inquiries or assistance. We're here to help with all your real estate needs."
          description={contactHeaders?.description}
        />
      </div>

      <ContactCards data={data}  />
      <div className="flex flex-col">
         <h3 className=" text-[24px] font-normal mb-5 text-dark">{t("Send Us a Message")}</h3>
         <div className="grid grid-cols-1 lg:grid-cols-2 w-full gap-7 ">
        <div className="">
          <ContactUsForm />
        </div>
        <div className="rounded-[8px]">
          <iframe
            src="https://maps.google.com/maps/embed/v1/place?q=Sun%20City%20by%20DAMAC%20%7C%20DAMAC%20Properties&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
            width="100%"
            height="380"
            allowFullScreen
            loading="lazy"
            className="rounded-[8px]"
          ></iframe>
        </div>
      </div>
      </div>

      
    </Container>
  );
};

export default page;