HTMLify

document.addEventListener('DOMContentLoaded', () => {
    // Simple JS to demonstrate interaction logic, though CSS handles most animations

    const form = document.querySelector('.contact-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // In a real application, this would send data via fetch/AJAX
            alert('Thank you for your inquiry! We will review your details shortly.');
            
            // Reset form
            form.reset();
        });
    }

    // Simple scroll observer to trigger fades (optional, as CSS keyframes were used for initial load)
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Add a class that triggers the fade-in if it wasn't triggered on load
                entry.target.style.opacity = 1;
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Apply observer to elements that might not have triggered CSS initial load animations
    document.querySelectorAll('.content-section > div, .cta-bottom, .plant-list-section').forEach(el => {
        // Ensure elements start invisible if they rely on scroll trigger
        if (!el.classList.contains('fade-in') && !el.classList.contains('fade-in-delay-1')) {
            el.style.opacity = 0;
            observer.observe(el);
        }
    });
});