hoerdle/app/[locale]/about/page.tsx

import { getTranslations } from "next-intl/server";
import { Link } from "@/lib/navigation";

interface AboutPageProps {
  params: Promise<{ locale: string }>;
}

export default async function AboutPage({ params }: AboutPageProps) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "About" });

  const sheetUrl =
    "https://docs.google.com/spreadsheets/d/1LuMkDsnidlvMtzzSqwrz-GACnqMaqzs-VBa-ZK0nZeI/edit?usp=sharing";

  return (
    <main
      style={{
        maxWidth: "960px",
        margin: "0 auto",
        padding: "2rem 1rem",
        lineHeight: 1.6,
      }}
    >
      <h1 style={{ fontSize: "2rem", marginBottom: "1rem" }}>{t("title")}</h1>
      <p style={{ marginBottom: "2rem", color: "#4b5563" }}>{t("intro")}</p>

      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
          {t("projectTitle")}
        </h2>
        <p style={{ marginBottom: "0.5rem" }}>{t("projectPrivateNote")}</p>
        <p style={{ marginBottom: "0.5rem" }}>{t("projectIdea")}</p>
      </section>

      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
          {t("imprintTitle")}
        </h2>
        <p style={{ marginBottom: "0.25rem" }}>
          <strong>{t("imprintOperator")}</strong>
        </p>
        <p style={{ marginBottom: "0.25rem" }}>Max Mustermann</p>
        <p style={{ marginBottom: "0.25rem" }}>Musterstraße 1</p>
        <p style={{ marginBottom: "0.25rem" }}>12345 Musterstadt</p>
        <p style={{ marginBottom: "0.5rem" }}>{t("imprintCountry")}</p>
        <p style={{ marginBottom: "0.25rem" }}>
          {t("imprintEmailLabel")}{" "}
          <a href="mailto:kontakt@example.com">kontakt@example.com</a>
        </p>
        <p
          style={{ marginTop: "0.5rem", fontSize: "0.9rem", color: "#6b7280" }}
        >
          {t("imprintDisclaimer")}
        </p>
      </section>

      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
          {t("costsTitle")}
        </h2>
        <p style={{ marginBottom: "0.5rem" }}>{t("costsIntro")}</p>
        <ul
          style={{
            marginLeft: "1.25rem",
            marginBottom: "0.75rem",
            listStyleType: "disc",
          }}
        >
          <li>{t("costsDomain")}</li>
          <li>{t("costsServer")}</li>
          <li>{t("costsEmail")}</li>
          <li>{t("costsLicenses")}</li>
        </ul>
        <p style={{ marginBottom: "0.5rem" }}>
          {t.rich("costsSheetLinkText", {
            link: (chunks) => (
              <a
                href={sheetUrl}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "underline" }}
              >
                {chunks}
              </a>
            ),
          })}
        </p>
        <p
          style={{
            marginBottom: "0.75rem",
            fontSize: "0.9rem",
            color: "#6b7280",
          }}
        >
          {t("costsSheetPrivacyNote")}
        </p>
        <div
          style={{
            border: "1px solid #e5e7eb",
            borderRadius: "0.5rem",
            overflow: "hidden",
            minHeight: "300px",
          }}
        >
          <iframe
            src={sheetUrl}
            title="Hördle Kostenübersicht"
            style={{ width: "100%", height: "400px", border: "0" }}
            loading="lazy"
          />
        </div>
      </section>

      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
          {t("privacyTitle")}
        </h2>
        <p style={{ marginBottom: "0.5rem" }}>{t("privacyIntro")}</p>
        <h3
          style={{
            fontSize: "1.25rem",
            marginTop: "1rem",
            marginBottom: "0.5rem",
          }}
        >
          {t("privacyPlausibleTitle")}
        </h3>
        <p style={{ marginBottom: "0.5rem" }}>
          {t("privacyPlausibleSelfHosted")}
        </p>
        <ul
          style={{
            marginLeft: "1.25rem",
            marginBottom: "0.75rem",
            listStyleType: "disc",
          }}
        >
          <li>{t("privacyPlausibleNoCookies")}</li>
          <li>{t("privacyPlausibleNoTrackingAcrossSites")}</li>
          <li>{t("privacyPlausibleAggregated")}</li>
        </ul>
        <p style={{ marginBottom: "0.5rem" }}>{t("privacyServerLogs")}</p>
        <p style={{ marginBottom: "0.5rem" }}>{t("privacyContact")}</p>
        <p
          style={{ marginTop: "0.5rem", fontSize: "0.9rem", color: "#6b7280" }}
        >
          {t("privacyNoLegalAdvice")}
        </p>
      </section>

      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
          {t("backTitle")}
        </h2>
        <p>
          <Link href="/" style={{ textDecoration: "underline" }}>
            {t("backToGame")}
          </Link>
        </p>
      </section>
    </main>
  );
}