import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Impressum - Toolaro",
  description: "Anbieterkennzeichnung und Kontaktinformationen von Toolaro.org.",
  alternates: { canonical: "/imprint" },
};

export default function ImprintPage() {
  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 · Rechtliches
      </p>
      <h1 className="mb-10 font-display text-3xl font-bold uppercase tracking-tight text-ink-primary">
        Impressum
      </h1>
      <div className="space-y-6">
        <LegalSection title="Angaben gemäß § 5 DDG">
          <p>Arthur Kotsch</p>
          <p>Brückenstraße 4</p>
          <p>09350 Lichtenstein</p>
          <p>Deutschland</p>
          <p>
            E-Mail:{" "}
            <a
              className="font-semibold text-brand-500 underline underline-offset-4 hover:text-brand-600"
              href="mailto:arthurkotsch@kotsch.tech"
            >
              arthurkotsch@kotsch.tech
            </a>
          </p>
        </LegalSection>
        <LegalSection title="Verantwortlich für den Inhalt">
          <p>Arthur Kotsch, Anschrift wie oben.</p>
        </LegalSection>
        <LegalSection title="Verbraucherstreitbeilegung">
          <p>
            Ich bin nicht verpflichtet und nicht bereit, an Streitbeilegungsverfahren vor einer
            Verbraucherschlichtungsstelle teilzunehmen.
          </p>
        </LegalSection>
      </div>
    </div>
  );
}

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