import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Cookie-Hinweise | Toolaro",
  description: "Informationen zu Cookies, LocalStorage, Consent und Werbung auf Toolaro.org.",
  alternates: { canonical: "/cookies" },
};

export default function CookiesPage() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-16">
      <p
        className="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-brand-500"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Toolaro · Cookies
      </p>
      <h1 className="mb-10 font-display text-3xl font-bold uppercase tracking-tight text-ink-primary">
        Cookie-Hinweise
      </h1>

      <div className="space-y-6">
        <CookieSection title="Notwendige Speicherung">
          Toolaro speichert deine Cookie- und Werbeauswahl lokal im Browser. Diese Speicherung
          ist notwendig, damit deine Entscheidung gemerkt und über den Footer-Link
          &bdquo;Cookie-Einstellungen&ldquo; geändert werden kann.
        </CookieSection>

        <CookieSection title="Werbung">
          Google AdSense wird erst geladen, wenn du der Kategorie Werbung zustimmst. Ohne diese
          Zustimmung werden keine AdSense-Skripte geladen; Werbeflächen bleiben lediglich als
          klar gekennzeichnete Anzeigenbereiche sichtbar.
        </CookieSection>

        <CookieSection title="Statistik">
          Wenn du der Kategorie Statistik zustimmst, speichert Toolaro intern Seitenaufruf,
          Referrer-Host, Sprache, Zeitzone, Gerätetyp und Viewport. Tool-Eingaben werden nicht
          gespeichert.
        </CookieSection>

        <CookieSection title="Externe Medien">
          Externe Medien werden derzeit nicht über eine separate Consent-Kategorie verwendet.
        </CookieSection>
      </div>
    </div>
  );
}

function CookieSection({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="border-2 border-ink-primary bg-surface-sunken p-5">
      <h2
        className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.16em] text-ink-secondary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {title}
      </h2>
      <p className="mt-3 leading-7 text-ink-secondary">{children}</p>
    </section>
  );
}