Cookie Consent Banner

<!-- Cookie Consent Banner -->
<div id="cookieConsentBanner" class="cookie-banner" style="display: none;">
    <div class="cookie-content">
        <div class="cookie-text">
            <h3>🍪 We Use Cookies</h3>
            <p>We use cookies to enhance your browsing experience, analyze site traffic, and personalize content. 
            By clicking "Accept All", you consent to our use of cookies. You can manage your preferences at any time.</p>
            <p>Read our <a href="/cookie-policy.html">Cookie Policy</a> and <a href="/privacy-policy.html">Privacy Policy</a>.</p>
        </div>
        <div class="cookie-buttons">
            <button id="acceptEssential" class="btn btn-outline">Essential Only</button>
            <button id="acceptAll" class="btn btn-primary">Accept All</button>
            <button id="showPreferences" class="btn btn-link">Preferences</button>
        </div>
    </div>
</div>

<!-- Cookie Preferences Modal -->
<div id="cookiePreferences" class="cookie-modal" style="display: none;">
    <div class="modal-content">
        <h3>Cookie Preferences</h3>
        <div class="cookie-options">
            <div class="cookie-option">
                <input type="checkbox" id="essentialCookies" checked disabled>
                <label for="essentialCookies">
                    <strong>Essential Cookies</strong>
                    <p>Required for basic site functionality. Cannot be disabled.</p>
                </label>
            </div>
            <div class="cookie-option">
                <input type="checkbox" id="performanceCookies">
                <label for="performanceCookies">
                    <strong>Performance Cookies</strong>
                    <p>Help us understand how visitors interact with our website.</p>
                </label>
            </div>
            <div class="cookie-option">
                <input type="checkbox" id="functionalityCookies">
                <label for="functionalityCookies">
                    <strong>Functionality Cookies</strong>
                    <p>Remember your preferences and provide enhanced features.</p>
                </label>
            </div>
            <div class="cookie-option">
                <input type="checkbox" id="targetingCookies">
                <label for="targetingCookies">
                    <strong>Targeting Cookies</strong>
                    <p>Used to deliver relevant advertisements and measure ad performance.</p>
                </label>
            </div>
        </div>
        <div class="modal-buttons">
            <button id="savePreferences" class="btn btn-primary">Save Preferences</button>
            <button id="acceptAllModal" class="btn btn-secondary">Accept All</button>
            <button id="rejectAll" class="btn btn-outline">Reject All</button>
        </div>
    </div>
</div>

