script.js

// Tab switching functionality
function switchTab(tabId) {
    // Hide all tabs
    const allTabs = document.querySelectorAll('.tab-content');
    allTabs.forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Show selected tab
    const selectedTab = document.getElementById(tabId);
    if (selectedTab) {
        selectedTab.classList.add('active');
    }
    
    // Update navigation buttons
    const allNavButtons = document.querySelectorAll('.nav-btn');
    allNavButtons.forEach(btn => {
        btn.classList.remove('text-health-green');
        btn.classList.add('text-gray-400');
    });
    
    // Highlight active nav button
    const activeNavBtn = document.querySelector(`[data-tab="${tabId}"]`);
    if (activeNavBtn) {
        activeNavBtn.classList.remove('text-gray-400');
        activeNavBtn.classList.add('text-health-green');
    }
    
    // Reinitialize feather icons
    feather.replace();
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    feather.replace();
    
    // Animate progress bars on load
    setTimeout(() => {
        const progressBars = document.querySelectorAll('.progress-bar');
        progressBars.forEach(bar => {
            bar.style.transition = 'width 1s ease';
        });
    }, 500);
    
    // Simulate real-time updates
    setInterval(() => {
        // Update time
        const now = new Date();
        const timeString = now.toLocaleTimeString('th-TH', { 
            hour: '2-digit', 
            minute: '2-digit' 
        });
        
        // Update heart rate animation
        const heartIcons = document.querySelectorAll('[data-feather="heart"]');
        heartIcons.forEach(icon => {
            icon.parentElement.classList.add('pulse-animation');
            setTimeout(() => {
                icon.parentElement.classList.remove('pulse-animation');
            }, 2000);
        });
    }, 10000);
});

// Handle supplement status clicks
document.querySelectorAll('.bg-red-50.border-red-200').forEach(item => {
    item.addEventListener('click', function() {
        this.classList.remove('bg-red-50', 'border-red-200');
        this.classList.add('bg-green-50', 'border-green-200');
        
        const icon = this.querySelector('[data-feather="x"]');
        if (icon) {
            icon.setAttribute('data-feather', 'check');
            feather.replace();
        }
        
        const text = this.querySelector('.text-red-600');
        if (text) {
            text.textContent = 'รับประทานแล้ว!';
            text.classList.remove('text-red-600');
            text.classList.add('text-green-600');
        }
        
        // Show success notification
        showNotification('บันทึกสำเร็จ! รับประทานผลิตภัณฑ์แล้ว');
    });
});

// Handle task completion
document.querySelectorAll('.w-6.h-6.bg-gray-300').forEach(item => {
    item.addEventListener('click', function() {
        this.classList.remove('bg-gray-300');
        this.classList.add('bg-green-500');
        
        const icon = this.querySelector('[data-feather="clock"]');
        if (icon) {
            icon.setAttribute('data-feather', 'check');
            feather.replace();
        }
        
        // Show success notification
        showNotification('ภารกิจเสร็จสิ้น! +3 แต้ม');
    });
});

// Notification system
function showNotification(message) {
    const notification = document.createElement('div');
    notification.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300';
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 2000);
}

// Handle purchase buttons
document.querySelectorAll('button').forEach(button => {
    if (button.textContent.includes('เพิ่มลงตะกร้า') || 
        button.textContent.includes('ซื้อซ้ำ') || 
        button.textContent.includes('สมัครแบบรายเดือน')) {
        button.addEventListener('click', function() {
            showNotification('เพิ่มสินค้าลงตะกร้าแล้ว!');
        });
    }
});

// Handle time range selector buttons
document.querySelectorAll('button').forEach(button => {
    if (button.textContent.includes('7 วัน') || 
        button.textContent.includes('14 วัน') || 
        button.textContent.includes('30 วัน')) {
        button.addEventListener('click', function() {
            // Remove active state from all buttons
            this.parentElement.querySelectorAll('button').forEach(btn => {
                btn.classList.remove('bg-health-green', 'text-white');
                btn.classList.add('bg-gray-200', 'text-gray-600');
            });
            
            // Add active state to clicked button
            this.classList.remove('bg-gray-200', 'text-gray-600');
            this.classList.add('bg-health-green', 'text-white');
            
            showNotification(`เปลี่ยนช่วงเวลาเป็น ${this.textContent}`);
        });
    }
});

// Handle contact buttons
document.querySelectorAll('button').forEach(button => {
    if (button.textContent.includes('แชททาง LINE') || 
        button.textContent.includes('ส่งรายงานสุขภาพ') || 
        button.textContent.includes('นัด Video Call')) {
        button.addEventListener('click', function() {
            showNotification('เปิดหน้าต่างใหม่...');
        });
    }
});

// Handle reward redemption
document.querySelectorAll('.border-gray-200.rounded-lg').forEach(item => {
    if (item.textContent.includes('แต้ม')) {
        item.addEventListener('click', function() {
            const pointsText = this.querySelector('.text-gray-500').textContent;
            const points = parseInt(pointsText.match(/\d+/)[0]);
            
            if (points <= 415) { // User has 415 coins
                showNotification(`แลกรางวัลสำเร็จ! ใช้ ${points} แต้ม`);
            } else {
                showNotification('แต้มไม่พอ! สะสมแต้มเพิ่ม');
            }
        });
    }
});

