@php
    $p = $preferences;
    $prof = $p['profile'] ?? [];
    $n = $p['notifications'] ?? [];
    $r = $p['regional'] ?? [];
    $a = $p['appearance'] ?? [];
    $pr = $p['privacy'] ?? [];
    $ex = $p['exports'] ?? [];
    $lastExport = !empty($ex['lastExportAt']) ? \Illuminate\Support\Carbon::parse($ex['lastExportAt'])->toFormattedDateString() : __('budgets.settings_page.not_yet');
    $currentRoleSlug = (string) (auth()->user()?->role ?? 'user');
    $__roleLabels = (array) __('budgets.users_page.roles');
    $currentRole = $__roleLabels[$currentRoleSlug] ?? ucfirst(str_replace('_', ' ', $currentRoleSlug));
    $__sec = collect($sections)->firstWhere('id', $activeSection);
    $activeSummary = is_array($__sec) ? ($__sec['summary'] ?? '') : '';
@endphp

<div>
<x-top-bar :title="__('budgets.settings_page.title')" :subtitle="__('budgets.settings_page.subtitle')" />

<div class="mx-auto w-full max-w-5xl space-y-4 md:space-y-6">
    {{-- Small screens: horizontal section picker (scrollable; avoids full-width stacked nav) --}}
    <nav class="md:hidden -mx-1 snap-x snap-mandatory overflow-x-auto overscroll-x-contain px-1 pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" aria-label="{{ __('budgets.settings_page.title') }}">
        <div class="flex w-max min-w-full items-stretch justify-start gap-1.5 sm:gap-2">
            @foreach ($sections as $section)
                <button
                    type="button"
                    wire:click="setActiveSection('{{ $section['id'] }}')"
                    @if ($activeSection === $section['id']) aria-current="page" @endif
                    class="snap-start flex max-w-[8.25rem] shrink-0 flex-col items-center gap-1 rounded-xl border px-2.5 py-2.5 text-center text-xs font-semibold leading-snug ios-transition ios-press sm:max-w-[9.5rem] sm:px-3 {{ $activeSection === $section['id'] ? 'border-primary/35 bg-primary/10 text-primary shadow-sm' : 'border-border/80 bg-card text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground' }}"
                >
                    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg {{ $activeSection === $section['id'] ? 'bg-background text-primary' : 'bg-muted/80 text-muted-foreground' }}">
                        <i data-lucide="{{ $section['icon'] }}" class="h-4 w-4"></i>
                    </span>
                    <span class="line-clamp-2 w-full hyphens-auto">{{ $section['label'] }}</span>
                </button>
            @endforeach
        </div>
    </nav>

    <div class="flex flex-col gap-4 md:flex-row md:items-start md:gap-6 lg:gap-8">
        {{-- md+: fixed-width sticky sidebar next to content --}}
        <aside class="hidden w-56 shrink-0 md:block">
            <nav
                class="sticky top-20 space-y-1 rounded-xl border border-border bg-card p-2 shadow-sm"
                aria-label="{{ __('budgets.settings_page.title') }}"
            >
                @foreach ($sections as $section)
                    <button
                        type="button"
                        wire:click="setActiveSection('{{ $section['id'] }}')"
                        @if ($activeSection === $section['id']) aria-current="page" @endif
                        class="group flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm ios-transition ios-press {{ $activeSection === $section['id'] ? 'bg-primary/10 text-primary' : 'text-foreground/80 hover:bg-muted/60 hover:text-foreground' }}"
                    >
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {{ $activeSection === $section['id'] ? 'bg-background text-primary' : 'bg-muted text-muted-foreground group-hover:text-foreground' }}">
                            <i data-lucide="{{ $section['icon'] }}" class="h-4 w-4"></i>
                        </span>
                        <span class="min-w-0 flex-1 font-medium leading-snug">{{ $section['label'] }}</span>
                    </button>
                @endforeach
            </nav>
        </aside>

        <section class="min-w-0 flex-1 rounded-xl border border-border bg-card shadow-sm">
            <div class="p-4 sm:p-6">
                @if ($activeSection === 'account')
                    <div class="space-y-6" x-data="{ accountTab: 'personal' }">
                        <div>
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight">{{ __('budgets.settings_page.panels.account.title') }}</h2>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.account.subtitle') }}</p>
                            </div>
                        </div>
                        <div class="rounded-lg border border-border bg-background p-3.5">
                            <div class="flex items-center gap-4">
                                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-base font-semibold text-primary">
                                    {{ \App\Livewire\SettingsPage::initials((string) ($prof['displayName'] ?? '')) }}
                                </div>
                                <div>
                                    <p class="text-sm font-semibold">{{ $prof['displayName'] ?? '' }}</p>
                                    <p class="text-xs text-muted-foreground">{{ $prof['email'] ?? '' }}</p>
                                </div>
                            </div>
                        </div>
                        <section class="rounded-lg border border-border bg-card p-2">
                            <div class="grid grid-cols-2 gap-1 sm:grid-cols-2">
                                <button type="button" @click="accountTab = 'personal'" :class="accountTab === 'personal' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'" class="rounded-md px-2 py-2 text-sm font-semibold ios-transition-fast ios-press">{{ __('budgets.profile_page.tab_personal') }}</button>
                                <button type="button" @click="accountTab = 'money'" :class="accountTab === 'money' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'" class="rounded-md px-2 py-2 text-sm font-semibold ios-transition-fast ios-press">{{ __('budgets.profile_page.tab_financial') }}</button>
                            </div>
                        </section>
                        <div x-show="accountTab === 'personal'" x-cloak class="space-y-4">
                            <div class="grid gap-4 sm:grid-cols-2">
                                <div class="space-y-2">
                                    <label class="text-sm font-medium">{{ __('budgets.profile_page.first_name') }}</label>
                                    <input type="text" wire:model="profileDraft.firstName" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm" />
                                    @error('profileDraft.firstName')
                                        <p class="text-xs text-expense">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium">{{ __('budgets.profile_page.last_name') }}</label>
                                    <input type="text" wire:model="profileDraft.lastName" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm" />
                                    @error('profileDraft.lastName')
                                        <p class="text-xs text-expense">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.account.display_name') }}</label>
                                    <input type="text" wire:model="accountDraft.displayName" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm" />
                                    @error('accountDraft.displayName')
                                        <p class="text-xs text-expense">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.account.email') }}</label>
                                    <input type="email" wire:model="accountDraft.email" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm" />
                                    @error('accountDraft.email')
                                        <p class="text-xs text-expense">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium">{{ __('budgets.profile_page.phone') }}</label>
                                    <input type="text" wire:model="profileDraft.phone" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm" />
                                    @error('profileDraft.phone')
                                        <p class="text-xs text-expense">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="space-y-2">
                                    <label class="text-sm font-medium">{{ __('budgets.profile_page.timezone') }}</label>
                                    <input type="text" wire:model="profileDraft.timezone" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm" />
                                    @error('profileDraft.timezone')
                                        <p class="text-xs text-expense">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="space-y-2 sm:col-span-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.account.password') }}</label>
                                <div class="grid gap-3 sm:grid-cols-3">
                                    <div class="space-y-1">
                                        <input
                                            type="password"
                                            wire:model="passwordDraft.currentPassword"
                                            placeholder="{{ __('budgets.settings_page.panels.account.current_password') }}"
                                            class="min-w-[200px] flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm"
                                        />
                                        @error('passwordDraft.currentPassword')
                                            <p class="text-xs text-expense">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="space-y-1">
                                        <input
                                            type="password"
                                            wire:model="passwordDraft.newPassword"
                                            placeholder="{{ __('budgets.settings_page.panels.account.new_password') }}"
                                            class="min-w-[200px] flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm"
                                        />
                                        @error('passwordDraft.newPassword')
                                            <p class="text-xs text-expense">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="space-y-1">
                                        <input
                                            type="password"
                                            wire:model="passwordDraft.newPasswordConfirmation"
                                            placeholder="{{ __('budgets.settings_page.panels.account.confirm_new_password') }}"
                                            class="min-w-[200px] flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm"
                                        />
                                        @error('passwordDraft.newPasswordConfirmation')
                                            <p class="text-xs text-expense">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <button type="button" wire:click="changePassword" class="mt-3 inline-flex items-center justify-center rounded-2xl border border-border bg-background px-4 py-2 text-sm font-semibold hover:bg-muted/50 ios-transition-fast ios-press">
                                    <i data-lucide="key-round" class="mr-2 h-4 w-4"></i>
                                    {{ __('budgets.settings_page.panels.account.reset') }}
                                </button>
                            </div>
                        </div>
                        <div x-show="accountTab === 'money'" x-cloak class="grid gap-2 sm:grid-cols-3">
                            <div class="rounded-lg border border-border bg-background p-3">
                                <p class="text-[11px] text-muted-foreground">{{ __('budgets.profile_page.money_monthly_income') }}</p>
                                <input
                                    id="settingsMonthlyIncome"
                                    type="text"
                                    inputmode="decimal"
                                    x-data="{
                                        money: '{{ number_format((float) $this->profileMonthlyIncome, 2, ',', '.') }}',
                                        parse(v) {
                                            const normalized = String(v).replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
                                            const parsed = Number.parseFloat(normalized);
                                            return Number.isFinite(parsed) ? parsed : 0;
                                        },
                                        format(v) {
                                            return new Intl.NumberFormat('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(v);
                                        }
                                    }"
                                    x-model="money"
                                    @focus="money = String(parse(money)).replace('.', ',')"
                                    @blur="const parsed = parse(money); money = format(parsed); $wire.set('profileMonthlyIncome', parsed)"
                                    class="mt-2 h-10 w-full rounded-lg border border-input bg-background px-3 text-sm font-semibold"
                                />
                            </div>
                            <div class="rounded-lg border border-border bg-background p-3">
                                <p class="text-[11px] text-muted-foreground">{{ __('budgets.profile_page.money_spending_limit') }}</p>
                                <input
                                    id="settingsMonthlyLimit"
                                    type="text"
                                    inputmode="decimal"
                                    x-data="{
                                        money: '{{ number_format((float) $this->profileMonthlyLimit, 2, ',', '.') }}',
                                        parse(v) {
                                            const normalized = String(v).replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
                                            const parsed = Number.parseFloat(normalized);
                                            return Number.isFinite(parsed) ? parsed : 0;
                                        },
                                        format(v) {
                                            return new Intl.NumberFormat('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(v);
                                        }
                                    }"
                                    x-model="money"
                                    @focus="money = String(parse(money)).replace('.', ',')"
                                    @blur="const parsed = parse(money); money = format(parsed); $wire.set('profileMonthlyLimit', parsed)"
                                    class="mt-2 h-10 w-full rounded-lg border border-input bg-background px-3 text-sm font-semibold"
                                />
                            </div>
                            <div class="rounded-lg border border-border bg-background p-3">
                                <p class="text-[11px] text-muted-foreground">{{ __('budgets.profile_page.money_savings_target') }}</p>
                                <input
                                    id="settingsSavingsGoal"
                                    type="text"
                                    inputmode="decimal"
                                    x-data="{
                                        money: '{{ number_format((float) $this->profileSavingsGoal, 2, ',', '.') }}',
                                        parse(v) {
                                            const normalized = String(v).replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
                                            const parsed = Number.parseFloat(normalized);
                                            return Number.isFinite(parsed) ? parsed : 0;
                                        },
                                        format(v) {
                                            return new Intl.NumberFormat('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(v);
                                        }
                                    }"
                                    x-model="money"
                                    @focus="money = String(parse(money)).replace('.', ',')"
                                    @blur="const parsed = parse(money); money = format(parsed); $wire.set('profileSavingsGoal', parsed)"
                                    class="mt-2 h-10 w-full rounded-lg border border-input bg-background px-3 text-sm font-semibold"
                                />
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-3">
                            <button type="button" wire:click="saveAccount" class="inline-flex flex-1 items-center justify-center rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground sm:flex-none ios-transition-fast ios-press">{{ __('budgets.settings_page.panels.account.save_account') }}</button>
                        </div>
                        <div class="rounded-lg border border-expense/20 bg-expense/5 p-4">
                            <p class="text-sm font-semibold text-expense">{{ __('budgets.settings_page.panels.account.danger_title') }}</p>
                            <p class="mt-1 text-xs text-muted-foreground">{{ __('budgets.settings_page.panels.account.danger_subtitle') }}</p>
                            <div class="mt-3 space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.account.confirm_delete_word') }}</label>
                                <input
                                    type="text"
                                    wire:model="dangerConfirmation"
                                    placeholder="{{ __('budgets.settings_page.panels.account.confirm_delete_word_placeholder') }}"
                                    class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm"
                                />
                                @error('dangerConfirmation')
                                    <p class="text-xs text-expense">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="mt-4 flex flex-col gap-2 sm:flex-row">
                                <button
                                    type="button"
                                    x-on:click="if (confirm('{{ __('budgets.settings_page.panels.account.clear_data_confirm') }}')) { $wire.clearAllData() }"
                                    class="inline-flex items-center justify-center rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs font-semibold text-warning ios-transition-fast ios-press"
                                >
                                    <i data-lucide="rotate-ccw" class="mr-2 h-4 w-4"></i>
                                    {{ __('budgets.settings_page.panels.account.clear_data') }}
                                </button>
                                <button
                                    type="button"
                                    x-on:click="if (confirm('{{ __('budgets.settings_page.panels.account.delete_account_confirm') }}')) { $wire.deleteAccount() }"
                                    class="inline-flex items-center justify-center rounded-lg border border-expense/30 bg-expense/10 px-3 py-2 text-xs font-semibold text-expense ios-transition-fast ios-press"
                                >
                                    <i data-lucide="trash-2" class="mr-2 h-4 w-4"></i>
                                    {{ __('budgets.settings_page.panels.account.delete_account') }}
                                </button>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($activeSection === 'notifications')
                    <div class="space-y-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight">{{ __('budgets.settings_page.panels.notifications.title') }}</h2>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.notifications.subtitle') }}</p>
                            </div>
                            <div class="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                                {{ __('budgets.settings_page.section_badge_active') }}
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.notifications.budget_alerts_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.notifications.budget_alerts_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($n['budgetAlerts'])) wire:change="setNotif('budgetAlerts', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.notifications.bill_reminders_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.notifications.bill_reminders_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($n['billReminders'])) wire:change="setNotif('billReminders', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.notifications.weekly_digest_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.notifications.weekly_digest_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($n['weeklyDigest'])) wire:change="setNotif('weeklyDigest', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.notifications.security_alerts_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.notifications.security_alerts_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($n['securityAlerts'])) wire:change="setNotif('securityAlerts', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('notifications.types.system_push_prompt_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('notifications.types.system_push_prompt_message') }}</p>
                                </div>
                                <div class="flex items-center gap-2">
                                    <button
                                        type="button"
                                        class="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-semibold ios-transition-fast ios-press"
                                        @click="window.dispatchEvent(new CustomEvent('budgets:request-push-permission'))"
                                    >
                                        {{ __('notifications.types.system_push_prompt_enable') }}
                                    </button>
                                    <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($n['pushNotifications'])) wire:change="setNotif('pushNotifications', $event.target.checked)" />
                                </div>
                            </div>
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.notifications.digest_frequency') }}</label>
                                <select wire:change="setDigestFrequency($event.target.value)" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm">
                                    <option value="daily" @selected(($n['digestFrequency'] ?? '') === 'daily')>{{ __('budgets.settings_page.digest_freq.daily') }}</option>
                                    <option value="weekly" @selected(($n['digestFrequency'] ?? 'weekly') === 'weekly')>{{ __('budgets.settings_page.digest_freq.weekly') }}</option>
                                    <option value="monthly" @selected(($n['digestFrequency'] ?? '') === 'monthly')>{{ __('budgets.settings_page.digest_freq.monthly') }}</option>
                                </select>
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ trans_choice('budgets.settings_page.panels.notifications.reminder_lead', (int) ($n['reminderLeadDays'] ?? 3), ['count' => (int) ($n['reminderLeadDays'] ?? 3)]) }}</label>
                                <input type="range" min="1" max="7" step="1" value="{{ (int) ($n['reminderLeadDays'] ?? 3) }}" wire:change="setReminderLead((int) $event.target.value)" class="w-full accent-primary" />
                            </div>
                        </div>
                    </div>
                @endif

                @if ($activeSection === 'currency')
                    <div class="space-y-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight">{{ __('budgets.settings_page.panels.currency.title') }}</h2>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.currency.subtitle') }}</p>
                            </div>
                            <div class="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                                {{ __('budgets.settings_page.section_badge_active') }}
                            </div>
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.currency.language') }}</label>
                                <select wire:change="setLanguage($event.target.value)" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm">
                                    @foreach (\App\Support\LocaleOptions::available() as $loc)
                                        <option value="{{ $loc }}" @selected(app()->getLocale() === $loc)>{{ __('budgets.landing.lang_options.'.$loc) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.currency.currency') }}</label>
                                <select wire:change="setRegional('currency', $event.target.value)" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm">
                                    <option value="EUR" @selected(($r['currency'] ?? '') === 'EUR')>EUR</option>
                                    <option value="USD" @selected(($r['currency'] ?? '') === 'USD')>USD</option>
                                    <option value="GBP" @selected(($r['currency'] ?? '') === 'GBP')>GBP</option>
                                </select>
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.currency.region') }}</label>
                                <select wire:change="setRegional('region', $event.target.value)" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm">
                                    @foreach ((array) __('budgets.settings_page.panels.currency.region_options') as $tz)
                                        @if (is_array($tz) && isset($tz['value'], $tz['label']))
                                            <option value="{{ $tz['value'] }}" @selected(($r['region'] ?? '') === $tz['value'])>{{ $tz['label'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.currency.date_format') }}</label>
                                <select wire:change="setRegional('dateFormat', $event.target.value)" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm">
                                    <option value="DD/MM/YYYY" @selected(($r['dateFormat'] ?? '') === 'DD/MM/YYYY')>DD/MM/YYYY</option>
                                    <option value="MM/DD/YYYY" @selected(($r['dateFormat'] ?? '') === 'MM/DD/YYYY')>MM/DD/YYYY</option>
                                    <option value="YYYY-MM-DD" @selected(($r['dateFormat'] ?? '') === 'YYYY-MM-DD')>YYYY-MM-DD</option>
                                </select>
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.currency.first_day_of_week') }}</label>
                                <select wire:change="setRegional('firstDayOfWeek', $event.target.value)" class="flex h-10 w-full rounded-2xl border border-input bg-background px-3 text-sm">
                                    <option value="monday" @selected(($r['firstDayOfWeek'] ?? '') === 'monday')>{{ __('budgets.settings_page.panels.currency.weekday_monday') }}</option>
                                    <option value="sunday" @selected(($r['firstDayOfWeek'] ?? '') === 'sunday')>{{ __('budgets.settings_page.panels.currency.weekday_sunday') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="rounded-[24px] border border-border bg-background/60 p-4 text-sm text-muted-foreground">
                            {!! __('budgets.settings_page.panels.currency.regional_summary_html', [
                                'region' => e(\App\Livewire\SettingsPage::regionSummary($p)),
                                'date_format' => e((string) ($r['dateFormat'] ?? '')),
                            ]) !!}
                        </div>
                    </div>
                @endif

                @if ($activeSection === 'appearance')
                    <div class="space-y-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight">{{ __('budgets.settings_page.panels.appearance.title') }}</h2>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.appearance.subtitle') }}</p>
                            </div>
                            <div class="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                                {{ __('budgets.settings_page.section_badge_active') }}
                            </div>
                        </div>
                        <div class="grid gap-3 sm:grid-cols-3">
                            @foreach ((array) __('budgets.settings_page.panels.appearance.theme_cards') as $opt)
                                @if (is_array($opt) && isset($opt['id'], $opt['icon'], $opt['title'], $opt['hint']))
                                <button type="button" wire:click="setTheme('{{ $opt['id'] }}')" class="rounded-[24px] border p-4 text-left ios-transition ios-press {{ ($a['theme'] ?? '') === $opt['id'] ? 'border-primary/30 bg-primary/10' : 'border-border bg-background/60 hover:bg-background' }}">
                                    <i data-lucide="{{ $opt['icon'] }}" class="mb-4 h-5 w-5 text-primary"></i>
                                    <p class="text-sm font-semibold">{{ $opt['title'] }}</p>
                                    <p class="mt-1 text-xs text-muted-foreground">{{ $opt['hint'] }}</p>
                                </button>
                                @endif
                            @endforeach
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.appearance.compact_mode_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.appearance.compact_mode_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($a['compactMode'])) wire:change="setAppearanceBool('compactMode', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.appearance.reduced_motion_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.appearance.reduced_motion_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($a['reducedMotion'])) wire:change="setAppearanceBool('reducedMotion', $event.target.checked)" />
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.appearance.dashboard_density') }}</label>
                            <select wire:change="setDashboardDensity($event.target.value)" class="flex h-10 w-full max-w-md rounded-2xl border border-input bg-background px-3 text-sm">
                                <option value="comfortable" @selected(($a['dashboardDensity'] ?? '') === 'comfortable')>{{ __('budgets.settings_page.panels.appearance.density_comfortable') }}</option>
                                <option value="compact" @selected(($a['dashboardDensity'] ?? '') === 'compact')>{{ __('budgets.settings_page.panels.appearance.density_compact') }}</option>
                            </select>
                        </div>
                    </div>
                @endif

                @if ($activeSection === 'privacy')
                    <div class="space-y-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight">{{ __('budgets.settings_page.panels.privacy.title') }}</h2>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.privacy.subtitle') }}</p>
                            </div>
                            <div class="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                                {{ __('budgets.settings_page.section_badge_active') }}
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.privacy.two_factor_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.privacy.two_factor_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($pr['twoFactorEnabled'])) wire:change="setPrivacyBool('twoFactorEnabled', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.privacy.biometric_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.privacy.biometric_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($pr['biometricUnlock'])) wire:change="setPrivacyBool('biometricUnlock', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.privacy.private_mode_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.privacy.private_mode_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($pr['privateMode'])) wire:change="setPrivacyBool('privateMode', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.privacy.trusted_devices_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.privacy.trusted_devices_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($pr['trustedDevicesOnly'])) wire:change="setPrivacyBool('trustedDevicesOnly', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.privacy.share_usage_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.privacy.share_usage_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($pr['shareUsageData'])) wire:change="setPrivacyBool('shareUsageData', $event.target.checked)" />
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.privacy.session_timeout', ['minutes' => (int) ($pr['sessionTimeoutMinutes'] ?? 30)]) }}</label>
                            <input type="range" min="15" max="60" step="15" value="{{ (int) ($pr['sessionTimeoutMinutes'] ?? 30) }}" wire:change="setSessionTimeout((int) $event.target.value)" class="w-full max-w-md accent-primary" />
                        </div>
                    </div>
                @endif

                @if ($activeSection === 'export')
                    <div class="space-y-6">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight">{{ __('budgets.settings_page.panels.export.title') }}</h2>
                                <p class="mt-1 text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.export.subtitle') }}</p>
                            </div>
                            <div class="rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                                {{ __('budgets.settings_page.section_badge_active') }}
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.export.include_charts_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.export.include_charts_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($ex['includeCharts'])) wire:change="setExportBool('includeCharts', $event.target.checked)" />
                            </div>
                            <div class="flex items-center justify-between gap-4 rounded-[24px] border border-border bg-background/60 px-4 py-4">
                                <div>
                                    <p class="text-sm font-semibold">{{ __('budgets.settings_page.panels.export.include_notes_title') }}</p>
                                    <p class="text-sm text-muted-foreground">{{ __('budgets.settings_page.panels.export.include_notes_body') }}</p>
                                </div>
                                <input type="checkbox" class="h-4 w-4 rounded border-border" @checked(!empty($ex['includeNotes'])) wire:change="setExportBool('includeNotes', $event.target.checked)" />
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium">{{ __('budgets.settings_page.panels.export.default_format') }}</label>
                            <select wire:change="setDefaultExportFormat($event.target.value)" class="flex h-10 w-full max-w-md rounded-2xl border border-input bg-background px-3 text-sm">
                                <option value="pdf" @selected(($ex['defaultFormat'] ?? '') === 'pdf')>{{ __('budgets.settings_page.panels.export.format_pdf') }}</option>
                                <option value="csv" @selected(($ex['defaultFormat'] ?? '') === 'csv')>{{ __('budgets.settings_page.panels.export.format_csv') }}</option>
                            </select>
                        </div>
                        <div class="grid gap-3 sm:grid-cols-2">
                            <button type="button" wire:click="exportData('pdf')" class="inline-flex items-center justify-center rounded-2xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground ios-transition-fast ios-press">
                                <i data-lucide="file-down" class="mr-2 h-4 w-4"></i>
                                {{ __('budgets.settings_page.panels.export.export_pdf') }}
                            </button>
                            <button type="button" wire:click="exportData('csv')" class="inline-flex items-center justify-center rounded-2xl border border-border bg-background px-4 py-2.5 text-sm font-semibold hover:bg-muted/50 ios-transition-fast ios-press">
                                <i data-lucide="download" class="mr-2 h-4 w-4"></i>
                                {{ __('budgets.settings_page.panels.export.export_csv') }}
                            </button>
                        </div>
                    </div>
                @endif

                <div class="my-5 h-px bg-border"></div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <p class="text-sm text-muted-foreground">{{ $activeSummary }}</p>
                    <div class="flex flex-col gap-3 sm:flex-row">
                        <button type="button" wire:click="resetAll" class="inline-flex items-center justify-center rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-semibold hover:bg-muted/50 ios-transition-fast ios-press">{{ __('budgets.settings_page.reset_all') }}</button>
                        <button type="button" wire:click="toastLogout" class="inline-flex items-center justify-center rounded-lg border border-expense/20 bg-background px-4 py-2.5 text-sm font-semibold text-expense hover:bg-expense/5 ios-transition-fast ios-press">
                            <i data-lucide="log-out" class="mr-2 h-4 w-4"></i>
                            {{ __('budgets.settings_page.log_out') }}
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
</div>