import { getTranslations } from "next-intl/server";
import React from "react";
import AboutSection from "@/components/reusableComponent/AboutSection";
import { Metadata } from "next";
import Image from "next/image";
import { getAboutData } from "@/lib/serverActions";
import Container from "@/components/reusableComponent/Container";
import heroabout from "@/public/assets/about/heroimage.webp";
import img1 from "@/public/assets/about/image1111.webp";
import img2 from "@/public/assets/about/image2222.webp";
import img3 from "@/public/assets/about/image3333.webp";
// export async function generateMetadata({ params }: any): Promise<Metadata> {
//   const t = await getTranslations("meta");
//   return {
//     title: t("about-us-meta.title"),
//     description: t("about-us-meta.description"),
//     keywords: [
//       t("about-us-meta.about_R&H"),
//       t("about-us-meta.hotel_management_experts"),
//       t("about-us-meta.Saudi_hospitality"),
//       t("about-us-meta.company_profile"),
//     ],
//   };
// }
export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("seo.about_us");

  return {
    title: t("title"),
    description: t("description"),
    keywords: t("keywords"),
  };
}
export default async function Page({ params }: any) {
  const { locale } = await params;
  const t = await getTranslations("about-us");
  const data = await getAboutData(locale);

  return (
    <div className="mb-[120px]">
      <Container className="!pt-0 mt-[48px] md:!px-0 xl:!px-0 2xl:!px-7 !py-0 md:!py-0 ">
        <div
          className="flex flex-col "
          data-aos="fade-up"
          data-aos-duration="1500"
          data-aos-delay="300"
        >
          <div
            className="flex items-center lg:flex-row flex-col gap-3 lg:gap-0
          md:px-[35px] xl:px-0
 
          "
          >
            <div
              className="flex flex-col lg:w-1/2 w-full lg:text-[25px] xl:text-[40px] xl:font-normal"
              data-aos="fade-up"
              data-aos-duration="1500"
              data-aos-delay="300"
            >
              <span className="text-primary  ">
                {/* {data?.data?.headers?.["about-us-page"]?.locales?.name||""} */}
                {t("R&H Capital")}
              </span>
              {/* <span className="text-dark  ">{t("R&H Capital")}</span> */}
              <span className="text-dark ">{t("Real Estate LLC")}</span>
            </div>
            <span className="text-paragraph lg:w-1/2 w-full lg:text-[15px] xl:text-[20px] font-light lg:leading-[25px] xl:leading-[40px]">
              {data?.data?.headers?.["about-us-page"]?.locales?.description ||
                ""}
            </span>
          </div>
        </div>
      </Container>
      <div className="shadow-[0px_30px_35px_-20px_rgba(0,_0,_0,_0.1)]">
        <Container className="!pt-0 mt-[34px]  xl:!px-0 2xl:!px-7 !py-0 md:px-[35px] ">
          <div
            className="flex  flex-col lg:flex-row gap-4 "
            data-aos="fade-up"
            data-aos-duration="1500"
            data-aos-delay="500"
          >
            <div className="relative lg:w-1/2 xl:w-1/2 ">
              <div className=" flex justify-center  xl:w-full xl:h-[661px]">
                <Image
                  src={
                    data?.data?.data?.["message-from-ceo"]?.image || heroabout
                  }
                  alt="ceo"
                  className=" md:w-[250px] lg:w-[350px] md:h-[325px] lg:h-full  xl:w-[504px] xl:h-[661px] object-cover"
                  width={2000}
                  height={1000}
                />
              </div>

              <div
                data-aos="fade-up"
                data-aos-duration="1500"
                data-aos-delay="600"
                className="absolute bg-white  shadow-[0px_8px_18px_0px_rgba(0,_0,_0,_0.1)]
               w-[280px] h-[70px] rounded-[10px]
               md:w-[250px] md:h-[70px]
               lg:w-[300px] lg:h-[100px]
               xl:w-[390px] xl:h-[159px] md:rounded-[16px]

               ltr:left-0 bottom-[120px]
               ltr:md:left-[110px] md:bottom-[30px]
               ltr:lg:left-[20px] lg:bottom-[50px]
               ltr:xl:left-[-10px] xl:bottom-[78px]

               rtl:right-0 
               rtl:md:right-[110px] 
               rtl:lg:right-[20px] 
               rtl:xl:right-[-10px] 
                "
              >
                <div
                  className="flex flex-col items-start justify-center rounded-[16px] gap-1 
                ltr:pl-[15px] pb-[20px] pt-[10px]
                md:pl-[15px] md:pb-[25px] md:pt-[15px]
                lg:pl-[20px] lg:pb-[30px] lg:pt-[20px]
                xl:pl-[24px] xl:pb-[33px] xl:pt-[25px]

                rtl:pr-[15px] rtl:pb-[20px] rtl:pt-[10px]
                rtl:md:pr-[15px] rtl:md:pb-[25px] rtl:md:pt-[15px]
                rtl:lg:pr-[20px] rtl:lg:pb-[30px] rtl:lg:pt-[20px]
                rtl:xl:pr-[24px] rtl:xl:pb-[33px] rtl:xl:pt-[25px]
                
                "
                >
                  {/* data?.name||"" */}
                  {/* data?.image || defaultimg */}
                  <span className="text-primary md:text-[15px] lg:text-[25px] xl:text-[36px] font-normal">
                    {data?.data?.data?.["message-from-ceo"]?.locales?.name ||
                      ""}
                  </span>
                  <span className="text-dark md:text-[15px] lg:text-[18px] xl:text-[24px] font-light">
                    {data?.data?.data?.["message-from-ceo"]?.locales
                      ?.job_title || ""}
                  </span>
                </div>
              </div>
            </div>
            <div className=" flex flex-col gap-[23px] w-full lg:w-[600px] justify-center">
              <div className="relative">
                <span className="text-dark md:text-[21px] lg:text-[25px] xl:text-[36px] font-normal leading-[50px] lg:leading-[70px] xl:leading-[80px] ">
                  {data?.data?.data?.["message-from-ceo"]?.locales
                    ?.short_description || ""}
                </span>
                <div className=" border-primary border-b-[1px] w-[200px] xl:w-[341px] absolute"></div>
              </div>

              <p
                dangerouslySetInnerHTML={{
                  __html:
                    data?.data?.data?.["message-from-ceo"]?.locales
                      ?.description || "",
                }}
                className="text-paragraph md:text-[18px] pb-[35px] lg:text-[15px] xl:text-[20px] font-light xl:leading-[40px]"
              ></p>
            </div>
          </div>
        </Container>
      </div>
      <div className="flex flex-col gap-[64px]">
        <div className="">
          <AboutSection
            className="   mt-[60px] lg:!mt-[120px] xl:!mt-[120px]"
            img={data?.data?.data?.["our-strategy"]?.image || img1}
            title={t("ourstrategy")}
            // title={data?.data?.data?.["our-strategy"]?.locales?.name || ""}
            discription={
              data?.data?.data?.["our-strategy"]?.locales?.description || ""
            }
          />
        </div>

        <div className="px-[16px] md:px-[35px] xl:px-[120px] flex flex-col lg:flex-row-reverse items-center justify-center gap-12 ">
          <div
            className="w-full xl:w-[57%]"
            data-aos={locale === "ar" ? "fade-right" : "fade-left"}
            data-aos-duration="1500"
            data-aos-delay="300"
            data-aos-easing="ease-in-sine"
          >
            <Image
              src={data?.data?.data?.["our-mission"]?.image || img2}
              alt="img1"
              className="w-full xl:h-[358px]  object-cover rounded-[16px]"
              width={2000}
              height={1000}
            />
          </div>
          <div
            className="w-full xl:w-[43%] flex flex-col items-start  xl:justify-center"
            data-aos={locale === "ar" ? "fade-left" : "fade-right"}
            data-aos-duration="1500"
            data-aos-delay="300"
            data-aos-easing="ease-in-sine"
          >
            <span className="text-primary text-[40px] font-normal leading-[80px]">
              {/* {data?.data?.data?.["our-mission"]?.locales?.name || ""} */}
              {t("ourmission")}
            </span>
            <p
              dangerouslySetInnerHTML={{
                __html:
                  data?.data?.data?.["our-mission"]?.locales?.description || "",
              }}
              className="text-paragraph lg:text-[15px] xl:text-[20px] text-[15px]  lg:leading-[25px] xl:leading-[40px] font-light w-full  leading-[20px]"
            ></p>
          </div>
        </div>
        <AboutSection
          img={data?.data?.data?.["our-values"]?.image || img3}
          title={t("ourvalues")}
          // title={data?.data?.data?.["our-values"]?.locales?.name || ""}
          discription={
            data?.data?.data?.["our-values"]?.locales?.description || ""
          }
        />
      </div>
    </div>
  );
}