script.js

// Initialize tooltips
document.addEventListener('DOMContentLoaded', () => {
    // Platform click handler
    document.querySelectorAll('.platform-card').forEach(card => {
        card.addEventListener('click', () => {
            const platform = card.getAttribute('data-platform');
            document.querySelector('input[type="text"]').placeholder = `https://${platform}.com/...`;
        });
    });

    // Download button handler (simulation)
    document.querySelector('.download-btn').addEventListener('click', async () => {
        const urlInput = document.querySelector('input[type="text"]');
        const url = urlInput.value.trim();
        
        if (!url) {
            showAlert('يرجى إدخال رابط أولاً', 'error');
            return;
        }

        try {
            showAlert('جاري معالجة الرابط...', 'info');
            // Simulate API call
            await new Promise(resolve => setTimeout(resolve, 1500));
            showAlert('تم العثور على المحتوى بنجاح!', 'success');
            
            // Simulate showing download options
            showDownloadOptions();
        } catch (error) {
            showAlert('حدث خطأ أثناء معالجة الرابط', 'error');
        }
    });
});

function showAlert(message, type) {
    const alert = document.createElement('div');
    alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg ${
        type === 'error' ? 'bg-red-500' : 
        type === 'success' ? 'bg-green-500' : 'bg-blue-500'
    } text-white font-medium`;
    alert.textContent = message;
    document.body.appendChild(alert);
    
    setTimeout(() => {
        alert.remove();
    }, 3000);
}

function showDownloadOptions() {
    const optionsContainer = document.createElement('div');
    optionsContainer.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
    
    optionsContainer.innerHTML = `
        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full">
            <h3 class="text-xl font-bold mb-4">خيارات التنزيل</h3>
            <div class="space-y-3">
                <button class="w-full bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex justify-between items-center">
                    <span>تنزيل الفيديو (HD)</span>
                    <span class="text-sm">1080p</span>
                </button>
                <button class="w-full bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex justify-between items-center">
                    <span>تنزيل الفيديو (SD)</span>
                    <span class="text-sm">720p</span>
                </button>
                <button class="w-full bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex justify-between items-center">
                    <span>تنزيل الصور فقط</span>
                    <i data-feather="image"></i>
                </button>
            </div>
            <button class="mt-4 w-full bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">
                إلغاء
            </button>
        </div>
    `;
    
    document.body.appendChild(optionsContainer);
    feather.replace();
    
    optionsContainer.querySelector('button:last-child').addEventListener('click', () => {
        optionsContainer.remove();
    });
}