script.js

// Navigation functionality
function showSection(sectionId) {
    // Hide all sections
    document.querySelectorAll('.page-section').forEach(section => {
        section.classList.remove('active');
    });
    
    // Show selected section
    document.getElementById(sectionId).classList.add('active');
    
    // Update navigation items
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('text-green-600');
        item.classList.add('text-gray-500');
    });
    
    // Find and highlight active nav item
    event.currentTarget.classList.remove('text-gray-500');
    event.currentTarget.classList.add('text-green-600');
}

// Quantity management
function increaseQuantity(productId) {
    const qtyElement = document.getElementById(`qty-${productId}`);
    let currentQty = parseInt(qtyElement.textContent);
    qtyElement.textContent = currentQty + 1;
    updateCartSummary();
}

function decreaseQuantity(productId) {
    const qtyElement = document.getElementById(`qty-${productId}`);
    let currentQty = parseInt(qtyElement.textContent);
    if (currentQty > 1) {
        qtyElement.textContent = currentQty - 1;
        updateCartSummary();
    }
}

function updateCartSummary() {
    // Calculate total quantity and price
    const quantities = [
        parseInt(document.getElementById('qty-1').textContent) * 690,
        parseInt(document.getElementById('qty-2').textContent) * 890,
        parseInt(document.getElementById('qty-3').textContent) * 590
    ];
    
    const totalQuantity = 
        parseInt(document.getElementById('qty-1').textContent) +
        parseInt(document.getElementById('qty-2').textContent) +
        parseInt(document.getElementById('qty-3').textContent);
    
    const totalPrice = quantities.reduce((sum, price) => sum + price, 0);
    
    // Update cart summary if it exists
    const cartSummary = document.querySelector('.fixed.bottom-20.left-0.right-0');
    if (cartSummary) {
        cartSummary.querySelector('.text-sm.text-gray-600').textContent = `ตะกร้า (${totalQuantity} รายการ)`;
        cartSummary.querySelector('.text-xl.font-bold').textContent = `฿${totalPrice.toLocaleString()}`;
    }
}

// Symptom tracking
document.addEventListener('DOMContentLoaded', function() {
    const symptomSliders = document.querySelectorAll('input[type="range"]');
    symptomSliders.forEach(slider => {
        slider.addEventListener('input', function() {
            // Update visual feedback based on slider value
            const value = this.value;
            const emojiContainer = this.parentElement;
            const emojis = emojiContainer.querySelectorAll('span.text-2xl');
            
            if (value < 33) {
                emojis[0].textContent = '😢';
                emojis[1].textContent = '😐';
            } else if (value < 66) {
                emojis[0].textContent = '😐';
                emojis[1].textContent = '🙂';
            } else {
                emojis[0].textContent = '🙂';
                emojis[1].textContent = '😊';
            }
        });
    });
    
    // Initialize tooltips and interactions
    initializeTooltips();
});

// Agent chat functionality
function openAgentChat() {
    // Create modal
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-end justify-center z-50';
    modal.innerHTML = `
        <div class="bg-white w-full max-w-md rounded-t-3xl p-6 animate-slide-up">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">ปรึกษาผู้ดูแล</h3>
                <button onclick="closeModal(this)" class="text-gray-500 hover:text-gray-700">
                    <i data-feather="x" class="w-6 h-6"></i>
                </button>
            </div>
            <div class="bg-gray-50 rounded-xl p-4 mb-4">
                <div class="flex items-center space-x-3 mb-3">
                    <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                        <i data-feather="user" class="w-5 h-5 text-white"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-800">คุณมานี ผู้ดูแลพิเศษ</p>
                        <p class="text-xs text-green-600">ออนไลน์</p>
                    </div>
                </div>
                <p class="text-sm text-gray-700">สวัสดีครับ/ค่ะ มีอะไรให้ช่วยเหรอครับ/คะ</p>
            </div>
            <div class="space-y-2">
                <button class="w-full text-left bg-gray-100 rounded-lg p-3 hover:bg-gray-200 transition">
                    <p class="text-sm font-medium">สอบถามเกี่ยวกับผลิตภัณฑ์</p>
                </button>
                <button class="w-full text-left bg-gray-100 rounded-lg p-3 hover:bg-gray-200 transition">
                    <p class="text-sm font-medium">ปรึกษาเรื่องอาการ</p>
                </button>
                <button class="w-full text-left bg-gray-100 rounded-lg p-3 hover:bg-gray-200 transition">
                    <p class="text-sm font-medium">ปรับแผนการฟื้นฟู</p>
                </button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    feather.replace();
}

function closeModal(element) {
    element.closest('.fixed').remove();
}

// Initialize tooltips and micro-interactions
function initializeTooltips() {
    // Add ripple effect to buttons
    document.querySelectorAll('button').forEach(button => {
        button.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
    
    // Lazy load images
    const images = document.querySelectorAll('img');
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.classList.add('fade-in');
                observer.unobserve(img);
            }
        });
    });
    
    images.forEach(img => imageObserver.observe(img));
}

// Add slide-up animation
const style = document.createElement('style');
style.textContent = `
    @keyframes slide-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    .animate-slide-up {
        animation: slide-up 0.3s ease-out;
    }
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: scale(0);
        animation: ripple-animation 0.6s ease-out;
        pointer-events: none;
    }
    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    button {
        position: relative;
        overflow: hidden;
    }
`;
document.head.appendChild(style);