@page "/selection5"
@{
    ViewData["Title"] = "Selection 5";
}
@{
    ViewData["SidebarVariant"] = "5";
}

<div class="p-4 md:p-6 space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
                <div class="flex items-center gap-2">
                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
                        <div class="space-y-2.5">
                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <span class="text-sm text-gray-700">Remember me</span>
                            </label>
                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <span class="text-sm text-gray-700">Send notifications</span>
                            </label>
                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <span class="text-sm text-gray-700">Enable two-factor auth</span>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
                        <div class="space-y-2.5">
                            <label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
                            </label>
                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
                            </label>
                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
                        <div class="space-y-2.5">
                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
                                <input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
                                <span class="text-sm text-gray-400">Disabled unchecked</span>
                            </label>
                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
                                <input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
                                <span class="text-sm text-gray-400">Disabled checked</span>
                            </label>
                            <label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                </div>
                                <span class="text-sm text-gray-700">Indeterminate state</span>
                            </label>
                            <label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                </div>
                                <span class="text-sm text-gray-700">Toggle indeterminate</span>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
                        <div class="space-y-2.5">
                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <span class="text-sm text-gray-700">Email notifications</span>
                            </label>
                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <span class="text-sm text-gray-700">SMS notifications</span>
                            </label>
                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                <span class="text-sm text-gray-700">Push notifications</span>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
                    </div>
                    <div x-data="{ selected: 'daily' }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
                        <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
                            <template x-for="opt in ['daily','weekly','monthly']" :key="opt">
                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
                                    <input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
                                </label>
                            </template>
                        </div>
                        <p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
                        <div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
                            <template x-for="opt in ['low','medium','high']" :key="opt">
                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
                                    <input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
                                </label>
                            </template>
                        </div>
                    </div>
                    <div x-data="{ selected: 'starter' }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
                        <div class="space-y-2.5">
                            <template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
                                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
                                    <input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
                                    <div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
                                </label>
                            </template>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
                        <div class="space-y-3">
                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <span class="text-sm text-gray-700">Wi-Fi</span>
                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
                                </button>
                            </label>
                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <span class="text-sm text-gray-700">Bluetooth</span>
                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
                                </button>
                            </label>
                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <span class="text-sm text-gray-700">Dark Mode</span>
                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
                                </button>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
                        <div class="space-y-3">
                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <span class="text-sm text-gray-700">Notifications</span>
                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
                                        <svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </span>
                                </button>
                            </label>
                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <span class="text-sm text-gray-700">VPN</span>
                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
                                </button>
                            </label>
                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
                                <span class="text-sm text-gray-700">Auto-sync</span>
                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
                                        <svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
                                    </span>
                                </button>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
                        <div class="space-y-3">
                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
                                <span class="text-sm text-gray-400">Legacy mode</span>
                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
                                </button>
                            </label>
                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
                                <span class="text-sm text-gray-400">Beta features</span>
                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
                                </button>
                            </label>
                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
                                <span class="text-sm text-gray-400">Experimental</span>
                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
                                </button>
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div x-data="{ val: 50 }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
                        <div class="px-1 py-4">
                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
                        </div>
                        <div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
                        <p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
                    </div>
                    <div x-data="{ val: 65 }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
                        <div class="relative pt-7 px-1">
                            <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
                        </div>
                        <div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
                        <p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
                    </div>
                    <div x-data="{ val: 3 }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
                        <div class="relative pt-6 px-1">
                            <div class="absolute top-0 left-0 right-0 flex justify-between px-0">
                                <template x-for="i in [1,2,3,4,5]" :key="i">
                                    <div class="flex flex-col items-center">
                                        <div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
                                    </div>
                                </template>
                            </div>
                            <input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
                            <div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
                            <div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
                        </div>
                        <p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
                    </div>
                </div>
                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div x-data="{ val: 75 }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
                        <div class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
                        </div>
                    </div>
                    <div x-data="{ val: 30 }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
                        <div class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
                        </div>
                    </div>
                    <div x-data="{ val: 42 }">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
                        <div class="flex items-center gap-3">
                            <span class="text-xs text-gray-500 font-semibold">$0</span>
                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
                            <span class="text-xs text-gray-500 font-semibold">$100</span>
                            <span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
                </div>
                <div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="space-y-5">
                        <div>
                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
                            <div class="space-y-2">
                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
                                    <input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
                                    <div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
                                </label>
                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
                                    <input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
                                    <div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
                                </label>
                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
                                    <input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
                                    <div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
                                </label>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
                            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
                                <template x-for="opt in ['realtime','hourly','daily']" :key="opt">
                                    <label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
                                        <input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
                                        <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-5">
                        <div>
                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
                            <div class="space-y-2.5">
                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
                                    <div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
                                    <button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
                                    </button>
                                </label>
                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
                                    <div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
                                    <button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
                                    </button>
                                </label>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
                            <div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
                                <div class="flex items-center gap-3">
                                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
                                    <input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                    <input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>