<?php
// fakecheck.php – Template für das Browser-Test-Tool im Bereich /fakecheck
?>
<section class="section-band section-band--soft border-t border-brand-border/60 py-12 sm:py-16" id="fakecheck-tool">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="section-shell fc-container">
    <div class="fc-header">
        <div class="fc-header-text">
            <h2>Browser-basierter USB-Test</h2>
            <p>
                Führe einen Schnelltest direkt im Browser durch – ohne Installation.
                Für tiefere Analysen gibt es später den Pro-Modus mit lokalem Helper.
            </p>
        </div>
        <div class="fc-header-badge">
            <span class="dot"></span>
            <span id="fc-env-label">
                Browser-Modus aktiv – keine Installation nötig
            </span>
        </div>
    </div>

    <div class="fc-layout" id="fc-root">
        <!-- Linke Seite: Steuerung & Fortschritt -->
        <section class="fc-card fc-main">
            <h3 class="fc-card-title">Schritt 1: USB-Stick wählen</h3>
            <p class="fc-card-subtitle">
                Wähle das Wurzelverzeichnis deines USB-Sticks. Der Browser erhält nur Zugriff auf diesen Bereich.
            </p>

            <div class="fc-actions">
                <button type="button" class="fc-btn" id="fc-btn-pick-directory">
                    USB-Stick auswählen
                </button>
                <button type="button" class="fc-btn fc-btn-secondary" id="fc-btn-clear-selection" disabled>
                    Auswahl zurücksetzen
                </button>
            </div>

            <p class="fc-help" id="fc-selected-path-label">
                Noch kein Verzeichnis gewählt.
            </p>

            <div class="fc-alert fc-alert-warn" id="fc-fsapi-warning" style="display:none;">
                Dein Browser unterstützt die File System Access API nicht oder nur eingeschränkt.
                Du kannst dieses Browser-Test-Tool nur mit aktuellen Chrome-/Edge-Versionen voll nutzen.
            </div>

            <hr class="fc-divider">

            <h3 class="fc-card-title">Schritt 2: Testmodus</h3>
            <p class="fc-card-subtitle">
                Wähle, welche Tests du durchführen möchtest. Alle Tests arbeiten nur mit Testdateien
                im gewählten Ordner.
            </p>

            <div class="fc-mode-grid" id="fc-mode-grid">
                <article class="fc-mode-tile" data-mode="quick">
                    <div class="pill">Quick-Check</div>
                    <h4>Basis-Check</h4>
                    <p>Schreibt und liest eine kleine Testdatei, um grundlegende Schreib-/Lesefehler zu erkennen.</p>
                    <small>Empfohlen für einen ersten Eindruck in wenigen Sekunden.</small>
                </article>

                <article class="fc-mode-tile" data-mode="benchmark">
                    <div class="pill">Benchmark</div>
                    <h4>Speed-Test</h4>
                    <p>Misst sequentielle Schreib- und Leseraten auf deinem Stick im Browser.</p>
                    <small>Ideal für „Ist der Stick so langsam, wie er sich anfühlt?“</small>
                </article>

                <article class="fc-mode-tile" data-mode="writeverify">
                    <div class="pill">Write &amp; Verify</div>
                    <h4>Intensiver Dateitest</h4>
                    <p>Schreibt mehrere Testblöcke und prüft sie direkt wieder – nur in Test-Dateien.</p>
                    <small>Dauert länger, liefert aber eine bessere Aussage zur Stabilität.</small>
                </article>

                <article class="fc-mode-tile" data-mode="all">
                    <div class="pill">All-Inclusive</div>
                    <h4>Alle Browser-Tests</h4>
                    <p>Führt Quick-Check, Benchmark und Write/Verify nacheinander aus.</p>
                    <small>Maximale Aussagekraft im Browsermodus (ohne Pro-Helper).</small>
                </article>
            </div>

            <p class="fc-help">
                Hinweis: Diese Tests erzeugen nur eigene Testdateien in deinem gewählten Ordner
                und überschreiben keine bestehenden Dateien. Für vollflächige, destruktive Tests
                ist später der Pro-Helper zuständig.
            </p>

            <hr class="fc-divider">

            <div class="fc-status-line">
                <span id="fc-status-text">Bereit. Wähle zuerst deinen USB-Stick aus.</span>
                <span id="fc-status-mode" class="fc-tag">Kein Modus selektiert</span>
            </div>

            <div class="fc-progress" aria-hidden="true">
                <div class="fc-progress-inner" id="fc-progress-inner"></div>
            </div>

            <div class="fc-actions fc-actions-bottom">
                <button type="button" class="fc-btn" id="fc-btn-start-tests" disabled>
                    Tests starten
                </button>
                <button type="button" class="fc-btn fc-btn-secondary" id="fc-btn-cancel-tests" disabled>
                    Abbrechen
                </button>
            </div>

            <div class="fc-log" id="fc-log"></div>
        </section>

        <!-- Rechte Seite: Ergebnis-Dashboard -->
        <aside class="fc-card fc-sidebar">
            <h3 class="fc-card-title">Ergebnis-Dashboard</h3>
            <p class="fc-card-subtitle">
                Zusammenfassung der Browser-Tests. Für tiefergehende Analysen kannst du später den Pro-Modus nutzen.
            </p>

            <div class="fc-overall-status-wrap">
                <span id="fc-overall-status-pill" class="fc-pill-status fc-pill-ok">
                    <span class="fc-pill-dot"></span>
                    <span id="fc-overall-status-text">Noch kein Test durchgeführt</span>
                </span>
            </div>

            <dl class="fc-kv-list">
                <div class="fc-kv-item">
                    <dt>Modus</dt>
                    <dd id="fc-res-mode">–</dd>
                </div>
                <div class="fc-kv-item">
                    <dt>Gesamtlaufzeit</dt>
                    <dd id="fc-res-duration">–</dd>
                </div>
                <div class="fc-kv-item">
                    <dt>Write-Speed (Ø)</dt>
                    <dd id="fc-res-write-speed">–</dd>
                </div>
                <div class="fc-kv-item">
                    <dt>Read-Speed (Ø)</dt>
                    <dd id="fc-res-read-speed">–</dd>
                </div>
                <div class="fc-kv-item">
                    <dt>Geschriebene Testdaten</dt>
                    <dd id="fc-res-written-bytes">–</dd>
                </div>
                <div class="fc-kv-item">
                    <dt>Verifizierte Testdaten</dt>
                    <dd id="fc-res-verified-bytes">–</dd>
                </div>
            </dl>

            <div class="fc-alert fc-alert-info" id="fc-save-hint" style="display:none;">
                Testergebnisse werden – sofern du eingeloggt bist – automatisch als Resultat gespeichert.
            </div>

            <div class="fc-alert fc-alert-error" id="fc-save-error" style="display:none;">
                Ergebnis konnte nicht automatisch gespeichert werden. Du kannst es später erneut versuchen.
            </div>

            <p class="fc-help">
                Technischer Hinweis: Diese Seite arbeitet ausschließlich mit Testdateien im gewählten Ordner
                und übermittelt keine Inhalte deiner privaten Dateien.
            </p>

            <p class="fc-help">
                Der vollständige JSON-Report ist nach dem Test in der Browser-Konsole einsehbar
                (F12 → Console).
            </p>
        </aside>
    </div>
    </div>
    </div>
</section>