// Smooth scroll for internal navigation
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'
            });
        }
    });
});

// Pull to refresh functionality
let startY = 0;
let isPulling = false;

document.addEventListener('touchstart', function(e) {
    if (window.scrollY === 0) {
        startY = e.touches[0].pageY;
        isPulling = true;
    }
});

document.addEventListener('touchmove', function(e) {
    if (!isPulling) return;
    
    const currentY = e.touches[0].pageY;
    const diff = currentY - startY;
    
    if (diff > 100) {
        document.body.style.transform = `translateY(${Math.min(diff * 0.5, 100)}px)`;
    }
});

document.addEventListener('touchend', function() {
    if (isPulling) {
        document.body.style.transform = '';
        document.body.style.transition = 'transform 0.3s ease';
        
        setTimeout(() => {
            document.body.style.transition = '';
            showNotification('อัปเดตข้อมูลล่าสุด');
        }, 300);
        
        isPulling = false;
    }
});

// Add haptic feedback for mobile (if supported)
if ('vibrate' in navigator) {
    document.querySelectorAll('button').forEach(button => {
        button.addEventListener('click', function() {
            navigator.vibrate(50);
        });
    });
}

// Handle offline/online status
window.addEventListener('online', function() {
    showNotification('เชื่อมต่ออินเทอร์เน็ตแล้ว');
});

window.addEventListener('offline', function() {
    showNotification('ขาดการเชื่อมต่ออินเทอร์เน็ต');
});

// Local storage for user preferences
const saveUserPreference = (key, value) => {
    localStorage.setItem(`wp_${key}`, JSON.stringify(value));
};

const getUserPreference = (key) => {
    const value = localStorage.getItem(`wp_${key}`);
    return value ? JSON.parse(value) : null;
};

// Save tab preference
const originalSwitchTab = switchTab;
switchTab = function(tabId) {
    originalSwitchTab(tabId);
    saveUserPreference('lastTab', tabId);
};

// Restore last active tab on page load
const lastTab = getUserPreference('lastTab');
if (lastTab && document.getElementById(lastTab)) {
    switchTab(lastTab);
}

// Add animations for chart bars
const observerOptions = {
    threshold: 0.5,
    rootMargin: '0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.height = entry.target.getAttribute('data-height');
        }
    });
}, observerOptions);

