import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Über Toolaro | Datenschutzbewusste Online-Tools",
  description: "Wer Toolaro betreibt, warum es Toolaro gibt und wie kostenlose Tools, Werbung, Datenschutz und Premium zusammenspielen.",
  alternates: { canonical: "/about" },
};

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-5xl px-4 py-16">
      <section className="max-w-3xl">
        <p
          className="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-brand-500"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Über Toolaro
        </p>
        <h1 className="font-display text-4xl font-bold uppercase leading-tight tracking-tight text-ink-primary">
          Ein schnelles Tool-Portal, das nützlich bleiben soll.
        </h1>
        <p className="mt-5 text-base leading-8 text-ink-secondary">
          Toolaro wird von Arthur Kotsch betrieben und bündelt kleine Online-Werkzeuge für Alltag,
          Text, Entwicklung, Sicherheit und Rechner-Aufgaben. Die kostenlose Basis soll ohne Account
          funktionieren. Premium ist optional und ergänzt Komfort, Synchronisierung, Exporte und
          werbefreie Nutzung.
        </p>
      </section>

      {/* Value props */}
      <div className="mt-12 grid gap-4 md:grid-cols-4">
        <Value title="Schnell" text="Kurze Wege, klare Formulare, direkte Ergebnisse." />
        <Value title="Bewusst" text="Viele Tools laufen lokal im Browser, soweit technisch umgesetzt." />
        <Value title="Seriös" text="Keine übertriebenen Sicherheits- oder Genauigkeitsversprechen." />
        <Value title="Erweiterbar" text="Premium ergänzt Komfort, ohne die kostenlose Version künstlich zu schwächen." />
      </div>

      {/* Blocks */}
      <section className="mt-14 grid gap-6 lg:grid-cols-2">
        <Block title="Werbung und Finanzierung">
          Die kostenlose Version kann Werbung anzeigen. Anzeigen werden gekennzeichnet, aus rechtlichen
          Seiten entfernt und für Premium-Nutzer nach Login ausgeblendet.
        </Block>
        <Block title="Datenschutz und lokale Tools">
          Toolaro unterscheidet zwischen lokalen Tool-Eingaben und Account-/Premium-Daten. Favoriten,
          Verlauf, Einstellungen, Newsletter und Billing werden nur gespeichert, wenn die Funktion es benötigt.
        </Block>
        <Block title="Roadmap">
          Weitere sinnvolle Tools, bessere Exporte, Batch-Verarbeitung, mehr gespeicherte Einstellungen,
          klarere Premium-Komfortfunktionen und bessere mobile Bedienung werden schrittweise ausgebaut.
        </Block>
        <Block title="Feedback">
          Fehler, Toolwünsche, Premium-Fragen, Kooperationen oder Datenschutzfragen können über die
          <Link href="/contact" className="mx-1 font-semibold text-brand-500 hover:text-brand-600 underline underline-offset-4">Kontaktseite</Link>
          gemeldet werden.
        </Block>
      </section>
    </div>
  );
}

function Value({ title, text }: { title: string; text: string }) {
  return (
    <div className="border-2 border-ink-primary bg-surface-raised p-5 shadow-[4px_4px_0_rgb(var(--brand-500))]">
      <p
        className="mb-3 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-brand-500"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {title}
      </p>
      <p className="text-sm leading-6 text-ink-secondary">{text}</p>
    </div>
  );
}

function Block({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="border-2 border-ink-primary bg-surface-sunken p-6">
      <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>
  );
}