<section id="serialcheck-root" class="mx-auto max-w-3xl py-8 px-4">
    <div class="mb-4 text-center">
        <h2 class="text-2xl font-heading font-bold text-brand-primary mb-2">
            Seriennummer prüfen (Quickcheck)
        </h2>
        <p class="text-sm text-brand-muted">
            Gib die Seriennummer deines USB-Sticks ein und wir prüfen die Plausibilität
            sowie die Konsistenz deiner Herstellerangabe zu Vendor-ID (falls vorhanden).
        </p>
    </div>

    <div class="bg-white/80 dark:bg-slate-900/70 border border-slate-200/70 dark:border-slate-700 rounded-2xl shadow-sm p-4 mb-4">
        <form id="serialcheck-form" class="space-y-4">
            <div>
                <label for="sc-manufacturer" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
                    Hersteller (laut Aufdruck, optional)
                </label>
                <input
                    type="text"
                    id="sc-manufacturer"
                    name="manufacturer"
                    placeholder="z. B. SanDisk, Kingston..."
                    class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
                />
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label for="sc-vid" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
                        Vendor-ID (VID, optional)
                    </label>
                    <input
                        type="text"
                        id="sc-vid"
                        name="vid"
                        placeholder="z. B. 0781"
                        class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
                    />
                    <p class="mt-1 text-[10px] text-slate-500">
                        Hexadezimal, z. B. 0781 (falls bekannt).
                    </p>
                </div>
                <div>
                    <label for="sc-pid" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
                        Product-ID (PID, optional)
                    </label>
                    <input
                        type="text"
                        id="sc-pid"
                        name="pid"
                        placeholder="z. B. 5581"
                        class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
                    />
                </div>
            </div>

            <div>
                <label for="sc-serial" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
                    Seriennummer (Pflicht)
                </label>
                <input
                    type="text"
                    id="sc-serial"
                    name="serial"
                    required
                    placeholder="Seriennummer genau so eingeben wie angezeigt"
                    class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
                />
            </div>

            <button
                type="submit"
                class="inline-flex items-center justify-center rounded-lg bg-brand-primary text-white text-xs font-semibold px-4 py-2 mt-1 hover:bg-brand-primary/90 focus:outline-none focus:ring-2 focus:ring-brand-primary"
            >
                Seriennummer prüfen
            </button>

            <p class="mt-2 text-[10px] text-slate-500">
                Hinweis: Dieser Quickcheck bewertet nur Plausibilität und Konsistenz und ersetzt keinen
                vollständigen Kapazitäts- oder Geschwindigkeitstest.
            </p>
        </form>
    </div>

    <div id="serialcheck-error" class="hidden border border-red-300 bg-red-50 text-red-800 rounded-xl px-3 py-2 text-xs mb-3">
        <!-- Fehlermeldung -->
    </div>

    <div id="serialcheck-result" class="hidden bg-white/80 dark:bg-slate-900/70 border border-slate-200/70 dark:border-slate-700 rounded-2xl shadow-sm p-4 text-xs">
        <!-- Ergebnis wird per JS eingefügt -->
    </div>
</section>
