"use client"

import { useTranslations } from "next-intl"

export default function DatenschutzPage() {
  const t = useTranslations("marketing.datenschutz")

  return (
    <div className="container mx-auto px-4 py-16 max-w-3xl">
      <h1 className="text-3xl font-bold mb-2">{t("title")}</h1>
      <p className="text-sm text-muted-foreground mb-8">{t("lastUpdated")}</p>

      <div className="prose prose-sm dark:prose-invert max-w-none space-y-8">
        {/* 1. Verantwortlicher */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s1Title")}</h2>
          <p className="text-muted-foreground whitespace-pre-line">
            {t("s1Content")}
          </p>
        </section>

        {/* 2. Erhebung und Speicherung personenbezogener Daten */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s2Title")}</h2>
          <p className="text-muted-foreground">{t("s2Content")}</p>
        </section>

        {/* 3. Zweck der Datenverarbeitung */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s3Title")}</h2>
          <p className="text-muted-foreground">{t("s3Content")}</p>
        </section>

        {/* 4. Rechtsgrundlage */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s4Title")}</h2>
          <p className="text-muted-foreground">{t("s4Content")}</p>
        </section>

        {/* 5. Weitergabe an Dritte */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s5Title")}</h2>
          <p className="text-muted-foreground">{t("s5Content")}</p>
        </section>

        {/* 6. Auftragsverarbeitung (Stripe) */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s6Title")}</h2>
          <p className="text-muted-foreground">{t("s6Content")}</p>
        </section>

        {/* 7. Speicherdauer */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s7Title")}</h2>
          <p className="text-muted-foreground">{t("s7Content")}</p>
        </section>

        {/* 8. Betroffenenrechte */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s8Title")}</h2>
          <p className="text-muted-foreground">{t("s8Content")}</p>
        </section>

        {/* 9. Datensicherheit */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s9Title")}</h2>
          <p className="text-muted-foreground">{t("s9Content")}</p>
        </section>

        {/* 10. Hosting */}
        <section>
          <h2 className="text-xl font-semibold mb-3">{t("s10Title")}</h2>
          <p className="text-muted-foreground">{t("s10Content")}</p>
        </section>
      </div>
    </div>
  )
}
