---
import SinglePage from "../layouts/SinglePage.astro";

import AboutModule from "./AboutModule.astro";
import { getLangFromUrl, useTranslations } from "../i18n/utils";

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

<SinglePage>
  <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4" id="about">
    <!-- Automaticly generate n (=3) bars with content -->
    {
      [0,1,2].map(i => 
        <AboutModule
          row={i}
          image={t("about")[i].image}
          flipped={i % 2}
        >
          <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-7">
            {t("about")[i].title}
          </h1>
          <p class="text-content text-center text-md short:text-sm xl:text-lg xl:px-10">
            {t("about")[i].content}
          </p>
        </AboutModule>
      )
    }
  </div>
</SinglePage>
