import type { Metadata } from "next";
import WheelOfFortune from "@/components/tools/wheel-of-fortune";
import SubpageLayout from "@/components/subpage-layout";

const SITE_URL = "https://entscheidomat.com";
const PAGE_URL = `${SITE_URL}/gluecksrad`;
const PAGE_TITLE = "Glücksrad online drehen – kostenloses Entscheidungsrad";
const PAGE_DESCRIPTION =
  "Glücksrad online mit bis zu 12 Optionen: eintragen, drehen und zufällig entscheiden lassen. Kostenlos, ohne Anmeldung und direkt im Browser.";
const UPDATED = "23. Juli 2026";

export const metadata: Metadata = {
  title: PAGE_TITLE,
  description: PAGE_DESCRIPTION,
  alternates: { canonical: "/gluecksrad" },
  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: "Wie viele Optionen kann ich im Glücksrad eintragen?",
    a: "Zwischen 2 und 12 Optionen. Du kannst sie jederzeit ändern, hinzufügen oder entfernen – deine Liste bleibt automatisch im Browser gespeichert.",
  },
  {
    q: "Wie wird die Option ausgewählt?",
    a: "Beim Drehen erzeugt das Tool im Browser einen neuen Zufallswert und ordnet das Ergebnis einer sichtbaren Option zu. Das Glücksrad ist für spielerische Alltagsentscheidungen gedacht, nicht für verbindliche oder sicherheitskritische Zwecke.",
  },
  {
    q: "Werden meine Optionen gespeichert oder übertragen?",
    a: "Deine Optionen werden ausschließlich lokal im localStorage deines Browsers gespeichert und nicht an einen Server übertragen.",
  },
  {
    q: "Kann ich das Rad auf die Standardoptionen zurücksetzen?",
    a: "Ja, über den Button „Zurücksetzen“ im Optionen-Editor werden die Standardoptionen 1–6 wiederhergestellt.",
  },
  {
    q: "Eignet sich das Glücksrad für Gruppen und Präsentationen?",
    a: "Ja, es ist groß und deutlich lesbar. Für wichtige Entscheidungen sollte es aber nicht der einzige Entscheidungsweg sein.",
  },
  {
    q: "Wie nutze ich das Glücksrad für eine faire Auswahl?",
    a: "Trage jede Option genau einmal ein. Das Rad teilt alle Einträge in gleich große Segmente; doppelte Einträge erhöhen deshalb die Chance dieser Option. Prüfe die Liste vor dem Drehen, wenn alle dieselbe Gewinnchance haben sollen.",
  },
  {
    q: "Was ist der Unterschied zwischen Glücksrad und Namen auslosen?",
    a: "Das Glücksrad zeigt die Optionen visuell und eignet sich besonders für kleine Gruppen oder Präsentationen mit bis zu 12 Einträgen. Bei langen Listen oder mehreren Ziehungen ohne Wiederholung ist die Namen-Auslosung übersichtlicher.",
  },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Entscheidomat", item: SITE_URL },
        { "@type": "ListItem", position: 2, name: "Glücksrad", item: PAGE_URL },
      ],
    },
    {
      "@type": "WebApplication",
      name: "Glücksrad",
      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 2 bis 12 Optionen im Editor ein – z. B. Namen, Aktivitäten oder Restaurants.",
  "Passe die Beschriftungen jederzeit an.",
  "Tippe auf „Drehen!“ – das Rad dreht sich und bremst zufällig ab.",
  "Der Zeiger markiert die gewonnene Option, inklusive Konfetti.",
];

const EXAMPLES = [
  "„Welches Restaurant heute Abend?“",
  "„Wer räumt diese Woche auf?“",
  "„Welcher Film wird geschaut?“",
];

const VORTEILE = (
  <p>
    Das Glücksrad eignet sich besonders für Gruppenentscheidungen mit mehreren
    gleichwertigen Optionen, die visuell gut dargestellt werden können. Pro Option
    sind bis zu 24 Zeichen und maximal 12 Optionen möglich – für sehr viele
    Alternativen eignet sich eher die Listen-Auswahl.
  </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">
      Glücksrad online: Entscheidungen sichtbar und fair auslosen
    </h2>
    <p>
      Ein Online-Glücksrad ist eine Entscheidungshilfe für mehrere gleichwertige
      Optionen. Du trägst zwischen zwei und zwölf Begriffe ein, das Tool verteilt sie
      auf gleich große Segmente und der Zeiger bestimmt beim Drehen ein Ergebnis.
      Dadurch hat jede einmal eingetragene Option dieselbe Chance. Typische Beispiele
      sind Restaurants, Filme, Spiele, Aufgaben, Themen für einen Vortrag oder die
      Reihenfolge in einer Gruppe.
    </p>
    <p>
      Damit die Auswahl fair bleibt, sollte jede Möglichkeit genau einmal in der Liste
      stehen. Ein doppelter Eintrag nimmt zwei Segmente ein und wird entsprechend
      wahrscheinlicher ausgewählt. Das ist nützlich, wenn du bewusst gewichten willst,
      aber ungeeignet für eine faire Verlosung. Prüfe deshalb die Beschriftungen vor
      dem Start und erkläre der Gruppe kurz, dass alle Segmente gleich groß sind. Die
      gespeicherten Optionen bleiben nur lokal in deinem Browser und werden nicht an
      einen Server übertragen.
    </p>
    <p>
      Für kleine Gruppen ist das drehende Rad oft besser als eine Liste, weil alle
      Optionen gleichzeitig sichtbar sind und das Ergebnis einen gemeinsamen Moment
      schafft. Bei vielen Namen oder wenn nach jeder Ziehung ein Eintrag verschwinden
      soll, ist die Namen-Auslosung die bessere Wahl. Und wenn es nur um zwei
      Möglichkeiten geht, sind Ja-Nein-Generator oder Münzwurf schneller. Für wichtige
      Entscheidungen bleibt Zufall ein Impuls – Verantwortung und Folgen sollten alle
      Beteiligten vorher besprechen.
    </p>
  </article>
);

export default function GluecksradPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />
      <SubpageLayout
        toolSlug="gluecksrad"
        toolName="Glücksrad"
        h1Title="Glücksrad online drehen – dein kostenloses Entscheidungsrad"
        introText="Das Online-Glücksrad ist ein digitales Entscheidungsrad mit bis zu 12 frei einstellbaren Optionen. Trage deine Optionen ein, drehe das Rad und lass den Zeiger die Entscheidung treffen – kostenlos, ohne Anmeldung und direkt im Browser."
        steps={STEPS}
        examples={EXAMPLES}
        vorteileText={VORTEILE}
        additionalContent={ADDITIONAL_CONTENT}
        faqs={FAQS}
        updatedDate={UPDATED}
      >
        <WheelOfFortune />
      </SubpageLayout>
    </>
  );
}