// Übersicht aller Slash-Befehle des Bots.
import { useEffect } from 'react';
import { IconLock } from '../icons.jsx';

const GROUPS = [
    ['Für alle', [
        ['/rank', 'Zeigt deinen Rang, deine XP und den Fortschritt zum nächsten Level.'],
        ['/wunsch idee:…', 'Reicht einen Feature-Wunsch ein — landet im Voting-Kanal und auf der Roadmap.'],
        ['/bug titel:… beschreibung:…', 'Meldet einen Fehler als Issue im Repository. Wird er geschlossen, bekommst du eine Nachricht.'],
        ['/geburtstag setzen tag:… monat:…', 'Trägt deinen Geburtstag ein. Der Bot gratuliert morgens und vergibt eine Rolle für den Tag.'],
        ['/geburtstag entfernen', 'Trägt ihn wieder aus.'],
        ['/remind dauer:… text:…', 'Erinnert dich per Direktnachricht — etwa „2h" oder „30m".'],
        ['/tag name:…', 'Ruft einen gespeicherten Textbaustein ab, mit Vorschlägen beim Tippen.'],
        ['/ping', 'Lebenszeichen des Bots.'],
    ]],
    ['Moderation', [
        ['/warn user:… grund:…', 'Verwarnt jemanden, schickt eine Nachricht und schreibt es ins Protokoll.'],
        ['/warns user:…', 'Zeigt die Verwarnungs-Historie.'],
        ['/timeout user:… dauer:…', 'Setzt eine Auszeit.'],
        ['/purge anzahl:…', 'Löscht mehrere Nachrichten auf einmal.'],
    ]],
    ['Einrichtung', [
        ['/giveaway preis:… dauer:… gewinner:…', 'Startet eine Verlosung mit Teilnahme-Knopf und automatischer Ziehung.'],
        ['/ticket-setup', 'Postet den Knopf, über den Support-Tickets als private Threads entstehen.'],
        ['/playtester-setup', 'Postet den Bewerbungs-Knopf für das Playtester-Programm.'],
        ['/devlog-backfill', 'Holt ältere Devlog-Nachrichten nachträglich ins Archiv.'],
        ['/galerie-backfill', 'Dasselbe für den Screenshot-Kanal.'],
    ]],
];

export default function BotCommands() {
    useEffect(() => { window.scrollTo(0, 0); }, []);

    return (
        <>
            <section className="page-header">
                <div className="page-bg-text">BEFEHLE</div>
                <div className="page-header-grid" aria-hidden="true" />
                <div className="page-header-content">
                    <div className="page-tag">// Referenz</div>
                    <h1 className="page-title">Befehle</h1>
                    <p className="page-subtitle">
                        Alle Slash-Befehle im Überblick. Vieles läuft zusätzlich über Knöpfe
                        direkt in den Nachrichten.
                    </p>
                </div>
            </section>

            <section className="content">
                {GROUPS.map(([group, commands]) => (
                    <div className="roadmap-group" key={group}>
                        <h2 className="settings-title">
                            // {group}
                            {group === 'Moderation' && <IconLock size={13} />}
                            {group === 'Einrichtung' && <IconLock size={13} />}
                        </h2>
                        <div className="cmd-list">
                            {commands.map(([name, desc]) => (
                                <div className="cmd-row" key={name}>
                                    <code className="cmd-name">{name}</code>
                                    <span className="cmd-desc">{desc}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
                <p className="notice">
                    Moderations- und Einrichtungs-Befehle sind Mitgliedern mit den passenden
                    Discord-Rechten vorbehalten.
                </p>
            </section>
        </>
    );
}