// Theme management
const themeManager = {
    init() {
        this.loadTheme();
        this.bindEvents();
    },
    
    loadTheme() {
        const savedTheme = localStorage.getItem('theme') || 'system';
        this.applyTheme(savedTheme);
    },
    
    applyTheme(theme) {
        const root = document.documentElement;
        
        if (theme === 'dark') {
            root.classList.add('dark');
        } else if (theme === 'light') {
            root.classList.remove('dark');
        } else {
            // System preference
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (prefersDark) {
                root.classList.add('dark');
            } else {
                root.classList.remove('dark');
            }
        }
        
        // Update theme toggle
        const themeToggle = document.querySelector('custom-theme-toggle');
        if (themeToggle) {
            themeToggle.setAttribute('current-theme', theme);
        }
    },
    
    setTheme(theme) {
        localStorage.setItem('theme', theme);
        this.applyTheme(theme);
    },
    
    bindEvents() {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
            if (localStorage.getItem('theme') === 'system') {
                this.applyTheme('system');
            }
        });
    }
};

// Pricing toggle functionality
const pricingManager = {
    init() {
        this.isYearly = false;
        this.bindEvents();
    },
    
    bindEvents() {
        const monthlyBtn = document.getElementById('monthly-btn');
        const yearlyBtn = document.getElementById('yearly-btn');
        const toggle = document.getElementById('billing-toggle');
        
        if (monthlyBtn && yearlyBtn) {
            monthlyBtn.addEventListener('click', () => this.setBilling(false));
            yearlyBtn.addEventListener('click', () => this.setBilling(true));
        }
    },
    
    setBilling(yearly) {
        this.isYearly = yearly;
        const monthlyBtn = document.getElementById('monthly-btn');
        const yearlyBtn = document.getElementById('yearly-btn');
        const toggle = document.getElementById('billing-toggle');
        
        if (yearly) {
            toggle.classList.add('yearly');
            monthlyBtn.classList.remove('text-white');
            yearlyBtn.classList.add('text-white');
        } else {
            toggle.classList.remove('yearly');
            monthlyBtn.classList.add('text-white');
            yearlyBtn.classList.remove('text-white');
        }
        
        // Update pricing cards
        const pricingCards = document.querySelectorAll('custom-pricing-card');
        pricingCards.forEach(card => {
            card.setAttribute('yearly', yearly);
        });
    }
};

// Smooth scrolling
const smoothScroll = {
    init() {
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    }
};

// Initialize everything
document.addEventListener('DOMContentLoaded', () => {
    themeManager.init();
    pricingManager.init();
    smoothScroll.init();
});

// Intersection Observer for animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
        }
    });
}, observerOptions);

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.feature-card').forEach(el => observer.observe(el));
});