@php
    $title = 'Einstellungen';
    $pageTitle = 'Einstellungen';
    $pageSubtitle = 'Organisation, Branding, Sicherheit und Daten';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6">

        <!-- Left: Sections -->
        <aside class="col-span-12 lg:col-span-3">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="text-sm text-gray-500">Bereiche</div>
                <div class="mt-3 space-y-1">
                    <a href="#org"
                        class="block rounded-xl bg-brand/10 px-3 py-2.5 text-sm font-semibold text-brand ring-1 ring-brand/15">Organisation</a>
                    <a href="#branding"
                        class="block rounded-xl px-3 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-100">Branding</a>
                    <a href="#security"
                        class="block rounded-xl px-3 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-100">Sicherheit</a>
                    <a href="#data"
                        class="block rounded-xl px-3 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-100">Daten</a>
                </div>

                <div class="mt-5 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                    <div class="text-sm font-semibold">Hinweis</div>
                    <div class="mt-2 text-sm text-gray-600">
                        UX-only: Speichern/Änderungen werden später in der echten Implementierung angebunden.
                    </div>
                </div>
            </div>
        </aside>

        <!-- Right: Content -->
        <section class="col-span-12 lg:col-span-9 space-y-6">

            <!-- Organisation -->
            <div id="org" class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-semibold">Organisation</h2>
                        <p class="mt-1 text-sm text-gray-600">Stammdaten und Kontaktinformationen.</p>
                    </div>
                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Speichern
                    </button>
                </div>

                <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="text-sm font-semibold">Organisationsname</label>
                        <input type="text" value="Rettungsdienst Muster GmbH"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Kontakt E-Mail</label>
                        <input type="email" value="office@firma.at"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Telefon (optional)</label>
                        <input type="text" placeholder="+43 …"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Adresse (optional)</label>
                        <input type="text" placeholder="Straße, PLZ, Ort"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                    </div>
                </div>
            </div>

            <!-- Branding -->
            <div id="branding" class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-semibold">Branding</h2>
                        <p class="mt-1 text-sm text-gray-600">Farben und Logo für die Oberfläche.</p>
                    </div>
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Zurücksetzen
                    </button>
                </div>

                <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="text-sm font-semibold">Primärfarbe</label>
                        <div class="mt-2 flex items-center gap-3">
                            <div class="h-10 w-10 rounded-xl bg-brand ring-1 ring-brand/30"></div>
                            <input type="text" value="#00923f"
                                class="w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        </div>
                        <div class="mt-2 text-xs text-gray-500">UX-only: Später als Theme gespeichert.</div>
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Logo</label>
                        <div class="mt-2 rounded-2xl border border-dashed border-gray-300 bg-gray-50 p-5">
                            <div class="flex items-center justify-between gap-3">
                                <div class="text-sm text-gray-600">
                                    PNG/SVG empfohlen
                                    <div class="text-xs text-gray-500 mt-1">UX-only: Upload wird später funktional.
                                    </div>
                                </div>
                                <button type="button"
                                    class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                    Logo wählen
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="md:col-span-2 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-sm font-semibold">Vorschau</div>
                        <div class="mt-3 flex flex-wrap gap-2">
                            <span class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white">Primary
                                Button</span>
                            <span
                                class="rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-semibold">Secondary</span>
                            <span
                                class="rounded-full bg-brand/10 px-3 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15">Badge</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Security -->
            <div id="security" class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-semibold">Sicherheit</h2>
                        <p class="mt-1 text-sm text-gray-600">Login- und Zugriffssicherheit.</p>
                    </div>
                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Speichern
                    </button>
                </div>

                <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="rounded-2xl border border-gray-200 p-4">
                        <div class="text-sm font-semibold">Passwort-Richtlinie</div>
                        <div class="mt-3 space-y-2">
                            <label class="flex items-center gap-2">
                                <input type="checkbox" class="rounded border-gray-300 text-brand focus:ring-brand"
                                    checked>
                                <span class="text-sm text-gray-700">Mind. 10 Zeichen</span>
                            </label>
                            <label class="flex items-center gap-2">
                                <input type="checkbox" class="rounded border-gray-300 text-brand focus:ring-brand"
                                    checked>
                                <span class="text-sm text-gray-700">Zahl + Sonderzeichen</span>
                            </label>
                            <label class="flex items-center gap-2">
                                <input type="checkbox" class="rounded border-gray-300 text-brand focus:ring-brand">
                                <span class="text-sm text-gray-700">Regelmäßiger Wechsel</span>
                            </label>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">UX-only: später als Policy erzwungen.</div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="text-sm font-semibold">2-Faktor-Authentifizierung</div>
                            <span
                                class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                UX-only
                            </span>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            Optional: 2FA für Admin/Leitung verpflichtend.
                        </div>
                        <div class="mt-4 flex gap-2">
                            <button
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Aktivieren
                            </button>
                            <button
                                class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                                Richtlinien
                            </button>
                        </div>
                    </div>

                    <div class="md:col-span-2 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-sm font-semibold">Sessions</div>
                        <div class="mt-2 text-sm text-gray-600">
                            UX-only: „Alle Sessions abmelden“ (z. B. bei Gerätewechsel).
                        </div>
                        <button
                            class="mt-3 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                            Alle Sessions abmelden
                        </button>
                    </div>
                </div>
            </div>

            <!-- Data -->
            <div id="data" class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-semibold">Daten</h2>
                        <p class="mt-1 text-sm text-gray-600">Export, Backup und Datenpflege.</p>
                    </div>
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Hilfe
                    </button>
                </div>

                <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="rounded-2xl border border-gray-200 p-4">
                        <div class="text-sm font-semibold">Datenexport</div>
                        <div class="mt-2 text-sm text-gray-600">Benutzer, RTWs, Dokumente, Erinnerungen, Schäden.</div>
                        <div class="mt-4 flex gap-2">
                            <button
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Export starten
                            </button>
                            <button
                                class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                                Auswahl…
                            </button>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">UX-only: später als Download/Job.</div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 p-4">
                        <div class="text-sm font-semibold">Backup</div>
                        <div class="mt-2 text-sm text-gray-600">Geplante Backups (z. B. täglich).</div>
                        <div class="mt-4 flex gap-2">
                            <button
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Backup erstellen
                            </button>
                            <button
                                class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                                Plan ändern
                            </button>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">UX-only: später via Queue + Storage.</div>
                    </div>

                    <div class="md:col-span-2 rounded-2xl border border-red-200 bg-red-50 p-4">
                        <div class="flex items-center justify-between">
                            <div class="text-sm font-semibold text-red-800">Gefahrenzone</div>
                            <span
                                class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-red-700 ring-1 ring-red-200">
                                Vorsicht
                            </span>
                        </div>
                        <div class="mt-2 text-sm text-red-800">
                            UX-only: Daten löschen/Reset (wird später geschützt und bestätigt).
                        </div>
                        <div class="mt-4 flex gap-2">
                            <button
                                class="rounded-xl border border-red-200 bg-white px-4 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-100">
                                Daten zurücksetzen
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
</x-ux-layout>