script.js

(function() {
            'use strict';

            //  DOM REFS 
            const banner = document.getElementById('cookieBanner');
            const acceptBtn = document.getElementById('acceptBtn');
            const declineBtn = document.getElementById('declineBtn');
            const settingsBtnBanner = document.getElementById('settingsBtnBanner');
            const settingsLinkBanner = document.getElementById('settingsLinkBanner');
            const privacyLink = document.getElementById('privacyLink');

            const modalOverlay = document.getElementById('modalOverlay');
            const modalCloseBtn = document.getElementById('modalCloseBtn');
            const modalSaveBtn = document.getElementById('modalSaveBtn');

            const prefAnalytics = document.getElementById('prefAnalytics');
            const prefMarketing = document.getElementById('prefMarketing');

            const toast = document.getElementById('toast');

            const pageContent = document.getElementById('pageContent');

            // STATE 
            const STORAGE_KEY = 'cookiePreferences';

            // Default preferences
            const defaultPrefs = {
                essential: true, // always true
                analytics: true,
                marketing: false,
                consented: false // true if user has made a choice
            };

            let currentPrefs = { ...defaultPrefs };

            //  HELPERS 

            /** Load preferences from localStorage, or use defaults */
            function loadPreferences() {
                const stored = localStorage.getItem(STORAGE_KEY);
                if (stored) {
                    try {
                        const parsed = JSON.parse(stored);
                        // Merge with defaults to ensure all keys exist
                        currentPrefs = { ...defaultPrefs, ...parsed };
                        // essential is always true
                        currentPrefs.essential = true;
                        return;
                    } catch (_) { /* ignore */ }
                }
                currentPrefs = { ...defaultPrefs };
            }

            /** Save currentPrefs to localStorage */
            function savePreferences() {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(currentPrefs));
            }

            /** Apply preference state to UI (modal toggles + banner visibility) */
            function applyUIFromPrefs() {
                // Sync modal toggles
                prefAnalytics.checked = currentPrefs.analytics;
                prefMarketing.checked = currentPrefs.marketing;

                // Show or hide banner based on consented flag
                if (currentPrefs.consented) {
                    hideBanner();
                } else {
                    showBanner();
                }
            }

            /** Show the banner with animation */
            function showBanner() {
                banner.classList.remove('hidden');
            }

            /** Hide the banner with animation */
            function hideBanner() {
                banner.classList.add('hidden');
            }

            /** Show a toast message */
            function showToast(message, duration = 2800) {
                toast.textContent = message || ' Preferences saved';
                toast.classList.add('show');
                clearTimeout(toast._timer);
                toast._timer = setTimeout(() => {
                    toast.classList.remove('show');
                }, duration);
            }

            /** Open the preference modal */
            function openModal() {
                // Sync toggles with current prefs before opening
                prefAnalytics.checked = currentPrefs.analytics;
                prefMarketing.checked = currentPrefs.marketing;
                modalOverlay.classList.add('open');
                document.body.style.overflow = 'hidden';
                // Focus trap: save button gets focus
                setTimeout(() => modalSaveBtn.focus(), 100);
            }

            /** Close the preference modal */
            function closeModal() {
                modalOverlay.classList.remove('open');
                document.body.style.overflow = '';
                // Re-focus the settings button if banner is visible
                if (!banner.classList.contains('hidden')) {
                    settingsBtnBanner.focus();
                }
            }

            /** Set consent and hide banner, save to localStorage */
            function setConsent(analytics, marketing) {
                currentPrefs.analytics = analytics;
                currentPrefs.marketing = marketing;
                currentPrefs.consented = true;
                savePreferences();
                applyUIFromPrefs();
            }

            /** Handle "Accept All" */
            function handleAcceptAll() {
                setConsent(true, true);
                showToast(' All cookies accepted');
            }

            /** Handle "Decline" — only essential */
            function handleDecline() {
                setConsent(false, false);
                showToast(' Only essential cookies enabled');
            }

            /** Handle "Save Preferences" from modal */
            function handleSavePreferences() {
                const analytics = prefAnalytics.checked;
                const marketing = prefMarketing.checked;
                setConsent(analytics, marketing);
                closeModal();
                showToast(' Preferences saved');
            }

            /** Reset consent (for demo purposes — called from privacy link) */
            function resetConsent() {
                currentPrefs.consented = false;
                currentPrefs.analytics = true;
                currentPrefs.marketing = false;
                savePreferences();
                applyUIFromPrefs();
                showBanner();
                showToast(' Consent reset — banner shown again', 2500);
            }

            //  EVENT BINDING 

            // Accept
            acceptBtn.addEventListener('click', handleAcceptAll);

            // Decline
            declineBtn.addEventListener('click', handleDecline);

            // Settings button (banner)
            settingsBtnBanner.addEventListener('click', openModal);
            settingsLinkBanner.addEventListener('click', (e) => {
                e.preventDefault();
                openModal();
            });

            // Close modal (× via Cancel button)
            modalCloseBtn.addEventListener('click', closeModal);

            // Save modal
            modalSaveBtn.addEventListener('click', handleSavePreferences);

            // Click outside modal to close (on overlay)
            modalOverlay.addEventListener('click', (e) => {
                if (e.target === modalOverlay) closeModal();
            });

            // Keyboard: Escape closes modal
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && modalOverlay.classList.contains('open')) {
                    closeModal();
                }
            });

            // Privacy link — for demo: reset consent
            privacyLink.addEventListener('click', (e) => {
                e.preventDefault();
                resetConsent();
            });

            //  INIT 

            loadPreferences();

            // If the user has already consented, hide banner.
            // Otherwise show it.
            if (currentPrefs.consented) {
                hideBanner();
            } else {
                showBanner();
            }

            // Sync UI toggles with loaded prefs
            prefAnalytics.checked = currentPrefs.analytics;
            prefMarketing.checked = currentPrefs.marketing;

            // (Optional) expose for console debugging 
            window.__cookieDemo = {
                currentPrefs,
                loadPreferences,
                savePreferences,
                resetConsent,
                handleAcceptAll,
                handleDecline,
                openModal,
                closeModal
            };

            console.log(' Cookie Consent Demo initialized.');
            console.log('Current prefs:', currentPrefs);

        })();