import Container from "@/app/components/shared/container";
import { HeaderWrwpper } from "@/app/components/shared/main-header";
import { getAboutUs, getBlogs } from "@/lib/serverActions";
import Image from "next/image";
import { Icon } from "@iconify/react";
import { getTranslations } from "next-intl/server";
import { Metadata } from "next";

interface LayoutProps {
  params: Promise<{ locale: string | any }>; // Handle both promise and object
}
export async function generateMetadata({
  params,
}: LayoutProps): Promise<Metadata> {
  const t = await getTranslations("meta");
  return {
    title: t("about.title"),
    description: t("about.description"),
  };
}
export default async function AboutPage({ params }: LayoutProps) {
  const { locale } = await params;
  const t = await getTranslations("Header"); // استخدم getTranslations للـ server side

  const { data: aboutUs } = await getAboutUs(locale);

  console.log("aboutUs data ??", aboutUs);

  return (
    <div className="min-h-[438px] w-full">
      <header>
        <HeaderWrwpper imgUrl={aboutUs?.header?.image?.original_url}>
          <div className="flex flex-col items-center justify-center h-full w-full">
            <div
              className="flex flex-col gap-6"
              data-aos="fade-down"
              data-aos-duration="1000"
            >
              <h1 className="text-[40px] font-medium text-center">{t("About Us")}</h1>
              <div className="text-[14px] text-center font-[300px] flex items-center justify-center gap-2">
                {t("home")}{" "}
                <Icon
                  className="text-2xl text-[#fff]"
                  icon="weui:arrow-filled"
                />{" "}
                {t("About Us")}
              </div>
            </div>
          </div>
        </HeaderWrwpper>
      </header>
      <Container className="mt-10 mb-14">
        <div className="mt-20" data-aos="fade-up" data-aos-duration="800">
          <h2 className="mb-5 font-normal text-4xl">{t("meet_the_founder")}</h2>
          <div className="flex flex-col lg:flex-row items-center justify-center gap-5 lg:gap-10">
            <div
              className="w-full lg:w-[40%] md:h-[350px] lg:h-[450px] xl:h-[550px]"
              data-aos="fade-right"
              data-aos-delay="100"
              data-aos-duration="800"
            >
              <Image
                width={521}
                height={486}
                loading="eager"
                src={aboutUs?.data?.founder?.media?.original_url}
                alt={t("our_team_alt")}
                className="w-[521px] h-[486px] object-cover rounded-lg"
              />
            </div>
            <div
              className="w-full lg:w-[60%]"
              data-aos="fade-left"
              data-aos-delay="200"
              data-aos-duration="800"
            >
              {/* @ts-ignore */}
              {aboutUs?.data?.founder?.member?.map((person, index) => (
                <div
                  key={index}
                  className={`text-muted-foreground mb-4 font-light text-xl ${
                    aboutUs?.data?.founder?.member?.length > 1 && index === 0
                      ? "!pb-10 border-b"
                      : "!mt-10"
                  } border-muted-foreground`}
                >
                  <h2 className="text-[28px] text-[#0B1617] font-medium mb-2 lg:mb-5">
                    {person?.title}
                  </h2>
                  <h4 className="text-xl text-primary mb-2">
                    {person?.position}
                  </h4>
                  <p className="text-muted-foreground text-xl">
                    {person?.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-20" data-aos="fade-up" data-aos-duration="800">
          <h2 className="mb-5 font-normal text-4xl">
            {aboutUs?.data?.what?.title}
          </h2>
          <p className="text-muted-foreground text-2xl mb-5">
            {aboutUs?.data?.what?.description}
          </p>
          <div className="flex flex-col lg:flex-row items-center justify-center gap-5 lg:gap-10">
            <div
              className="w-full lg:w-[40%]"
              data-aos="fade-right"
              data-aos-delay="100"
              data-aos-duration="800"
            >
              <Image
                width={521}
                height={756}
                loading="eager"
                src={aboutUs?.data?.what?.media?.original_url}
                alt={t("our_team_alt")}
                className="w-[521px]  h-[756px] object-cover rounded-lg"
              />
            </div>
            <div
              className="w-full lg:w-[60%]"
              data-aos="fade-left"
              data-aos-delay="200"
              data-aos-duration="800"
            >
              {/* @ts-ignore */}
              {aboutUs?.data?.what?.cart?.map((item, index) => (
                <div
                  key={index}
                  className="text-muted-foreground mb-4 font-light text-xl "
                >
                  <h2 className="text-[28px] text-[#0B1617] font-medium mb-2">
                    {item?.title}
                  </h2>
                  <p className="text-muted-foreground text-xl">
                    {item?.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-20" data-aos="fade-up" data-aos-duration="800">
          <div className="mb-10">
            <h2 className="mb-5 font-normal text-4xl">
              {aboutUs?.data?.data_value?.our_value?.value_title}
            </h2>
            <p className="text-muted-foreground text-2xl mb-5">
              {aboutUs?.data?.data_value?.our_value?.value_description}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-10">
            {/* @ts-ignore */}
            {aboutUs?.data?.data_value?.values?.map((item, index) => (
              <div key={index}>
                <div className="text-muted-foreground mb-4 font-light text-xl ">
                  <h2 className="text-[28px] text-[#0B1617] font-medium mb-2">
                    {item?.title}
                  </h2>
                  <p className="text-muted-foreground text-xl">
                    {item?.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </div>
  );
}