<script setup lang="ts">
import { ref, computed } from 'vue'

const searchQuery = ref('')
const activeCategory = ref<string | null>(null)
const activeArticle = ref<string | null>(null)

interface Article {
  id: string
  title: string
  icon: string
  content: string
}

interface Category {
  id: string
  name: string
  icon: string
  description: string
  articles: Article[]
}

const categories: Category[] = [
  {
    id: 'getting-started',
    name: 'Erste Schritte',
    icon: '🚀',
    description: 'Grundlagen und Einrichtung',
    articles: [
      {
        id: 'overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Was ist SeCu?

SeCu ist eine modulare Mitarbeiterverwaltung speziell für Sicherheitsunternehmen. Die Software hilft Ihnen bei:

- **Mitarbeiterverwaltung** – Alle Mitarbeiter zentral verwalten
- **Auftragsverwaltung** – Aufträge erstellen und zuweisen
- **Schichtplanung** – Dienstpläne erstellen und verwalten
- **Stundenzettel** – Arbeitszeiten erfassen und genehmigen
- **Verfügbarkeiten** – Wer ist wann einsetzbar?
- **Qualifikationen** – §34a und andere Zertifikate verwalten
- **Objekte** – Einsatzorte und Standorte pflegen
- **Rundgänge** – Kontrollgänge dokumentieren
- **Vorfälle** – Sicherheitsvorfälle erfassen
- **Fahrzeuge** – Fuhrpark verwalten
- **Kunden** – Kundenstamm pflegen
- **Abrechnung** – Rechnungen erstellen
- **Dokumente** – Dateien zentral speichern
- **Partnerschaften** – Zusammenarbeit mit Subunternehmern

### Rollen im System

**Chef** – Vollzugriff auf alle Funktionen, kann Module aktivieren, Disponenten und Mitarbeiter anlegen, Firmenlogo hochladen

**Disponent** – Kann Mitarbeiter anlegen, Aufträge und Schichten erstellen, Stundenzettel einsehen und genehmigen

**Mitarbeiter** – Kann eigene Aufträge sehen, Verfügbarkeit melden, Stundenzettel hochladen, Rundgänge dokumentieren
        `
      },
      {
        id: 'first-login',
        title: 'Erster Login',
        icon: '🔐',
        content: `
## Erster Login

Nach der Registrierung Ihrer Organisation erhalten Sie Zugangsdaten per E-Mail.

### Anmeldung

1. Öffnen Sie die SeCu-Webseite
2. Geben Sie Ihre E-Mail-Adresse ein
3. Geben Sie Ihr Passwort ein
4. Klicken Sie auf "Anmelden"

### Passwort ändern

Wir empfehlen, Ihr Passwort nach dem ersten Login zu ändern:

1. Gehen Sie zu **Einstellungen**
2. Scrollen Sie zu "Passwort ändern"
3. Geben Sie Ihr aktuelles Passwort ein
4. Geben Sie ein neues Passwort ein (mind. 8 Zeichen)
5. Bestätigen Sie das neue Passwort
6. Klicken Sie auf "Passwort ändern"

### App-Sicherheit (optional)

Sie können die App zusätzlich mit Fingerabdruck, Face ID oder PIN schützen:

1. Gehen Sie zu **Einstellungen**
2. Klicken Sie bei "App-Sicherheit" auf **Konfigurieren**
3. Wählen Sie Ihre bevorzugte Methode
4. Folgen Sie den Anweisungen
        `
      },
      {
        id: 'language',
        title: 'Sprache ändern',
        icon: '🌍',
        content: `
## Sprache ändern

SeCu ist in 7 Sprachen verfügbar:

- 🇩🇪 Deutsch (Standard)
- 🇬🇧 English
- 🇪🇸 Español
- 🇫🇷 Français
- 🇵🇱 Polski
- 🇷🇺 Русский
- 🇸🇦 العربية (Arabisch mit RTL-Unterstützung)

### Sprache wechseln

1. Klicken Sie oben rechts auf das **Flaggen-Symbol**
2. Wählen Sie Ihre gewünschte Sprache
3. Die Änderung wird sofort übernommen

> **Hinweis:** Ihre Spracheinstellung wird gespeichert und beim nächsten Login automatisch verwendet.
        `
      }
    ]
  },
  {
    id: 'users',
    name: 'Benutzerverwaltung',
    icon: '👥',
    description: 'Mitarbeiter und Disponenten verwalten',
    articles: [
      {
        id: 'create-user',
        title: 'Benutzer anlegen',
        icon: '➕',
        content: `
## Neuen Benutzer anlegen

**Berechtigung:** Chef oder Disponent

### Schritt für Schritt

1. Navigieren Sie zu **Benutzer** im Menü
2. Klicken Sie auf **"+ Neuer Benutzer"**
3. Füllen Sie das Formular aus:
   - **Vorname** und **Nachname**
   - **E-Mail-Adresse** (wird für Login verwendet)
   - **Passwort** (mind. 8 Zeichen)
   - **Telefon** (optional)
   - **Rolle** auswählen (Disponent oder Mitarbeiter)
4. Klicken Sie auf **"Erstellen"**

### Rollen-Unterschiede

- **Disponent**: Kann selbst Mitarbeiter anlegen und Aufträge verwalten
- **Mitarbeiter**: Kann nur eigene Daten sehen und bearbeiten

> **Hinweis:** Als Disponent können Sie nur Mitarbeiter anlegen, keine weiteren Disponenten.
        `
      },
      {
        id: 'edit-user',
        title: 'Benutzer bearbeiten',
        icon: '✏️',
        content: `
## Benutzer bearbeiten

### Benutzerdaten ändern

1. Gehen Sie zu **Benutzer**
2. Klicken Sie auf den Namen des Benutzers
3. Ändern Sie die gewünschten Felder
4. Klicken Sie auf **"Speichern"**

### Benutzer deaktivieren

Statt einen Benutzer zu löschen, können Sie ihn deaktivieren:

1. Öffnen Sie das Benutzerprofil
2. Setzen Sie den Status auf **"Inaktiv"**
3. Der Benutzer kann sich nicht mehr anmelden

> **Tipp:** Deaktivierte Benutzer bleiben in der Historie erhalten.
        `
      }
    ]
  },
  {
    id: 'orders',
    name: 'Auftragsverwaltung',
    icon: '📋',
    description: 'Aufträge erstellen und verwalten',
    articles: [
      {
        id: 'create-order',
        title: 'Auftrag erstellen',
        icon: '➕',
        content: `
## Neuen Auftrag erstellen

**Berechtigung:** Chef oder Disponent

### Auftrag anlegen

1. Navigieren Sie zu **Aufträge**
2. Klicken Sie auf **"+ Neuer Auftrag"**
3. Füllen Sie die Pflichtfelder aus:
   - **Titel** – Kurze Beschreibung des Auftrags
   - **Kunde** – Wählen Sie aus dem Kundenstamm
   - **Objekt** – Einsatzort auswählen
   - **Datum/Zeit** – Wann findet der Einsatz statt?
4. Optional: Beschreibung und besondere Hinweise
5. Klicken Sie auf **"Erstellen"**

### Mitarbeiter zuweisen

Nach dem Erstellen können Sie Mitarbeiter zuweisen:

1. Öffnen Sie den Auftrag
2. Klicken Sie auf **"Mitarbeiter zuweisen"**
3. Wählen Sie verfügbare Mitarbeiter aus (System zeigt Verfügbarkeit an)
4. Bestätigen Sie die Zuweisung

> **Tipp:** Das System schlägt automatisch Mitarbeiter vor, die zum Zeitpunkt verfügbar sind und die nötigen Qualifikationen haben.
        `
      },
      {
        id: 'order-status',
        title: 'Auftragsstatus',
        icon: '🔄',
        content: `
## Auftragsstatus verstehen

Jeder Auftrag durchläuft verschiedene Status:

🟡 **Offen** – Auftrag erstellt, noch nicht begonnen

🔵 **In Bearbeitung** – Auftrag läuft aktuell

🟢 **Abgeschlossen** – Auftrag erfolgreich beendet

🔴 **Storniert** – Auftrag wurde abgebrochen

### Status ändern

1. Öffnen Sie den Auftrag
2. Klicken Sie auf den aktuellen Status
3. Wählen Sie den neuen Status
4. Optional: Kommentar hinzufügen
        `
      }
    ]
  },
  {
    id: 'shifts',
    name: 'Schichtplanung',
    icon: '📅',
    description: 'Dienstpläne erstellen und verwalten',
    articles: [
      {
        id: 'create-shift',
        title: 'Schicht erstellen',
        icon: '➕',
        content: `
## Schicht erstellen

**Berechtigung:** Chef oder Disponent

### Neue Schicht anlegen

1. Gehen Sie zu **Schichten**
2. Klicken Sie auf **"+ Neue Schicht"**
3. Füllen Sie aus:
   - **Bezeichnung** – z.B. "Nachtschicht Objekt A"
   - **Objekt** – Einsatzort
   - **Datum** – Wann findet die Schicht statt?
   - **Startzeit** und **Endzeit**
   - **Benötigte Mitarbeiter** – Anzahl
4. Klicken Sie auf **"Erstellen"**

### Mitarbeiter einteilen

1. Öffnen Sie die Schicht
2. Klicken Sie auf **"Mitarbeiter einteilen"**
3. Verfügbare Mitarbeiter werden grün angezeigt
4. Wählen Sie die gewünschten Mitarbeiter
5. Bestätigen Sie die Einteilung

> **Automatische Prüfung:** Das System warnt, wenn ein Mitarbeiter bereits eingeteilt ist oder nicht verfügbar.
        `
      },
      {
        id: 'shift-overview',
        title: 'Schichtübersicht',
        icon: '📊',
        content: `
## Schichtübersicht

### Kalenderansicht

Die Schichtübersicht zeigt alle Schichten in einer Kalenderansicht:

- **Wochenansicht** – Alle Schichten der aktuellen Woche
- **Monatsansicht** – Übersicht über den ganzen Monat
- **Tagesansicht** – Detaillierte Ansicht eines Tages

### Farben verstehen

- 🟢 **Grün** – Schicht vollständig besetzt
- 🟡 **Gelb** – Schicht teilweise besetzt
- 🔴 **Rot** – Schicht nicht besetzt

### Schicht bearbeiten

1. Klicken Sie auf eine Schicht im Kalender
2. Ändern Sie Zeiten, Mitarbeiter oder Details
3. Speichern Sie die Änderungen

> **Hinweis:** Änderungen an besetzten Schichten benachrichtigen automatisch die eingeteilten Mitarbeiter.
        `
      }
    ]
  },
  {
    id: 'timesheets',
    name: 'Stundenzettel',
    icon: '⏱️',
    description: 'Arbeitszeiten erfassen und verwalten',
    articles: [
      {
        id: 'submit-timesheet',
        title: 'Stundenzettel einreichen',
        icon: '📤',
        content: `
## Stundenzettel einreichen

**Für Mitarbeiter**

### Arbeitszeit erfassen

1. Gehen Sie zu **Stundenzettel**
2. Klicken Sie auf **"+ Neue Erfassung"**
3. Wählen Sie den **Auftrag** aus
4. Geben Sie ein:
   - **Startzeit** und **Endzeit**
   - **Pausenzeit** (falls vorhanden)
5. Optional: Foto des Stundenzettels hochladen
6. Klicken Sie auf **"Einreichen"**

### Foto hochladen

Sie können ein Foto Ihres handschriftlichen Stundenzettels anhängen:

1. Klicken Sie auf **"Foto hinzufügen"**
2. Wählen Sie das Foto aus oder machen Sie ein neues
3. Das Foto wird automatisch hochgeladen

> **Tipp:** Stellen Sie sicher, dass das Foto gut lesbar ist.
        `
      },
      {
        id: 'approve-timesheet',
        title: 'Stundenzettel genehmigen',
        icon: '✅',
        content: `
## Stundenzettel genehmigen

**Für Disponenten und Chefs**

### Übersicht

Offene Stundenzettel werden im Dashboard angezeigt. Sie können diese genehmigen oder ablehnen.

### Genehmigungsprozess

1. Gehen Sie zu **Stundenzettel**
2. Filtern Sie nach **"Ausstehend"**
3. Prüfen Sie die Einträge:
   - Stimmen die Zeiten mit dem Auftrag überein?
   - Ist das hochgeladene Foto lesbar?
4. Klicken Sie auf **✓ Genehmigen** oder **✗ Ablehnen**
5. Bei Ablehnung: Grund angeben

### Massenbearbeitung

Sie können mehrere Stundenzettel gleichzeitig bearbeiten:

1. Aktivieren Sie die Checkboxen
2. Klicken Sie auf **"Ausgewählte genehmigen"**
        `
      }
    ]
  },
  {
    id: 'availability',
    name: 'Verfügbarkeiten',
    icon: '🗓️',
    description: 'Einsatzbereitschaft verwalten',
    articles: [
      {
        id: 'set-availability',
        title: 'Verfügbarkeit melden',
        icon: '📅',
        content: `
## Verfügbarkeit melden

**Für Mitarbeiter**

### Warum Verfügbarkeit melden?

Damit Disponenten wissen, wann Sie einsetzbar sind, sollten Sie Ihre Verfügbarkeit regelmäßig aktualisieren.

### Verfügbarkeit eintragen

1. Gehen Sie zu **Verfügbarkeit**
2. Klicken Sie auf einen Tag im Kalender
3. Wählen Sie:
   - ✅ **Verfügbar** – Sie können eingesetzt werden
   - ❌ **Nicht verfügbar** – Sie sind verhindert
   - 🕐 **Teilweise** – Nur zu bestimmten Zeiten
4. Bei "Teilweise": Zeitfenster angeben
5. Speichern Sie die Eingabe

### Regelmäßige Muster

Sie können wiederkehrende Verfügbarkeiten einrichten:

1. Klicken Sie auf **"Muster erstellen"**
2. Wählen Sie die Wochentage
3. Geben Sie die Zeiten ein
4. Das Muster wird automatisch angewendet
        `
      },
      {
        id: 'view-availability',
        title: 'Verfügbarkeiten einsehen',
        icon: '👁️',
        content: `
## Verfügbarkeiten einsehen

**Für Disponenten und Chefs**

### Team-Übersicht

1. Gehen Sie zu **Verfügbarkeit**
2. Wählen Sie **"Team-Ansicht"**
3. Sie sehen alle Mitarbeiter im Kalender

### Nach Datum filtern

- Klicken Sie auf ein Datum, um zu sehen, wer verfügbar ist
- Grün = verfügbar, Rot = nicht verfügbar, Gelb = teilweise

### Für Auftrag nutzen

Beim Erstellen eines Auftrags werden automatisch nur verfügbare Mitarbeiter vorgeschlagen.
        `
      }
    ]
  },
  {
    id: 'qualifications',
    name: 'Qualifikationen',
    icon: '🎓',
    description: '§34a und Zertifikate verwalten',
    articles: [
      {
        id: 'qualification-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Qualifikationen in SeCu

Das Qualifikationsmodul hilft Ihnen, alle Zertifikate und Berechtigungen Ihrer Mitarbeiter zu verwalten.

### Wichtige Qualifikationen

- **§34a Sachkundeprüfung** – Grundvoraussetzung im Bewachungsgewerbe
- **Erste-Hilfe-Kurs** – Muss regelmäßig aufgefrischt werden
- **Waffensachkunde** – Für bewaffnete Einsätze
- **Brandschutzhelfer** – Für Objekte mit Brandschutzauflagen
- **Führerschein** – Für mobile Einsätze

### Automatische Erinnerungen

Das System erinnert Sie automatisch, wenn Qualifikationen ablaufen:

- **90 Tage vorher** – Erste Warnung
- **30 Tage vorher** – Dringende Warnung
- **Abgelaufen** – Rote Markierung

> **Wichtig:** Mitarbeiter ohne gültige §34a können nicht für Aufträge eingeteilt werden.
        `
      },
      {
        id: 'add-qualification',
        title: 'Qualifikation hinzufügen',
        icon: '➕',
        content: `
## Qualifikation hinzufügen

**Berechtigung:** Chef oder Disponent

### Qualifikation erfassen

1. Gehen Sie zu **Qualifikationen**
2. Klicken Sie auf **"+ Neue Qualifikation"**
3. Wählen Sie den **Mitarbeiter**
4. Wählen Sie den **Qualifikationstyp**:
   - §34a Sachkundeprüfung
   - Erste-Hilfe-Kurs
   - Waffensachkunde
   - Führerschein (Klasse A, B, C, etc.)
   - Sonstige
5. Geben Sie das **Ablaufdatum** ein (falls vorhanden)
6. Optional: Dokument/Zertifikat hochladen
7. Klicken Sie auf **"Speichern"**

### Dokument anhängen

Sie können einen Scan des Zertifikats hochladen:

1. Klicken Sie auf **"Dokument hinzufügen"**
2. Wählen Sie die Datei (PDF, JPG, PNG)
3. Das Dokument wird zur Qualifikation gespeichert
        `
      },
      {
        id: 'qualification-report',
        title: 'Qualifikationsbericht',
        icon: '📊',
        content: `
## Qualifikationsbericht

### Übersicht anzeigen

Der Qualifikationsbericht zeigt den Status aller Mitarbeiter:

1. Gehen Sie zu **Qualifikationen**
2. Klicken Sie auf **"Bericht"**
3. Sie sehen:
   - ✅ Gültige Qualifikationen
   - ⚠️ Bald ablaufende (gelb)
   - ❌ Abgelaufene (rot)
   - ❓ Fehlende Qualifikationen

### Nach Status filtern

- **Alle anzeigen** – Komplette Übersicht
- **Ablaufend** – Qualifikationen, die in 90 Tagen ablaufen
- **Abgelaufen** – Nicht mehr gültige Zertifikate
- **Fehlend** – Mitarbeiter ohne erforderliche Qualifikation

### Export

Sie können den Bericht als PDF oder Excel exportieren:

1. Klicken Sie auf **"Exportieren"**
2. Wählen Sie das Format
3. Der Download startet automatisch
        `
      }
    ]
  },
  {
    id: 'objects',
    name: 'Objekte',
    icon: '🏢',
    description: 'Einsatzorte und Standorte verwalten',
    articles: [
      {
        id: 'object-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Objekte in SeCu

Objekte sind die Einsatzorte Ihrer Sicherheitsdienstleistungen. Hier verwalten Sie alle Standorte.

### Was ist ein Objekt?

Ein Objekt kann sein:
- Gebäude oder Gelände
- Veranstaltungsort
- Baustelle
- Firmengelände
- Wohnanlage

### Objektdaten

Zu jedem Objekt speichern Sie:
- **Name** und **Adresse**
- **Kunde** (Auftraggeber)
- **Ansprechpartner** vor Ort
- **Besondere Hinweise** (Zugang, Alarmcodes, etc.)
- **Rundgangspunkte** (für Kontrollgänge)
        `
      },
      {
        id: 'create-object',
        title: 'Objekt anlegen',
        icon: '➕',
        content: `
## Objekt anlegen

**Berechtigung:** Chef oder Disponent

### Neues Objekt erstellen

1. Gehen Sie zu **Objekte**
2. Klicken Sie auf **"+ Neues Objekt"**
3. Füllen Sie die Pflichtfelder:
   - **Name** – Bezeichnung des Objekts
   - **Adresse** – Straße, PLZ, Ort
   - **Kunde** – Aus Kundenstamm wählen
4. Optional:
   - Ansprechpartner und Telefon
   - Besondere Hinweise
   - Zugangsinfos
5. Klicken Sie auf **"Speichern"**

### Rundgangspunkte definieren

Für Kontrollgänge können Sie Checkpunkte definieren:

1. Öffnen Sie das Objekt
2. Gehen Sie zu **"Rundgangspunkte"**
3. Klicken Sie auf **"+ Punkt hinzufügen"**
4. Geben Sie Name und Beschreibung ein
5. Optional: GPS-Koordinaten oder NFC-Tag

> **Tipp:** Rundgangspunkte werden beim Patrouillieren automatisch abgehakt.
        `
      }
    ]
  },
  {
    id: 'patrols',
    name: 'Rundgänge',
    icon: '📍',
    description: 'Kontrollgänge dokumentieren',
    articles: [
      {
        id: 'patrol-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Rundgänge in SeCu

Das Rundgangs-Modul ermöglicht die digitale Dokumentation von Kontrollgängen.

### Funktionen

- **Checkpunkte abhaken** – Jeden Kontrollpunkt bestätigen
- **GPS-Tracking** – Automatische Standorterfassung
- **Zeitstempel** – Wann wurde welcher Punkt erreicht?
- **Notizen** – Besonderheiten dokumentieren
- **Fotos** – Auffälligkeiten fotografieren

### Für wen?

- **Mitarbeiter**: Rundgänge durchführen und dokumentieren
- **Disponenten/Chefs**: Rundgänge einsehen und auswerten
        `
      },
      {
        id: 'start-patrol',
        title: 'Rundgang starten',
        icon: '▶️',
        content: `
## Rundgang starten

**Für Mitarbeiter**

### Rundgang beginnen

1. Gehen Sie zu **Rundgänge**
2. Wählen Sie das **Objekt**
3. Klicken Sie auf **"Rundgang starten"**
4. Die Stoppuhr startet automatisch

### Checkpunkte abhaken

1. Gehen Sie zum ersten Kontrollpunkt
2. Tippen Sie auf den Punkt in der App
3. Der Punkt wird mit Zeitstempel markiert
4. Optional: Notiz oder Foto hinzufügen
5. Gehen Sie zum nächsten Punkt

### Rundgang beenden

1. Alle Punkte abhaken
2. Klicken Sie auf **"Rundgang beenden"**
3. Der Rundgang wird automatisch gespeichert

> **Automatisch:** Bei Abweichungen vom Plan (z.B. verpasste Punkte) wird der Disponent benachrichtigt.
        `
      },
      {
        id: 'patrol-report',
        title: 'Rundgangsprotokoll',
        icon: '📊',
        content: `
## Rundgangsprotokoll

**Für Disponenten und Chefs**

### Rundgänge einsehen

1. Gehen Sie zu **Rundgänge**
2. Wählen Sie das Objekt
3. Sie sehen alle durchgeführten Rundgänge

### Details anzeigen

Klicken Sie auf einen Rundgang um zu sehen:

- **Startzeit** und **Endzeit**
- **Dauer** des Rundgangs
- **Abgehakte Punkte** mit Zeitstempeln
- **GPS-Route** (falls aktiviert)
- **Notizen** und **Fotos**

### Auffälligkeiten

Besondere Vorkommnisse werden markiert:

- ⚠️ **Verpasste Punkte** – Nicht alle Checkpunkte erreicht
- ⏰ **Verspätung** – Rundgang nicht pünktlich gestartet
- 📝 **Notizen** – Mitarbeiter hat etwas vermerkt
        `
      }
    ]
  },
  {
    id: 'incidents',
    name: 'Vorfälle',
    icon: '🚨',
    description: 'Sicherheitsvorfälle erfassen',
    articles: [
      {
        id: 'incident-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Vorfälle in SeCu

Das Vorfallsmodul dient zur Dokumentation von Sicherheitsvorfällen und besonderen Ereignissen.

### Vorfallsarten

- 🚨 **Alarm** – Alarmauslösung
- 🚪 **Einbruch** – Einbruchsversuch oder -schäden
- 🔥 **Brand** – Feuer oder Rauchentwicklung
- 🤕 **Unfall** – Personenschäden
- 👤 **Unbefugter Zutritt** – Personen ohne Berechtigung
- 📦 **Diebstahl** – Entwendung von Gegenständen
- ⚠️ **Sonstiges** – Andere Vorkommnisse

### Warum dokumentieren?

- **Nachweispflicht** gegenüber Kunden
- **Versicherungsfälle** belegen
- **Analyse** und Prävention
        `
      },
      {
        id: 'create-incident',
        title: 'Vorfall melden',
        icon: '➕',
        content: `
## Vorfall melden

**Für alle Mitarbeiter**

### Vorfall erfassen

1. Gehen Sie zu **Vorfälle**
2. Klicken Sie auf **"+ Neuer Vorfall"**
3. Füllen Sie das Formular:
   - **Objekt** – Wo ist es passiert?
   - **Datum/Uhrzeit** – Wann ist es passiert?
   - **Art des Vorfalls** – Kategorie wählen
   - **Beschreibung** – Was ist passiert?
   - **Maßnahmen** – Was wurde unternommen?
4. Optional: Fotos hinzufügen
5. Klicken Sie auf **"Melden"**

### Beweise sichern

Bei Vorfällen sollten Sie:

1. **Fotos** machen (Schäden, Spuren)
2. **Zeugen** notieren
3. **Polizei** informieren (falls erforderlich)
4. **Aktenzeichen** dokumentieren

> **Wichtig:** Melden Sie Vorfälle zeitnah, solange alle Details noch frisch sind.
        `
      },
      {
        id: 'incident-status',
        title: 'Vorfallsbearbeitung',
        icon: '🔄',
        content: `
## Vorfallsbearbeitung

**Für Disponenten und Chefs**

### Status eines Vorfalls

- 🟡 **Neu** – Gerade gemeldet
- 🔵 **In Bearbeitung** – Wird untersucht
- 🟢 **Erledigt** – Abgeschlossen
- 🔴 **Eskaliert** – An höhere Stelle weitergeleitet

### Vorfall bearbeiten

1. Öffnen Sie den Vorfall
2. Prüfen Sie die Angaben
3. Fügen Sie Kommentare hinzu
4. Ändern Sie den Status
5. Bei Bedarf: An Kunden weiterleiten

### Vorfallsbericht erstellen

1. Öffnen Sie den Vorfall
2. Klicken Sie auf **"Bericht erstellen"**
3. Ein PDF wird generiert mit allen Details
4. Versenden Sie den Bericht an den Kunden
        `
      }
    ]
  },
  {
    id: 'vehicles',
    name: 'Fahrzeuge',
    icon: '🚗',
    description: 'Fuhrpark verwalten',
    articles: [
      {
        id: 'vehicle-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Fahrzeuge in SeCu

Verwalten Sie Ihren Fuhrpark zentral in SeCu.

### Fahrzeugdaten

Zu jedem Fahrzeug speichern Sie:
- **Kennzeichen**
- **Marke** und **Modell**
- **Fahrzeugtyp** (PKW, Transporter, Motorrad)
- **Kilometerstand**
- **TÜV-Termin** und **HU-Termin**
- **Versicherungsdaten**

### Automatische Erinnerungen

Das System erinnert Sie an:
- 📅 TÜV-Termine
- 🔧 Wartungstermine
- 📋 Führerscheinkontrollen
        `
      },
      {
        id: 'add-vehicle',
        title: 'Fahrzeug anlegen',
        icon: '➕',
        content: `
## Fahrzeug anlegen

**Berechtigung:** Chef oder Disponent

### Neues Fahrzeug

1. Gehen Sie zu **Fahrzeuge**
2. Klicken Sie auf **"+ Neues Fahrzeug"**
3. Füllen Sie aus:
   - **Kennzeichen**
   - **Marke/Modell**
   - **Fahrzeugtyp**
   - **Aktueller Kilometerstand**
4. Optionale Daten:
   - TÜV-Termin
   - Versicherungsnummer
   - Tankkartenummer
5. Klicken Sie auf **"Speichern"**

### Fahrzeug zuweisen

Sie können Fahrzeuge fest oder temporär zuweisen:

1. Öffnen Sie das Fahrzeug
2. Klicken Sie auf **"Zuweisen"**
3. Wählen Sie den Mitarbeiter
4. Geben Sie den Zeitraum an
        `
      },
      {
        id: 'vehicle-log',
        title: 'Fahrtenbuch',
        icon: '📖',
        content: `
## Fahrtenbuch

### Fahrten erfassen

Mitarbeiter können Fahrten dokumentieren:

1. **Fahrt starten**
   - Kilometerstand zu Beginn
   - Zweck der Fahrt
   
2. **Fahrt beenden**
   - Kilometerstand am Ende
   - Gefahrene Kilometer automatisch berechnet

### Fahrtenbuch einsehen

**Für Disponenten und Chefs:**

1. Gehen Sie zu **Fahrzeuge**
2. Wählen Sie ein Fahrzeug
3. Klicken Sie auf **"Fahrtenbuch"**
4. Sie sehen alle Fahrten mit:
   - Datum und Uhrzeit
   - Fahrer
   - Start- und Endkilometer
   - Zweck

> **Export:** Das Fahrtenbuch kann als Excel oder PDF exportiert werden.
        `
      }
    ]
  },
  {
    id: 'customers',
    name: 'Kunden',
    icon: '🤝',
    description: 'Kundenstamm pflegen',
    articles: [
      {
        id: 'customer-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Kunden in SeCu

Verwalten Sie alle Ihre Kunden (Auftraggeber) zentral.

### Kundendaten

Zu jedem Kunden speichern Sie:
- **Firmenname**
- **Ansprechpartner**
- **Adresse**
- **Telefon** und **E-Mail**
- **Rechnungsadresse** (falls abweichend)
- **Notizen**

### Verknüpfungen

Kunden sind verknüpft mit:
- **Objekten** – Einsatzorte des Kunden
- **Aufträgen** – Alle Aufträge dieses Kunden
- **Rechnungen** – Abrechnungen
        `
      },
      {
        id: 'add-customer',
        title: 'Kunde anlegen',
        icon: '➕',
        content: `
## Kunde anlegen

**Berechtigung:** Chef oder Disponent

### Neuen Kunden erstellen

1. Gehen Sie zu **Kunden**
2. Klicken Sie auf **"+ Neuer Kunde"**
3. Pflichtfelder:
   - **Firmenname**
   - **Ansprechpartner**
   - **E-Mail** oder **Telefon**
4. Optionale Felder:
   - Adresse
   - Rechnungsadresse
   - Notizen
5. Klicken Sie auf **"Speichern"**

### Objekte zuordnen

Nach dem Anlegen des Kunden:

1. Öffnen Sie den Kunden
2. Gehen Sie zu **"Objekte"**
3. Klicken Sie auf **"+ Objekt hinzufügen"**
4. Erstellen Sie ein neues Objekt oder verknüpfen Sie ein bestehendes
        `
      }
    ]
  },
  {
    id: 'billing',
    name: 'Abrechnung',
    icon: '💰',
    description: 'Rechnungen erstellen und verwalten',
    articles: [
      {
        id: 'billing-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Abrechnung in SeCu

Das Abrechnungsmodul ermöglicht die Erstellung von Rechnungen basierend auf genehmigten Stundenzetteln.

### Funktionen

- **Rechnungen erstellen** aus Stundenzettel-Daten
- **Stundensätze** pro Kunde oder Auftrag
- **PDF-Export** für den Versand
- **Status-Tracking** (offen, bezahlt, überfällig)

### Abrechnungszeitraum

Typische Abrechnungszyklen:
- **Monatlich** – Alle Leistungen des Monats
- **14-tägig** – Halbmonatlich
- **Wöchentlich** – Jede Woche
- **Pro Auftrag** – Nach Abschluss eines Auftrags
        `
      },
      {
        id: 'create-invoice',
        title: 'Rechnung erstellen',
        icon: '➕',
        content: `
## Rechnung erstellen

**Berechtigung:** Chef

### Neue Rechnung

1. Gehen Sie zu **Abrechnung**
2. Klicken Sie auf **"+ Neue Rechnung"**
3. Wählen Sie den **Kunden**
4. Wählen Sie den **Zeitraum**
5. Das System zeigt alle genehmigten Stundenzettel
6. Prüfen Sie die Positionen
7. Optional: Zusätzliche Positionen hinzufügen
8. Klicken Sie auf **"Rechnung erstellen"**

### Rechnungsdetails

Jede Rechnung enthält:
- Rechnungsnummer (automatisch)
- Datum und Fälligkeit
- Kundendaten
- Einzelpositionen mit Stunden und Sätzen
- Summen (netto, MwSt., brutto)

### PDF erstellen

1. Öffnen Sie die Rechnung
2. Klicken Sie auf **"PDF herunterladen"**
3. Das PDF enthält Ihr Logo und alle Details
        `
      },
      {
        id: 'invoice-status',
        title: 'Zahlungsstatus',
        icon: '📊',
        content: `
## Zahlungsstatus verwalten

### Statusarten

- 🟡 **Entwurf** – Noch nicht versendet
- 🔵 **Offen** – Versendet, Zahlung ausstehend
- 🟢 **Bezahlt** – Zahlung eingegangen
- 🔴 **Überfällig** – Fälligkeit überschritten
- ⚫ **Storniert** – Rechnung wurde storniert

### Zahlung verbuchen

1. Öffnen Sie die Rechnung
2. Klicken Sie auf **"Zahlung eingegangen"**
3. Geben Sie das Datum ein
4. Optional: Zahlungsreferenz

### Mahnwesen

Bei überfälligen Rechnungen:

1. Gehen Sie zu **Abrechnung**
2. Filter **"Überfällig"**
3. Klicken Sie auf **"Mahnung erstellen"**
4. Eine Zahlungserinnerung wird generiert
        `
      }
    ]
  },
  {
    id: 'documents',
    name: 'Dokumente',
    icon: '📁',
    description: 'Dateien zentral speichern',
    articles: [
      {
        id: 'document-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Dokumente in SeCu

Speichern Sie wichtige Dokumente zentral und sicher.

### Dokumenttypen

- **Verträge** – Kunden- und Mitarbeiterverträge
- **Zertifikate** – Qualifikationsnachweise
- **Berichte** – Vorfalls- und Rundgangsberichte
- **Rechnungen** – Archivierte Rechnungen
- **Sonstiges** – Alle anderen Dokumente

### Speicherort

Dokumente können zugeordnet werden:
- **Mitarbeiter** – Personalakten
- **Kunden** – Kundenunterlagen
- **Objekte** – Objektunterlagen
- **Allgemein** – Unternehmensdokumente
        `
      },
      {
        id: 'upload-document',
        title: 'Dokument hochladen',
        icon: '⬆️',
        content: `
## Dokument hochladen

### Datei hochladen

1. Gehen Sie zu **Dokumente**
2. Klicken Sie auf **"+ Hochladen"**
3. Wählen Sie die Datei(en)
4. Füllen Sie die Metadaten:
   - **Name** – Bezeichnung des Dokuments
   - **Kategorie** – Typ auswählen
   - **Zuordnung** – Mitarbeiter, Kunde, Objekt
5. Klicken Sie auf **"Speichern"**

### Unterstützte Formate

- 📄 **PDF** – Verträge, Berichte
- 🖼️ **Bilder** – JPG, PNG (max. 10 MB)
- 📊 **Office** – Word, Excel (optional)

### Ordner erstellen

Sie können Dokumente in Ordnern organisieren:

1. Klicken Sie auf **"Neuer Ordner"**
2. Geben Sie einen Namen ein
3. Verschieben Sie Dokumente per Drag & Drop
        `
      }
    ]
  },
  {
    id: 'partnerships',
    name: 'Partnerschaften',
    icon: '🤝',
    description: 'Zusammenarbeit mit Subunternehmern',
    articles: [
      {
        id: 'partnership-overview',
        title: 'Übersicht',
        icon: '📋',
        content: `
## Partnerschaften in SeCu

Das Partnerschaftsmodul ermöglicht die Zusammenarbeit mit anderen Sicherheitsunternehmen.

### Anwendungsfälle

- **Subunternehmer einsetzen** – Personal bei Partnerfirmen anfordern
- **Personal verleihen** – Eigene Mitarbeiter an Partner ausleihen
- **Abrechnung** – Stundenzettel und Rechnungen austauschen

### Beziehungsarten

**Auftraggeber** – Sie beauftragen den Partner (Subunternehmer)

**Subunternehmer** – Sie werden vom Partner beauftragt

**Bilateral** – Beide Seiten können Aufträge teilen

### Voraussetzungen

- Beide Unternehmen müssen in SeCu registriert sein
- Partnerschaftsmodul muss aktiviert sein
        `
      },
      {
        id: 'create-partnership',
        title: 'Partnerschaft anfragen',
        icon: '➕',
        content: `
## Partnerschaft anfragen

**Berechtigung:** Chef

### Neue Partnerschaft

1. Gehen Sie zu **Partnerschaften**
2. Klicken Sie auf **"+ Neue Partnerschaft"**
3. Suchen Sie das Partnerunternehmen
4. Wählen Sie die **Beziehungsart**:
   - Auftraggeber (Sie beauftragen)
   - Subunternehmer (Sie werden beauftragt)
   - Bilateral (beidseitig)
5. Klicken Sie auf **"Anfrage senden"**

### Anfrage annehmen

Wenn Sie eine Anfrage erhalten:

1. Sie sehen eine Benachrichtigung
2. Prüfen Sie die Details
3. Klicken Sie auf **"Annehmen"** oder **"Ablehnen"**

> **Hinweis:** Nach Annahme können beide Seiten Aufträge teilen.
        `
      },
      {
        id: 'share-orders',
        title: 'Aufträge teilen',
        icon: '📤',
        content: `
## Aufträge mit Partnern teilen

### Auftrag an Subunternehmer

1. Erstellen oder öffnen Sie einen Auftrag
2. Klicken Sie auf **"Mit Partner teilen"**
3. Wählen Sie den **Partner** aus
4. Geben Sie Details an:
   - Benötigte Mitarbeiteranzahl
   - Stundensatz (falls vereinbart)
5. Partner erhält Benachrichtigung

### Geteilte Aufträge verwalten

Geteilte Aufträge werden mit einem 🤝 Symbol markiert.

- **Blau**: Von Ihnen geteilt
- **Orange**: An Sie geteilt

### Stundenzettel vom Partner

Wenn der Partner Stundenzettel einreicht:

1. Sie erhalten eine Benachrichtigung
2. Prüfen Sie die Zeiten
3. Genehmigen oder lehnen Sie ab
4. Genehmigte Zeiten fließen in die Abrechnung
        `
      }
    ]
  },
  {
    id: 'settings',
    name: 'Einstellungen',
    icon: '⚙️',
    description: 'App und Organisation konfigurieren',
    articles: [
      {
        id: 'profile-settings',
        title: 'Profil',
        icon: '👤',
        content: `
## Profil-Einstellungen

### Ihre Daten

In den Einstellungen sehen Sie:
- **Name** – Ihr Vor- und Nachname
- **E-Mail** – Ihre Login-Adresse
- **Rolle** – Chef, Disponent oder Mitarbeiter
- **Organisation** – Ihr Unternehmen

### Passwort ändern

1. Gehen Sie zu **Einstellungen**
2. Scrollen Sie zu **"Passwort ändern"**
3. Geben Sie Ihr aktuelles Passwort ein
4. Geben Sie das neue Passwort ein (mind. 8 Zeichen)
5. Bestätigen Sie das neue Passwort
6. Klicken Sie auf **"Passwort ändern"**
        `
      },
      {
        id: 'app-security',
        title: 'App-Sicherheit',
        icon: '🔐',
        content: `
## App-Sicherheit

Schützen Sie die App zusätzlich mit biometrischer Entsperrung oder PIN.

### Verfügbare Methoden

- **Fingerabdruck / Touch ID** – Schnell und sicher
- **Face ID** – Gesichtserkennung (iOS)
- **PIN-Code** – 4-6 stelliger Code

### Einrichten

1. Gehen Sie zu **Einstellungen**
2. Klicken Sie bei "App-Sicherheit" auf **Konfigurieren**
3. Wählen Sie Ihre Methode
4. Folgen Sie den Anweisungen

### Funktionsweise

Nach der Einrichtung:
- Beim App-Start wird die Verifizierung verlangt
- Nach 5 Minuten Inaktivität wird die App gesperrt
- Bei fehlgeschlagener Biometrie kann der PIN verwendet werden

> **Hinweis:** Ihre Login-Daten bleiben erhalten, nur der App-Zugang wird geschützt.
        `
      },
      {
        id: 'org-logo',
        title: 'Firmenlogo',
        icon: '🏢',
        content: `
## Firmenlogo

**Nur für Chefs**

Laden Sie ein Logo für Ihre Organisation hoch. Alle Mitarbeiter Ihrer Firma sehen dann Ihr Logo statt des Standard-Logos.

### Logo hochladen

1. Gehen Sie zu **Einstellungen**
2. Scrollen Sie zu **"Firmenlogo"**
3. Klicken Sie auf **"Datei auswählen"**
4. Wählen Sie Ihre Logo-Datei
5. Vorschau prüfen
6. Klicken Sie auf **"Hochladen"**

### Anforderungen

- **Formate:** JPG, PNG, WebP, SVG
- **Größe:** Max. 5 MB
- **Empfohlen:** 200 x 80 Pixel (Querformat)

### Logo löschen

Um zum Standard-Logo zurückzukehren:

1. Klicken Sie auf **"Logo löschen"**
2. Bestätigen Sie die Löschung
3. Das Standard-Logo (🔐 SeCu) wird wieder angezeigt

> **Hinweis:** Das Logo ist nur für Mitglieder Ihrer Organisation sichtbar.
        `
      },
      {
        id: 'modules-settings',
        title: 'Module verwalten',
        icon: '🧩',
        content: `
## Module verwalten

**Nur für Chefs**

SeCu ist modular aufgebaut. Aktivieren Sie nur die Funktionen, die Sie benötigen.

### Verfügbare Module

| Modul | Beschreibung |
|-------|--------------|
| 📋 Aufträge | Auftragsverwaltung |
| 🗓️ Verfügbarkeit | Einsatzplanung |
| ⏱️ Stundenzettel | Zeiterfassung |
| 🎓 Qualifikationen | §34a-Tracking |
| 🏢 Objekte | Standortverwaltung |
| 📅 Schichten | Dienstplanung |
| 📍 Rundgänge | Kontrollgänge |
| 🚨 Vorfälle | Vorfallserfassung |
| 🚗 Fahrzeuge | Fuhrpark |
| 🤝 Kunden | Kundenstamm |
| 💰 Abrechnung | Rechnungen |
| 📁 Dokumente | Dateiverwaltung |
| 🤝 Partnerschaften | Subunternehmer |

### Modul aktivieren/deaktivieren

1. Gehen Sie zu **Module**
2. Klicken Sie auf den Schalter des Moduls
3. Änderung wird sofort wirksam

> **Wichtig:** Beim Deaktivieren werden keine Daten gelöscht, nur die Menüpunkte ausgeblendet.
        `
      }
    ]
  },
  {
    id: 'faq',
    name: 'Häufige Fragen',
    icon: '❓',
    description: 'Antworten auf häufige Fragen',
    articles: [
      {
        id: 'faq-general',
        title: 'Allgemeine Fragen',
        icon: '💬',
        content: `
## Häufige Fragen

### Ich habe mein Passwort vergessen

1. Klicken Sie auf der Login-Seite auf **"Passwort vergessen"**
2. Geben Sie Ihre E-Mail-Adresse ein
3. Sie erhalten einen Link zum Zurücksetzen

---

### Kann ich mehrere Organisationen haben?

Nein, jeder Benutzer gehört zu genau einer Organisation. Für die Zusammenarbeit nutzen Sie das Partnerschaftsmodul.

---

### Werden meine Daten gesichert?

Ja, es werden regelmäßig automatische Backups erstellt. Bei Datenverlust kontaktieren Sie den Support.

---

### Wie kann ich die Sprache ändern?

Klicken Sie oben rechts auf das Flaggen-Symbol und wählen Sie Ihre Sprache. Verfügbar: Deutsch, Englisch, Spanisch, Französisch, Polnisch, Russisch, Arabisch.

---

### Wie kann ich Support kontaktieren?

- **E-Mail:** support@kronos-soulution.de
- **Telefon:** Siehe Ihre Vertragsdaten

---

### Gibt es eine Mobile App?

SeCu ist als Web-App (PWA) optimiert und funktioniert auf allen Geräten. Sie können die App auf Ihrem Homescreen installieren für ein App-ähnliches Erlebnis.
        `
      },
      {
        id: 'faq-security',
        title: 'Sicherheitsfragen',
        icon: '🔒',
        content: `
## Sicherheitsfragen

### Wie sicher sind meine Daten?

- **Verschlüsselung:** Alle Daten werden verschlüsselt übertragen (HTTPS)
- **Datenschutz:** DSGVO-konform
- **Server:** Deutscher Serverstandort
- **Backups:** Tägliche Sicherungen

---

### Was passiert bei einem Sicherheitsvorfall?

1. Sie werden umgehend informiert
2. Betroffene Accounts werden gesperrt
3. Passwörter müssen zurückgesetzt werden

---

### Wer hat Zugriff auf welche Daten?

- **Mitarbeiter:** Nur eigene Daten und zugewiesene Aufträge
- **Disponent:** Alle Mitarbeiter-Daten der Organisation
- **Chef:** Vollzugriff inkl. Abrechnung und Einstellungen

---

### Wie aktiviere ich die Zwei-Faktor-Authentifizierung?

Die App-Sperre mit Fingerabdruck/Face ID/PIN bietet zusätzliche Sicherheit. Gehen Sie zu Einstellungen → App-Sicherheit.
        `
      }
    ]
  }
]

// Simple markdown renderer
function renderMarkdown(text: string): string {
  return text
    // Headers
    .replace(/^### (.+)$/gm, '<h3 class="text-lg font-semibold mt-6 mb-2 text-gray-900 dark:text-white">$1</h3>')
    .replace(/^## (.+)$/gm, '<h2 class="text-xl font-bold mt-8 mb-4 text-gray-900 dark:text-white">$1</h2>')
    // Bold
    .replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold">$1</strong>')
    // Italic  
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    // Code
    .replace(/`(.+?)`/g, '<code class="bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm">$1</code>')
    // Blockquote
    .replace(/^> (.+)$/gm, '<blockquote class="border-l-4 border-blue-500 pl-4 italic text-gray-600 dark:text-gray-400 my-4 bg-blue-50 dark:bg-blue-900/20 py-2 pr-4 rounded-r">$1</blockquote>')
    // Horizontal rule
    .replace(/^---$/gm, '<hr class="my-6 border-gray-200 dark:border-gray-700">')
    // Tables (simple)
    .replace(/\|(.+)\|/g, (match) => {
      const cells = match.split('|').filter(c => c.trim())
      if (cells.some(c => c.match(/^[-:]+$/))) return '' // Skip separator row
      const isHeader = match.includes('Modul') || match.includes('Beschreibung')
      const tag = isHeader ? 'th' : 'td'
      const className = isHeader 
        ? 'border border-gray-300 dark:border-gray-600 px-3 py-2 bg-gray-100 dark:bg-gray-700 font-semibold text-left'
        : 'border border-gray-300 dark:border-gray-600 px-3 py-2'
      return `<tr>${cells.map(c => `<${tag} class="${className}">${c.trim()}</${tag}>`).join('')}</tr>`
    })
    // Wrap tables
    .replace(/(<tr>.*<\/tr>\n?)+/g, (match) => `<table class="w-full my-4 border-collapse">${match}</table>`)
    // Lists
    .replace(/^(\d+)\. (.+)$/gm, '<li class="ml-6 list-decimal my-1 text-gray-700 dark:text-gray-300">$2</li>')
    .replace(/^- (.+)$/gm, '<li class="ml-6 list-disc my-1 text-gray-700 dark:text-gray-300">$1</li>')
    // Wrap consecutive list items
    .replace(/(<li class="ml-6 list-decimal[^>]*>.*<\/li>\n?)+/g, (match) => `<ol class="my-4">${match}</ol>`)
    .replace(/(<li class="ml-6 list-disc[^>]*>.*<\/li>\n?)+/g, (match) => `<ul class="my-4">${match}</ul>`)
    // Paragraphs (lines that don't start with HTML tags)
    .split('\n\n')
    .map(p => {
      p = p.trim()
      if (!p) return ''
      if (p.startsWith('<')) return p
      return `<p class="my-3 text-gray-700 dark:text-gray-300">${p}</p>`
    })
    .join('\n')
}

const filteredCategories = computed(() => {
  if (!searchQuery.value) return categories
  
  const query = searchQuery.value.toLowerCase()
  return categories.map(cat => ({
    ...cat,
    articles: cat.articles.filter(art => 
      art.title.toLowerCase().includes(query) ||
      art.content.toLowerCase().includes(query)
    )
  })).filter(cat => cat.articles.length > 0)
})

function selectCategory(catId: string) {
  activeCategory.value = catId
  activeArticle.value = null
}

function selectArticle(catId: string, artId: string) {
  activeCategory.value = catId
  activeArticle.value = artId
}

function goBack() {
  if (activeArticle.value) {
    activeArticle.value = null
  } else {
    activeCategory.value = null
  }
}

const currentCategory = computed(() => 
  categories.find(c => c.id === activeCategory.value)
)

const currentArticle = computed(() => 
  currentCategory.value?.articles.find(a => a.id === activeArticle.value)
)
</script>

<template>
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <button 
          v-if="activeCategory" 
          @click="goBack"
          class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors text-xl"
        >
          ←
        </button>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
          📚 Hilfe & Dokumentation
        </h1>
      </div>
    </div>

    <!-- Search -->
    <div class="relative">
      <input
        v-model="searchQuery"
        type="text"
        placeholder="🔍 Suche in der Dokumentation..."
        class="input pl-4 pr-10 w-full"
      />
      <span 
        v-if="searchQuery" 
        @click="searchQuery = ''" 
        class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-gray-400 hover:text-gray-600 text-lg"
      >
        ✕
      </span>
    </div>

    <!-- Category Grid -->
    <div v-if="!activeCategory" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div
        v-for="category in filteredCategories"
        :key="category.id"
        @click="selectCategory(category.id)"
        class="card cursor-pointer hover:shadow-lg transition-all hover:scale-[1.02] border-2 border-transparent hover:border-blue-500"
      >
        <div class="text-3xl mb-3">{{ category.icon }}</div>
        <h3 class="text-lg font-semibold mb-1 text-gray-900 dark:text-white">{{ category.name }}</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ category.description }}</p>
        <p class="text-xs text-gray-400 mt-2">{{ category.articles.length }} Artikel</p>
      </div>
    </div>

    <!-- Article List -->
    <div v-else-if="!activeArticle" class="space-y-4">
      <div class="card bg-gray-50 dark:bg-gray-800">
        <div class="flex items-center gap-3">
          <span class="text-3xl">{{ currentCategory?.icon }}</span>
          <div>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ currentCategory?.name }}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ currentCategory?.description }}</p>
          </div>
        </div>
      </div>

      <div class="grid gap-3">
        <div
          v-for="article in currentCategory?.articles"
          :key="article.id"
          @click="selectArticle(currentCategory!.id, article.id)"
          class="card cursor-pointer hover:shadow-md transition-all flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700"
        >
          <span class="text-2xl">{{ article.icon }}</span>
          <span class="font-medium text-gray-900 dark:text-white">{{ article.title }}</span>
          <span class="ml-auto text-gray-400">→</span>
        </div>
      </div>
    </div>

    <!-- Article Content -->
    <div v-else class="card">
      <div class="flex items-center gap-3 mb-6 pb-4 border-b dark:border-gray-700">
        <span class="text-3xl">{{ currentArticle?.icon }}</span>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ currentArticle?.title }}</h2>
      </div>
      
      <div 
        class="prose dark:prose-invert max-w-none"
        v-html="renderMarkdown(currentArticle?.content || '')"
      ></div>
    </div>
  </div>
</template>
