---
import BaseLayout from "../../layouts/BaseLayout.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import CTA from "../../components/CTA.astro";
import { Trans } from "astro-i18next/components";
import i18next from "i18next";

// Initialize i18next for this page
await i18next.changeLanguage("nl");
---

<BaseLayout 
  title={`${i18next.t("nav.about")} | ${i18next.t("meta.title")}`}
  description={i18next.t("meta.description")}
  keywords={i18next.t("meta.keywords")}
>
  <Header />
  <main>
    <section class="py-20">
      <div class="container-custom">
        <h1 class="text-4xl font-bold mb-8">{i18next.t("about.title")}</h1>
        <div class="prose prose-lg">
          <p>{i18next.t("about.description")}</p>
          <p>{i18next.t("about.mission")}</p>
        </div>
      </div>
    </section>
    <CTA />
  </main>
  <Footer />
</BaseLayout>