import type { Metadata } from "next";
import Link from "next/link";
import Nav from "@/components/nav";
import Footer from "@/components/footer";

export const metadata: Metadata = {
  title: "Über Entscheidomat",
  description: "Wer hinter Entscheidomat steht, wofür die kostenlosen Zufalls-Tools gedacht sind und wie du Kontakt aufnimmst.",
  alternates: { canonical: "/ueber-uns" },
};

export default function AboutPage() {
  return (
    <>
      <Nav />
      <main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
        <div className="mx-auto w-full max-w-3xl px-5 sm:px-8">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Über Entscheidomat</p>
          <h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.95] tracking-[-0.045em] text-ink sm:text-6xl">Ein kleiner Ort für klare Alltagsentscheidungen.</h1>
          <div className="mt-10 space-y-6 text-lg leading-relaxed text-ink-soft">
            <p>Entscheidomat ist ein unabhängiges, kostenloses Webprojekt von Timo Knuth. Es bündelt einfache Zufalls-Tools für spielerische und folgenarme Situationen: eine Münze werfen, Namen ziehen, würfeln oder aus mehreren Optionen auswählen.</p>
            <p>Die Idee ist bewusst schlicht: Wenn alle Optionen vertretbar sind, kann ein klarer, nachvollziehbarer Zufallsimpuls das Grübeln beenden oder einer Gruppe den Einstieg erleichtern. Die Tools laufen direkt im Browser. Eigene Listen und Einstellungen werden nicht an einen Server übermittelt.</p>
            <p>Entscheidomat ist keine Beratungsstelle und ersetzt keine persönliche, medizinische, rechtliche, finanzielle oder sonstige fachliche Entscheidung. Bei Entscheidungen mit größeren Folgen sollen Informationen, Gespräche und gegebenenfalls qualifizierter Rat im Mittelpunkt stehen.</p>
          </div>
          <section className="mt-12 rounded-3xl border border-line bg-surface p-7 shadow-soft">
            <h2 className="font-display text-3xl font-semibold text-ink">So bleibt das Projekt nützlich</h2>
            <ul className="mt-5 space-y-3 leading-relaxed text-ink-soft">
              <li>Die wichtigsten Funktionen sind ohne Konto und ohne Zahlung nutzbar.</li>
              <li>Jedes Tool erklärt seinen Zweck, seine Grenzen und die lokale Speicherung eigener Eingaben.</li>
              <li>Der <Link className="font-semibold text-[#0d7a57] underline underline-offset-4" href="/ratgeber">Ratgeber</Link> ergänzt die Tools mit konkreten Anleitungen für faire, spielerische Auslosungen.</li>
            </ul>
          </section>
          <section className="mt-12 border-t border-line pt-8 text-ink-soft">
            <h2 className="font-display text-3xl font-semibold text-ink">Kontakt und rechtliche Angaben</h2>
            <p className="mt-4">Feedback, Hinweise und Fragen sind per E-Mail an <a className="font-semibold text-[#0d7a57] underline underline-offset-4" href="mailto:info@entscheidomat.com">info@entscheidomat.com</a> willkommen.</p>
            <p className="mt-4">Vollständige Angaben zum Anbieter stehen im <Link className="font-semibold text-[#0d7a57] underline underline-offset-4" href="/impressum">Impressum</Link>. Informationen zur Datenverarbeitung findest du in der <Link className="font-semibold text-[#0d7a57] underline underline-offset-4" href="/datenschutz">Datenschutzerklärung</Link>.</p>
          </section>
        </div>
      </main>
      <Footer />
    </>
  );
}