{{--
    Accessibility Control Center — floating button (bottom-center) + slide-over
    panel. All state lives in the Alpine store `a11y` (resources/js/accessibility.js);
    this file is purely presentational and calls $store.a11y.set()/toggle()/etc.
--}}

{{-- Colorblind-simulation-correction matrices, referenced via filter: url(#id) --}}
<svg width="0" height="0" class="absolute" aria-hidden="true">
    <defs>
        <filter id="a11y-protanopia">
            <feColorMatrix type="matrix" values="0.567 0.433 0 0 0  0.558 0.442 0 0 0  0 0.242 0.758 0 0  0 0 0 1 0" />
        </filter>
        <filter id="a11y-deuteranopia">
            <feColorMatrix type="matrix" values="0.625 0.375 0 0 0  0.7 0.3 0 0 0  0 0.3 0.7 0 0  0 0 0 1 0" />
        </filter>
        <filter id="a11y-tritanopia">
            <feColorMatrix type="matrix" values="0.95 0.05 0 0 0  0 0.433 0.567 0 0  0 0.475 0.525 0 0  0 0 0 1 0" />
        </filter>
        <filter id="a11y-achromatopsia">
            <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0" />
        </filter>
    </defs>
</svg>

<div x-data class="contents">
    <!-- Floating button -->
    <button type="button" @click="$store.a11y.open = !$store.a11y.open"
            aria-haspopup="dialog" :aria-expanded="$store.a11y.open.toString()" aria-controls="a11y-panel"
            title="Accessibility options (Alt+A)" aria-label="Open accessibility control center"
            class="fixed bottom-6 left-1/2 z-40 grid h-14 w-14 -translate-x-1/2 place-items-center rounded-full bg-primary text-white shadow-xl transition duration-300 hover:scale-110 hover:bg-secondary">
        <i class="fa-solid fa-universal-access text-2xl" aria-hidden="true"></i>
    </button>

    <!-- Slide-over panel -->
    <div x-show="$store.a11y.open" x-cloak
         @keydown.escape.window="$store.a11y.open = false"
         class="fixed inset-0 z-[110]">
        <div x-show="$store.a11y.open"
             x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             x-transition:leave="transition duration-200 ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             @click="$store.a11y.open = false"
             aria-hidden="true"
             class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

        <div x-show="$store.a11y.open" x-trap="$store.a11y.open"
             x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="opacity-0 translate-x-8" x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition duration-200 ease-in" x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 translate-x-8"
             role="dialog" aria-modal="true" aria-labelledby="a11y-panel-title" id="a11y-panel"
             class="absolute inset-y-4 right-4 flex w-full max-w-md flex-col overflow-hidden rounded-[24px] border border-white/40 bg-white/85 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-panel/85">

            <!-- Header -->
            <div class="flex-shrink-0 border-b border-slate-200/70 px-6 pb-5 pt-6 dark:border-white/10">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h2 id="a11y-panel-title" class="font-heading text-xl font-extrabold text-slate-900 dark:text-white">Accessibility</h2>
                        <p class="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                            Personalize this website to match your accessibility needs.
                        </p>
                    </div>
                    <button type="button" @click="$store.a11y.open = false" aria-label="Close accessibility panel" title="Close"
                            class="grid h-11 w-11 flex-shrink-0 place-items-center rounded-full text-slate-400 transition duration-200 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-white/10 dark:hover:text-white">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                </div>

                <div class="relative mt-4">
                    <label for="a11y-search" class="sr-only">Search accessibility settings</label>
                    <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-xs text-slate-400" aria-hidden="true"></i>
                    <input id="a11y-search" type="text" x-model="$store.a11y.search" placeholder="Search accessibility settings..."
                           title="Search accessibility settings"
                           class="w-full rounded-xl border border-slate-200 bg-white/70 py-2.5 pl-9 pr-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface/70 dark:text-white dark:focus:border-secondary">
                </div>

                <div class="mt-3 flex items-center justify-between">
                    <span x-show="$store.a11y.saveIndicator" x-transition.opacity class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-secondary-a11y dark:text-secondary">
                        <i class="fa-solid fa-circle-check" aria-hidden="true"></i> Saved
                    </span>
                    <span x-show="!$store.a11y.saveIndicator"></span>
                    <button type="button" @click="$store.a11y.showResetConfirm = true" title="Reset all accessibility settings"
                            class="ml-auto text-xs font-semibold text-slate-500 underline decoration-slate-300 underline-offset-2 transition hover:text-primary dark:text-slate-400 dark:hover:text-secondary">
                        Reset All
                    </button>
                </div>
            </div>

            <!-- Scrollable sections -->
            <div class="flex-1 space-y-1 overflow-y-auto px-4 py-4" x-effect="if ($store.a11y.search) { Object.keys($store.a11y.openSections).forEach(k => $store.a11y.openSections[k] = true) }">

                {{-- ============ SECTION 1: DISPLAY ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('display')" :aria-expanded="$store.a11y.openSections.display.toString()" aria-controls="a11y-sec-display"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-text-height text-primary dark:text-secondary" aria-hidden="true"></i> Display
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.display && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-display" x-show="$store.a11y.openSections.display" x-collapse class="space-y-5 px-3 pb-4 pt-1">

                        <div x-show="$store.a11y.matches('text size')">
                            <div class="mb-2 flex items-center justify-between">
                                <span class="text-xs font-semibold text-slate-600 dark:text-slate-300">Text Size</span>
                                <span class="text-xs font-bold text-primary dark:text-secondary" x-text="$store.a11y.settings.textSizePct + '%'"></span>
                            </div>
                            <input type="range" min="70" max="250" step="5" title="Text size"
                                   aria-label="Text size percentage, 70 to 250 percent"
                                   :value="$store.a11y.settings.textSizePct"
                                   @input="$store.a11y.set('textSizePct', Number($event.target.value))"
                                   class="w-full accent-primary dark:accent-secondary">
                            <div class="mt-1 flex justify-between text-[10px] text-slate-400 dark:text-slate-500">
                                <span>70%</span><span>250%</span>
                            </div>
                            <div class="mt-3 flex items-center gap-2">
                                <button type="button" title="Decrease text size" aria-label="Decrease text size"
                                        @click="$store.a11y.set('textSizePct', Math.max(70, $store.a11y.settings.textSizePct - 10))"
                                        class="a11y-spring grid h-11 w-11 place-items-center rounded-lg border border-slate-200 text-xs font-bold text-slate-600 transition hover:scale-105 dark:border-white/10 dark:text-slate-300">A-</button>
                                <button type="button" title="Reset text size" aria-label="Reset text size to 100 percent"
                                        @click="$store.a11y.set('textSizePct', 100)"
                                        class="a11y-spring grid h-11 flex-1 place-items-center rounded-lg border border-slate-200 text-[11px] font-semibold text-slate-500 transition hover:scale-[1.02] dark:border-white/10 dark:text-slate-400">Reset</button>
                                <button type="button" title="Increase text size" aria-label="Increase text size"
                                        @click="$store.a11y.set('textSizePct', Math.min(250, $store.a11y.settings.textSizePct + 10))"
                                        class="a11y-spring grid h-11 w-11 place-items-center rounded-lg border border-slate-200 text-sm font-bold text-slate-600 transition hover:scale-105 dark:border-white/10 dark:text-slate-300">A+</button>
                            </div>
                            <div class="mt-3 rounded-xl border border-dashed border-slate-200 p-3 dark:border-white/10">
                                <p class="mb-1 text-[10px] font-bold uppercase tracking-wide text-slate-400">Live Preview</p>
                                <p class="text-slate-700 dark:text-slate-200" :style="`font-size: ${$store.a11y.settings.textSizePct}%`">Default 100% — the quick brown fox.</p>
                            </div>
                        </div>

                        <div x-show="$store.a11y.matches('text weight')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Text Weight</p>
                            <div class="grid grid-cols-4 gap-1.5" role="group" aria-label="Text weight">
                                @foreach ([['key' => 'normal', 'label' => 'Normal'], ['key' => 'medium', 'label' => 'Medium'], ['key' => 'bold', 'label' => 'Bold'], ['key' => 'extrabold', 'label' => 'Extra Bold']] as $w)
                                    <button type="button" title="{{ $w['label'] }} text weight" :aria-pressed="($store.a11y.settings.textWeight === '{{ $w['key'] }}').toString()"
                                            @click="$store.a11y.set('textWeight', '{{ $w['key'] }}')"
                                            :class="$store.a11y.settings.textWeight === '{{ $w['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">{{ $w['label'] }}</button>
                                @endforeach
                            </div>
                        </div>

                        <div x-show="$store.a11y.matches('font family')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Font Family</p>
                            <div class="grid grid-cols-3 gap-1.5" role="group" aria-label="Font family">
                                @foreach ([
                                    ['key' => 'default', 'label' => 'Default'],
                                    ['key' => 'sans', 'label' => 'Sans Serif'],
                                    ['key' => 'serif', 'label' => 'Serif'],
                                    ['key' => 'opendyslexic', 'label' => 'OpenDyslexic'],
                                    ['key' => 'readable', 'label' => 'Readable'],
                                    ['key' => 'mono', 'label' => 'Monospace'],
                                ] as $f)
                                    <button type="button" title="{{ $f['label'] }} font" :aria-pressed="($store.a11y.settings.fontFamily === '{{ $f['key'] }}').toString()"
                                            @click="$store.a11y.set('fontFamily', '{{ $f['key'] }}')"
                                            :class="$store.a11y.settings.fontFamily === '{{ $f['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">{{ $f['label'] }}</button>
                                @endforeach
                            </div>
                        </div>

                        <div x-show="$store.a11y.matches('text alignment')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Text Alignment</p>
                            <div class="grid grid-cols-5 gap-1.5" role="group" aria-label="Text alignment">
                                @foreach ([
                                    ['key' => 'default', 'icon' => 'fa-align-left', 'label' => 'Default'],
                                    ['key' => 'left', 'icon' => 'fa-align-left', 'label' => 'Left'],
                                    ['key' => 'center', 'icon' => 'fa-align-center', 'label' => 'Center'],
                                    ['key' => 'right', 'icon' => 'fa-align-right', 'label' => 'Right'],
                                    ['key' => 'justify', 'icon' => 'fa-align-justify', 'label' => 'Justify'],
                                ] as $a)
                                    <button type="button" title="{{ $a['label'] }} alignment" aria-label="{{ $a['label'] }} alignment" :aria-pressed="($store.a11y.settings.textAlign === '{{ $a['key'] }}').toString()"
                                            @click="$store.a11y.set('textAlign', '{{ $a['key'] }}')"
                                            :class="$store.a11y.settings.textAlign === '{{ $a['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring grid rounded-lg border py-2 text-xs transition"><i class="fa-solid {{ $a['icon'] }}" aria-hidden="true"></i></button>
                                @endforeach
                            </div>
                        </div>

                        <div x-show="$store.a11y.matches('text spacing')" class="space-y-4">
                            <p class="text-xs font-semibold text-slate-600 dark:text-slate-300">Text Spacing</p>
                            @foreach ([
                                ['key' => 'letterSpacing', 'label' => 'Letter Spacing', 'min' => 0, 'max' => 8, 'step' => 0.5, 'unit' => 'px'],
                                ['key' => 'wordSpacing', 'label' => 'Word Spacing', 'min' => 0, 'max' => 16, 'step' => 1, 'unit' => 'px'],
                                ['key' => 'lineHeight', 'label' => 'Line Height', 'min' => 1.2, 'max' => 3.0, 'step' => 0.1, 'unit' => ''],
                                ['key' => 'paragraphSpacing', 'label' => 'Paragraph Spacing', 'min' => 0, 'max' => 40, 'step' => 2, 'unit' => 'px'],
                            ] as $sp)
                                <div>
                                    <div class="mb-1.5 flex items-center justify-between">
                                        <span class="text-[11px] font-medium text-slate-500 dark:text-slate-400">{{ $sp['label'] }}</span>
                                        <span class="text-[11px] font-bold text-primary dark:text-secondary" x-text="$store.a11y.settings.{{ $sp['key'] }} + '{{ $sp['unit'] }}'"></span>
                                    </div>
                                    <input type="range" min="{{ $sp['min'] }}" max="{{ $sp['max'] }}" step="{{ $sp['step'] }}"
                                           title="{{ $sp['label'] }}" aria-label="{{ $sp['label'] }}"
                                           :value="$store.a11y.settings.{{ $sp['key'] }}"
                                           @input="$store.a11y.set('{{ $sp['key'] }}', Number($event.target.value))"
                                           class="w-full accent-primary dark:accent-secondary">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- ============ SECTION 2: COLORS & CONTRAST ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('colors')" :aria-expanded="$store.a11y.openSections.colors.toString()" aria-controls="a11y-sec-colors"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-droplet text-primary dark:text-secondary" aria-hidden="true"></i> Colors &amp; Contrast
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.colors && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-colors" x-show="$store.a11y.openSections.colors" x-collapse class="space-y-5 px-3 pb-4 pt-1">
                        <div x-show="$store.a11y.matches('contrast mode')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Contrast Modes</p>
                            <div class="grid grid-cols-2 gap-1.5" role="radiogroup" aria-label="Contrast mode">
                                @foreach ([
                                    ['key' => 'default', 'label' => 'Default'],
                                    ['key' => 'high', 'label' => 'High Contrast'],
                                    ['key' => 'aaa', 'label' => 'WCAG AAA'],
                                    ['key' => 'dark', 'label' => 'Dark Mode'],
                                    ['key' => 'light', 'label' => 'Light Mode'],
                                    ['key' => 'inverted', 'label' => 'Inverted Colors'],
                                ] as $c)
                                    @if (in_array($c['key'], ['dark', 'light']))
                                        <button type="button" title="{{ $c['label'] }}" @click="$store.a11y.setTheme('{{ $c['key'] }}')"
                                                class="a11y-spring rounded-lg border border-slate-200 py-2 text-[11px] font-semibold text-slate-500 transition dark:border-white/10 dark:text-slate-400">
                                            {{ $c['label'] }}
                                        </button>
                                    @else
                                        <button type="button" title="{{ $c['label'] }}" role="radio"
                                                :aria-checked="($store.a11y.settings.contrastMode === '{{ $c['key'] }}').toString()"
                                                @click="$store.a11y.set('contrastMode', '{{ $c['key'] }}')"
                                                :class="$store.a11y.settings.contrastMode === '{{ $c['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                                class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">
                                            {{ $c['label'] }}
                                        </button>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div x-show="$store.a11y.matches('color filter')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Color Filters</p>
                            <div class="grid grid-cols-2 gap-1.5" role="radiogroup" aria-label="Color filter">
                                @foreach ([
                                    ['key' => 'default', 'label' => 'Default'],
                                    ['key' => 'grayscale', 'label' => 'Grayscale'],
                                    ['key' => 'protanopia', 'label' => 'Protanopia'],
                                    ['key' => 'deuteranopia', 'label' => 'Deuteranopia'],
                                    ['key' => 'tritanopia', 'label' => 'Tritanopia'],
                                    ['key' => 'achromatopsia', 'label' => 'Achromatopsia'],
                                    ['key' => 'low-saturation', 'label' => 'Low Saturation'],
                                    ['key' => 'high-saturation', 'label' => 'High Saturation'],
                                    ['key' => 'blue-light', 'label' => 'Blue Light Reduction'],
                                ] as $f)
                                    <button type="button" title="{{ $f['label'] }}" role="radio" :aria-checked="($store.a11y.settings.colorFilter === '{{ $f['key'] }}').toString()"
                                            @click="$store.a11y.set('colorFilter', '{{ $f['key'] }}')"
                                            :class="$store.a11y.settings.colorFilter === '{{ $f['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">{{ $f['label'] }}</button>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ============ SECTION 3: CURSOR ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('cursor')" :aria-expanded="$store.a11y.openSections.cursor.toString()" aria-controls="a11y-sec-cursor"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-arrow-pointer text-primary dark:text-secondary" aria-hidden="true"></i> Cursor
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.cursor && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-cursor" x-show="$store.a11y.openSections.cursor" x-collapse class="space-y-5 px-3 pb-4 pt-1">
                        <div x-show="$store.a11y.matches('cursor size')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Cursor Size</p>
                            <div class="grid grid-cols-4 gap-1.5" role="radiogroup" aria-label="Cursor size">
                                @foreach ([['key' => 'default', 'label' => 'Default'], ['key' => 'large', 'label' => 'Large'], ['key' => 'xlarge', 'label' => 'X-Large'], ['key' => 'huge', 'label' => 'Huge']] as $c)
                                    <button type="button" title="{{ $c['label'] }} cursor" role="radio" :aria-checked="($store.a11y.settings.cursorSize === '{{ $c['key'] }}').toString()"
                                            @click="$store.a11y.set('cursorSize', '{{ $c['key'] }}')"
                                            :class="$store.a11y.settings.cursorSize === '{{ $c['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">{{ $c['label'] }}</button>
                                @endforeach
                            </div>
                        </div>
                        <div x-show="$store.a11y.matches('cursor color')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Cursor Color</p>
                            <div class="grid grid-cols-5 gap-1.5" role="radiogroup" aria-label="Cursor color">
                                @foreach ([
                                    ['key' => 'default', 'swatch' => 'bg-primary'],
                                    ['key' => 'black', 'swatch' => 'bg-black'],
                                    ['key' => 'white', 'swatch' => 'bg-white border border-slate-300'],
                                    ['key' => 'yellow', 'swatch' => 'bg-accent'],
                                    ['key' => 'red', 'swatch' => 'bg-red-600'],
                                ] as $c)
                                    <button type="button" title="{{ ucfirst($c['key']) }} cursor color" aria-label="{{ ucfirst($c['key']) }} cursor color" role="radio" :aria-checked="($store.a11y.settings.cursorColor === '{{ $c['key'] }}').toString()"
                                            @click="$store.a11y.set('cursorColor', '{{ $c['key'] }}')"
                                            :class="$store.a11y.settings.cursorColor === '{{ $c['key'] }}' ? 'ring-2 ring-primary ring-offset-2 dark:ring-secondary' : ''"
                                            class="a11y-spring grid h-9 place-items-center rounded-lg transition">
                                        <span class="h-5 w-5 rounded-full {{ $c['swatch'] }}"></span>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                        @foreach ([['key' => 'cursorRing', 'label' => 'Cursor Ring', 'desc' => 'Adds a trailing ring around the cursor.', 'icon' => 'fa-circle-notch'], ['key' => 'clickAnimation', 'label' => 'Click Animation', 'desc' => 'Pulses the cursor ring on every click.', 'icon' => 'fa-hand-pointer']] as $t)
                            <label class="flex cursor-pointer items-center justify-between gap-3" x-show="$store.a11y.matches('{{ strtolower($t['label']) }}')">
                                <span class="flex-1">
                                    <span class="flex items-center gap-2 text-sm font-medium text-slate-800 dark:text-white"><i class="fa-solid {{ $t['icon'] }} w-4 text-center text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $t['label'] }}</span>
                                    <span class="mt-0.5 block pl-6 text-xs text-slate-500 dark:text-slate-400">{{ $t['desc'] }}</span>
                                </span>
                                <button type="button" role="switch" title="{{ $t['label'] }}" aria-label="{{ $t['label'] }}" :aria-checked="$store.a11y.settings.{{ $t['key'] }}.toString()"
                                        @click="$store.a11y.toggle('{{ $t['key'] }}')"
                                        :class="$store.a11y.settings.{{ $t['key'] }} ? 'bg-primary dark:bg-secondary' : 'bg-slate-200 dark:bg-white/10'"
                                        class="a11y-spring relative h-6 w-11 flex-shrink-0 rounded-full transition duration-300">
                                    <span :class="$store.a11y.settings.{{ $t['key'] }} ? 'translate-x-5' : 'translate-x-0.5'" class="a11y-spring absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition duration-300"></span>
                                </button>
                            </label>
                        @endforeach
                    </div>
                </div>

                @php
                    $switchSections = [
                        'visual' => [
                            'title' => 'Visual Assistance', 'icon' => 'fa-eye',
                            'items' => [
                                ['key' => 'highlightLinks', 'label' => 'Highlight Links', 'icon' => 'fa-link'],
                                ['key' => 'highlightButtons', 'label' => 'Highlight Buttons', 'icon' => 'fa-square'],
                                ['key' => 'highlightFormFields', 'label' => 'Highlight Form Fields', 'icon' => 'fa-pen-to-square'],
                                ['key' => 'highlightHeadings', 'label' => 'Highlight Headings', 'icon' => 'fa-heading'],
                                ['key' => 'highlightFocus', 'label' => 'Highlight Keyboard Focus', 'icon' => 'fa-crosshairs'],
                                ['key' => 'hideImages', 'label' => 'Hide Images', 'icon' => 'fa-image'],
                                ['key' => 'showAltText', 'label' => 'Show Image Alt Text', 'icon' => 'fa-closed-captioning'],
                                ['key' => 'pauseGifs', 'label' => 'Pause GIFs', 'icon' => 'fa-pause'],
                                ['key' => 'pauseVideos', 'label' => 'Pause Videos', 'icon' => 'fa-video-slash'],
                                ['key' => 'pauseCssAnimations', 'label' => 'Pause CSS Animations', 'icon' => 'fa-hand'],
                                ['key' => 'reduceMotion', 'label' => 'Reduce Motion', 'icon' => 'fa-person-walking'],
                                ['key' => 'removeBackgroundVideos', 'label' => 'Remove Background Videos', 'icon' => 'fa-ban'],
                            ],
                        ],
                        'reading' => [
                            'title' => 'Reading Assistance', 'icon' => 'fa-book-open',
                            'items' => [
                                ['key' => 'readingMode', 'label' => 'Reading Mode', 'icon' => 'fa-align-left', 'desc' => 'Simplified page layout.'],
                                ['key' => 'readingGuide', 'label' => 'Reading Guide', 'icon' => 'fa-ruler-horizontal', 'desc' => 'Horizontal reading ruler following your cursor.'],
                                ['key' => 'readingMask', 'label' => 'Reading Mask', 'icon' => 'fa-window-restore', 'desc' => 'Dark overlay leaving only the reading area visible.'],
                                ['key' => 'textMagnifier', 'label' => 'Text Magnifier', 'icon' => 'fa-magnifying-glass-plus', 'desc' => 'Magnifies whichever text you hover.'],
                                ['key' => 'focusMode', 'label' => 'Focus Mode', 'icon' => 'fa-bullseye', 'desc' => 'Dims everything except the section you\'re on.'],
                            ],
                        ],
                        'keyboard' => [
                            'title' => 'Keyboard Navigation', 'icon' => 'fa-keyboard',
                            'items' => [
                                ['key' => 'enhancedKeyboardNav', 'label' => 'Enhanced Keyboard Navigation', 'icon' => 'fa-arrows-up-down-left-right'],
                                ['key' => 'highlightFocus', 'label' => 'Visible Focus Ring', 'icon' => 'fa-crosshairs'],
                                ['key' => 'skipLinkVisible', 'label' => 'Skip to Content', 'icon' => 'fa-forward'],
                                ['key' => 'tabImprovements', 'label' => 'Tab Navigation Improvements', 'icon' => 'fa-right-left'],
                                ['key' => 'shortcutsOverlay', 'label' => 'Keyboard Shortcuts', 'icon' => 'fa-list', 'desc' => 'Display the keyboard shortcuts overlay.'],
                                ['key' => 'stickyFocus', 'label' => 'Sticky Focus', 'icon' => 'fa-thumbtack'],
                            ],
                        ],
                    ];
                @endphp

                @foreach ($switchSections as $sectionKey => $section)
                    <div class="rounded-2xl">
                        <button type="button" @click="$store.a11y.toggleSection('{{ $sectionKey }}')" :aria-expanded="$store.a11y.openSections.{{ $sectionKey }}.toString()" aria-controls="a11y-sec-{{ $sectionKey }}"
                                class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                            <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                                <i class="fa-solid {{ $section['icon'] }} text-primary dark:text-secondary" aria-hidden="true"></i> {{ $section['title'] }}
                            </span>
                            <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.{{ $sectionKey }} && 'rotate-180'" aria-hidden="true"></i>
                        </button>
                        <div id="a11y-sec-{{ $sectionKey }}" x-show="$store.a11y.openSections.{{ $sectionKey }}" x-collapse class="space-y-3 px-3 pb-4 pt-1">
                            @foreach ($section['items'] as $item)
                                <label class="flex cursor-pointer items-center justify-between gap-3" x-show="$store.a11y.matches('{{ strtolower($item['label']) }}')">
                                    <span class="flex-1">
                                        <span class="flex items-center gap-2 text-sm font-medium text-slate-800 dark:text-white">
                                            <i class="fa-solid {{ $item['icon'] }} w-4 text-center text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $item['label'] }}
                                        </span>
                                        @isset($item['desc'])
                                            <span class="mt-0.5 block pl-6 text-xs text-slate-500 dark:text-slate-400">{{ $item['desc'] }}</span>
                                        @endisset
                                    </span>
                                    <button type="button" role="switch" title="{{ $item['label'] }}" aria-label="{{ $item['label'] }}" :aria-checked="$store.a11y.settings.{{ $item['key'] }}.toString()"
                                            @click="$store.a11y.toggle('{{ $item['key'] }}')"
                                            :class="$store.a11y.settings.{{ $item['key'] }} ? 'bg-primary dark:bg-secondary' : 'bg-slate-200 dark:bg-white/10'"
                                            class="a11y-spring relative h-6 w-11 flex-shrink-0 rounded-full transition duration-300">
                                        <span :class="$store.a11y.settings.{{ $item['key'] }} ? 'translate-x-5' : 'translate-x-0.5'" class="a11y-spring absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition duration-300"></span>
                                    </button>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endforeach

                {{-- ============ SECTION 7: TEXT TO SPEECH ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('tts')" :aria-expanded="$store.a11y.openSections.tts.toString()" aria-controls="a11y-sec-tts"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-volume-high text-primary dark:text-secondary" aria-hidden="true"></i> Text To Speech
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.tts && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-tts" x-show="$store.a11y.openSections.tts" x-collapse class="space-y-5 px-3 pb-4 pt-1">
                        <div x-show="$store.a11y.matches('read page aloud')" class="grid grid-cols-3 gap-1.5">
                            <button type="button" title="Read page aloud" @click="$store.a11y.readAloud()" class="a11y-spring col-span-1 rounded-lg bg-primary py-2 text-[11px] font-semibold text-white transition hover:scale-[1.03] dark:bg-secondary dark:text-ink">
                                <i class="fa-solid fa-play" aria-hidden="true"></i> Read
                            </button>
                            <button type="button" title="Pause reading" @click="$store.a11y.pauseSpeech()" class="a11y-spring rounded-lg border border-slate-200 py-2 text-[11px] font-semibold text-slate-600 transition hover:scale-[1.03] dark:border-white/10 dark:text-slate-300">Pause</button>
                            <button type="button" title="Resume reading" @click="$store.a11y.resumeSpeech()" class="a11y-spring rounded-lg border border-slate-200 py-2 text-[11px] font-semibold text-slate-600 transition hover:scale-[1.03] dark:border-white/10 dark:text-slate-300">Resume</button>
                            <button type="button" title="Stop reading" @click="$store.a11y.stopSpeech()" class="a11y-spring col-span-3 rounded-lg border border-red-200 py-2 text-[11px] font-semibold text-red-600 transition hover:scale-[1.01] dark:border-red-500/30 dark:text-red-400">Stop</button>
                        </div>
                        <div x-show="$store.a11y.matches('reading speed')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Reading Speed</p>
                            <div class="grid grid-cols-6 gap-1">
                                @foreach ([0.5, 0.75, 1, 1.25, 1.5, 2] as $speed)
                                    <button type="button" title="{{ $speed }}x speed" :aria-pressed="($store.a11y.settings.ttsSpeed === {{ $speed }}).toString()"
                                            @click="$store.a11y.set('ttsSpeed', {{ $speed }})"
                                            :class="$store.a11y.settings.ttsSpeed === {{ $speed }} ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring rounded-lg border py-1.5 text-[10px] font-semibold transition">{{ $speed }}&times;</button>
                                @endforeach
                            </div>
                        </div>
                        <div x-show="$store.a11y.matches('voice selection')">
                            <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Voice Selection</p>
                            <div class="grid grid-cols-3 gap-1.5">
                                @foreach ([['key' => 'male', 'label' => 'Male'], ['key' => 'female', 'label' => 'Female'], ['key' => 'default', 'label' => 'Browser Default']] as $v)
                                    <button type="button" title="{{ $v['label'] }} voice" :aria-pressed="($store.a11y.settings.ttsVoice === '{{ $v['key'] }}').toString()"
                                            @click="$store.a11y.set('ttsVoice', '{{ $v['key'] }}')"
                                            :class="$store.a11y.settings.ttsVoice === '{{ $v['key'] }}' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                            class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">{{ $v['label'] }}</button>
                                @endforeach
                            </div>
                        </div>
                        @foreach ([['key' => 'ttsHighlightParagraph', 'label' => 'Highlight Current Paragraph'], ['key' => 'ttsAutoScroll', 'label' => 'Auto-Scroll While Reading']] as $t)
                            <label class="flex cursor-pointer items-center justify-between gap-3" x-show="$store.a11y.matches('{{ strtolower($t['label']) }}')">
                                <span class="text-sm font-medium text-slate-800 dark:text-white">{{ $t['label'] }}</span>
                                <button type="button" role="switch" title="{{ $t['label'] }}" aria-label="{{ $t['label'] }}" :aria-checked="$store.a11y.settings.{{ $t['key'] }}.toString()"
                                        @click="$store.a11y.toggle('{{ $t['key'] }}')"
                                        :class="$store.a11y.settings.{{ $t['key'] }} ? 'bg-primary dark:bg-secondary' : 'bg-slate-200 dark:bg-white/10'"
                                        class="a11y-spring relative h-6 w-11 flex-shrink-0 rounded-full transition duration-300">
                                    <span :class="$store.a11y.settings.{{ $t['key'] }} ? 'translate-x-5' : 'translate-x-0.5'" class="a11y-spring absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition duration-300"></span>
                                </button>
                            </label>
                        @endforeach
                        <p class="text-[10px] leading-relaxed text-slate-400 dark:text-slate-500">Uses your browser's built-in speech engine — available voices vary by device and browser.</p>
                    </div>
                </div>

                {{-- ============ SECTION 8: MOTION ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('motion')" :aria-expanded="$store.a11y.openSections.motion.toString()" aria-controls="a11y-sec-motion"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-person-running text-primary dark:text-secondary" aria-hidden="true"></i> Motion
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.motion && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-motion" x-show="$store.a11y.openSections.motion" x-collapse class="space-y-3 px-3 pb-4 pt-1">
                        @foreach ([
                            ['key' => 'reduceMotion', 'label' => 'Reduce Motion'],
                            ['key' => 'disableParallax', 'label' => 'Disable Parallax'],
                            ['key' => 'disableHoverAnimations', 'label' => 'Disable Hover Animations'],
                            ['key' => 'disableSmoothScroll', 'label' => 'Disable Smooth Scroll'],
                            ['key' => 'disableAutoplayVideos', 'label' => 'Disable Auto-Playing Videos'],
                            ['key' => 'disableLottie', 'label' => 'Disable Lottie Animations'],
                        ] as $m)
                            <label class="flex cursor-pointer items-center justify-between gap-3" x-show="$store.a11y.matches('{{ strtolower($m['label']) }}')">
                                <span class="text-sm font-medium text-slate-800 dark:text-white">{{ $m['label'] }}</span>
                                <button type="button" role="switch" title="{{ $m['label'] }}" aria-label="{{ $m['label'] }}" :aria-checked="$store.a11y.settings.{{ $m['key'] }}.toString()"
                                        @click="$store.a11y.toggle('{{ $m['key'] }}')"
                                        :class="$store.a11y.settings.{{ $m['key'] }} ? 'bg-primary dark:bg-secondary' : 'bg-slate-200 dark:bg-white/10'"
                                        class="a11y-spring relative h-6 w-11 flex-shrink-0 rounded-full transition duration-300">
                                    <span :class="$store.a11y.settings.{{ $m['key'] }} ? 'translate-x-5' : 'translate-x-0.5'" class="a11y-spring absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition duration-300"></span>
                                </button>
                            </label>
                        @endforeach
                    </div>
                </div>

                {{-- ============ SECTION 9: ZOOM ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('zoom')" :aria-expanded="$store.a11y.openSections.zoom.toString()" aria-controls="a11y-sec-zoom"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-magnifying-glass text-primary dark:text-secondary" aria-hidden="true"></i> Zoom
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.zoom && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-zoom" x-show="$store.a11y.openSections.zoom" x-collapse class="px-3 pb-4 pt-1" x-show="$store.a11y.matches('page zoom')">
                        <p class="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">Page Zoom</p>
                        <div class="grid grid-cols-3 gap-1.5">
                            @foreach ([75, 100, 125, 150, 175, 200] as $z)
                                <button type="button" title="{{ $z }}% zoom" :aria-pressed="($store.a11y.settings.pageZoom === {{ $z }}).toString()"
                                        @click="$store.a11y.set('pageZoom', {{ $z }})"
                                        :class="$store.a11y.settings.pageZoom === {{ $z }} ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                                        class="a11y-spring rounded-lg border py-2 text-[11px] font-semibold transition">{{ $z }}%</button>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- ============ SECTION 10: LANGUAGE ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('language')" :aria-expanded="$store.a11y.openSections.language.toString()" aria-controls="a11y-sec-language"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-language text-primary dark:text-secondary" aria-hidden="true"></i> Language
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.language && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-language" x-show="$store.a11y.openSections.language" x-collapse class="px-3 pb-4 pt-1" x-show="$store.a11y.matches('translate page')">
                        <label for="a11y-lang" class="mb-2 block text-xs font-semibold text-slate-600 dark:text-slate-300">Translate Page</label>
                        <select id="a11y-lang" title="Select a language" @change="$store.a11y.translate($event.target.value)"
                                class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                            <option value="auto">Auto Detect</option>
                            <option value="ne">Nepali</option>
                            <option value="hi">Hindi</option>
                            <option value="es">Spanish</option>
                            <option value="fr">French</option>
                            <option value="zh">Chinese</option>
                            <option value="ar">Arabic</option>
                        </select>
                        <p class="mt-2 text-[10px] leading-relaxed text-slate-400 dark:text-slate-500">Opens your browser's own translation tool — no page reload, nothing sent to a third party.</p>
                    </div>
                </div>

                {{-- ============ SECTION 11: PROFILES ============ --}}
                <div class="rounded-2xl">
                    <button type="button" @click="$store.a11y.toggleSection('profiles')" :aria-expanded="$store.a11y.openSections.profiles.toString()" aria-controls="a11y-sec-profiles"
                            class="flex w-full items-center justify-between rounded-xl px-3 py-3 text-left transition hover:bg-slate-100/70 dark:hover:bg-white/5">
                        <span class="flex items-center gap-2.5 text-sm font-bold text-slate-900 dark:text-white">
                            <i class="fa-solid fa-sliders text-primary dark:text-secondary" aria-hidden="true"></i> Profiles
                        </span>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition duration-300" :class="$store.a11y.openSections.profiles && 'rotate-180'" aria-hidden="true"></i>
                    </button>
                    <div id="a11y-sec-profiles" x-show="$store.a11y.openSections.profiles" x-collapse class="space-y-2 px-3 pb-4 pt-1">
                        <p class="text-[11px] text-slate-500 dark:text-slate-400">One-click presets — each combines the right settings automatically.</p>
                        @foreach ([
                            ['key' => 'lowVision', 'label' => 'Low Vision', 'icon' => 'fa-eye-low-vision'],
                            ['key' => 'blind', 'label' => 'Blind', 'icon' => 'fa-braille'],
                            ['key' => 'dyslexia', 'label' => 'Dyslexia', 'icon' => 'fa-book'],
                            ['key' => 'adhd', 'label' => 'ADHD', 'icon' => 'fa-bullseye'],
                            ['key' => 'epilepsySafe', 'label' => 'Epilepsy Safe', 'icon' => 'fa-bolt'],
                            ['key' => 'motorImpairment', 'label' => 'Motor Impairment', 'icon' => 'fa-hand'],
                            ['key' => 'seniorMode', 'label' => 'Senior Mode', 'icon' => 'fa-person-cane'],
                        ] as $p)
                            <button type="button" title="Apply {{ $p['label'] }} profile" x-show="$store.a11y.matches('{{ strtolower($p['label']) }}')"
                                    @click="$store.a11y.applyProfile('{{ $p['key'] }}')"
                                    class="a11y-spring flex w-full items-center gap-3 rounded-xl border border-slate-200 px-3 py-2.5 text-left text-sm font-semibold text-slate-700 transition hover:scale-[1.01] hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200 dark:hover:border-secondary dark:hover:text-secondary">
                                <i class="fa-solid {{ $p['icon'] }} w-4 text-center" aria-hidden="true"></i> {{ $p['label'] }}
                            </button>
                        @endforeach
                    </div>
                </div>

                {{-- ============ SECTION 12: RESET ============ --}}
                <div class="px-3 pb-2 pt-3">
                    <button type="button" @click="$store.a11y.showResetConfirm = true" title="Restore default accessibility settings"
                            class="a11y-spring flex w-full items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50/60 py-3 text-sm font-bold text-red-600 transition hover:scale-[1.01] dark:border-red-500/25 dark:bg-red-500/10 dark:text-red-400">
                        <i class="fa-solid fa-rotate-left" aria-hidden="true"></i> Restore Default Accessibility Settings
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Reset confirmation dialog -->
    <div x-show="$store.a11y.showResetConfirm" x-cloak x-trap="$store.a11y.showResetConfirm"
         role="alertdialog" aria-modal="true" aria-labelledby="a11y-reset-title"
         @keydown.escape.window="$store.a11y.showResetConfirm = false"
         class="fixed inset-0 z-[120] flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-slate-900/60" @click="$store.a11y.showResetConfirm = false" aria-hidden="true"></div>
        <div x-show="$store.a11y.showResetConfirm" x-transition
             class="relative w-full max-w-sm rounded-2xl bg-white p-6 text-center shadow-2xl dark:bg-panel">
            <div class="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-red-100 text-red-600 dark:bg-red-500/15 dark:text-red-400">
                <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
            </div>
            <h3 id="a11y-reset-title" class="mb-2 font-heading text-lg font-bold text-slate-900 dark:text-white">Restore Defaults?</h3>
            <p class="mb-5 text-sm text-slate-500 dark:text-slate-400">This clears every accessibility setting you've changed on this site.</p>
            <div class="flex gap-3">
                <button type="button" @click="$store.a11y.showResetConfirm = false" class="flex-1 rounded-xl border border-slate-200 py-2.5 text-sm font-semibold text-slate-600 dark:border-white/10 dark:text-slate-300">Cancel</button>
                <button type="button" @click="$store.a11y.resetAll()" class="flex-1 rounded-xl bg-red-600 py-2.5 text-sm font-semibold text-white">Reset</button>
            </div>
        </div>
    </div>

    <!-- Undo snackbar -->
    <div x-show="$store.a11y.showUndo" x-cloak
         x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="opacity-0 translate-y-3" x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition duration-200 ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         role="status" aria-live="polite"
         class="fixed bottom-24 left-1/2 z-[120] flex w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 items-center justify-between gap-4 rounded-2xl bg-slate-900 px-5 py-3.5 text-sm text-white shadow-2xl dark:bg-panel">
        <span x-text="$store.a11y.undoMessage"></span>
        <button type="button" @click="$store.a11y.undo()" class="flex-shrink-0 font-bold text-accent underline underline-offset-2">Undo</button>
    </div>

    <!-- Keyboard shortcuts overlay -->
    <div x-show="$store.a11y.settings.shortcutsOverlay" x-cloak
         @keydown.escape.window="$store.a11y.settings.shortcutsOverlay = false"
         role="dialog" aria-modal="true" aria-labelledby="a11y-shortcuts-title"
         class="fixed inset-0 z-[120] flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-slate-900/60" @click="$store.a11y.settings.shortcutsOverlay = false" aria-hidden="true"></div>
        <div x-show="$store.a11y.settings.shortcutsOverlay" x-transition class="relative w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl dark:bg-panel">
            <h3 id="a11y-shortcuts-title" class="mb-4 font-heading text-lg font-bold text-slate-900 dark:text-white">Keyboard Shortcuts</h3>
            <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-300">
                <li class="flex justify-between"><span>Open/close accessibility panel</span><kbd class="rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs dark:border-white/20 dark:bg-white/5">Alt + A</kbd></li>
                <li class="flex justify-between"><span>Toggle this shortcuts list</span><kbd class="rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs dark:border-white/20 dark:bg-white/5">Alt + /</kbd></li>
                <li class="flex justify-between"><span>Close any open panel</span><kbd class="rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs dark:border-white/20 dark:bg-white/5">Esc</kbd></li>
                <li class="flex justify-between"><span>Skip to main content</span><kbd class="rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs dark:border-white/20 dark:bg-white/5">Tab</kbd> (first stop)</li>
            </ul>
            <button type="button" @click="$store.a11y.settings.shortcutsOverlay = false" class="mt-5 w-full rounded-xl bg-primary py-2.5 text-sm font-semibold text-white dark:bg-secondary dark:text-ink">Close</button>
        </div>
    </div>
</div>