dmitriyvpn/script.js

/* ==========================================================================
   DmitriyVPN Client Scripts
   Interactive UI: Theme Toggle, Burger Menu, Billing Toggle, FAQ, Scroll Reveal
   ========================================================================== */

/* ===== THEME TOGGLE (Light standard, Dark toggleable) ===== */
function initTheme() {
    const savedTheme = localStorage.getItem('dmitriyvpn_theme');
    if (savedTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
    }
}

function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme') || 'light';
    const next = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('dmitriyvpn_theme', next);
}

// Initialize theme immediately
initTheme();

/* ===== BURGER & MOBILE NAVIGATION ===== */
function toggleMobile() {
    const burger = document.getElementById('burger');
    const nav = document.getElementById('mobileNav');
    if (!burger || !nav) return;
    const isOpen = burger.classList.toggle('open');
    nav.classList.toggle('open', isOpen);
    document.body.style.overflow = isOpen ? 'hidden' : '';
}

function closeMobile() {
    const burger = document.getElementById('burger');
    const nav = document.getElementById('mobileNav');
    if (burger) burger.classList.remove('open');
    if (nav) nav.classList.remove('open');
    document.body.style.overflow = '';
}

// Close mobile nav on escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeMobile();
});

/* ===== SCROLL REVEAL ===== */
const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            revealObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.08 });

document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));

/* ===== BILLING TOGGLE ===== */
const prices = {
    month:    { standard: 109.22, pro: 194.41, premium: 291.62 },
    '3month': { standard: 98.30,  pro: 174.97, premium: 262.46 },
    year:     { standard: 87.38,  pro: 155.53, premium: 233.30 }
};

function setBilling(period, btn) {
    document.querySelectorAll('.billing-opt-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    const p = prices[period];
    if (!p) return;

    const els = {
        'price-from': p.standard,
        'price-standard': p.standard,
        'price-pro': p.pro,
        'price-premium': p.premium
    };

    Object.entries(els).forEach(([id, val]) => {
        const el = document.getElementById(id);
        if (el) {
            el.classList.add('updating');
            setTimeout(() => {
                el.textContent = val.toFixed(2);
                el.classList.remove('updating');
            }, 120);
        }
    });
}

/* ===== FAQ ACCORDION ===== */
function toggleFaq(btn) {
    const item = btn.closest('.faq-item');
    if (!item) return;
    const answer = item.querySelector('.faq-answer-collapse');
    const isOpen = item.classList.contains('open');

    // Close all other open FAQ items
    document.querySelectorAll('.faq-item').forEach(i => {
        if (i !== item) {
            i.classList.remove('open');
            const a = i.querySelector('.faq-answer-collapse');
            if (a) a.style.maxHeight = null;
        }
    });

    // Toggle current item
    if (!isOpen && answer) {
        item.classList.add('open');
        answer.style.maxHeight = answer.scrollHeight + 'px';
    } else if (answer) {
        item.classList.remove('open');
        answer.style.maxHeight = null;
    }
}