<?php $pageTitle = 'Hilfe & Handbuch'; ?>
<div class="page-header">
    <div class="page-header-left">
        <?php if (!Auth::check()): ?>
        <a href="/" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Startseite
        </a>
        <?php endif; ?>
        <h1 class="page-title">Hilfe & Handbuch</h1>
    </div>
</div>

<p style="color:var(--text-muted);margin-bottom:2rem;max-width:700px;font-size:1rem;line-height:1.7">
    Wählen Sie ein Thema, um die passende Dokumentation zu öffnen.
</p>

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin-bottom:2.5rem">

    <a href="/help/group-admin" class="card help-role-card">
        <div class="card-body" style="display:flex;gap:16px;align-items:flex-start">
            <div class="help-role-icon" style="background:#ede9fe;color:#7c3aed">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
            </div>
            <div>
                <div style="font-weight:700;font-size:1.05rem;margin-bottom:5px;color:var(--text-primary)">Gruppenadmin</div>
                <div style="font-size:.95rem;color:var(--text-muted);line-height:1.5">Benutzer einladen, verwalten und Gruppen organisieren.</div>
            </div>
        </div>
    </a>

    <a href="/help/project-manager" class="card help-role-card">
        <div class="card-body" style="display:flex;gap:16px;align-items:flex-start">
            <div class="help-role-icon" style="background:#dbeafe;color:#1d4ed8">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            </div>
            <div>
                <div style="font-weight:700;font-size:1.05rem;margin-bottom:5px;color:var(--text-primary)">Projektleiter</div>
                <div style="font-size:.95rem;color:var(--text-muted);line-height:1.5">Projekte erstellen, Aufgaben planen und Teams steuern.</div>
            </div>
        </div>
    </a>

    <a href="/help/task-worker" class="card help-role-card">
        <div class="card-body" style="display:flex;gap:16px;align-items:flex-start">
            <div class="help-role-icon" style="background:#dcfce7;color:#15803d">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
            </div>
            <div>
                <div style="font-weight:700;font-size:1.05rem;margin-bottom:5px;color:var(--text-primary)">Aufgabenbearbeiter</div>
                <div style="font-size:.95rem;color:var(--text-muted);line-height:1.5">Zugewiesene Aufgaben bearbeiten, kommentieren und abschließen.</div>
            </div>
        </div>
    </a>

    <a href="/help/external" class="card help-role-card">
        <div class="card-body" style="display:flex;gap:16px;align-items:flex-start">
            <div class="help-role-icon" style="background:#fef3c7;color:#b45309">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
            </div>
            <div>
                <div style="font-weight:700;font-size:1.05rem;margin-bottom:5px;color:var(--text-primary)">Externer Teilnehmer</div>
                <div style="font-size:.95rem;color:var(--text-muted);line-height:1.5">Zugriff per Link — ohne eigenes Konto arbeiten.</div>
            </div>
        </div>
    </a>

    <a href="/help/notifications" class="card help-role-card">
        <div class="card-body" style="display:flex;gap:16px;align-items:flex-start">
            <div class="help-role-icon" style="background:#fff7ed;color:#c2410c">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            </div>
            <div>
                <div style="font-weight:700;font-size:1.05rem;margin-bottom:5px;color:var(--text-primary)">E-Mail-Benachrichtigungen</div>
                <div style="font-size:.95rem;color:var(--text-muted);line-height:1.5">Wann geht welche Mail an wen? Alle Abläufe visuell erklärt.</div>
            </div>
        </div>
    </a>

</div>

<div class="card">
    <div class="card-header"><h2 class="card-title">Schnellübersicht: Rollen & Rechte</h2></div>
    <div class="card-body" style="padding:0">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Funktion</th>
                    <th style="text-align:center;background:#ede9fe;color:#6d28d9">Gruppenadmin</th>
                    <th style="text-align:center;background:#dbeafe;color:#1d4ed8">Projektleiter</th>
                    <th style="text-align:center;background:#dcfce7;color:#15803d">Bearbeiter</th>
                    <th style="text-align:center;background:#fef3c7;color:#b45309">Extern</th>
                    <th style="text-align:center;background:#f1f5f9;color:#475569">Gast</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $groups = [
                    'Lesen' => [
                        ['Projekt ansehen',                '–', '✓', '✓', '✓', '–'],
                        ['Zugewiesene Aufgaben ansehen',   '–', '–', '–', '–', '✓'],
                    ],
                    'Aufgaben' => [
                        ['Projekte erstellen',             '–', '✓', '–', '–', '–'],
                        ['Aufgaben erstellen',             '–', '✓', '✓', '–', '–'],
                        ['Aufgaben bearbeiten',            '–', '✓', '✓', '–', '–'],
                        ['Aufgabenstatus ändern',          '–', '✓', '✓', '–', '✓'],
                    ],
                    'Kommunikation' => [
                        ['Kommentare schreiben',           '–', '✓', '✓', '–', '✓'],
                        ['Dateianhänge hochladen',         '–', '✓', '✓', '–', '–'],
                    ],
                    'Projektverwaltung' => [
                        ['Mitglieder verwalten',           '–', '✓', '–', '–', '–'],
                        ['Externe einladen',               '–', '✓', '–', '–', '–'],
                        ['Status bearbeiten',              '–', '✓', '–', '–', '–'],
                    ],
                    'Gruppenadministration' => [
                        ['Benutzer zur Gruppe einladen',   '✓', '–', '–', '–', '–'],
                        ['Passwörter zurücksetzen',        '✓', '–', '–', '–', '–'],
                    ],
                    'Konto' => [
                        ['Benachrichtigungen empfangen',   '✓', '✓', '✓', '–', '✓'],
                        ['2FA einrichten',                 '✓', '✓', '✓', '–', '–'],
                    ],
                ];
                $colBg = ['#ede9fe','#dbeafe','#dcfce7','#fef3c7','#f1f5f9'];
                foreach ($groups as $group => $rows): ?>
                <tr>
                    <td colspan="6" class="help-table-group"><?= $group ?></td>
                </tr>
                <?php foreach ($rows as $r): ?>
                <tr>
                    <td style="padding-left:1.25rem"><?= $r[0] ?></td>
                    <?php $cols=[1,2,3,5,4]; foreach($cols as $ci=>$i): ?>
                    <td style="text-align:center;background:<?= $colBg[$ci] ?>;color:<?= $r[$i]==='✓'?'var(--color-success)':'var(--text-muted)' ?>;font-weight:<?= $r[$i]==='✓'?'600':'400' ?>"><?= $r[$i] ?></td>
                    <?php endforeach; ?>
                </tr>
                <?php endforeach; ?>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<style>
.help-role-card { text-decoration:none; transition:box-shadow .15s,transform .15s; }
.help-role-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.12); transform:translateY(-2px); text-decoration:none; }
.help-role-icon { width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.data-table td, .data-table th { font-size:.95rem; }
.help-table-group { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.45rem .85rem;background:#f1f5f9;color:#64748b; }
</style>
