document.addEventListener('DOMContentLoaded', () => {
    const browserFrame = document.getElementById('browser-frame');
    const proxyForm = document.querySelector('custom-proxy-form');
    
    // Default page to load
    loadUrl('https://www.google.com');
    
    // Handle URL loading
    function loadUrl(url, useProxy = false) {
        browserFrame.classList.add('loading');
        
        if (useProxy) {
            // In a real implementation, this would route through your proxy server
            const proxyUrl = `https://cors-anywhere.herokuapp.com/${url}`;
            browserFrame.src = proxyUrl;
            document.querySelector('.proxy-indicator').classList.remove('hidden');
        } else {
            browserFrame.src = url;
            document.querySelector('.proxy-indicator').classList.add('hidden');
        }
        
        // Remove loading class when page is loaded
        browserFrame.onload = () => {
            browserFrame.classList.remove('loading');
        };
    }
    
    // Handle proxy form submission
    proxyForm.addEventListener('proxy-submit', (e) => {
        const { url, useProxy } = e.detail;
        loadUrl(url, useProxy);
    });
    
    // Handle quick link clicks
    document.addEventListener('quick-link-click', (e) => {
        loadUrl(e.detail.url, e.detail.useProxy);
    });
});