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

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

export async function generateMetadata({ params }: AboutPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "About" });
  
  const title = t("title");
  const description = t("intro");
  
  return await generateBaseMetadata(locale, "about", title, description);
}

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.5rem" }}>
          <strong>{t("imprintOperator")}</strong>
        </p>
        <p style={{ marginBottom: 0, lineHeight: "1.5" }}>
          Markus Busche
          <br />
          Knorrstr. 16
          <br />
          24106 Kiel
          <br />
          {t("imprintCountry")}
          <br />
          {t("imprintEmailLabel")}{" "}
          <a href="mailto:markus@hoerdle.de">markus@hoerdle.de</a>
        </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>
      </section>

      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
          {t("supportTitle")}
        </h2>
        <p style={{ marginBottom: "1rem" }}>{t("supportIntro")}</p>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "1rem",
            marginBottom: "1rem",
          }}
        >
          <div
            style={{
              padding: "1rem",
              border: "1px solid #e5e7eb",
              borderRadius: "0.5rem",
              backgroundColor: "#f9fafb",
            }}
          >
            <h3
              style={{
                fontSize: "1.125rem",
                fontWeight: "600",
                marginBottom: "0.5rem",
              }}
            >
              {t("supportSepaTitle")}
            </h3>
            <p style={{ marginBottom: "0.25rem" }}>
              <strong>{t("supportSepaName")}</strong>
            </p>
            <p style={{ marginBottom: 0, fontFamily: "monospace" }}>
              {t("supportSepaIban")}
            </p>
          </div>

          <div
            style={{
              padding: "1rem",
              border: "1px solid #e5e7eb",
              borderRadius: "0.5rem",
              backgroundColor: "#f9fafb",
            }}
          >
            <h3
              style={{
                fontSize: "1.125rem",
                fontWeight: "600",
                marginBottom: "0.5rem",
              }}
            >
              {t("supportPaypalTitle")}
            </h3>
            <p style={{ marginBottom: 0 }}>
              <a
                href="https://paypal.me/MBusche"
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "underline" }}
              >
                {t("supportPaypalLink")}
              </a>
            </p>
          </div>

          <div
            style={{
              padding: "1rem",
              border: "1px solid #e5e7eb",
              borderRadius: "0.5rem",
              backgroundColor: "#f9fafb",
            }}
          >
            <h3
              style={{
                fontSize: "1.125rem",
                fontWeight: "600",
                marginBottom: "0.5rem",
              }}
            >
              {t("supportSteadyTitle")}
            </h3>
            <p style={{ marginBottom: "0.5rem" }}>
              {t("supportSteadyDescription")}
            </p>
            <p style={{ marginBottom: 0 }}>
              <a
                href="https://steady.page/de/hoerdle"
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "underline" }}
              >
                https://steady.page/de/hoerdle
              </a>
            </p>
          </div>
        </div>
        <div
          style={{
            padding: "1rem",
            border: "1px solid #e5e7eb",
            borderRadius: "0.5rem",
            backgroundColor: "#f9fafb",
            marginBottom: "0.5rem",
          }}
        >
          <h3
            style={{
              fontSize: "1.125rem",
              fontWeight: "600",
              marginBottom: "0.5rem",
            }}
          >
            {t("supportCuratorTitle")}
          </h3>
          <p style={{ marginBottom: 0 }}>
            {t("supportCuratorText")}
          </p>
        </div>
        <div
          style={{
            padding: "1rem",
            border: "1px solid #e5e7eb",
            borderRadius: "0.5rem",
            backgroundColor: "#f9fafb",
          }}
        >
          <h3
            style={{
              fontSize: "1.125rem",
              fontWeight: "600",
              marginBottom: "0.5rem",
            }}
          >
            {t("supportReportBugTitle")}
          </h3>
          <p style={{ marginBottom: 0 }}>
            {t.rich("supportReportBugText", {
              email: (chunks) => (
                <a
                  href="mailto:admin@hoerdle.de"
                  style={{ textDecoration: "underline" }}
                >
                  {chunks}
                </a>
              ),
            })}
          </p>
        </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>
        <p style={{ marginBottom: "0.5rem" }}>
          {t("privacyPlausibleGemaTariff")}
        </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>
      </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>
  );
}