import { features } from './data.js';

document.addEventListener('DOMContentLoaded', () => {
    
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    const featuresGrid = document.getElementById('features-grid');

    if (featuresGrid) {
        features.forEach((feature, index) => {
            const card = document.createElement('div');
            card.className = 'feature-card-bg rounded-2xl p-6 flex flex-col items-center text-center scroll-target';
            card.style.transitionDelay = `${index * 100}ms`;

            card.innerHTML = `
                <div class="w-full aspect-square rounded-xl overflow-hidden mb-6 feature-card-image-container flex items-center justify-center">
                    <img src="${feature.image}" alt="${feature.alt}" class="w-4/5 h-4/5 object-contain drop-shadow-lg">
                </div>
                <div class="flex items-center space-x-2 mb-3">
                    <i data-lucide="${feature.icon}" class="w-5 h-5 text-tech-blue"></i>
                    <h3 class="text-xl font-bold text-text-dark">${feature.title}</h3>
                </div>
                <p class="text-text-medium text-sm flex-grow">${feature.description}</p>
            `;
            featuresGrid.appendChild(card);
        });
        
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }

    const scrollObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.scroll-target').forEach(target => {
        scrollObserver.observe(target);
    });


    const loginButton = document.getElementById('login-button');
    const loginModal = document.getElementById('login-modal');
    const closeModalButton = document.getElementById('close-modal-button');

    if (loginButton && loginModal && closeModalButton) {
        const openModal = () => {
            loginModal.classList.remove('hidden');
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        };

        const closeModal = () => {
            loginModal.classList.add('hidden');
        };

        loginButton.addEventListener('click', openModal);
        closeModalButton.addEventListener('click', closeModal);
        loginModal.addEventListener('click', (event) => {
            if (event.target === loginModal) {
                closeModal();
            }
        });
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && !loginModal.classList.contains('hidden')) {
                closeModal();
            }
        });
    }
});