document.addEventListener('DOMContentLoaded', function() {
    // Data from Global Forest Watch and FAO (2023 estimates) for deforestation
const deforestationData = [
        { country: 'Brazil', percentage: 31.2, color: '#FF3333' },
        { country: 'Indonesia', percentage: 12.8, color: '#3399FF' },
        { country: 'D.R. Congo', percentage: 9.5, color: '#33CC99' },
        { country: 'Southeast Asia', percentage: 18.3, color: '#FF9933', countries: ['Myanmar', 'Thailand', 'Laos', 'Vietnam', 'Cambodia', 'Malaysia', 'Philippines'] },
        { country: 'Colombia', percentage: 6.7, color: '#FFCC33' },
        { country: 'Bolivia', percentage: 5.4, color: '#CC66FF' },
        { country: 'Peru', percentage: 4.9, color: '#FF66CC' },
        { country: 'Other Countries', percentage: 11.2, color: '#999999' }
];
    // Create deforestation chart
    const deforestaionCtx = document.getElementById('deforestationChart').getContext('2d');
    const deforestationChart = new Chart(deforestaionCtx, {
type: 'pie',
        data: {
            labels: deforestationData.map(item => item.country),
            datasets: [{
                data: deforestationData.map(item => item.percentage),
                backgroundColor: deforestationData.map(item => item.color),
                borderWidth: 1,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12,
                        padding: 20,
                        font: {
                            size: 14
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const dataItem = deforestationData[context.dataIndex];
                            let tooltip = `${context.label}: ${context.raw}%`;
                            if (dataItem.countries) {
                                tooltip += ` (Includes: ${dataItem.countries.join(', ')})`;
                            }
                            return tooltip;
                        }
                    }
                },
datalabels: {
                    display: false
                }
            },
            cutout: '50%',
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    });

    // Oil Palm Cultivation Data (FAO, World Bank)
    const oilPalmData = {
        labels: ['1961', '1970', '1980', '1990', '2000', '2006'],
        datasets: [{
            label: 'Oil Palm Cultivation (Million Hectares)',
            data: [3.6, 4.2, 5.8, 8.1, 10.7, 13.2],
            backgroundColor: 'rgba(255, 159, 64, 0.2)',
            borderColor: 'rgba(255, 159, 64, 1)',
            borderWidth: 2,
            tension: 0.3,
            fill: true
        }]
    };

    // Create oil palm cultivation chart
    const oilPalmCtx = document.createElement('canvas');
    oilPalmCtx.id = 'oilPalmChart';
    document.querySelector('.chart-container').insertAdjacentElement('afterend', oilPalmCtx);
    
    const oilPalmChart = new Chart(oilPalmCtx.getContext('2d'), {
        type: 'line',
        data: oilPalmData,
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Global Palm Oil Cultivation Growth (1961-2006)',
font: {
                        size: 16
                    }
                },
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.dataset.label}: ${context.raw} million ha`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    min: 3,
                    title: {
                        display: true,
                        text: 'Area (Million Hectares)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Year'
                    }
                }
            }
        }
    });
    // Price comparison data per gram (2023 estimates)
    const priceData = {
        labels: ['Sun Bear Gallbladder (black market)', 'Gold', 'Platinum'],
        datasets: [{
            label: 'Price per gram (USD)',
            data: [153, 135, 48],
            backgroundColor: [
                'rgba(139, 69, 19, 0.7)',
                'rgba(255, 215, 0, 0.7)',
                'rgba(229, 228, 226, 0.7)'
            ],
            borderColor: [
                'rgba(139, 69, 19, 1)',
                'rgba(255, 215, 0, 1)',
                'rgba(229, 228, 226, 1)'
            ],
            borderWidth: 1
        }]
    };
// Create price comparison chart
    const priceCtx = document.createElement('canvas');
    priceCtx.id = 'priceComparisonChart';
    document.getElementById('oilPalmChart').parentNode.parentNode.insertAdjacentElement('afterend', priceCtx);
    
    new Chart(priceCtx, {
        type: 'bar',
        data: priceData,
        options: {
            indexAxis: 'y',
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Price Comparison per Gram (USD)',
                    font: {
                        size: 16
                    }
                },
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw.toLocaleString()}/gram`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Price per gram (USD)'
                    }
                }
            }
        }
    });
});