<style>
    /* Cookie Banner */
    .cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 2px solid #2E75B6;
        padding: 20px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    .cookie-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
    
    .cookie-text {
        flex: 1;
    }
    
    .cookie-text h3 {
        margin: 0 0 10px 0;
        color: #2E75B6;
    }
    
    .cookie-text p {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: #555;
    }
    
    .cookie-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    /* Modal */
    .cookie-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1001;
    }
    
    .modal-content {
        background: #fff;
        padding: 30px;
        border-radius: 8px;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .cookie-option {
        margin: 15px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .cookie-option input[type="checkbox"] {
        margin-right: 10px;
    }
    
    .cookie-option label {
        cursor: pointer;
    }
    
    .modal-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
    }
    
    .btn-primary {
        background: #2E75B6;
        color: white;
    }
    
    .btn-secondary {
        background: #6c757d;
        color: white;
    }
    
    .btn-outline {
        background: transparent;
        border: 1px solid #2E75B6;
        color: #2E75B6;
    }
    
    .btn-link {
        background: transparent;
        color: #2E75B6;
        text-decoration: underline;
    }
</style>

<script>
    // Cookie Management
    const COOKIE_PREFERENCES = 'cookie_preferences';
    const COOKIE_CONSENT = 'cookie_consent';
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        initCookieBanner();
    });
    
    function initCookieBanner() {
        const consent = getCookie(COOKIE_CONSENT);
        
        if (!consent) {
            showCookieBanner();
        } else {
            applyCookiePreferences(JSON.parse(consent));
        }
        
        // Setup event listeners
        document.getElementById('acceptAll')?.addEventListener('click', acceptAllCookies);
        document.getElementById('acceptEssential')?.addEventListener('click', acceptEssentialOnly);
        document.getElementById('showPreferences')?.addEventListener('click', showPreferencesModal);
        document.getElementById('savePreferences')?.addEventListener('click', savePreferences);
        document.getElementById('acceptAllModal')?.addEventListener('click', acceptAllCookies);
        document.getElementById('rejectAll')?.addEventListener('click', rejectAllCookies);
    }
    
    function showCookieBanner() {
        const banner = document.getElementById('cookieConsentBanner');
        if (banner) banner.style.display = 'block';
    }
    
    function showPreferencesModal() {
        const modal = document.getElementById('cookiePreferences');
        const banner = document.getElementById('cookieConsentBanner');
        
        if (banner) banner.style.display = 'none';
        if (modal) modal.style.display = 'flex';
        
        // Load current preferences
        const preferences = getCookiePreferences();
        document.getElementById('performanceCookies').checked = preferences.performance;
        document.getElementById('functionalityCookies').checked = preferences.functionality;
        document.getElementById('targetingCookies').checked = preferences.targeting;
    }
    
    function acceptAllCookies() {
        const preferences = {
            essential: true,
            performance: true,
            functionality: true,
            targeting: true,
            timestamp: new Date().toISOString()
        };
        
        setCookie(COOKIE_CONSENT, JSON.stringify(preferences), 365);
        setCookie(COOKIE_PREFERENCES, JSON.stringify(preferences), 365);
        
        hideCookieBanner();
        applyCookiePreferences(preferences);
        
        // Load analytics and tracking scripts
        loadAnalyticsScripts();
        loadMarketingScripts();
    }
    
    function acceptEssentialOnly() {
        const preferences = {
            essential: true,
            performance: false,
            functionality: false,
            targeting: false,
            timestamp: new Date().toISOString()
        };
        
        setCookie(COOKIE_CONSENT, JSON.stringify(preferences), 365);
        setCookie(COOKIE_PREFERENCES, JSON.stringify(preferences), 365);
        
        hideCookieBanner();
        applyCookiePreferences(preferences);
    }
    
    function savePreferences() {
        const preferences = {
            essential: true, // Always true
            performance: document.getElementById('performanceCookies').checked,
            functionality: document.getElementById('functionalityCookies').checked,
            targeting: document.getElementById('targetingCookies').checked,
            timestamp: new Date().toISOString()
        };
        
        setCookie(COOKIE_CONSENT, JSON.stringify(preferences), 365);
        setCookie(COOKIE_PREFERENCES, JSON.stringify(preferences), 365);
        
        hidePreferencesModal();
        applyCookiePreferences(preferences);
        
        if (preferences.performance) loadAnalyticsScripts();
        if (preferences.targeting) loadMarketingScripts();
    }
    
    function rejectAllCookies() {
        const preferences = {
            essential: true,
            performance: false,
            functionality: false,
            targeting: false,
            timestamp: new Date().toISOString()
        };
        
        setCookie(COOKIE_CONSENT, JSON.stringify(preferences), 365);
        setCookie(COOKIE_PREFERENCES, JSON.stringify(preferences), 365);
        
        hidePreferencesModal();
        applyCookiePreferences(preferences);
    }
    
    function getCookiePreferences() {
        const cookie = getCookie(COOKIE_PREFERENCES);
        if (cookie) {
            return JSON.parse(cookie);
        }
        
        return {
            essential: true,
            performance: false,
            functionality: false,
            targeting: false
        };
    }
    
    function applyCookiePreferences(preferences) {
        // Apply preferences to third-party scripts
        if (!preferences.performance) {
            disableAnalytics();
        }
        
        if (!preferences.targeting) {
            disableMarketing();
        }
    }
    
    function loadAnalyticsScripts() {
        // Load Google Analytics
        if (typeof gtag !== 'function') {
            const script = document.createElement('script');
            script.async = true;
            script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X';
            document.head.appendChild(script);
            
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-XXXXXX-X');
        }
    }
    
    function loadMarketingScripts() {
        // Load Facebook Pixel
        if (typeof fbq !== 'function') {
            !function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
            fbq('init', 'XXXXXXXXXXXXXXX');
            fbq('track', 'PageView');
        }
    }
    
    function disableAnalytics() {
        // Disable Google Analytics
        window['ga-disable-UA-XXXXXX-X'] = true;
    }
    
    function disableMarketing() {
        // Opt-out of targeted advertising
        if (typeof fbq === 'function') {
            fbq('consent', 'revoke');
        }
    }
    
    function hideCookieBanner() {
        const banner = document.getElementById('cookieConsentBanner');
        if (banner) banner.style.display = 'none';
    }
    
    function hidePreferencesModal() {
        const modal = document.getElementById('cookiePreferences');
        if (modal) modal.style.display = 'none';
    }
    
    // Cookie utility functions
    function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/;SameSite=Lax";
    }
    
    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for(let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
        }
        return null;
    }
    
    function deleteCookie(name) {
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
    }
</script>