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

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

  const handleNavigation = (path: string) => {
    const element = document.getElementById(path);
    element?.scrollIntoView({ 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 lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
          <img
            src={Stars}
            alt="hero"
            className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
          ></img>
          <div>
            <h1 className="hero-text">{t("hero.heading.part1")}</h1>
            <h1 className="hero-text">{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="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
              {t("hero.subheading.part1")}
            </h2>
            <h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
              {t("hero.subheading.part2")}
            </h2>
          </div>
          <div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
            <a className="flex w-full" href="#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-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
                {t("hero.button")}
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;