---
import { translations, type Lang } from "@data/i18n";
import { Image } from "astro:assets";
import benker from "@assets/studioBenker.png";
const { lang = "no" } = Astro.props as { lang?: Lang };
const t = translations[lang].about;
---

<main class="flex gap-8 flex-col max-w-prose">
  <h1 class="text-4xl font-bold">{t.title}</h1>
  <div class="flex gap-4 text-lg flex-col">
    <p>{t.p1}</p>
    <p>{t.p2}</p>
    <p>{t.p3}</p>
    <p>{t.p4}</p>
    <div>
      <Image
        src={benker}
        alt="Studio Benker"
        class="place-self-center w-full"
        width={600}
        height={400}
        loading="eager"
      />
      <p class="text-right text-md font-light">
        {t.photoCredit} Runhild Heggem
      </p>
    </div>
    <p set:html={t.p5} />
  </div>
</main>