---
export const prerender = true;
import SinglePage from "../layouts/SinglePage.astro";
import { getLangFromUrl, useTranslations } from "../i18n/utils";

const t = useTranslations(getLangFromUrl(Astro.url))
---

<SinglePage>
    <!-- Hero Image -->
    <div class="w-full flex justify-center mt-20 short:mt-10 ultrashort:mt-5">
        <img src={t("hero")["image"]} alt="" class="rounded-full w-[200px] h-[200px]" />
    </div>
    <!-- Hero Text -->
    <div class="mt-[6rem] short:mt-[3rem]">
        <h1 class="text-accent text-4xl w-full text-center font-extrabold ultrashort:text-3xl">
            {t("hero")["title"]}
        </h1>
        <h2 class="text-content text-lg w-full text-center mt-[3.2rem]">
            {t("hero")["content"]}
        </h2>
    </div>
    <!-- Call action buttons -->
    <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2 short:mt-[3rem] ultrashort:mt-[1.5rem]">
        <button
          type="button"
          onclick="scrollNext()"
          class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2 ultrashort:text-2xl"
        >
          {t("hero")["buttons"][0]}
        </button>
        <button
          type="button"
          onclick="linkToBlog()"
          class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ultrashort:text-xl"
        >
          {t("hero")["buttons"][1]}  
        </button>
    </div>
    <script is:inline>
        window.addEventListener('load', function() {
            var urlParams = new URLSearchParams(window.location.search);
            var hash = window.location.hash;

            // Check if there's a hash in the URL
            if (hash !== '') {
                // Remove the hash and navigate to the root URL
                window.history.replaceState({}, '', urlParams.toString());
                window.location.href = '/';
            }
        });
        function scrollNext() {
            window.location.href = "#about"
        }
        function linkToBlog() {
            document.getElementById("blogBtn").click()
        }
    </script>
</SinglePage>
