<x-profile-layout>
    <div class="space-y-5">
        {{-- Header --}}
        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
            <i class="fa-solid fa-gear text-rose-500"></i>
            Settings
        </h2>

        {{-- Settings Sections --}}
        <div class="space-y-5">

            {{-- Profile Information --}}
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
                <div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400">
                            <i class="fa-solid fa-user-pen text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Profile Information</h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Update your name, email and avatar</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @include('profile.partials.update-profile-information-form')
                </div>
            </div>

            {{-- Passkeys --}}
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
                <div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400">
                            <i class="fa-solid fa-key text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Passkeys</h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Manage WebAuthn passkeys for passwordless login</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    <livewire:passkeys />
                </div>
            </div>

            {{-- Password --}}
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
                <div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
                            <i class="fa-solid fa-lock text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Update Password</h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Keep your account secure</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @include('profile.partials.update-password-form')
                </div>
            </div>

            {{-- Search Blacklist --}}
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
                <div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
                            <i class="fa-solid fa-shield text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Search Blacklist</h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Hide content with specific tags from search results</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @include('profile.partials.update-blacklist-form')
                </div>
            </div>

            {{-- Website Design --}}
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
                <div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">
                            <i class="fa-solid fa-object-group text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Website Design</h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Customize your browsing experience</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @include('profile.partials.update-design-form')
                </div>
            </div>

            {{-- Danger Zone --}}
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-red-200/60 dark:ring-red-800/30 overflow-hidden">
                <div class="p-5 sm:p-6 border-b border-red-200/60 dark:border-red-800/30">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">
                            <i class="fa-solid fa-triangle-exclamation text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold text-red-700 dark:text-red-400">Danger Zone</h3>
                            <p class="text-xs text-red-500 dark:text-red-400">Irreversible actions - proceed with caution</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 sm:p-6">
                    @include('profile.partials.delete-user-form')
                </div>
            </div>
        </div>

        {{-- Delete Account Modal --}}
        @include('profile.partials.delete-user-modal')

        @vite(['resources/js/user-blacklist.js'])
    </div>
</x-profile-layout>