import { ClientsLogos, OverviewImage, } from "@/assets/svg"
import { P } from "@/components/ui/typography"
import { useTranslations } from "next-intl";
import OverviewNavBar from "./OverviewComponents/OverviewNavBar";
import OverviewSideBar from "./OverviewComponents/OverviewSideBar";
import OverviewDashboard from "./OverviewComponents/OverviewDashboard";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { metaTitles } from "@/components/metaData/metaTitles";
import VideoPopup from "@/components/ui/poups/VideoPopup";

const LandingOverview = () => {
    const t = useTranslations();

    return (
        <section className="flex flex-col justify-center items-center sm:-translate-y-10  gap-20 sm:gap-36  max-sm:mb-20 lg:h-[850px] ">
            <div className="flex flex-col items-center gap-10">

            <div className="flex  flex-col w-full shadow-xl rounded-md  max-xl:hidden ">
                <OverviewNavBar />
                <div className="flex items-start">
                    <OverviewSideBar />
                    <OverviewDashboard />
                </div>

            </div>
               <VideoPopup buttonText={"Watch video"} className="h-0" videoSrc='/Dadycar  Le Meilleur Logiciel De Gestion De Flotte Automobile.mp4' />
            </div>
            <div className="relative xl:hidden">
                <div className="flex flex-col w-[320px] sm:w-[400px] lg:w-[900px]  aspect-[13/9] justify-center items-center  shadow-2xl rounded-md group  duration-300">
                    <CustomImage pageTitle={metaTitles?.landingMeta_Title} src={OverviewImage} alt="custom dashboard playground" fill className=" object-cover     " priority={true} />
                </div>
            </div>

            <div>
                <P className="text-sm font-semibold text-primary">{t("THEY TRUSTED US")}</P>
                <div className="relative w-full sm:w-[850px] h-auto aspect-[16/2]">
                    <CustomImage pageTitle={metaTitles?.landingMeta_Title}
                        src={ClientsLogos}
                        alt="colaboration companies"
                        fill
                        className="object-contain"
                        priority
                    />
                </div>
            </div>
        </section>
    )
}

export default LandingOverview