import type { Metadata } from "next";
import Link from "next/link";
import RandomNumber from "@/components/tools/random-number";
import SubpageLayout from "@/components/subpage-layout";

const SITE_URL = "https://entscheidomat.com";
const PAGE_URL = `${SITE_URL}/zufallszahl-generator`;
const PAGE_TITLE = "Zufallszahl-Generator – Zahl im Wunschbereich erzeugen";
const PAGE_DESCRIPTION =
  "Zufallszahl-Generator mit frei wählbarem Zahlenbereich. Minimum und Maximum eintragen, generieren, Ergebnis erhalten – kostenlos, ohne Anmeldung.";
const UPDATED = "23. Juli 2026";

export const metadata: Metadata = {
  title: PAGE_TITLE,
  description: PAGE_DESCRIPTION,
  alternates: { canonical: "/zufallszahl-generator" },
  openGraph: { type: "website", locale: "de_DE", siteName: "Entscheidomat", title: PAGE_TITLE, description: PAGE_DESCRIPTION, url: PAGE_URL, images: ["/opengraph-image"] },
  twitter: { card: "summary_large_image", title: PAGE_TITLE, description: PAGE_DESCRIPTION, images: ["/twitter-image"] },
};

const FAQS = [
  {
    q: "Kann ich auch negative Zahlen oder sehr große Bereiche eingeben?",
    a: "Ja, Minimum und Maximum sind frei wählbare Zahlen. Die Reihenfolge der Eingabe spielt keine Rolle, das Tool sortiert automatisch.",
  },
  {
    q: "Werden auch Dezimalzahlen unterstützt?",
    a: "Nein, aktuell erzeugt der Generator ausschließlich ganze Zahlen innerhalb des gewählten Bereichs.",
  },
  {
    q: "Wie entsteht die Zufallszahl?",
    a: "Bei jeder Anfrage erzeugt das Tool im Browser einen neuen Zufallswert und leitet daraus eine ganze Zahl im gewählten Bereich ab. Der Generator ist für spielerische und alltägliche Zwecke gedacht, nicht für sicherheitskritische oder verbindliche Anwendungen.",
  },
  {
    q: "Werden meine Einstellungen für Minimum und Maximum gespeichert?",
    a: "Ja, lokal im localStorage deines Browsers. Sie werden nicht an einen Server übertragen.",
  },
  {
    q: "Kann ich mehrere Zahlen hintereinander generieren?",
    a: "Ja, beliebig oft – einfach erneut auf „Zahl generieren“ tippen.",
  },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Entscheidomat", item: SITE_URL },
        { "@type": "ListItem", position: 2, name: "Zufallszahl-Generator", item: PAGE_URL },
      ],
    },
    {
      "@type": "WebApplication",
      name: "Zufallszahl-Generator",
      url: PAGE_URL,
      description: PAGE_DESCRIPTION,
      applicationCategory: "UtilitiesApplication",
      operatingSystem: "Any (Web-Browser)",
      isPartOf: { "@id": `${SITE_URL}/#website` },
      offers: { "@type": "Offer", price: "0", priceCurrency: "EUR" },
    },
    {
      "@type": "FAQPage",
      mainEntity: FAQS.map((f) => ({
        "@type": "Question",
        name: f.q,
        acceptedAnswer: { "@type": "Answer", text: f.a },
      })),
    },
  ],
};

const STEPS = [
  "Trage Minimum und Maximum ein – die Reihenfolge ist egal.",
  "Tippe auf „Zahl generieren“.",
  "Eine Zufallszahl im gewählten Bereich erscheint mit kurzer Animation.",
  "Passe den Zahlenraum jederzeit an und generiere erneut.",
];

const EXAMPLES = [
  "Losnummern für eine Verlosung ziehen",
  "„Wie viele Liegestütze mache ich?“",
  "Zufällige Teamnummer oder Startreihenfolge vergeben",
];

const VORTEILE = (
  <p>
    Beliebiger Zahlenbereich möglich, auch mit negativen Zahlen. Der Generator erzeugt
    ausschließlich ganze Zahlen – für Entscheidungen zwischen benannten Optionen eignen sich eher das{" "}
    <Link href="/gluecksrad" className="text-[#c97d60] font-medium hover:underline underline-offset-2">
      Glücksrad
    </Link>{" "}
    oder die{" "}
    <Link href="/namen-auslosen" className="text-[#c97d60] font-medium hover:underline underline-offset-2">
      Namen-Auslosung
    </Link>
    .
  </p>
);

const ADDITIONAL_CONTENT = (
  <article className="space-y-4 text-base leading-relaxed text-ink-soft">
    <h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink">
      Zufallszahl im gewünschten Bereich erzeugen
    </h2>
    <p>
      Lege Minimum und Maximum fest, um eine ganze Zufallszahl aus genau diesem Bereich zu
      erhalten. Das ist praktisch für Startnummern, kleine Spielaufgaben oder eine zufällige
      Reihenfolge. Negative Zahlen sind ebenfalls möglich; die Reihenfolge deiner Eingaben
      spielt keine Rolle.
    </p>
    <h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink">
      Wann passt eine Zufallszahl – und wann ein anderes Tool?
    </h2>
    <p>
      Nutze diesen Generator, wenn das Ergebnis eine Zahl sein soll. Möchtest du stattdessen
      Namen oder Texte ziehen, ist die <Link href="/namen-auslosen" className="text-[#c97d60] font-medium hover:underline underline-offset-2">Namen-Auslosung</Link> passender. Bei mehreren sichtbaren Optionen hilft ein <Link href="/gluecksrad" className="text-[#c97d60] font-medium hover:underline underline-offset-2">Glücksrad</Link> dabei, die Auswahl gemeinsam nachzuvollziehen.
    </p>
  </article>
);

export default function ZufallszahlGeneratorPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />
      <SubpageLayout
        toolSlug="zufallszahl-generator"
        toolName="Zufallszahl-Generator"
        h1Title="Zufallszahl-Generator – Zahl im Wunschbereich erzeugen"
        introText="Der Zufallszahl-Generator erzeugt eine zufällige Ganzzahl in einem selbst gewählten Bereich. Trage Minimum und Maximum ein, generiere die Zahl per Klick und erhalte sofort ein zufälliges Ergebnis – kostenlos, ohne Anmeldung, direkt im Browser."
        steps={STEPS}
        examples={EXAMPLES}
        vorteileText={VORTEILE}
        additionalContent={ADDITIONAL_CONTENT}
        faqs={FAQS}
        updatedDate={UPDATED}
      >
        <RandomNumber />
      </SubpageLayout>
    </>
  );
}