import React from 'react';

export function HelpNavigationPage() {
  return (
    <div className="max-w-3xl mx-auto prose prose-secondary">
      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Navigation</h1>
      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Startseite</h2>
      <p className="text-secondary-600 mb-4">
        Nach dem Login gelangen Sie zur Startseite. Hier können Sie einen Workspace auswählen oder zu den Einstellungen und der Hilfe navigieren.
      </p>
      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Workspace</h2>
      <p className="text-secondary-600 mb-4">
        Ein Workspace ist Ihr Arbeitsbereich mit Sidebar-Navigation. Hier finden Sie Kontakte, Kalender, E-Mail und alle anderen Module.
      </p>
      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Sidebar</h2>
      <p className="text-secondary-600 mb-4">
        Das Hamburger-Menü oben links blendet die Seitenleiste ein und aus. Die Sidebar zeigt alle verfügbaren Module.
      </p>
      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Zurück-Pfeil</h2>
      <p className="text-secondary-600 mb-4">
        Rechts neben dem Hamburger-Menü finden Sie einen Zurück-Pfeil, der Sie zurück zur Startseite bringt.
      </p>
      <h2 className="text-lg font-semibold text-secondary-800 mt-6 mb-2">Globale Suche</h2>
      <p className="text-secondary-600 mb-4">
        Verwenden Sie die Lupe oben oder Strg+K um das Kommando-Palette zu öffnen und schnell nach Kontakten, Mails oder Dateien zu suchen.
      </p>
    </div>
  );
}