script.js

// Initialize AOS
AOS.init({
    duration: 1000,
    once: true,
    offset: 100
});

// Parallax Effect
window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const parallaxElements = document.querySelectorAll('.parallax-layer');
    
    parallaxElements.forEach(element => {
        const speed = element.dataset.speed || 0.5;
        const yPos = -(scrolled * speed);
        element.style.transform = `translateY(${yPos}px)`;
    });
});

// Modal Functions
function openModal(modalId) {
    const modal = document.getElementById(`${modalId}-modal`);
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    if (modalId === 'coa') {
        setTimeout(() => initCharts(), 100);
    }
}

function closeModal(modalId) {
    const modal = document.getElementById(`${modalId}-modal`);
    modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
}

function showProductDetails(productId) {
    const productData = {
        '7OH-Coffee': {
            title: '7OH-COFFEE TABLETS',
            content: `
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div>
                        <img src="https://static.photos/technology/640x360/123" alt="7OH Coffee" class="w-full rounded-lg mb-6">
                        <div class="glass-border p-6 rounded-xl">
                            <h3 class="font-bebas text-2xl text-primary-400 mb-4">SPECIFICATIONS</h3>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Active Compound</span>
                                    <span class="text-primary-400">7-Hydroxymitragynine</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Dosage</span>
                                    <span class="text-primary-400">100mg per tablet</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Tablets per Bottle</span>
                                    <span class="text-primary-400">60 tablets</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Flavor</span>
                                    <span class="text-primary-400">Premium Coffee</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-bebas text-2xl text-primary-400 mb-4">PRODUCT ANALYSIS</h3>
                        <canvas id="productChart" class="mb-6"></canvas>
                        <div class="glass-border p-6 rounded-xl">
                            <h4 class="font-bebas text-xl text-primary-400 mb-3">BATCH DATA</h4>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Purity</span>
                                    <span class="text-primary-400">99.8%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Potency</span>
                                    <span class="text-primary-400">98.5%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Dissolution Rate</span>
                                    <span class="text-primary-400">95%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Stability</span>
                                    <span class="text-primary-400">24 months</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `
        },
        'Focus-Blend': {
            title: 'FOCUS BLEND',
            content: `
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div>
                        <img src="https://static.photos/technology/640x360/456" alt="Focus Blend" class="w-full rounded-lg mb-6">
                        <div class="glass-border p-6 rounded-xl">
                            <h3 class="font-bebas text-2xl text-primary-400 mb-4">SPECIFICATIONS</h3>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Active Compounds</span>
                                    <span class="text-primary-400">Multi-blend</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Dosage</span>
                                    <span class="text-primary-400">200mg per capsule</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Capsules per Bottle</span>
                                    <span class="text-primary-400">90 capsules</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Type</span>
                                    <span class="text-primary-400">Cognitive Enhancer</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-bebas text-2xl text-primary-400 mb-4">PRODUCT ANALYSIS</h3>
                        <canvas id="productChart" class="mb-6"></canvas>
                        <div class="glass-border p-6 rounded-xl">
                            <h4 class="font-bebas text-xl text-primary-400 mb-3">BATCH DATA</h4>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Purity</span>
                                    <span class="text-primary-400">99.2%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Potency</span>
                                    <span class="text-primary-400">97.8%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Bioavailability</span>
                                    <span class="text-primary-400">92%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Stability</span>
                                    <span class="text-primary-400">18 months</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `
        },
        'Recovery-Plus': {
            title: 'RECOVERY PLUS',
            content: `
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div>
                        <img src="https://static.photos/technology/640x360/789" alt="Recovery Plus" class="w-full rounded-lg mb-6">
                        <div class="glass-border p-6 rounded-xl">
                            <h3 class="font-bebas text-2xl text-primary-400 mb-4">SPECIFICATIONS</h3>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Active Compounds</span>
                                    <span class="text-primary-400">Recovery Matrix</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Dosage</span>
                                    <span class="text-primary-400">300mg per serving</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Servings per Container</span>
                                    <span class="text-primary-400">30 servings</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Form</span>
                                    <span class="text-primary-400">Powder</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-bebas text-2xl text-primary-400 mb-4">PRODUCT ANALYSIS</h3>
                        <canvas id="productChart" class="mb-6"></canvas>
                        <div class="glass-border p-6 rounded-xl">
                            <h4 class="font-bebas text-xl text-primary-400 mb-3">BATCH DATA</h4>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Purity</span>
                                    <span class="text-primary-400">98.9%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Potency</span>
                                    <span class="text-primary-400">96.5%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Absorption Rate</span>
                                    <span class="text-primary-400">88%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Stability</span>
                                    <span class="text-primary-400">24 months</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `
        }
    };

    const product = productData[productId];
    document.getElementById('product-title').textContent = product.title;
    document.getElementById('product-content').innerHTML = product.content;
    
    openModal('product');
    setTimeout(() => initProductChart(), 100);
}

// Chart Functions
function initCharts() {
    // Purity Chart
    const purityCtx = document.getElementById('purityChart').getContext('2d');
    new Chart(purityCtx, {
        type: 'doughnut',
        data: {
            labels: ['Pure Compound', 'Other'],
            datasets: [{
                data: [99.8, 0.2],
                backgroundColor: ['#22c55e', '#4a5568'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: { color: '#ffffff' }
                },
                title: {
                    display: true,
                    text: 'PURITY ANALYSIS',
                    color: '#22c55e',
                    font: { size: 16, family: 'Bebas Neue' }
                }
            }
        }
    });

    // Compound Chart
    const compoundCtx = document.getElementById('compoundChart').getContext('2d');
    new Chart(compoundCtx, {
        type: 'bar',
        data: {
            labels: ['7OH', 'MG', 'Alkaloids', 'Flavonoids'],
            datasets: [{
                label: 'Concentration (%)',
                data: [45, 25, 20, 10],
                backgroundColor: '#22c55e',
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: { color: '#ffffff' }
                },
                title: {
                    display: true,
                    text: 'COMPOUND BREAKDOWN',
                    color: '#22c55e',
                    font: { size: 16, family: 'Bebas Neue' }
                }
            },
            scales: {
                y: {
                    ticks: { color: '#ffffff' },
                    grid: { color: 'rgba(255, 255, 255, 0.1)' }
                },
                x: {
                    ticks: { color: '#ffffff' },
                    grid: { color: 'rgba(255, 255, 255, 0.1)' }
                }
            }
        }
    });
}

function initProductChart() {
    const productCtx = document.getElementById('productChart');
    if (!productCtx) return;
    
    new Chart(productCtx.getContext('2d'), {
        type: 'radar',
        data: {
            labels: ['Purity', 'Potency', 'Bioavailability', 'Stability', 'Efficacy'],
            datasets: [{
                label: 'Product Metrics',
                data: [99, 98, 95, 97, 96],
                backgroundColor: 'rgba(34, 197, 94, 0.2)',
                borderColor: '#22c55e',
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: { color: '#ffffff' }
                }
            },
            scales: {
                r: {
                    angleLines: { color: 'rgba(255, 255, 255, 0.1)' },
                    grid: { color: 'rgba(255, 255, 255, 0.1)' },
                    pointLabels: { color: '#ffffff' },
                    ticks: { 
                        color: '#ffffff',
                        backdropColor: 'transparent'
                    }
                }
            }
        }
    });
}

// Initialize Feather Icons
feather.replace();

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