import { useTranslation } from "react-i18next";
import HeroImg from "../../../assets/HeroImg.svg";
import Stars from "../../../assets/Stars.svg";

const Hero = () => {
  const { t, i18n } = useTranslation();

  const handleNavigation = (path: string) => {
    const element = document.getElementById(path);
    const navbarHeight = 110; // Replace with your navbar's height
    if (element) {
      const top =
        element.getBoundingClientRect().top + window.scrollY - navbarHeight;
      window.scrollTo({ top: top, behavior: "smooth" });
    }
  };

  return (
    <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
      <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
        <img className="items-center" src={HeroImg} alt="hero"></img>
      </div>
      <div className="justify-center items-center lg:w-1/2 xl:w-1/2">
        <div className="flex flex-col text-center pt-4 lg:pt-10 lg:pr-20 lg:text-right">
          <img
            src={Stars}
            alt="hero"
            className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
          ></img>
          <div>
            <h1
              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
            >
              {t("hero.heading.part1")}
            </h1>
            <h1
              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
            >
              {t("hero.heading.part2")}
            </h1>
            <div>
              <img
                src={HeroImg}
                alt="heroSm"
                className="flex mt-6 lg:hidden"
              ></img>
            </div>
          </div>
          <div className="mx-5 lg:mx-0">
            <h2
              className={
                i18n.language === "en"
                  ? "hero-sub-text mt-4 md:mt-10"
                  : "hero-sub-text-pt mt-4 md:mt-10"
              }
            >
              {t("hero.subheading.part1")}
            </h2>
            <h2
              className={
                i18n.language === "en" ? "hero-sub-text" : "hero-sub-text-pt"
              }
            >
              {t("hero.subheading.part2")}
            </h2>
          </div>
          <div className="flex mt-5 lg:mt-12 mx-10 md:mx-40 lg:mx-0 lg:ml-auto rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
            <a
              className="flex w-full"
              href="Contact"
              onClick={(e) => {
                e.preventDefault();
                handleNavigation("Contact");
              }}
            >
              <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-full hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
                {t("hero.button")}
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;
