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

export const metadata: Metadata = {
  title: "FAQ - Toolaro",
  description: "Fragen zu lokaler Verarbeitung, Datenschutz, Werbung, Premium, Accounts, 2FA, Newsletter, Exports und Grenzen der Tools.",
  alternates: { canonical: "/faq" },
};

const faqs = [
  ["Sind die Tools kostenlos?", "Ja. Die Basisfunktionen bleiben ohne Account kostenlos nutzbar. Premium ist optional und ergänzt Komfortfunktionen."],
  ["Muss ich einen Account erstellen?", "Nein. Nur Premium-Funktionen wie serverseitige Favoriten, Verlauf, Einstellungen und werbefreie Nutzung benötigen einen Account."],
  ["Welche Tools laufen lokal?", "Viele Text-, QR-, Passwort-, JSON-, Base64-, Rechner- und Converter-Funktionen laufen lokal im Browser, soweit technisch umgesetzt."],
  ["Werden meine Tool-Eingaben gespeichert?", "Normale lokale Tool-Eingaben werden nicht unnötig serverseitig gespeichert. Premium speichert nur Daten wie Favoriten, Verlauf und Einstellungen."],
  ["Warum gibt es Werbung?", "Werbung finanziert die kostenlose Version. Anzeigen sind gekennzeichnet, werden auf rechtlichen Seiten ausgeblendet und für Premium-Nutzer entfernt."],
  ["Wie funktioniert Premium?", "Premium bietet werbefreie Nutzung, serverseitige Favoriten, Verlauf, gespeicherte Einstellungen, höhere Limits, Batch-Funktionen, Exporte und Synchronisierung."],
  ["Wie funktioniert 2FA?", "Nach korrekter E-Mail und Passwort sendet Toolaro einen kurz gültigen Einmalcode per E-Mail. Erst danach wird die Session aktiviert."],
  ["Gibt es Passwort-Reset?", "Ja. Der Reset erfolgt per zeitlich begrenztem, einmalig nutzbarem E-Mail-Link."],
  ["Wie funktioniert der Newsletter?", "Newsletter ist freiwillig, nicht vorausgewählt und nutzt Double-Opt-in. Der Status kann im Account geändert werden."],
  ["Kann ich Daten exportieren oder löschen?", "Ja. Im Account gibt es einen JSON-Datenexport und eine Account-Löschung."],
  ["Sind Ergebnisse garantiert korrekt?", "Nein. Ergebnisse sind Hilfen und müssen vor wichtiger Nutzung geprüft werden. Sie ersetzen keine medizinische, finanzielle, rechtliche oder Sicherheitsberatung."],
  ["Kann ich Toolwünsche melden?", "Ja, über die Kontaktseite mit dem Themenbereich Tool-Wunsch."],
];

export default function FaqPage() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map(([q, a]) => ({
      "@type": "Question",
      name: q,
      acceptedAnswer: { "@type": "Answer", text: a },
    })),
  };

  return (
    <div className="mx-auto max-w-4xl px-4 py-16">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />

      <p
        className="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-brand-500"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Toolaro · FAQ
      </p>
      <h1 className="font-display text-3xl font-bold uppercase tracking-tight text-ink-primary">
        Häufige Fragen
      </h1>
      <p className="mt-3 text-base text-ink-secondary">
        Kurze Antworten zu kostenloser Nutzung, Premium, Datenschutz, Werbung, Accounts und Grenzen der Tools.
      </p>

      <div className="mt-10 grid gap-4 md:grid-cols-2">
        {faqs.map(([q, a]) => (
          <section
            key={q}
            className="border-2 border-ink-primary bg-surface-raised p-5 shadow-[4px_4px_0_rgb(var(--brand-500))]"
          >
            <h2 className="mb-2 font-display font-bold uppercase tracking-tight text-ink-primary">{q}</h2>
            <p className="text-sm leading-7 text-ink-secondary">{a}</p>
          </section>
        ))}
      </div>

      <div className="mt-10 border-2 border-ink-primary/40 bg-surface-sunken p-5 text-sm text-ink-secondary">
        <span
          className="mr-2 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Frage fehlt?
        </span>
        Schreib über die{" "}
        <Link href="/contact" className="font-semibold text-brand-500 underline underline-offset-4 hover:text-brand-600">
          Kontaktseite
        </Link>
        .
      </div>
    </div>
  );
}