'use client'

import GradientText from "@/components/GradientText";
import ShinyText from "@/components/ShinyText";
import TeamSlider from "@/components/TeamSlider";
import { Border, Button, MovingBorder } from "@/components/ui/moving-border";
import { useGlobalContext } from "@/context/GlobalContext";
import { useLanguage } from "@/context/LanguageContext";





const AboutUsPage = () => {
    const { darkMode } = useGlobalContext();
    const {t, language} = useLanguage();

    return(
       
        <div className="flex  flex-col items-center justify-between pt-6 overflow-hidden mx-auto ">

        <section className="flex flex-col lg:flex-row relative align-center justify-between w-[100%] lt:px-[9rem] xl:px-[8rem] max-w-screen-2xl  px-[1.5rem] lg:pt-[6rem] lg:pb-[5rem]  ">
<div className="absolute top-0 bottom-0 left-[-50%] right-[-50%] w-[10000px] h-full bg-[#00000005] dark:bg-[#171717]  pointer-events-none" />
<div className="flex flex-col justify-start lg:mt-0  gap-y-4 flex-1  z-10">
<div className="flex gap-3 flex-col mt-[2rem] ">
<h2 className="text-[#222222] dark:text-[#F1FEF7] text-[16px] lg:text-[32px]  font-medium  ">{t("Empowering")} </h2>
<h2 className="text-[32px] font-medium text-[#1F998E]">{t("Future")}</h2>
</div>
<h4 className="text-[14px] font-normal leading-[30px] dark:text-[#ABABAB]">{t("dedicated")}</h4>
<p className="text-[14px] font-normal leading-[30px] dark:text-[#ABABAB]">
{t("belive")}
</p>

</div>

<div className="items-center justify-end flex-1  relative lg:w-[380px] lg:flex z-10">
<img src="./images/about.png " className="lg:w-[420px] mt-11 lg:mt-0 z-10 "/>
{/* <img src="/images/mem.png" className="absolute top-[-40px] hidden lg:flex w-[110px] right-[-40px]" /> */}
</div>
</section>
<section className=" lg:px-[9rem] px-[1.5rem] max-w-screen-2xl  mt-[13rem] relative">
  <ShinyText
  text={t("OUR VISION")}
  disabled={false} 
  speed={3} 
  className='custom-class' 
/>
    {/* <h1 className="absolute left-1/2 lg:top-[-65px] top-[-30px] dark:text-[#262626] w-full font-bold transform text-[40px] -translate-x-1/2 text-center lg:text-[80px] text-[#E7E7E7] z-0">
    {t("OUR VISION")}
    </h1> */}
				<p className="text-center mr-auto dark:text-[#D1D1D1] content-center lg:text-[20px]  text-[14px] leading-[26px] lg:leading-[38px] z-10 relative">{t("Empower")} </p>
        {/* <GradientText
  colors={["#197A72", "#197A72", "#C6DA89", "#2EDACC", "#1F625C"]}
  animationSpeed={3}
  showBorder={false}
  className="custom-class"
>
{t("Empower")}
</GradientText> */}
			</section>
{/* <section className="max-w-screen-2xl lg:px-[14rem] mt-[4rem]">
  {darkMode ? <img src="/images/LIN1.png" /> :<img src="/images/LIN.png" />}
</section> */}

<section className=" relative lg:px-[10rem] px-[1.5rem] max-w-screen-2xl  mt-[10rem] mb-[14rem] ">
{/* <h1 className="absolute left-1/2 lg:top-[-65px] top-[-30px] dark:text-[#262626] w-full font-bold transform text-[40px] -translate-x-1/2 text-center lg:text-[80px] text-[#E7E7E7] z-0">
    {t("OUR MISSION")}
    </h1> */}
      <ShinyText
  text={t("OUR MISSION")}
  disabled={false} 
  speed={3} 
  className='custom-class' 
/>
   {/* <GradientText
  colors={["#197A72", "#197A72", "#C6DA89", "#2EDACC", "#1F625C"]}
  animationSpeed={3}
  showBorder={false}
  className="custom-class"
>
{t("accessible")}
</GradientText>

   <GradientText
  colors={["#197A72", "#197A72", "#C6DA89", "#2EDACC", "#1F625C"]}
  animationSpeed={3}
  showBorder={false}
  className="custom-class"
>
{t("providing")}
</GradientText> */}
				<p className="text-center mr-auto dark:text-[#D1D1D1] content-center leading-[26px] lg:text-[20px] lg:leading-[38px] z-10 relative">{t("accessible")}</p>
        <p className="text-center mr-auto dark:text-[#D1D1D1] content-center leading-[26px] lg:text-[20px] lg:leading-[38px] z-10 relative">{t("providing")}</p>
			</section>
      {/* <section className="px-[8rem] pb-[8rem] mx-auto">
        <h1 className="text-[32px] font-medium flex justify-center text-[center]">Our Core Team</h1>
        <TeamSlider />
      </section> */}


</div>
    )
};

export default AboutUsPage;