import type { Metadata } from "next";
import Link from "next/link";
import ListPicker from "@/components/tools/list-picker";
import SubpageLayout from "@/components/subpage-layout";

const SITE_URL = "https://entscheidomat.com";
const PAGE_URL = `${SITE_URL}/namen-auslosen`;
const PAGE_TITLE = "Zufallsgenerator Namen – Namen online auslosen";
const PAGE_DESCRIPTION =
  "Mit dem Zufallsgenerator für Namen ziehst du Namen oder Optionen zufällig aus deiner Liste – für Gewinner, Teams und Aufgaben. Kostenlos und ohne Anmeldung.";
const UPDATED = "23. Juli 2026";

export const metadata: Metadata = {
  title: PAGE_TITLE,
  description: PAGE_DESCRIPTION,
  alternates: { canonical: "/namen-auslosen" },
  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 Namen kann ich eintragen?",
    a: "Beliebig viele – mindestens 2 sind nötig. Ein Name bzw. Eintrag pro Zeile in das Textfeld eintragen.",
  },
  {
    q: "Was bedeutet „Gezogene Einträge entfernen“?",
    a: "Ist die Option aktiviert, wird ein gezogener Eintrag automatisch aus der Liste entfernt (Ziehung ohne Zurücklegen) – praktisch für Teameinteilungen oder mehrere Gewinner nacheinander.",
  },
  {
    q: "Werden meine Namen gespeichert oder an einen Server übertragen?",
    a: "Deine Liste wird ausschließlich lokal im localStorage deines Browsers gespeichert, nicht an uns übertragen.",
  },
  {
    q: "Kann ich Duplikate in der Liste verwenden?",
    a: "Technisch ja – ein doppelt eingetragener Name kann dadurch häufiger berücksichtigt werden. Wenn alle Namen gleich behandelt werden sollen, trage jeden Namen nur einmal ein.",
  },
  {
    q: "Eignet sich das Tool für offizielle Gewinnspiele?",
    a: "Für lockere, private Ziehungen ist es gut geeignet. Bei rechtlich bindenden Gewinnspielen solltest du eigene Teilnahmebedingungen und mögliche Dokumentationspflichten separat prüfen.",
  },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Entscheidomat", item: SITE_URL },
        { "@type": "ListItem", position: 2, name: "Namen-Auslosung", item: PAGE_URL },
      ],
    },
    {
      "@type": "WebApplication",
      name: "Namen-Auslosung",
      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 mindestens 2 Namen oder Einträge ein, einen pro Zeile.",
  "Aktiviere optional „Gezogene Einträge entfernen“, um ohne Zurücklegen zu ziehen (z. B. für Teameinteilung).",
  "Tippe auf „Zufällig ziehen“.",
  "Der gezogene Name erscheint groß im Ergebnisfeld, inklusive Konfetti.",
];

const EXAMPLES = [
  "Gewinner unter Teilnehmenden auslosen",
  "Reihenfolge für eine Präsentation festlegen",
  "Teams zufällig zusammenstellen (mehrfach ziehen „ohne Zurücklegen“)",
];

const VORTEILE = (
  <p>
    Beliebig viele Einträge möglich, flexibel für Namen oder andere Texte. Die Option
    „ohne Zurücklegen“ macht wiederholtes Ziehen für Gruppenaufteilungen praktisch. Die
    Ziehung nutzt einen browserbasierten Zufallswert – eine Gewichtung einzelner Einträge ist nicht möglich.
  </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">
      Namen zufällig ziehen – für Gewinner, Teams und Reihenfolgen
    </h2>
    <p>
      Der Zufallsgenerator für Namen zieht einen Eintrag aus deiner eigenen Liste. Damit
      kannst du einen Gewinner bestimmen, eine Reihenfolge für Präsentationen festlegen oder
      Personen fair nacheinander auswählen. Für mehrere Ziehungen aktiviere „Gezogene
      Einträge entfernen“: Dann wird jeder Name nur einmal gezogen.
    </p>
    <h2 className="font-display text-2xl sm:text-3xl font-semibold text-ink">
      So bleibt eine Namen-Auslosung fair
    </h2>
    <p>
      Trage jeden Namen genau einmal ein, wenn alle die gleiche Chance erhalten sollen.
      Doppelte Einträge erhöhen die Chance dieses Namens. Für eine Entscheidung zwischen
      festen Optionen ist das <Link href="/gluecksrad" className="text-[#c97d60] font-medium hover:underline underline-offset-2">Glücksrad</Link> eine gute Alternative; für eine zufällige Zahl nutze den <Link href="/zufallszahl-generator" className="text-[#c97d60] font-medium hover:underline underline-offset-2">Zufallszahl-Generator</Link>.
    </p>
  </article>
);

export default function NamenAuslosenPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />
      <SubpageLayout
        toolSlug="namen-auslosen"
        toolName="Namen-Auslosung"
        h1Title="Zufallsgenerator für Namen – Namen zufällig auslosen"
        introText="Der Zufallsgenerator für Namen zieht einen Eintrag aus deiner eigenen Liste. Trage Namen oder Optionen ein, starte die Ziehung und erhalte sofort ein zufälliges Ergebnis – ideal für Gewinner, Teameinteilungen oder Aufgabenverteilung."
        steps={STEPS}
        examples={EXAMPLES}
        vorteileText={VORTEILE}
        additionalContent={ADDITIONAL_CONTENT}
        faqs={FAQS}
        updatedDate={UPDATED}
      >
        <ListPicker />
      </SubpageLayout>
    </>
  );
}