landing.js

document.addEventListener('DOMContentLoaded', () => {
    // 1. Try Live Demo Button
    const tryLiveBtn = document.getElementById('try-live-btn');
    if (tryLiveBtn) {
        tryLiveBtn.addEventListener('click', () => {
            const widgetContainer = document.getElementById('accesswidget-container');
            if (widgetContainer && widgetContainer.shadowRoot) {
                const trigger = widgetContainer.shadowRoot.querySelector('.aw-trigger');
                if (trigger) {
                    trigger.click();
                    trigger.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    }

    // 2. Embed Code Generator
    const posSelect = document.getElementById('pos-select');
    const colorPicker = document.getElementById('color-picker');
    const colorHex = document.getElementById('color-hex');
    const codeSnippet = document.getElementById('code-snippet');
    const resetBtn = document.getElementById('reset-config-btn');
    const copyBtn = document.getElementById('copy-btn');
    const demoScript = document.getElementById('demo-script'); // The actual live widget tag on the page

    const defaultPos = 'bottom-right';
    const defaultColor = '#4f46e5';
    const baseUrl = 'https://accessibility.dippan.com.np/accessibility.js';

    function updateSnippet() {
        const pos = posSelect.value;
        const color = colorPicker.value;
        
        colorHex.textContent = color;
        
        let snippetHtml = `<span class="token-punct">&lt;</span><span class="token-tag">script</span> <span class="token-attr">src</span><span class="token-punct">=</span><span class="token-string">"${baseUrl}"</span>`;
        
        // Only append attributes if they differ from defaults to keep it clean
        if (pos !== defaultPos) {
            snippetHtml += ` <span class="token-attr">data-position</span><span class="token-punct">=</span><span class="token-string">"${pos}"</span>`;
        }
        if (color !== defaultColor) {
            snippetHtml += ` <span class="token-attr">data-color</span><span class="token-punct">=</span><span class="token-string">"${color}"</span>`;
        }
        
        snippetHtml += ` <span class="token-attr">defer</span><span class="token-punct">&gt;&lt;/</span><span class="token-tag">script</span><span class="token-punct">&gt;</span>`;
        
        codeSnippet.innerHTML = snippetHtml;
        
        // Also update the live widget if possible (requires removing and re-adding, or just updating CSS vars for color, but position is harder)
        updateLiveDemo(pos, color);
    }

    function updateLiveDemo(pos, color) {
        const widgetContainer = document.getElementById('accesswidget-container');
        if (widgetContainer && widgetContainer.shadowRoot) {
            // Update color
            widgetContainer.shadowRoot.host.style.setProperty('--primary', color);
            
            // Update position
            widgetContainer.style.top = '';
            widgetContainer.style.bottom = '';
            widgetContainer.style.left = '';
            widgetContainer.style.right = '';
            
            if (pos.includes('bottom')) widgetContainer.style.bottom = '20px';
            else widgetContainer.style.top = '20px';
            
            if (pos.includes('right')) widgetContainer.style.right = '20px';
            else widgetContainer.style.left = '20px';
            
            // Update flex direction
            widgetContainer.shadowRoot.host.style.flexDirection = pos.includes('bottom') ? 'column-reverse' : 'column';
            widgetContainer.shadowRoot.host.style.alignItems = pos.includes('right') ? 'flex-end' : 'flex-start';
        }
    }

    posSelect.addEventListener('change', updateSnippet);
    colorPicker.addEventListener('input', updateSnippet);

    resetBtn.addEventListener('click', () => {
        posSelect.value = defaultPos;
        colorPicker.value = defaultColor;
        updateSnippet();
    });

    copyBtn.addEventListener('click', async () => {
        try {
            await navigator.clipboard.writeText(codeSnippet.textContent);
            const originalHTML = copyBtn.innerHTML;
            copyBtn.innerHTML = '<span style="color:#10b981;font-size:0.85rem;font-weight:500;">Copied!</span>';
            copyBtn.classList.add('copied');
            
            setTimeout(() => {
                copyBtn.innerHTML = originalHTML;
                copyBtn.classList.remove('copied');
            }, 2000);
        } catch (err) {
            console.error('Failed to copy text: ', err);
        }
    });

    // 3. Scroll Animations (Intersection Observer)
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.15
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                // Optional: stop observing once it's visible if we only want it to animate once
                // observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    const animatedElements = document.querySelectorAll('.fade-in');
    animatedElements.forEach(el => observer.observe(el));

    // 4. Sticky Navbar Styling
    const navbar = document.querySelector('.navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
});