script.js

// Handle input interactions
const mainInput = document.querySelector('.main-input');
const addBtn = document.querySelector('.add-btn');
const uploadBtn = document.querySelector('.upload-btn');

// Focus input when clicking add button
if (addBtn) {
    addBtn.addEventListener('click', () => {
        mainInput.focus();
    });
}

// Handle upload button click
if (uploadBtn) {
    uploadBtn.addEventListener('click', () => {
        // Create hidden file input
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/*,.pdf';
        fileInput.style.display = 'none';
        
        fileInput.addEventListener('change', (e) => {
            if (e.target.files && e.target.files[0]) {
                console.log('File selected:', e.target.files[0].name);
                // Handle file upload logic here
            }
        });
        
        document.body.appendChild(fileInput);
        fileInput.click();
        document.body.removeChild(fileInput);
    });
}

// Handle Enter key in input
if (mainInput) {
    mainInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && mainInput.value.trim()) {
            console.log('Generating:', mainInput.value);
            // Handle generation logic here
        }
    });
}

// Handle template card clicks
const templateCards = document.querySelectorAll('.template-card');
templateCards.forEach(card => {
    card.addEventListener('click', () => {
        const templateName = card.querySelector('.template-name').textContent;
        console.log('Template clicked:', templateName);
        // Handle template navigation here
    });
});

// Handle navigation dropdowns
const dropdowns = document.querySelectorAll('.nav-link.dropdown');
dropdowns.forEach(dropdown => {
    dropdown.addEventListener('click', (e) => {
        e.preventDefault();
        console.log('Dropdown clicked:', dropdown.textContent.trim());
        // Handle dropdown menu display here
    });
});

// Add smooth scroll behavior
document.documentElement.style.scrollBehavior = 'smooth';

// Add smooth animations on page load
window.addEventListener('load', () => {
    const hero = document.querySelector('.hero');
    if (hero) {
        hero.style.opacity = '0';
        hero.style.transform = 'translateY(10px)';
        
        setTimeout(() => {
            hero.style.transition = 'all 0.5s ease';
            hero.style.opacity = '1';
            hero.style.transform = 'translateY(0)';
        }, 100);
    }
    
    // Animate template cards
    const cards = document.querySelectorAll('.template-card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'all 0.4s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 200 + (index * 50));
    });
});