<!-- PREMIUM COMMAND-CENTER COOKIE DOCK -->
<div id="cookieBanner" class="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] w-[calc(100%-2rem)] max-w-4xl bg-white/80 backdrop-blur-2xl border border-zinc-200/50 rounded-[32px] shadow-[0_40px_100px_-20px_rgba(0,0,0,0.15)] p-2 transition-all duration-700 transform translate-y-12 opacity-0 pointer-events-none">
    
    <!-- Main Interaction Row -->
    <div class="flex flex-col md:flex-row items-center gap-2">
        
        <!-- Context Brief -->
        <div class="flex items-center gap-4 pl-6 pr-4 py-3">
            <div class="w-10 h-10 rounded-2xl bg-zinc-950 flex items-center justify-center text-[#FF6B00] shadow-inner">
                <i class="ri-shield-user-line text-xl"></i>
            </div>
            <div class="flex flex-col">
                <h4 class="text-xs font-medium uppercase tracking-[0.2em] text-zinc-950 font-mono">Privacy Control</h4>
                <p class="text-[11px] text-zinc-500 font-[400] leading-tight">We use cookies to enhance your experience. Optimize your reach below.</p>
            </div>
        </div>

        <!-- Action Matrix -->
        <div class="flex items-center gap-2 ml-auto p-1 bg-zinc-100/50 rounded-[24px] border border-zinc-200/50 w-full md:w-auto">
            <button id="cookiePreferencesBtn" class="px-5 py-3 rounded-full text-[11px] font-semibold uppercase tracking-widest text-zinc-500 hover:text-zinc-950 transition-all">
                Customize
            </button>
            <button id="cookieRejectBtn" class="px-5 py-3 rounded-full bg-white border border-zinc-200 text-[11px] font-semibold uppercase tracking-widest text-zinc-950 hover:bg-zinc-50 transition-all">
                Reject
            </button>
            <button id="cookieAcceptBtn" class="px-8 py-3 rounded-full bg-[#FF6B00] text-white text-[11px] font-semibold uppercase tracking-widest shadow-lg shadow-orange-500/20 hover:bg-[#e05e00] transition-all">
                Accept All
            </button>
        </div>
    </div>

    <!-- Professional Radio Preference Drawer -->
    <div id="cookieDrawer" class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-3 pt-6 border-t border-zinc-100 mt-2">
            
            <!-- Option: Essential -->
            <label class="relative flex flex-col p-5 bg-zinc-50 rounded-2xl border border-zinc-200/60 cursor-not-allowed opacity-80">
                <div class="flex items-center justify-between mb-3">
                    <i class="ri-lock-2-line text-lg text-zinc-400"></i>
                    <input type="radio" checked disabled class="accent-zinc-400 w-4 h-4">
                </div>
                <span class="text-[11px] font-bold text-zinc-950 uppercase tracking-widest mb-1 font-mono">Essential</span>
                <p class="text-[10px] text-zinc-500 leading-relaxed font-medium">Core system security and transactional integrity.</p>
            </label>

            <!-- Option: Analytics -->
            <label class="relative flex flex-col p-5 bg-white rounded-2xl border border-zinc-200 hover:border-[#FF6B00]/30 cursor-pointer transition-all group">
                <div class="flex items-center justify-between mb-3">
                    <i class="ri-bar-chart-box-line text-lg text-[#FF6B00] group-hover:scale-110 transition-transform"></i>
                    <input type="radio" name="analytics_pref" id="analytics_on" checked class="accent-[#FF6B00] w-4 h-4">
                </div>
                <span class="text-[11px] font-semibold text-zinc-950 uppercase tracking-widest mb-1 font-mono">Analytics</span>
                <p class="text-[10px] text-zinc-500 leading-relaxed font-medium">Platform reach metrics and performance tracking.</p>
            </label>

            <!-- Option: Marketing -->
            <label class="relative flex flex-col p-5 bg-white rounded-2xl border border-zinc-200 hover:border-[#FF6B00]/30 cursor-pointer transition-all group">
                <div class="flex items-center justify-between mb-3">
                    <i class="ri-advertisement-line text-lg text-[#FF6B00] group-hover:scale-110 transition-transform"></i>
                    <input type="radio" name="marketing_pref" id="marketing_on" class="accent-[#FF6B00] w-4 h-4">
                </div>
                <span class="text-[11px] font-bold text-zinc-950 uppercase tracking-widest mb-1 font-mono">Marketing</span>
                <p class="text-[10px] text-zinc-500 leading-relaxed font-medium">Customized tech insights and product updates.</p>
            </label>

        </div>
        
        <div class="p-4 flex justify-between items-center bg-zinc-50/50 rounded-b-[30px] border-t border-zinc-100">
            <span class="text-[9px] text-zinc-400 font-mono uppercase tracking-[0.2em] pl-2">Thanks for choosing nesvra.</span>
            <button id="cookieSavePrefsBtn" class="px-6 py-2.5 bg-zinc-950 text-white text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-[#FF6B00] transition-all">
                Save Preferences
            </button>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const banner = document.getElementById("cookieBanner");
    const drawer = document.getElementById("cookieDrawer");
    const prefsBtn = document.getElementById("cookiePreferencesBtn");
    const acceptBtn = document.getElementById("cookieAcceptBtn");
    const rejectBtn = document.getElementById("cookieRejectBtn");
    const savePrefsBtn = document.getElementById("cookieSavePrefsBtn");

    if (!localStorage.getItem("cookieConsent_nesvra")) {
        setTimeout(() => {
            banner.classList.remove("pointer-events-none", "translate-y-12", "opacity-0");
        }, 1200);
    }

    prefsBtn.addEventListener("click", () => {
        const isOpen = !drawer.classList.contains("max-h-0");
        drawer.classList.toggle("max-h-0", isOpen);
        drawer.classList.toggle("max-h-[600px]", !isOpen);
    });

    function dismiss(type, data = {}) {
        localStorage.setItem("cookieConsent_nesvra", JSON.stringify({ type, data, date: Date.now() }));
        banner.classList.add("translate-y-12", "opacity-0", "pointer-events-none");
    }

    acceptBtn.addEventListener("click", () => dismiss("all"));
    rejectBtn.addEventListener("click", () => dismiss("minimal"));
    savePrefsBtn.addEventListener("click", () => {
        dismiss("custom", {
            analytics: document.getElementById("analytics_on").checked,
            marketing: document.getElementById("marketing_on").checked
        });
    });
});
</script>