import { useTranslation } from "react-i18next";

export default function LandingBanner({t}:any) {

  const scrollToSection = (sectionId: string) => {
    const section = document.getElementById(sectionId);
    if (section) {
      const offset = 80; // Adjust this value based on the height of your fixed header or any other offset you need
      const sectionTop = section.offsetTop;
      window.scrollTo({
        top: sectionTop - offset,
        behavior: "smooth",
      });
    }
  };
  return (
    <>
      <div className="relative z-10 flex justify-center h-max">
        <div className="flex flex-col items-center md:flex-row md:items-stretch md:justify-center absolute -top-24 md:-top-12 z-20 text-black font-light">
          {/* <div
            className="w-10/12 md:w-[16rem] bg-[#cd1c52] p-5 text-white transition-transform duration-200 ease-in-out hover:scale-105 cursor-pointer shadow-2xl"
            onClick={() => scrollToSection("educacion")}
          >
            <p className="text-2xl text-center font-bold">Jóvenes y estudiantes</p>
            <p className="text-md text-left">
              Los jóvenes y estudiantes acceden a computación para mejorar sus
              competencias, seguir con estudios y encontrar empleo.
            </p>
          </div> */}

          <div
            className="w-10/12 md:w-[20rem] bg-[#CD1E50] text-white p-5 transition-transform duration-200 ease-in-out hover:scale-105 cursor-pointer shadow-2xl"
            onClick={() => scrollToSection("compukit")}
          >
            <p className="text-2xl text-center font-bold ">Qinaya Compu Kit</p>
            <p className="text-md text-center font-bold ">
              {t("qinaya_compu_titleA")}
            </p>
            <p className="text-md text-justify font-extralight">
              {t("qinaya_compu_descriptionA")}
            </p>
          </div>
          <div
            className="w-10/12 md:w-[20rem] bg-[#f8971b] text-white p-5 transition-transform duration-200 ease-in-out hover:scale-105 cursor-pointer shadow-2xl"
            onClick={() => scrollToSection("cloudkit")}
          >
            <p className="text-2xl text-center font-bold">Qinaya Cloud Pro</p>
            <br />
            <p className="text-md text-justify">
              {t("qinaya_compu_descriptionB")}
            </p>
          </div>
        </div>
      </div>
    </>
  );
}