---
import SinglePage from "../layouts/SinglePage.astro";
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import { ContactForm } from "./ContactForm";

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

<SinglePage>
    <!-- Hero Image -->
    <div class="w-full flex justify-center mt-20 ">
        <img src={t("hero").image} alt="" class="rounded-full w-[200px] h-[200px]" />
    </div>
    <!-- Hero Text -->
    <div class="mt-[6rem]">
        <h1 class="text-accent text-4xl w-full text-center font-extrabold">
            {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">
        <button
          type="button"
          onclick="linkToBlog()"
          class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
        >
          {t("hero").buttons[0]}
        </button>
        <ContactForm currentLocale={Astro.currentLocale} client:load />
    </div>
    <script is:inline>
        function linkToBlog() {
            document.getElementById("blogBtn").click()
        }
    </script>
</SinglePage>