@extends('layouts.public')

@section('title', 'Anleitung — TacForce Pro')
@section('meta_description', 'Komplette Schritt-für-Schritt-Anleitung: jede Funktion von TacForce Pro erklärt — Login, Server verbinden, Tickets, Bewerbungen, Welcome, Logs, Server-Aufbau, Verlauf, Bestellung und Admin-Panel.')

@php
  $toc = [
    ['start',      '1 · Erste Schritte / Login'],
    ['server',     '2 · Server verbinden'],
    ['uebersicht', '3 · Dashboard-Übersicht'],
    ['module',     '4 · Module an/aus'],
    ['tickets',    '5 · Tickets'],
    ['bewerbungen','6 · Bewerbungen'],
    ['welcome',    '7 · Welcome'],
    ['logs',       '8 · Logs'],
    ['builder',    '9 · Server-Aufbau'],
    ['verlauf',    '10 · Verlauf & Rückgängig'],
    ['billing',    '11 · Pläne & Bestellung'],
    ['admin',      '12 · Admin-Panel'],
    ['faq',        '13 · Hilfe bei Problemen'],
  ];
@endphp

@section('content')

  {{-- HERO --}}
  <section class="border-b border-zinc-200 dark:border-zinc-800">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-14 sm:py-16">
      <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/60 px-3.5 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">Anleitung</span>
      <h1 class="mt-5 max-w-3xl text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">Alles Schritt für Schritt erklärt</h1>
      <p class="mt-4 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">Jede Funktion von TacForce Pro — vom Login bis zum eigenen Server-Aufbau. Folge den Schritten von oben nach unten, oder spring über das Inhaltsverzeichnis zum Thema.</p>
    </div>
  </section>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
    <div class="lg:grid lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">

      {{-- TOC --}}
      <aside class="mb-8 lg:mb-0">
        <nav class="lg:sticky lg:top-6 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4">
          <p class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-zinc-400 dark:text-zinc-500">Inhalt</p>
          <ul class="space-y-0.5 text-[13.5px]">
            @foreach ($toc as [$id, $label])
              <li><a href="#{{ $id }}" class="block rounded-md px-2 py-1.5 text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white transition">{{ $label }}</a></li>
            @endforeach
          </ul>
        </nav>
      </aside>

      {{-- CONTENT --}}
      <div class="max-w-3xl space-y-14
                  [&_h2]:scroll-mt-6 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-zinc-900 dark:[&_h2]:text-white
                  [&_h3]:mt-6 [&_h3]:text-[15px] [&_h3]:font-semibold [&_h3]:text-zinc-900 dark:[&_h3]:text-white
                  [&_p]:mt-2 [&_p]:text-[15px] [&_p]:leading-relaxed [&_p]:text-zinc-600 dark:[&_p]:text-zinc-400
                  [&_ol]:mt-3 [&_ol]:list-decimal [&_ol]:space-y-1.5 [&_ol]:pl-5 [&_ol]:text-[15px] [&_ol]:text-zinc-600 dark:[&_ol]:text-zinc-400
                  [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5 [&_ul]:text-[15px] [&_ul]:text-zinc-600 dark:[&_ul]:text-zinc-400
                  [&_li]:pl-1 [&_code]:rounded [&_code]:bg-zinc-100 dark:[&_code]:bg-zinc-800 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-[13px] [&_code]:text-zinc-700 dark:[&_code]:text-zinc-200
                  [&_strong]:text-zinc-900 dark:[&_strong]:text-white">

        {{-- 1 START --}}
        <section id="start">
          <h2>1 · Erste Schritte / Login</h2>
          <p>Es gibt zwei getrennte Logins: den <strong>Discord-Login</strong> (für dich als Server-Betreiber, um dein Dashboard zu verwalten) und den <strong>Admin-Login</strong> (nur für den TacForce-Betreiber, mit 2FA-Code per E-Mail).</p>
          <h3>Discord-Login (normaler Kunde)</h3>
          <ol>
            <li>Oben rechts auf <strong>Anmelden</strong> klicken.</li>
            <li>Mit Discord autorisieren — TacForce sieht nur deine Server, nie dein Passwort.</li>
            <li>Du landest im Dashboard und wählst deinen Server.</li>
          </ol>
          <x-doc-shot file="login.png" caption="Login-Seite mit Discord-Button." />
          <h3>Admin-Login (Betreiber)</h3>
          <p>Unter <code>/admin/login</code>: E-Mail + Passwort, danach ein <strong>6-stelliger Code per E-Mail</strong> (2FA). Getrennt vom Discord-Login.</p>
          <x-doc-shot file="admin-2fa.png" caption="Admin-Login mit 2FA-Code-Abfrage." />
        </section>

        {{-- 2 SERVER --}}
        <section id="server">
          <h2>2 · Server verbinden</h2>
          <p>Damit der Bot deinen Discord-Server verwalten kann, muss er dort <strong>eingeladen</strong> sein und dein Server im Dashboard <strong>auftauchen</strong>.</p>
          <ol>
            <li>Im Dashboard auf <strong>Bot hinzufügen</strong> / <strong>Server verbinden</strong>.</li>
            <li>Discord fragt, auf welchen Server der Bot soll — Server wählen, Rechte bestätigen.</li>
            <li>Zurück im Dashboard erscheint der Server in der Auswahl — anklicken.</li>
          </ol>
          <div class="mt-4 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-[13.5px] text-amber-700 dark:text-amber-300">
            <strong>Wichtig:</strong> Der Bot muss <strong>online</strong> und <strong>auf dem Server</strong> sein — sonst passiert nichts, egal was du einstellst.
          </div>
          <x-doc-shot file="server-select.png" caption="Server-Auswahl im Dashboard." />
        </section>

        {{-- 3 UEBERSICHT --}}
        <section id="uebersicht">
          <h2>3 · Dashboard-Übersicht</h2>
          <p>Die Startseite deines Servers: Mitgliederzahl, offene Tickets, Bewerbungen, ein 7-Tage-Verlauf und die letzten Ereignisse. Ganz oben schaltest du die <strong>Module</strong> direkt an/aus.</p>
          <x-doc-shot file="overview.png" caption="Übersicht mit Statistiken und Modul-Schaltern." />
        </section>

        {{-- 4 MODULE --}}
        <section id="module">
          <h2>4 · Module an/aus</h2>
          <p>Module sind die großen Funktionen: <strong>Tickets, Bewerbungen, Welcome, Logs</strong>. Nur was <strong>an</strong> ist, macht der Bot. Aus = Funktion komplett gestoppt.</p>
          <ol>
            <li>Schalter umlegen (Übersicht oben oder Einstellungen → Module).</li>
            <li><strong>Speichern</strong> nicht vergessen.</li>
          </ol>
          <x-doc-shot file="module.png" caption="Modul-Schalter — grün = an." />
        </section>

        {{-- 5 TICKETS --}}
        <section id="tickets">
          <h2>5 · Tickets</h2>
          <p>Ein Ticket-System, bei dem Mitglieder per Knopf einen privaten Support-Channel öffnen. Du legst <strong>Kategorien</strong> an (z. B. „Support", „Bug melden") und sendest ein <strong>Panel</strong> mit den Buttons.</p>
          <h3>Kategorie anlegen</h3>
          <ol>
            <li>Dashboard → <strong>Tickets</strong> → Kategorie erstellen.</li>
            <li><strong>Name</strong> + optional Emoji, Beschreibung.</li>
            <li><strong>Staff-Rollen-ID</strong>: welche Rolle die Tickets sieht/bearbeitet.</li>
            <li><strong>Log-Channel</strong>: wohin Transkripte/Events kommen (optional).</li>
          </ol>
          <x-doc-shot file="tickets-create.png" caption="Ticket-Kategorie anlegen." />
          <h3>Panel senden</h3>
          <p>Auf <strong>Panel senden</strong> klicken, Ziel-Channel-ID angeben — der Bot postet dort die Nachricht mit Buttons. Mitglieder klicken → Bot öffnet einen privaten Ticket-Channel.</p>
          <x-doc-shot file="tickets-panel.png" caption="Ticket-Panel im Discord." />
        </section>

        {{-- 6 BEWERBUNGEN --}}
        <section id="bewerbungen">
          <h2>6 · Bewerbungen</h2>
          <p>Formulare, die Mitglieder im Discord ausfüllen (Modal). Antworten landen bei deinem Team zur Annahme/Ablehnung — bei Annahme kann automatisch eine Rolle vergeben werden.</p>
          <ol>
            <li>Dashboard → <strong>Bewerbungen</strong> → Formular erstellen.</li>
            <li><strong>Titel</strong>, Beschreibung, <strong>Fragen</strong> hinzufügen (Label + optional Pflicht).</li>
            <li><strong>Ziel-Channel-ID</strong> setzen (wohin eingegangene Bewerbungen kommen).</li>
            <li>Angenommen-Rolle, Annahme-/Ablehn-Text.</li>
            <li><strong>Panel senden</strong> → Button erscheint im gewählten Channel.</li>
          </ol>
          <x-doc-shot file="apply-form.png" caption="Bewerbungsformular mit Fragen." />
          <x-doc-shot file="apply-panel.png" caption="Bewerbungs-Panel + Modal im Discord." />
        </section>

        {{-- 7 WELCOME --}}
        <section id="welcome">
          <h2>7 · Welcome</h2>
          <p>Begrüßt neue Mitglieder automatisch und vergibt optional eine Rolle. In <strong>Einstellungen</strong>:</p>
          <ul>
            <li><strong>Welcome-Channel-ID</strong> — wo die Begrüßung gepostet wird.</li>
            <li><strong>Willkommensnachricht</strong> — Platzhalter <code>{user}</code> (Mitglied) und <code>{server}</code> (Servername).</li>
            <li><strong>Auto-Rollen-ID</strong> — Rolle, die neue Mitglieder automatisch bekommen.</li>
          </ul>
          <p>Modul <strong>Welcome</strong> muss an sein, sonst begrüßt der Bot niemanden.</p>
          <x-doc-shot file="welcome.png" caption="Welcome-Einstellungen." />
        </section>

        {{-- 8 LOGS --}}
        <section id="logs">
          <h2>8 · Logs</h2>
          <p>Der Bot protokolliert Server-Ereignisse. Du routest <strong>pro Kategorie</strong> in einen eigenen Channel und schaltest sie einzeln an/aus. Kategorien:</p>
          <ul>
            <li><strong>Mitglieder</strong> — Join, Leave, Nickname, Rollen</li>
            <li><strong>Moderation</strong> — Ban, Unban, Timeout</li>
            <li><strong>Nachrichten</strong> — bearbeitet & gelöscht</li>
            <li><strong>Voice</strong> — Join, Leave, Move</li>
            <li><strong>Tickets & Bewerbungen</strong></li>
            <li><strong>Server</strong> — Channels & Rollen erstellt/gelöscht</li>
            <li><strong>Bot-Aktionen</strong> — Panels, Server-Aufbau</li>
          </ul>
          <ol>
            <li>Einstellungen → <strong>Log-Kanäle</strong>.</li>
            <li>Pro Kategorie eine Channel-ID (leer = allgemeiner Log-Channel als Fallback).</li>
            <li>Schalter je Kategorie, dann speichern. Modul <strong>Logs</strong> muss an sein.</li>
          </ol>
          <x-doc-shot file="logs-config.png" caption="Log-Kanäle pro Kategorie konfigurieren." />
          <x-doc-shot file="logs-discord.png" caption="Ein Log-Eintrag im Discord." />
        </section>

        {{-- 9 BUILDER --}}
        <section id="builder">
          <h2>9 · Server-Aufbau (Builder)</h2>
          <p>Baue Rollen, Kategorien und Channels direkt aus dem Web — der Bot setzt es im Discord um. Alles idempotent (zweimal = keine Duplikate). Ab Plan <strong>Pro</strong>.</p>
          <h3>Schnell anlegen</h3>
          <ul>
            <li><strong>Rolle</strong> — Name, Farbe, separat anzeigen.</li>
            <li><strong>Kategorie</strong> — Name.</li>
            <li><strong>Channel</strong> — Name, Typ (Text/Voice), Kategorie, dazu Slowmode, User-Limit, NSFW und <strong>privat</strong> (nur bestimmte Rollen) über „Rechte / privat".</li>
          </ul>
          <h3>AFK-Channel & Channel bearbeiten</h3>
          <p>Eigene Karten: <strong>AFK-Channel</strong> setzen (+ Timeout) und einen <strong>bestehenden Channel bearbeiten</strong> (privat machen, Slowmode, Limit). Vorher einmal <strong>„Struktur einlesen"</strong> klicken, dann füllen sich die Auswahlfelder.</p>
          <x-doc-shot file="builder.png" caption="Server-Aufbau mit Schnell-Anlegen + AFK/Bearbeiten." />
          <h3>Blueprints & JSON-Import</h3>
          <p>Fertige Vorlagen per Klick anwenden, oder eine eigene Struktur als <strong>JSON</strong> einfügen. JSON kann private Kategorien, Rechte, Slowmode und den AFK-Channel:</p>
          <pre class="mt-3 overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-4 text-[12.5px] leading-relaxed text-zinc-200"><code class="!bg-transparent !p-0 !text-inherit">{
  "roles": [ { "name": "Team", "color": "#3B82F6", "hoist": true } ],
  "categories": [
    { "name": "🔒 Intern", "private": true, "allow_roles": ["Team"], "channels": [
      { "name": "staff-chat", "type": "text", "slowmode": 5 },
      { "name": "Team-Voice", "type": "voice", "user_limit": 5 }
    ] }
  ],
  "afk": { "channel": "AFK", "timeout": 300 }
}</code></pre>
          <x-doc-shot file="builder-json.png" caption="JSON-Import im Server-Aufbau." />
        </section>

        {{-- 10 VERLAUF --}}
        <section id="verlauf">
          <h2>10 · Verlauf & Rückgängig</h2>
          <p>Unter <strong>Verlauf</strong> siehst du jede Änderung im Panel (wer, was, wann). Viele Aktionen lassen sich mit <strong>Rückgängig</strong> zurücknehmen: erstellte Sachen löschen, geänderte auf alte Werte zurück, gelöschte wiederherstellen, und im Server-Aufbau erstellte Channels/Rollen wieder entfernen.</p>
          <x-doc-shot file="changelog.png" caption="Verlauf mit Rückgängig-Buttons." />
        </section>

        {{-- 11 BILLING --}}
        <section id="billing">
          <h2>11 · Pläne & Bestellung</h2>
          <p>Pläne (Starter / Pro / Elite) schalten mehr Funktionen frei (z. B. Server-Aufbau ab Pro). Bezahlung aktuell per <strong>Vorkasse/Überweisung</strong>.</p>
          <ol>
            <li>Dashboard → <strong>Billing</strong> oder „Upgraden" → Plan wählen.</li>
            <li>Bestellung abschicken — du bekommst eine <strong>Referenznummer</strong> + Bankdaten per E-Mail.</li>
            <li>Überweisen mit Referenz im Verwendungszweck. Nach Zahlungseingang wird der Plan freigeschaltet.</li>
          </ol>
          <x-doc-shot file="order.png" caption="Bestell-Bestätigung mit Referenz + Bankdaten." />
        </section>

        {{-- 12 ADMIN --}}
        <section id="admin">
          <h2>12 · Admin-Panel <span class="align-middle text-[11px] font-medium text-amber-600 dark:text-amber-400">(nur Betreiber)</span></h2>
          <p>Unter <code>/admin</code> (nach Admin-Login mit 2FA): alles im Blick.</p>
          <ul>
            <li><strong>Nutzer</strong> — Pro manuell an/aus, Admin-Status.</li>
            <li><strong>Server</strong> — Plan je Server setzen.</li>
            <li><strong>Bots</strong> — eigene Bots registrieren (Token, Client-ID), Status/Heartbeat.</li>
            <li><strong>Bestellungen</strong> — „bezahlt" markieren → schaltet den Plan frei.</li>
          </ul>
          <x-doc-shot file="admin.png" caption="Admin-Panel-Übersicht." />
        </section>

        {{-- 13 FAQ --}}
        <section id="faq">
          <h2>13 · Hilfe bei Problemen</h2>
          <h3>Wie hole ich eine Channel- oder Rollen-ID?</h3>
          <p>In Discord: <strong>Einstellungen → Erweitert → Entwicklermodus</strong> an. Dann Rechtsklick auf Channel/Rolle → <strong>„ID kopieren"</strong>.</p>
          <h3>Ich stelle etwas ein, aber nichts passiert</h3>
          <ul>
            <li>Ist der <strong>Bot online</strong> und auf dem Server?</li>
            <li>Ist das passende <strong>Modul an</strong> (Tickets/Welcome/Logs …)?</li>
            <li>Stimmen die <strong>IDs</strong> (nur Ziffern)?</li>
          </ul>
          <h3>Buttons/Schalter reagieren nicht</h3>
          <p>Einmal <strong>Strg + F5</strong> (harter Reload) — der Browser hatte altes JavaScript gecacht.</p>
          <h3>Nickname-/Rollen-Logs fehlen</h3>
          <p>Die brauchen die privilegierte <em>Server-Members</em>-Berechtigung im Discord-Entwicklerportal. Voice/Server/Message/Ban-Logs gehen auch ohne.</p>
          <div class="mt-6 rounded-lg border border-blue-500/20 bg-blue-500/5 px-4 py-3 text-[14px] text-blue-800 dark:text-blue-200">
            Noch Fragen? Schreib uns — wir helfen beim Einrichten.
          </div>
        </section>

      </div>
    </div>
  </div>
@endsection