document.querySelectorAll('.chart-bar').forEach(bar => {
    const height = bar.style.height;
    bar.setAttribute('data-height', height);
    bar.style.height = '0';
    observer.observe(bar);
});
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'health-green': '#10b981',
                        'health-blue': '#06b6d4',
                        'health-light': '#e0f2fe',
                        'health-dark': '#0f766e',
                    },
                    fontFamily: {
                        'thai': ['Prompt', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        * {
            font-family: 'Prompt', sans-serif;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .progress-bar {
            background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
            transition: width 0.3s ease;
        }
        .health-card {
            background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
        }
        .chart-bar {
            transition: height 0.5s ease;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        .scroll-hidden::-webkit-scrollbar {
            display: none;
        }
        .scroll-hidden {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="bg-gray-50 font-thai">
    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 bg-gradient-to-r from-health-green to-health-blue rounded-lg flex items-center justify-center">
                    <span class="text-white font-bold text-sm">WP</span>
                </div>
                <span class="font-semibold text-gray-800">WELLNET</span>
            </div>
            <div class="flex items-center space-x-3">
                <button class="relative p-2 rounded-full hover:bg-gray-100 transition">
                    <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                </button>
                <button class="w-10 h-10 rounded-full overflow-hidden hover:ring-2 hover:ring-health-blue transition">
                    <img src="https://static.photos/people/100x100/85" alt="Profile" class="w-full h-full object-cover">
                </button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="pb-20">
        <!-- Tab 1: Dashboard -->
        <div id="tab1" class="tab-content active px-4 py-6 space-y-6">
            <!-- Welcome Message -->
            <div class="bg-gradient-to-r from-health-green to-health-blue text-white rounded-2xl p-6">
                <h1 class="text-xl font-semibold mb-2">ยินดีต้อนรับกลับ!</h1>
                <p class="text-sm opacity-90">คุณอยู่ในแผนฟื้นฟู: 30-Day Restore Plan</p>
                <div class="mt-3 flex items-center space-x-4">
                    <div class="flex-1 bg-white/20 rounded-full h-2">
                        <div class="bg-white rounded-full h-2" style="width: 40%"></div>
                    </div>
                    <span class="text-xs">วันที่ 12/30</span>
                </div>
            </div>

            <!-- Today's Goals -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h2 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="target" class="w-4 h-4 mr-2 text-health-green"></i>
                    เป้าหมายวันนี้
                </h2>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <span class="text-2xl">🧬</span>
                            <div>
                                <p class="text-sm font-medium">HRV</p>
                                <p class="text-xs text-gray-500">ค่าปกติ 60-100</p>
                            </div>
                        </div>
                        <span class="text-lg font-semibold text-health-green">62/100</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <span class="text-2xl">🔴</span>
                            <div>
                                <p class="text-sm font-medium">ความดัน</p>
                                <p class="text-xs text-gray-500">เป้าหมาย &lt;125/80</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-lg font-semibold text-orange-500">134/90</span>
                            <i data-feather="trending-down" class="w-3 h-3 inline text-health-green"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <span class="text-2xl">⚖️</span>
                            <div>
                                <p class="text-sm font-medium">น้ำหนัก</p>
                                <p class="text-xs text-gray-500">เป้าหมาย 70 กก.</p>
                            </div>
                        </div>
                        <span class="text-lg font-semibold text-gray-700">71.2 กก.</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <span class="text-2xl">🧪</span>
                            <div>
                                <p class="text-sm font-medium">pH ปัสสาวะ</p>
                                <p class="text-xs text-gray-500">เป้าหมาย 6.8</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-lg font-semibold text-red-500">5.5</span>
                            <span class="text-xs text-gray-500 ml-1">(กรด)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Supplement Status -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h2 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="package" class="w-4 h-4 mr-2 text-health-blue"></i>
                    สถานะอาหารเสริมวันนี้
                </h2>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                <i data-feather="check" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium">BS</p>
                                <p class="text-xs text-gray-500">รับประทานแล้ว (07:30)</p>
                            </div>
                        </div>
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">เช้า</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                <i data-feather="check" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium">LS</p>
                                <p class="text-xs text-gray-500">รับประทานแล้ว (12:15)</p>
                            </div>
                        </div>
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">กลางวัน</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg border border-red-200 pulse-animation">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
                                <i data-feather="x" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium">PHK</p>
                                <p class="text-xs text-red-600">ยังไม่ได้รับประทาน!</p>
                            </div>
                        </div>
                        <span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full">เย็น</span>
                    </div>
                </div>
            </div>

            <!-- 30-Day Progress -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h2 class="font-semibold text-gray-800 mb-4">ความคืบหน้า 30 วัน</h2>
                <div class="relative h-32 bg-gray-100 rounded-lg overflow-hidden">
                    <div class="absolute bottom-0 left-0 right-0 flex items-end justify-around h-full pb-2">
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 30%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 45%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 50%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 60%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 55%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 65%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 70%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 75%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 80%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 78%"></div>
                        <div class="chart-bar w-2 bg-gray-300 rounded-t" style="height: 82%"></div>
                        <div class="chart-bar w-2 bg-health-green rounded-t" style="height: 85%"></div>
                    </div>
                </div>
                <div class="mt-3 flex justify-between text-xs text-gray-500">
                    <span>วันที่ 1</span>
                    <span class="font-semibold text-health-green">40% เสร็จสิ้น</span>
                    <span>วันที่ 30</span>
                </div>
            </div>
        </div>

        <!-- Tab 2: Today's Health -->
        <div id="tab2" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">สุขภาพของฉันวันนี้</h1>
                <p class="text-sm text-gray-500 mt-1">วันที่ 12 ธันวาคม 2567</p>
            </div>

            <!-- Smart Band Data -->
            <div class="bg-gradient-to-br from-health-blue to-health-green text-white rounded-2xl p-6">
                <h2 class="text-lg font-semibold mb-4">ข้อมูลจาก Smart Band & MyScale</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <div class="flex items-center space-x-2 mb-1">
                            <i data-feather="moon" class="w-4 h-4"></i>
                            <span class="text-xs">การนอน</span>
                        </div>
                        <p class="text-xl font-bold">6.3 ชม.</p>
                        <p class="text-xs opacity-90">คุณภาพ: ปานกลาง</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <div class="flex items-center space-x-2 mb-1">
                            <i data-feather="heart" class="w-4 h-4"></i>
                            <span class="text-xs">Heart Rate</span>
                        </div>
                        <p class="text-xl font-bold">82 bpm</p>
                        <p class="text-xs text-yellow-200">สูง</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <div class="flex items-center space-x-2 mb-1">
                            <i data-feather="activity" class="w-4 h-4"></i>
                            <span class="text-xs">HRV</span>
                        </div>
                        <p class="text-xl font-bold">61 ms</p>
                        <p class="text-xs opacity-90">ปกติ</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <div class="flex items-center space-x-2 mb-1">
                            <i data-feather="zap" class="w-4 h-4"></i>
                            <span class="text-xs">Stress Index</span>
                        </div>
                        <p class="text-xl font-bold">78</p>
                        <p class="text-xs text-red-200">สูง</p>
                    </div>
                </div>
            </div>

            <!-- Health Score -->
            <div class="bg-white rounded-xl p-6 shadow-sm text-center">
                <div class="relative inline-block">
                    <svg class="w-32 h-32 transform -rotate-90">
                        <circle cx="64" cy="64" r="56" stroke="#e5e7eb" stroke-width="12" fill="none"></circle>
                        <circle cx="64" cy="64" r="56" stroke="url(#gradient)" stroke-width="12" fill="none"
                                stroke-dasharray="351.86" stroke-dashoffset="112.6" stroke-linecap="round"></circle>
                        <defs>
                            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" stop-color="#10b981"></stop>
                                <stop offset="100%" stop-color="#06b6d4"></stop>
                            </linearGradient>
                        </defs>
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="text-3xl font-bold text-gray-800">68</span>
                        <span class="text-xs text-gray-500">/ 100</span>
                    </div>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mt-4">คะแนนสุขภาพวันนี้</h3>
                <p class="text-sm text-gray-500 mt-1">อยู่ในเกณฑ์ดี สามารถปรับปรุงได้</p>
            </div>

            <!-- Recommendations -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h2 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="info" class="w-4 h-4 mr-2 text-health-blue"></i>
                    คำแนะนำสำหรับวันนี้
                </h2>
                <div class="space-y-3">
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                            <i data-feather="droplet" class="w-4 h-4 text-blue-600"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-800">ดื่มน้ำมากขึ้น</p>
                            <p class="text-xs text-gray-500">เป้าหมาย 2.5 ลิตร ตอนนี้ดื่มไป 1.2 ลิตร</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                            <i data-feather="trending-up" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-800">เดินเพิ่มอีก</p>
                            <p class="text-xs text-gray-500">เป้าหมาย 6,000 ก้าว ตอนนี้เดินไป 3,247 ก้าว</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                            <i data-feather="coffee" class="w-4 h-4 text-orange-600"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-800">หลีกเลี่ยงคาเฟอีน</p>
                            <p class="text-xs text-gray-500">Stress Index สูง ควรหลีกเลี่ยงเครื่องดื่มกระตุ้น</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 3: 30-Day Recovery Plan -->
        <div id="tab3" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">แผนการฟื้นฟู 30 วัน</h1>
                <p class="text-sm text-gray-500 mt-1">วันที่ 12 ธันวาคม 2567</p>
            </div>

            <!-- Progress Overview -->
            <div class="bg-gradient-to-r from-health-green to-health-blue text-white rounded-2xl p-6">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-semibold">ความคืบหน้าทั้งหมด</h2>
                    <span class="bg-white/20 px-3 py-1 rounded-full text-sm">10/12 วัน</span>
                </div>
                <div class="bg-white/20 rounded-full h-3">
                    <div class="bg-white rounded-full h-3" style="width: 83%"></div>
                </div>
                <p class="text-sm mt-3 opacity-90">สำเร็จ 83% ของภารกิจที่กำหนด</p>
            </div>

            <!-- Today's Tasks -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h2 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="check-square" class="w-4 h-4 mr-2 text-health-green"></i>
                    ภารกิจวันนี้
                </h2>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-medium text-gray-600">08:00</span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">กิน BS 1 เม็ด</p>
                                <p class="text-xs text-gray-500">หลังอาหารเช้า</p>
                            </div>
                        </div>
                        <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                            <i data-feather="check" class="w-4 h-4 text-white"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-medium text-gray-600">12:00</span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">ดื่มน้ำ 1 ลิตร + LS</p>
                                <p class="text-xs text-gray-500">ก่อนอาหารกลางวัน</p>
                            </div>
                        </div>
                        <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                            <i data-feather="check" class="w-4 h-4 text-white"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg border border-red-200">
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-medium text-gray-600">18:00</span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">ทาน PHK ก่อนอาหาร</p>
                                <p class="text-xs text-red-600">ยังไม่ทำ!</p>
                            </div>
                        </div>
                        <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
                            <i data-feather="clock" class="w-4 h-4 text-white"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-medium text-gray-600">All Day</span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">เดินให้ครบ 5,000 ก้าว</p>
                                <p class="text-xs text-green-600">สำเร็จ 5,247 ก้าว</p>
                            </div>
                        </div>
                        <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                            <i data-feather="check" class="w-4 h-4 text-white"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-medium text-gray-600">Before bed</span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-800">วัด HRV ก่อนนอน</p>
                                <p class="text-xs text-gray-500">รอดำเนินการ</p>
                            </div>
                        </div>
                        <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
                            <i data-feather="clock" class="w-4 h-4 text-white"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Weekly Chart -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h2 class="font-semibold text-gray-800 mb-4">สถิติ 7 วันล่าสุด</h2>
                <div class="space-y-3">
                    <div>
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>ความสำเร็จภารกิจ</span>
                            <span>83%</span>
                        </div>
                        <div class="flex space-x-1">
                            <div class="flex-1 bg-green-500 h-2 rounded"></div>
                            <div class="flex-1 bg-green-500 h-2 rounded"></div>
                            <div class="flex-1 bg-green-500 h-2 rounded"></div>
                            <div class="flex-1 bg-green-500 h-2 rounded"></div>
                            <div class="flex-1 bg-yellow-500 h-2 rounded"></div>
                            <div class="flex-1 bg-green-500 h-2 rounded"></div>
                            <div class="flex-1 bg-green-500 h-2 rounded"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 4: Recovery Products -->
        <div id="tab4" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">ผลิตภัณฑ์ฟื้นฟูสุขภาพ</h1>
                <p class="text-sm text-gray-500 mt-1">แนะนำสำหรับคุณโดยเฉพาะ</p>
            </div>

            <!-- Product Pack 1 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-red-500 to-pink-500 p-4">
                    <h3 class="text-white font-semibold text-lg">📦 แพ็ก 1: Deep Blood Flow</h3>
                </div>
                <div class="p-4">
                    <ul class="space-y-2 mb-4">
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            BS 30 เม็ด
                        </li>
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            เหมาะสำหรับ: ความดันสูง, ชาเท้า
                        </li>
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            ปรับปรุงการไหลเวียนโลหิต
                        </li>
                    </ul>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-2xl font-bold text-gray-800">990 บ.</p>
                            <p class="text-xs text-gray-500 line-through">1,290 บ.</p>
                        </div>
                        <button class="bg-health-green text-white px-6 py-2 rounded-lg font-medium hover:bg-green-600 transition">
                            เพิ่มลงตะกร้า
                        </button>
                    </div>
                </div>
            </div>

            <!-- Product Pack 2 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-cyan-500 p-4">
                    <h3 class="text-white font-semibold text-lg">📦 แพ็ก 2: Detox + Recovery</h3>
                </div>
                <div class="p-4">
                    <ul class="space-y-2 mb-4">
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            LS + PHK ครบเซ็ต
                        </li>
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            ล้างพิษ + ปรับสมดุลเลือด
                        </li>
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            ฟื้นฟูระบบขับถ่าย
                        </li>
                    </ul>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-2xl font-bold text-gray-800">1,290 บ.</p>
                            <p class="text-xs text-red-500">ลดพิเศษ -23%</p>
                        </div>
                        <button class="bg-health-blue text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition">
                            ซื้อซ้ำ
                        </button>
                    </div>
                </div>
            </div>

            <!-- Product Pack 3 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-green-500 to-teal-500 p-4">
                    <h3 class="text-white font-semibold text-lg">📦 แพ็ก 3: 30-Day Full Plan</h3>
                </div>
                <div class="p-4">
                    <ul class="space-y-2 mb-4">
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            BS + LS + PHK ครบเซ็ต
                        </li>
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            คู่มือ Meal Plan 30 วัน
                        </li>
                        <li class="flex items-center text-sm text-gray-700">
                            <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2"></i>
                            ปรึกษาโค้ช 2 ครั้ง
                        </li>
                    </ul>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-2xl font-bold text-gray-800">2,790 บ.</p>
                            <p class="text-xs text-green-600">Subscription ลด 20%</p>
                        </div>
                        <button class="bg-gradient-to-r from-green-500 to-teal-500 text-white px-6 py-2 rounded-lg font-medium hover:opacity-90 transition">
                            สมัครแบบรายเดือน
                        </button>
                    </div>
                </div>
            </div>

            <!-- Special Offer -->
            <div class="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h4 class="font-semibold">🎁 ข้อเสนอพิเศษ!</h4>
                        <p class="text-sm opacity-90 mt-1">ซื้อครบ 2,500 บ. จัดส่งฟรี!</p>
                    </div>
                    <span class="bg-white/20 px-3 py-1 rounded-full text-sm">จำกัดเวลา</span>
                </div>
            </div>
        </div>

        <!-- Tab 5: Historical Results -->
        <div id="tab5" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">ผลลัพธ์ย้อนหลัง</h1>
                <p class="text-sm text-gray-500 mt-1">ติดตามความก้าวหน้าของคุณ</p>
            </div>

            <!-- Time Range Selector -->
            <div class="flex justify-center space-x-2">
                <button class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg text-sm font-medium">7 วัน</button>
                <button class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg text-sm font-medium">14 วัน</button>
                <button class="px-4 py-2 bg-health-green text-white rounded-lg text-sm font-medium">30 วัน</button>
            </div>

            <!-- HRV Chart -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">HRV (ms)</h3>
                <div class="relative h-32 bg-gray-50 rounded-lg p-2">
                    <svg class="w-full h-full">
                        <polyline points="0,100 20,95 40,90 60,85 80,75 100,70 120,72 140,68 160,65 180,60 200,58 220,55 240,52 260,50 280,48 300,45"
                                  fill="none" stroke="#10b981" stroke-width="2"></polyline>
                    </svg>
                </div>
                <div class="mt-3 flex justify-between text-xs text-gray-500">
                    <span>48 ms</span>
                    <span class="text-health-green font-medium">↑ 27%</span>
                    <span>61 ms</span>
                </div>
            </div>

            <!-- Blood Pressure Chart -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">ความดันโลหิต (Systolic)</h3>
                <div class="relative h-32 bg-gray-50 rounded-lg p-2">
                    <svg class="w-full h-full">
                        <polyline points="0,20 20,25 40,28 60,35 80,40 100,42 120,45 140,48 160,50 180,52 200,55 220,58 240,60 260,62 280,65 300,68"
                                  fill="none" stroke="#ef4444" stroke-width="2"></polyline>
                    </svg>
                </div>
                <div class="mt-3 flex justify-between text-xs text-gray-500">
                    <span>145</span>
                    <span class="text-health-green font-medium">↓ 12%</span>
                    <span>128</span>
                </div>
            </div>

            <!-- Weight Progress -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">น้ำหนัก (กก.)</h3>
                <div class="flex items-center justify-between">
                    <div class="text-center">
                        <p class="text-2xl font-bold text-gray-400">72.4</p>
                        <p class="text-xs text-gray-500">เริ่มต้น</p>
                    </div>
                    <div class="flex-1 mx-4">
                        <div class="bg-gray-200 rounded-full h-3 relative">
                            <div class="progress-bar bg-gradient-to-r from-health-green to-health-blue rounded-full h-3" style="width: 65%"></div>
                        </div>
                    </div>
                    <div class="text-center">
                        <p class="text-2xl font-bold text-health-green">71.2</p>
                        <p class="text-xs text-gray-500">ปัจจุบัน</p>
                    </div>
                </div>
                <p class="text-center text-sm text-green-600 mt-2 font-medium">ลดลง 1.2 กก. ✨</p>
            </div>

            <!-- pH Level -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">pH ปัสสาวะ</h3>
                <div class="flex items-center justify-between">
                    <div class="text-center">
                        <p class="text-2xl font-bold text-red-500">5.1</p>
                        <p class="text-xs text-gray-500">เริ่มต้น</p>
                    </div>
                    <div class="flex-1 mx-4">
                        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-full h-3 relative">
                            <div class="absolute w-3 h-3 bg-white border-2 border-gray-800 rounded-full" style="left: 75%; top: -2px"></div>
                        </div>
                    </div>
                    <div class="text-center">
                        <p class="text-2xl font-bold text-yellow-500">6.6</p>
                        <p class="text-xs text-gray-500">ปัจจุบัน</p>
                    </div>
                </div>
                <p class="text-center text-sm text-yellow-600 mt-2 font-medium">ดีขึ้นมาก ใกล้เป้าหมาย! 🎯</p>
            </div>

            <!-- Summary -->
            <div class="bg-gradient-to-r from-health-green to-health-blue text-white rounded-xl p-4">
                <h3 class="font-semibold mb-2">สรุป 30 วัน</h3>
                <div class="space-y-1 text-sm">
                    <p>✅ HRV ดีขึ้น 27%</p>
                    <p>✅ ความดันลดลง 12%</p>
                    <p>✅ น้ำหนักลด 1.2 กก.</p>
                    <p>🎯 pH เข้าใกล้เป้าหมาย</p>
                </div>
            </div>
        </div>

        <!-- Tab 6: Your Consultant -->
        <div id="tab6" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">ที่ปรึกษาของคุณ</h1>
                <p class="text-sm text-gray-500 mt-1">ผู้เชี่ยวชาญดูแลสุขภาพของคุณ</p>
            </div>

            <!-- Consultant Profile -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-health-green to-health-blue p-6 text-center">
                    <div class="w-24 h-24 mx-auto rounded-full overflow-hidden border-4 border-white mb-3">
                        <img src="https://static.photos/people/200x200/90" alt="Consultant" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-semibold text-white">กัลยาณี สุขใจดี</h3>
                    <p class="text-white/90 text-sm">Certified Wellness Consultant</p>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="text-center p-3 bg-gray-50 rounded-lg">
                            <i data-feather="award" class="w-6 h-6 mx-auto text-health-green mb-1"></i>
                            <p class="text-xs text-gray-500">ระดับ</p>
                            <p class="text-sm font-semibold">WP-CWC</p>
                        </div>
                        <div class="text-center p-3 bg-gray-50 rounded-lg">
                            <i data-feather="users" class="w-6 h-6 mx-auto text-health-blue mb-1"></i>
                            <p class="text-xs text-gray-500">ดูแลผู้ใช้</p>
                            <p class="text-sm font-semibold">57 คน</p>
                        </div>
                    </div>
                    <div class="space-y-3 text-sm">
                        <div class="flex items-center space-x-2">
                            <i data-feather="calendar" class="w-4 h-4 text-gray-500"></i>
                            <span class="text-gray-700">นัด Video Call ได้ทุกพฤหัสบดี</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <i data-feather="clock" class="w-4 h-4 text-gray-500"></i>
                            <span class="text-gray-700">ตอบกลับภายใน 2 ชม.</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <i data-feather="star" class="w-4 h-4 text-yellow-500"></i>
                            <span class="text-gray-700">คะแนน: 4.9/5.0 (23 รีวิว)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Options -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">ติดต่อที่ปรึกษา</h3>
                <div class="space-y-3">
                    <button class="w-full flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200 hover:bg-green-100 transition">
                        <div class="flex items-center space-x-3">
                            <i data-feather="message-circle" class="w-5 h-5 text-green-600"></i>
                            <span class="text-sm font-medium text-gray-800">แชททาง LINE</span>
                        </div>
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">Online</span>
                    </button>
                    <button class="w-full flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200 hover:bg-blue-100 transition">
                        <div class="flex items-center space-x-3">
                            <i data-feather="send" class="w-5 h-5 text-blue-600"></i>
                            <span class="text-sm font-medium text-gray-800">ส่งรายงานสุขภาพ</span>
                        </div>
                        <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
                    </button>
                    <button class="w-full flex items-center justify-between p-3 bg-purple-50 rounded-lg border border-purple-200 hover:bg-purple-100 transition">
                        <div class="flex items-center space-x-3">
                            <i data-feather="video" class="w-5 h-5 text-purple-600"></i>
                            <span class="text-sm font-medium text-gray-800">นัด Video Call</span>
                        </div>
                        <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
                    </button>
                </div>
            </div>

            <!-- Recent Messages -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">ข้อความล่าสุด</h3>
                <div class="space-y-3">
                    <div class="flex space-x-3">
                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-xs font-semibold text-green-600">ก</span>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm text-gray-700">สวัสดีครับ ผลการวัดวันนี้ HRV ดีขึ้นนะครับ แนะนำให้ดื่มน้ำเพิ่มครับ</p>
                            <p class="text-xs text-gray-500 mt-1">2 ชม.ที่แล้ว</p>
                        </div>
                    </div>
                    <div class="flex space-x-3">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-xs font-semibold text-white">ฉ</span>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm text-gray-700">ขอบคุณครับ วันนี้จะพยายามดื่มน้ำให้ครบ 2.5 ลิตรครับ</p>
                            <p class="text-xs text-gray-500 mt-1">1 ชม.ที่แล้ว</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 7: Mission & Rewards -->
        <div id="tab7" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">ระบบภารกิจ & รางวัล</h1>
                <p class="text-sm text-gray-500 mt-1">สะสมแต้มรับรางวัล</p>
            </div>

            <!-- WP Coin Summary -->
            <div class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-xl p-6">
                <div class="text-center">
                    <p class="text-sm opacity-90 mb-2">WP Coin ที่สะสม</p>
                    <p class="text-4xl font-bold mb-3">415</p>
                    <div class="flex justify-center space-x-4 text-sm">
                        <div>
                            <p class="opacity-90">วันนี้ได้</p>
                            <p class="font-semibold">+12</p>
                        </div>
                        <div class="w-px bg-white/30"></div>
                        <div>
                            <p class="opacity-90">อันดับ</p>
                            <p class="font-semibold">#42</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Daily Missions -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="target" class="w-4 h-4 mr-2 text-health-green"></i>
                    ภารกิจประจำวัน
                </h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                <i data-feather="check" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800">วัด HRV</p>
                                <p class="text-xs text-gray-500">ได้ 3 แต้ม</p>
                            </div>
                        </div>
                        <span class="text-sm font-semibold text-green-600">✅</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                <i data-feather="check" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800">กินผลิตภัณฑ์ครบ</p>
                                <p class="text-xs text-gray-500">ได้ 5 แต้ม</p>
                            </div>
                        </div>
                        <span class="text-sm font-semibold text-green-600">✅</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
                                <i data-feather="clock" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800">เดินครบ 6,000 ก้าว</p>
                                <p class="text-xs text-gray-500">รอ 4 แต้ม</p>
                            </div>
                        </div>
                        <span class="text-sm font-semibold text-gray-400">0/6,000</span>
                    </div>
                </div>
            </div>

            <!-- Weekly Challenges -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="zap" class="w-4 h-4 mr-2 text-orange-500"></i>
                    ภารกิจประจำสัปดาห์
                </h3>
                <div class="space-y-3">
                    <div class="p-3 bg-orange-50 rounded-lg">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <p class="text-sm font-medium text-gray-800">7 วันติดต่อกัน!</p>
                                <p class="text-xs text-gray-500">ทำภารกิจครบติดต่อกัน 7 วัน</p>
                            </div>
                            <span class="text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded-full">50 แต้ม</span>
                        </div>
                        <div class="bg-orange-200 rounded-full h-2">
                            <div class="bg-orange-500 rounded-full h-2" style="width: 71%"></div>
                        </div>
                        <p class="text-xs text-gray-600 mt-1">5/7 วัน</p>
                    </div>
                    <div class="p-3 bg-purple-50 rounded-lg">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <p class="text-sm font-medium text-gray-800">สุขภาพดีเด่น</p>
                                <p class="text-xs text-gray-500">คะแนนสุขภาพเฉลี่ย > 80</p>
                            </div>
                            <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full">100 แต้ม</span>
                        </div>
                        <div class="bg-purple-200 rounded-full h-2">
                            <div class="bg-purple-500 rounded-full h-2" style="width: 68%"></div>
                        </div>
                        <p class="text-xs text-gray-600 mt-1">เฉลี่ย 68/100</p>
                    </div>
                </div>
            </div>

            <!-- Rewards -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="gift" class="w-4 h-4 mr-2 text-red-500"></i>
                    แลกรางวัล
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="p-3 border border-gray-200 rounded-lg text-center">
                        <span class="text-2xl">🎯</span>
                        <p class="text-xs font-medium mt-1">ส่วนลด 10%</p>
                        <p class="text-xs text-gray-500">200 แต้ม</p>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center">
                        <span class="text-2xl">📦</span>
                        <p class="text-xs font-medium mt-1">ผลิตภัณฑ์ฟรี</p>
                        <p class="text-xs text-gray-500">500 แต้ม</p>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center">
                        <span class="text-2xl">👨‍⚕️</span>
                        <p class="text-xs font-medium mt-1">ปรึกษาโค้ช</p>
                        <p class="text-xs text-gray-500">150 แต้ม</p>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center">
                        <span class="text-2xl">🏆</span>
                        <p class="text-xs font-medium mt-1">VIP 1 เดือน</p>
                        <p class="text-xs text-gray-500">1000 แต้ม</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 8: Profile -->
        <div id="tab8" class="tab-content px-4 py-6 space-y-6">
            <div class="text-center mb-6">
                <div class="w-24 h-24 mx-auto rounded-full overflow-hidden border-4 border-health-green mb-3">
                    <img src="https://static.photos/people/200x200/85" alt="Profile" class="w-full h-full object-cover">
                </div>
                <h1 class="text-2xl font-bold text-gray-800">พรชัย วัฒนะ</h1>
                <p class="text-sm text-gray-500 mt-1">สมาชิกตั้งแต่ 15 ตุลาคม 2567</p>
            </div>

            <!-- Profile Information -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4">ข้อมูลส่วนตัว</h3>
                <div class="space-y-3">
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-sm text-gray-500">อายุ</span>
                        <span class="text-sm font-medium text-gray-800">47 ปี</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-sm text-gray-500">ส่วนสูง</span>
                        <span class="text-sm font-medium text-gray-800">170 ซม.</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-sm text-gray-500">เป้าหมาย</span>
                        <span class="text-sm font-medium text-gray-800">ลดไขมันสะสมในช่องท้อง</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-sm text-gray-500">โรคประจำตัว</span>
                        <span class="text-sm font-medium text-gray-800">ความดัน, ภูมิแพ้</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-sm text-gray-500">สินค้าที่ใช้</span>
                        <span class="text-sm font-medium text-gray-800">BS, LS</span>
                    </div>
                </div>
            </div>

            <!-- Recovery Index -->
            <div class="bg-gradient-to-r from-health-green to-health-blue text-white rounded-xl p-6">
                <h3 class="text-lg font-semibold mb-4">คะแนนฟื้นฟู (Recovery Index)</h3>
                <div class="relative inline-block">
                    <svg class="w-40 h-40 transform -rotate-90">
                        <circle cx="80" cy="80" r="70" stroke="rgba(255,255,255,0.3)" stroke-width="14" fill="none"></circle>
                        <circle cx="80" cy="80" r="70" stroke="white" stroke-width="14" fill="none"
                                stroke-dasharray="439.82" stroke-dashoffset="123.15" stroke-linecap="round"></circle>
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="text-4xl font-bold">72</span>
                        <span class="text-sm opacity-90">/ 100</span>
                    </div>
                </div>
                <p class="text-center mt-3 text-sm">อยู่ในเกณฑ์ดี รักษาต่อไป!</p>
            </div>

            <!-- Achievements -->
            <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold text-gray-800 mb-4 flex items-center">
                    <i data-feather="award" class="w-4 h-4 mr-2 text-yellow-500"></i>
                    ความสำเร็จ
                </h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto bg-yellow-100 rounded-full flex items-center justify-center mb-1">
                            <span class="text-2xl">🏅</span>
                        </div>
                        <p class="text-xs text-gray-600">7 วันแรก</p>
                    </div>
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-1">
                            <span class="text-2xl">💧</span>
                        </div>
                        <p class="text-xs text-gray-600">ดื่มน้ำดี</p>
                    </div>
                    <div class="text-center">
                        <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-1">
                            <span class="text-2xl">🎯</span>
                        </div>
                        <p class="text-xs text-gray-600">เป้าหมาย HRV</p>
                    </div>
                </div>
            </div>

            <!-- Settings -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition">
                    <div class="flex items-center space-x-3">
                        <i data-feather="settings" class="w-5 h-5 text-gray-600"></i>
                        <span class="text-sm font-medium text-gray-800">ตั้งค่า</span>
                    </div>
                    <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
                </button>
                <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition border-t border-gray-100">
                    <div class="flex items-center space-x-3">
                        <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
                        <span class="text-sm font-medium text-gray-800">การแจ้งเตือน</span>
                    </div>
                    <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
                </button>
                <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition border-t border-gray-100">
                    <div class="flex items-center space-x-3">
                        <i data-feather="help-circle" class="w-5 h-5 text-gray-600"></i>
                        <span class="text-sm font-medium text-gray-800">ช่วยเหลือ</span>
                    </div>
                    <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
                </button>
                <button class="w-full flex items-center justify-between p-4 hover:bg-red-50 transition border-t border-gray-100">
                    <div class="flex items-center space-x-3">
                        <i data-feather="log-out" class="w-5 h-5 text-red-600"></i>
                        <span class="text-sm font-medium text-red-600">ออกจากระบบ</span>
                    </div>
                </button>
            </div>
        </div>
    </main>

    <!-- Bottom Navigation -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
        <div class="flex justify-around py-2">
            <button onclick="switchTab('tab1')" class="nav-btn flex flex-col items-center py-2 px-3 text-health-green" data-tab="tab1">
                <i data-feather="home" class="w-5 h-5"></i>
                <span class="text-xs mt-1">หน้าหลัก</span>
            </button>
            <button onclick="switchTab('tab2')" class="nav-btn flex flex-col items-center py-2 px-3 text-gray-400" data-tab="tab2">
                <i data-feather="activity" class="w-5 h-5"></i>
                <span class="text-xs mt-1">สุขภาพวันนี้</span>
            </button>
            <button onclick="switchTab('tab5')" class="nav-btn flex flex-col items-center py-2 px-3 text-gray-400" data-tab="tab5">
                <i data-feather="trending-up" class="w-5 h-5"></i>
                <span class="text-xs mt-1">ผลย้อนหลัง</span>
            </button>
            <button onclick="switchTab('tab4')" class="nav-btn flex flex-col items-center py-2 px-3 text-gray-400" data-tab="tab4">
                <i data-feather="shopping-bag" class="w-5 h-5"></i>
                <span class="text-xs mt-1">สั่งซื้อ</span>
            </button>
            <button onclick="switchTab('tab8')" class="nav-btn flex flex-col items-center py-2 px-3 text-gray-400" data-tab="tab8">
                <i data-feather="user" class="w-5 h-5"></i>
                <span class="text-xs mt-1">โปรไฟล์</span>
            </button>
        </div>
    </nav>

    <script src="script.js"></script>
    <script>feather.replace();</script>
</body>
</html>