<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Cookie Policy & Preferences | Nesvra";
include 'components/head.php';
?>

<body class="bg-[#F8F9FA] text-slate-900 selection:bg-brandOrange selection:text-white">
    <?php include 'components/navbar.php'; ?>

    <!-- ═══ HEADER SECTION ═══ -->
    <section class="relative bg-royal text-white py-20 md:py-28 px-4 md:px-[5%] overflow-hidden">
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-brandOrange/10 rounded-full blur-[120px] pointer-events-none"></div>
        <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>

        <div class="max-w-[1000px] mx-auto text-center relative z-10" data-aos="fade-up">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 text-brandOrange font-mono text-[11px] font-semibold uppercase tracking-wider mb-4 border border-white/10">
                <i class="ri-settings-3-line"></i> Privacy Controls
            </span>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-[400] tracking-tighter leading-[1.1] mb-4">
                Cookie <span class="italic font-serif text-brandOrange">Preferences</span>
            </h1>
            <p class="text-white/70 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
                Manage how cookies and tracking technologies are used when you browse the Nesvra ecosystem and demo environments.
            </p>
        </div>
    </section>

    <!-- ═══ MAIN CONTENT & PREFERENCE TOGGLES ═══ -->
    <section class="py-16 md:py-24 px-4 md:px-[5%]">
        <div class="max-w-[1000px] mx-auto bg-white rounded-[32px] p-8 md:p-14 border border-zinc-100 shadow-sm leading-relaxed space-y-10">

            <div>
                <h2 class="text-xl md:text-2xl font-bold text-royal tracking-tight mb-2">Manage Your Cookie Settings</h2>
                <p class="text-soft text-sm leading-relaxed">
                    Cookies are small text files stored on your device to remember preferences, analyze website traffic, and ensure high platform security. You can customize your cookie preferences below at any time.
                </p>
            </div>

            <hr class="border-zinc-100" />

            <!-- Preference Cards -->
            <div class="space-y-4">

                <!-- 1. Strictly Necessary -->
                <div class="p-6 rounded-2xl bg-[#F8F9FA] border border-zinc-100 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="space-y-1 max-w-2xl">
                        <div class="flex items-center gap-2">
                            <h3 class="font-bold text-dark text-base">Strictly Necessary Cookies</h3>
                            <span class="font-mono text-[9px] uppercase tracking-wider px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold">Always Active</span>
                        </div>
                        <p class="text-soft text-xs leading-relaxed">
                            Essential for core website functionality, security verification, session management, and encrypted crypto checkout. These cannot be disabled.
                        </p>
                    </div>
                    <div class="shrink-0">
                        <input type="checkbox" checked disabled class="w-5 h-5 accent-royal cursor-not-allowed opacity-60" />
                    </div>
                </div>

                <!-- 2. Performance & Analytics -->
                <div class="p-6 rounded-2xl bg-white border border-zinc-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="space-y-1 max-w-2xl">
                        <h3 class="font-bold text-dark text-base">Performance & Analytics Cookies</h3>
                        <p class="text-soft text-xs leading-relaxed">
                            Allow us to count visits, analyze traffic sources, and identify high-performing pages so we can measure and improve platform speed and responsiveness.
                        </p>
                    </div>
                    <div class="shrink-0">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="analyticsCookies" checked class="sr-only peer">
                            <div class="w-11 h-6 bg-zinc-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-royal"></div>
                        </label>
                    </div>
                </div>

                <!-- 3. Functional Cookies -->
                <div class="p-6 rounded-2xl bg-white border border-zinc-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="space-y-1 max-w-2xl">
                        <h3 class="font-bold text-dark text-base">Functional Preferences</h3>
                        <p class="text-soft text-xs leading-relaxed">
                            Enable enhanced functionality and personalization, such as remembering your preferred currency (USD/USDT), plan selections, and demo filters.
                        </p>
                    </div>
                    <div class="shrink-0">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="functionalCookies" checked class="sr-only peer">
                            <div class="w-11 h-6 bg-zinc-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-royal"></div>
                        </label>
                    </div>
                </div>

                <!-- 4. Marketing & Ad Cookies -->
                <div class="p-6 rounded-2xl bg-white border border-zinc-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="space-y-1 max-w-2xl">
                        <h3 class="font-bold text-dark text-base">Marketing & Targeting Cookies</h3>
                        <p class="text-soft text-xs leading-relaxed">
                            Used to show relevant technology case studies, industry updates, and new platform release announcements across third-party networks.
                        </p>
                    </div>
                    <div class="shrink-0">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="marketingCookies" class="sr-only peer">
                            <div class="w-11 h-6 bg-zinc-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-royal"></div>
                        </label>
                    </div>
                </div>

            </div>

            <!-- Save Action Bar -->
            <div class="pt-6 border-t border-zinc-100 flex flex-col sm:flex-row items-center justify-between gap-4">
                <p class="text-xs text-soft" id="cookieStatusMsg">Preferences saved automatically in your browser.</p>
                <div class="flex items-center gap-3 w-full sm:w-auto">
                    <button type="button" id="acceptAllBtn" class="flex-1 sm:flex-none px-6 py-3 bg-[#F8F9FA] border border-zinc-200 text-dark rounded-full font-semibold text-xs uppercase tracking-wider hover:bg-zinc-100 transition-all">
                        Accept All
                    </button>
                    <button type="button" id="savePreferencesBtn" class="flex-1 sm:flex-none px-8 py-3 bg-royal text-white rounded-full font-semibold text-xs uppercase tracking-wider hover:bg-brandOrange transition-all shadow-md">
                        Save Preferences
                    </button>
                </div>
            </div>

        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const statusMsg = document.getElementById('cookieStatusMsg');
            const saveBtn = document.getElementById('savePreferencesBtn');
            const acceptAllBtn = document.getElementById('acceptAllBtn');
            const analytics = document.getElementById('analyticsCookies');
            const functional = document.getElementById('functionalCookies');
            const marketing = document.getElementById('marketingCookies');

            // Load saved settings
            const saved = localStorage.getItem('nesvra_cookie_prefs');
            if (saved) {
                try {
                    const prefs = JSON.parse(saved);
                    analytics.checked = !!prefs.analytics;
                    functional.checked = !!prefs.functional;
                    marketing.checked = !!prefs.marketing;
                } catch(e) {}
            }

            function save(msg = 'Preferences saved successfully!') {
                const prefs = {
                    essential: true,
                    analytics: analytics.checked,
                    functional: functional.checked,
                    marketing: marketing.checked,
                    updated_at: new Date().toISOString()
                };
                localStorage.setItem('nesvra_cookie_prefs', JSON.stringify(prefs));
                statusMsg.textContent = '✓ ' + msg;
                statusMsg.className = 'text-xs text-emerald-600 font-semibold';
                setTimeout(() => {
                    statusMsg.textContent = 'Preferences saved in your browser.';
                    statusMsg.className = 'text-xs text-soft';
                }, 3000);
            }

            saveBtn?.addEventListener('click', () => save());
            acceptAllBtn?.addEventListener('click', () => {
                analytics.checked = true;
                functional.checked = true;
                marketing.checked = true;
                save('All cookies enabled.');
            });
        });
    </script>

    <?php include 'components/Scroll-to-top.php'; ?>
    <?php include 'components/footer.php'; ?>
</body>
</html>
