import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowLeft,
  DatabaseZap,
  LockKeyhole,
  Server,
  ShieldCheck,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export const metadata: Metadata = {
  title: "Datenschutz | Kita-Planer",
  description: "Datenschutzhinweise und Platzhalter für Kita-Planer.",
};

const overviewItems = [
  {
    icon: ShieldCheck,
    title: "Verantwortliche Stelle",
    text: "[Name / Organisation], [Adresse], [E-Mail-Adresse]",
  },
  {
    icon: DatabaseZap,
    title: "Verarbeitete Daten",
    text: "Accountdaten, Familiendaten, Kita-Zuordnung, Dienste, Termine und Nachrichten.",
  },
  {
    icon: Server,
    title: "Hosting",
    text: "[Hosting-Anbieter], [Serverstandort], [Auftragsverarbeitung vorhanden?]",
  },
  {
    icon: LockKeyhole,
    title: "Schutzmaßnahmen",
    text: "Mandantentrennung, Rollenrechte, Session-Prüfung und Zugriffsbeschränkungen.",
  },
];

export default function DatenschutzPage() {
  return (
    <main className="min-h-screen bg-[#f8faf8] text-slate-950">
      <div className="mx-auto w-full max-w-5xl px-5 py-8 sm:px-6 lg:py-12">
        <Button asChild variant="ghost" className="-ml-3 mb-8">
          <Link href="/">
            <ArrowLeft className="h-4 w-4" />
            Zur Startseite
          </Link>
        </Button>

        <section className="mb-10 rounded-lg bg-slate-950 px-6 py-10 text-white sm:px-10">
          <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-300/12 text-emerald-200 ring-1 ring-emerald-300/20">
            <ShieldCheck className="h-6 w-6" />
          </div>
          <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-200">
            Datenschutz
          </p>
          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
            Datenschutzerklärung
          </h1>
          <p className="mt-5 max-w-2xl text-sm leading-6 text-slate-300">
            Diese Datenschutzerklärung ist ein Platzhalter. Bitte ersetze die
            markierten Angaben und lasse den finalen Text vor Veröffentlichung
            rechtlich prüfen.
          </p>
        </section>

        <div className="grid gap-5 md:grid-cols-2">
          {overviewItems.map((item) => {
            const Icon = item.icon;

            return (
              <Card key={item.title} className="border-slate-200 bg-white">
                <CardContent className="p-5">
                  <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h2 className="font-semibold tracking-tight">
                    {item.title}
                  </h2>
                  <p className="mt-2 text-sm leading-6 text-slate-600">
                    {item.text}
                  </p>
                </CardContent>
              </Card>
            );
          })}
        </div>

        <section className="mt-10 space-y-8 rounded-lg border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              1. Verantwortliche Stelle
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Verantwortlich für die Datenverarbeitung ist:
              <br />
              [Name / Organisation]
              <br />
              [Straße Hausnummer]
              <br />
              [PLZ Ort]
              <br />
              E-Mail: [E-Mail-Adresse]
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              2. Zwecke der Datenverarbeitung
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Wir verarbeiten personenbezogene Daten, um die Nutzung von
              Kita-Planer zu ermöglichen. Dazu gehören insbesondere Login,
              Rollenverwaltung, Familien- und Kinderdaten, Dienste,
              Terminplanung, Abwesenheiten, Kontaktfreigaben und offizielle
              Mitteilungen.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              3. Kategorien personenbezogener Daten
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Verarbeitet werden je nach Nutzung insbesondere Name,
              E-Mail-Adresse, Telefonnummer, Adresse, Rollen im System,
              Kita-Zugehörigkeit, Familiendaten, Kinderdaten, Dienst- und
              Terminzuordnungen, Abwesenheitsmeldungen sowie technische
              Nutzungsdaten wie Sitzungsinformationen.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              4. Rechtsgrundlagen
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Die Verarbeitung erfolgt je nach Kontext auf Grundlage von Art. 6
              Abs. 1 lit. b DSGVO zur Vertragserfüllung, Art. 6 Abs. 1 lit. f
              DSGVO aufgrund berechtigter Interessen an einer geordneten
              Kita-Organisation oder auf Grundlage einer Einwilligung gemäß Art.
              6 Abs. 1 lit. a DSGVO, zum Beispiel bei freiwilligen
              Kontaktfreigaben.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              5. Empfänger und Auftragsverarbeiter
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Zugriff auf Daten erhalten nur berechtigte Nutzerinnen und Nutzer
              innerhalb der jeweiligen Kita beziehungsweise des jeweiligen
              Elternvereins. Für Hosting, E-Mail-Versand oder technische
              Dienste können Auftragsverarbeiter eingesetzt werden:
              [Hosting-Anbieter], [E-Mail-Anbieter], [weitere Dienstleister].
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              6. Speicherdauer und Löschung
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Personenbezogene Daten werden nur so lange gespeichert, wie sie
              für die genannten Zwecke erforderlich sind oder gesetzliche
              Aufbewahrungspflichten bestehen. Nutzerkonten und zugehörige Daten
              können nach Maßgabe der Systemfunktionen und gesetzlichen Vorgaben
              gelöscht werden.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              7. Cookies und Sitzungen
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Kita-Planer verwendet technisch notwendige Cookies oder
              vergleichbare Technologien, um Login-Sitzungen sicher
              bereitzustellen. Für die öffentliche Website kann zusätzlich
              Umami Analytics eingesetzt werden, um Seitenaufrufe anonymisiert
              und ohne Cookies auszuwerten.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              8. Webanalyse mit Umami
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Wir nutzen [Umami-Instanz / Betreiber eintragen], um die Nutzung
              der öffentlichen Website statistisch auszuwerten. Umami verwendet
              keine Cookies, respektiert die Do-Not-Track-Einstellung des
              Browsers und erfasst keine Analyseaufrufe im geschützten
              Dashboard. Erfasst werden insbesondere Seitenaufrufe,
              Referrer-Informationen, Browser-, Geräte- und Länderinformationen
              in aggregierter Form. Die Rechtsgrundlage ist [Rechtsgrundlage
              prüfen und eintragen].
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              9. Rechte betroffener Personen
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Betroffene Personen haben nach Maßgabe der DSGVO Rechte auf
              Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung,
              Datenübertragbarkeit sowie Widerspruch. Erteilte Einwilligungen
              können mit Wirkung für die Zukunft widerrufen werden.
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              10. Beschwerderecht
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Betroffene Personen können sich bei einer
              Datenschutzaufsichtsbehörde beschweren. Zuständig ist
              insbesondere die Aufsichtsbehörde am Sitz der verantwortlichen
              Stelle: [zuständige Datenschutzaufsichtsbehörde].
            </p>
          </div>

          <div>
            <h2 className="text-xl font-semibold tracking-tight">
              11. Aktualität dieser Datenschutzerklärung
            </h2>
            <p className="mt-3 leading-7 text-slate-700">
              Stand: [Datum]. Wir behalten uns vor, diese Datenschutzerklärung
              anzupassen, wenn sich Funktionen, Rechtsgrundlagen oder
              eingesetzte Dienstleister ändern.
            </p>
          </div>
        </section>
      </div>
    </main>
  );
}
