import Image from "next/image";
import { getTranslations } from "next-intl/server"

import { Feedback } from "../_components/feedback";
import { StatisticsSection } from "./_statistics";

export const generateMetadata = async () => {
    const t = await getTranslations();
    return {
        title: t("routes.about")
    }
};

export default async function AboutUs() {
    const t = await getTranslations();
    return (
        <section>
            {/* hero */}
            <div className="grid lg:grid-cols-2 mb-12 md:*:h-60">
                <div className="border p-4 grid place-items-center">
                    <div>
                        <h1 className="text-sm font-semibold mb-6">
                            {t("about.title-1")}
                        </h1>
                        <p className="text-xl font-bold md:w-[25rem]">
                            {t("about.desc-2")}
                        </p>
                    </div>
                </div>
                <div className="bg-gradient-to-br from-primary-tw-600 to-blue-700 px-4 py-8 text-start grid place-items-center">
                    <p className="text-white text-xl md:text-3xl md:w-[25rem] font-semibold">
                        {t("about.desc-3")}
                    </p>
                </div>
            </div>

            <div className="min-h-screen my-20">
                <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">

                    {/* left */}
                    <div className="grid lg:grid-cols-2 gap-8">
                        <div className="grid gap-8">
                            {/* top left */}
                            <div>
                                <Image
                                    src={'/images/about-img-1.jpg'}
                                    alt="about-mwaheb-image-one"
                                    width={1200}
                                    height={1200}
                                    className="w-full"
                                />
                            </div>

                            {/* bottom left */}
                            <div>
                                <Image
                                    src={'/images/about-img-2.jpg'}
                                    alt="about-mwaheb-image-two"
                                    width={1200}
                                    height={1200}
                                    className="w-full"
                                />
                            </div>
                        </div>

                        {/* center right */}
                        <div className=" md:col-start-2 md:row-start-1 grid place-items-center">
                            <Image
                                src={'/images/about-img-3.jpg'}
                                alt="about-mwaheb-image-three"
                                width={1200}
                                height={1200}
                                className="w-full"
                            />
                        </div>
                    </div>

                    {/* right */}
                    <div className="space-y-6">
                        <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold text-gray-900 leading-tight">
                            {t("about.title-2")}
                        </h1>

                        <p className="text-lg text-gray-600 leading-relaxed">
                            {t("about.desc-4")}
                        </p>
                    </div>
                </div>
            </div>

            {/* statistics */}
            <div className="xl:min-h-screen mb-32 grid xl:grid-cols-3">
                {/* statistics */}
                <div className="rtl:order-1 size-full relative">
                    <div className="xl:absolute w-full z-20 xl:top-32 rtl:xl:end-72">
                        <StatisticsSection />
                    </div>
                </div>

                {/* right image */}
                <div className="size-full hidden xl:block relative xl:h-dvh xl:col-span-2">
                    <Image
                        src={'/images/about-img-4.jpg'}
                        alt="about-mwaheb-image-four"
                        width={1200}
                        height={1200}
                        className="w-full h-full object-cover absolute inset-0"
                    />
                </div>
            </div>

            {/* testimonials */}
            <div className="grid place-items-center relative">
                <div className="relative max-xl:max-w-[90dvw] w-full">
                    <Feedback />
                </div>
            </div>
        </section>
    )
}