import type { Metadata } from "next";
import Link from "next/link";
import Magic8Ball from "@/components/tools/magic-8-ball";
import SubpageLayout from "@/components/subpage-layout";

const SITE_URL = "https://entscheidomat.com";
const PAGE_URL = `${SITE_URL}/magic-8-ball`;
const PAGE_TITLE = "Magic 8-Ball online fragen – zufällige Antworten";
const PAGE_DESCRIPTION =
  "Der Magic 8-Ball beantwortet deine Frage mit einer zufälligen, anpassbaren Antwort. Fragen stellen, schütteln, Antwort erhalten – kostenlos, ohne Anmeldung.";
const UPDATED = "23. Juli 2026";

export const metadata: Metadata = {
  title: PAGE_TITLE,
  description: PAGE_DESCRIPTION,
  alternates: { canonical: "/magic-8-ball" },
  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 funktioniert der Magic 8-Ball?",
    a: "Stelle optional deine Frage, tippe auf den Ball oder den Button – der Ball schüttelt sich kurz und zeigt eine zufällig ausgewählte Antwort aus deiner Antwortliste.",
  },
  {
    q: "Kann ich die Antworten selbst anpassen?",
    a: "Ja, du kannst 2 bis 20 eigene Antworten im Editor eintragen. Sie werden automatisch lokal gespeichert.",
  },
  {
    q: "Sind die Antworten immer eindeutig Ja oder Nein?",
    a: "Nein, die klassischen 8-Ball-Antworten sind oft bewusst vage formuliert (z. B. „Frag später nochmal“). Für eine eindeutige Ja/Nein-Antwort eignet sich der Ja-Nein-Generator besser.",
  },
  {
    q: "Werden meine Antworten gespeichert oder an einen Server übertragen?",
    a: "Deine Antwortliste wird nur lokal im localStorage deines Browsers gespeichert, nicht an uns übertragen.",
  },
  {
    q: "Kann ich den Ball mehrfach fragen?",
    a: "Ja, beliebig oft hintereinander.",
  },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Entscheidomat", item: SITE_URL },
        { "@type": "ListItem", position: 2, name: "Magic 8-Ball", item: PAGE_URL },
      ],
    },
    {
      "@type": "WebApplication",
      name: "Magic 8-Ball",
      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 optional deine Frage ein.",
  "Tippe auf den Ball oder den Button „8-Ball schütteln“.",
  "Der Ball schüttelt sich kurz und zeigt eine zufällige Antwort im Fenster.",
  "Passe die möglichen Antworten im Editor an (2–20 Antworten).",
];

const EXAMPLES = [
  "„Wird das Projekt heute fertig?“",
  "„Soll ich noch mal anrufen?“",
  "Spielerische Fragen in der Gruppe stellen",
];

const VORTEILE = (
  <p>
    Eigene Antwortliste möglich (2–20 Antworten, automatisch gespeichert). Die klassischen
    Antworten sind oft bewusst mehrdeutig formuliert – für eine eindeutige Ja- oder
    Nein-Entscheidung eignet sich der{" "}
    <Link href="/ja-nein-generator" className="text-[#c97d60] font-medium hover:underline underline-offset-2">
      Ja-Nein-Generator
    </Link>{" "}
    besser.
  </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">
      Magic 8-Ball online: spielerische Antworten auf deine Frage
    </h2>
    <p>
      Der Magic 8-Ball ist eine spielerische Entscheidungshilfe mit anpassbaren Antworten.
      Frage den Ball, schüttle ihn und erhalte eine zufällig ausgewählte Antwort. Mit einer
      eigenen Antwortliste kannst du ihn für Spiele, Gruppenfragen oder kleine Impulse
      personalisieren.
    </p>
    <h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink">
      Magic 8-Ball, Ja-Nein-Generator oder Münzwurf?
    </h2>
    <p>
      Der Magic 8-Ball passt zu offenen und spielerischen Fragen, weil seine Antworten auch
      mehrdeutig sein können. Für eine eindeutige Antwort nutze den <Link href="/ja-nein-generator" className="text-[#c97d60] font-medium hover:underline underline-offset-2">Ja-Nein-Generator</Link>; für Kopf oder Zahl oder zwei frei benannte Optionen eignet sich die <Link href="/muenze-werfen" className="text-[#c97d60] font-medium hover:underline underline-offset-2">Online-Münze</Link>.
    </p>
  </article>
);

export default function Magic8BallPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />
      <SubpageLayout
        toolSlug="magic-8-ball"
        toolName="Magic 8-Ball"
        h1Title="Magic 8-Ball online fragen – zufällige Antworten erhalten"
        introText="Der Magic 8-Ball beantwortet deine Frage mit einer zufälligen Antwort aus einer anpassbaren Liste. Stelle deine Frage, schüttle den Ball per Klick und erhalte sofort eine Antwort – kostenlos, ohne Anmeldung, direkt im Browser."
        steps={STEPS}
        examples={EXAMPLES}
        vorteileText={VORTEILE}
        additionalContent={ADDITIONAL_CONTENT}
        faqs={FAQS}
        updatedDate={UPDATED}
      >
        <Magic8Ball />
      </SubpageLayout>
    </>
  );
}