// Calculator functionality
document.addEventListener('DOMContentLoaded', function() {
    const plantTypeSelect = document.getElementById('plantType');
    const areaInput = document.getElementById('area');
    const resultDiv = document.getElementById('result');

    const plantData = {
        vegetable: {
            rate: '10-15 กรัม ต่อน้ำ 20 ลิตร',
            frequency: '7-10 วัน/ครั้ง',
            perRai: 12.5
        },
        field: {
            rate: '15-20 กรัม ต่อน้ำ 20 ลิตร',
            frequency: '10-15 วัน/ครั้ง',
            perRai: 17.5
        },
        perennial: {
            rate: '20-30 กรัม ต่อน้ำ 20 ลิตร',
            frequency: '20-30 วัน/ครั้ง',
            perRai: 25
        }
    };

    function updateResult() {
        const plantType = plantTypeSelect.value;
        const area = parseFloat(areaInput.value) || 1;
        const data = plantData[plantType];
        
        const totalAmount = (data.perRai * area).toFixed(1);
        
        resultDiv.innerHTML = `
            <p>อัตราการใช้: <span class="font-bold text-emerald-600">${data.rate}</span></p>
            <p>ความถี่: <span class="font-bold text-emerald-600">${data.frequency}</span></p>
            <p>ปริมาณที่ต้องใช้: <span class="font-bold text-emerald-600">${totalAmount} กรัม</span></p>
        `;
    }

    plantTypeSelect.addEventListener('change', updateResult);
    areaInput.addEventListener('input', updateResult);
});

// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Add scroll effect to navbar
window.addEventListener('scroll', function() {
    const navbar = document.querySelector('custom-navbar');
    if (window.scrollY > 100) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// Counter animation for statistics
function animateCounter(element, target, duration = 2000) {
    let start = 0;
    const increment = target / (duration / 16);
    
    function updateCounter() {
        start += increment;
        if (start < target) {
            element.textContent = Math.floor(start);
            requestAnimationFrame(updateCounter);
        } else {
            element.textContent = target;
        }
    }
    
    updateCounter();
}

// Intersection Observer for animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-fade-in');
            
            // Animate counters if they exist
            const counters = entry.target.querySelectorAll('[data-counter]');
            counters.forEach(counter => {
                const target = parseInt(counter.getAttribute('data-counter'));
                animateCounter(counter, target);
            });
        }
    });
}, observerOptions);

// Observe elements with animation
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});