document.addEventListener('DOMContentLoaded', function() {
    // Initialize all feature cards
    document.querySelectorAll('feature-card').forEach(card => {
        feather.replace({ 'data-feather': card.shadowRoot.querySelector('[data-feather]') });
    });

    const inputText = document.getElementById('inputText');
    const generateBtn = document.getElementById('generateBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const outputCanvas = document.getElementById('outputCanvas');
    const showLines = document.getElementById('showLines');
    const fontSizeInput = document.getElementById('fontSize');
    const lineHeightInput = document.getElementById('lineHeight');
    const letterSpacingInput = document.getElementById('letterSpacing');
    
    // Initialize range inputs
    if (fontSizeInput) {
        fontSizeInput.addEventListener('input', updatePreview);
    }
    if (lineHeightInput) {
        lineHeightInput.addEventListener('input', updatePreview);
    }
    if (letterSpacingInput) {
        letterSpacingInput.addEventListener('input', updatePreview);
    }

    generateBtn.addEventListener('click', function() {
const text = inputText.value.trim();
        if (!text) {
            outputCanvas.innerHTML = '<p class="text-gray-400">Please enter some text first</p>';
            return;
        }
        
        // Add loading state
        generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Generating...';
        feather.replace();
        
        // Simulate generation (in a real app, this would use a handwriting API)
        setTimeout(() => {
            const lines = text.split('\n');
            let html = '';
            
            if (showLines.checked) {
                html += '<div class="relative">';
                html += '<div class="absolute inset-0 bg-cyan-50 bg-opacity-20" style="background-image: linear-gradient(to bottom, transparent 95%, rgba(0,0,0,0.1) 95%); background-size: 100% 28px;"></div>';
            }
            
            html += '<p class="handwriting text-2xl leading-loose" style="white-space: pre-wrap;">';
            
            for (const line of lines) {
                if (line.trim() === '') {
                    html += '<br>';
                } else {
                    // Add slight variations to make it look more natural
                    const weightVariation = Math.random() * 0.4 - 0.2;
                    const sizeVariation = Math.random() * 0.4 - 0.2;
                    
                    html += `<span style="font-weight: ${400 + weightVariation * 100}; font-size: ${1 + sizeVariation}em">${line}</span>`;
                }
                html += '\n';
            }
            
            html += '</p>';
            
            if (showLines.checked) {
                html += '</div>';
            }
            
            outputCanvas.innerHTML = html;
            
            // Reset button
            generateBtn.innerHTML = '<i data-feather="pen-tool"></i> Generate';
            feather.replace();
        }, 1000);
    });
    
    downloadBtn.addEventListener('click', function() {
        alert('In a real implementation, this would download the generated handwriting as an image or PDF.');
    });
    
    // Initialize with some sample text
    inputText.value = "Dear Diary,\n\nToday I discovered this amazing tool that turns my digital text into beautiful handwriting!\n\nIt's like magic ✨\n\nSincerely,\nMe";
});