<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Calculate your personal carbon footprint in India. Track your monthly emissions from food delivery, travel, shopping and more.">
    <title>Carbon Footprint Calculator - India</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-green: #2d5016;
            --secondary-green: #4a7c2d;
            --accent-green: #00a86b;
            --light-bg: #f8faf9;
            --text-dark: #1a1a1a;
            --text-light: #666666;
            --border-color: #e0e4e0;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-dark);
            line-height: 1.7;
            background: var(--light-bg);
        }
        
        .container {
            max-width: 700px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 2.2rem;
            color: var(--primary-green);
            margin-bottom: 12px;
            font-weight: 700;
        }
        
        .header p {
            font-size: 1.1rem;
            color: var(--text-light);
        }
        
        .card {
            background: white;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
            margin-bottom: 24px;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: var(--border-color);
            border-radius: 4px;
            margin-bottom: 32px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-green), var(--accent-green));
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .question-group {
            margin-bottom: 32px;
        }
        
        .question-group:last-child {
            margin-bottom: 0;
        }
        
        .question-group label {
            display: block;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 12px;
            font-size: 1rem;
        }
        
        .question-group .helper-text {
            font-size: 0.875rem;
            color: var(--text-light);
            margin-bottom: 12px;
        }
        
        input[type="number"] {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            transition: border-color 0.3s ease;
        }
        
        input[type="number"]:focus {
            outline: none;
            border-color: var(--primary-green);
        }
        
        select {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            background: white;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }
        
        select:focus {
            outline: none;
            border-color: var(--primary-green);
        }
        
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 12px;
        }
        
        .radio-option {
            flex: 1;
            min-width: 140px;
        }
        
        .radio-option input[type="radio"] {
            display: none;
        }
        
        .radio-option label {
            display: block;
            padding: 12px 20px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .radio-option input[type="radio"]:checked + label {
            border-color: var(--primary-green);
            background: rgba(45, 80, 22, 0.05);
            color: var(--primary-green);
        }
        
        .radio-option label:hover {
            border-color: var(--primary-green);
        }
        
        .btn {
            width: 100%;
            padding: 16px 32px;
            background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            font-family: 'Inter', sans-serif;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(45, 80, 22, 0.3);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .result-card {
            display: none;
            text-align: center;
        }
        
        .result-card.show {
            display: block;
        }
        
        .emission-circle {
            width: 180px;
            height: 180px;
            margin: 0 auto 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(45, 80, 22, 0.1), rgba(0, 168, 107, 0.1));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 4px solid var(--primary-green);
        }
        
        .emission-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-green);
            line-height: 1;
        }
        
        .emission-unit {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        .result-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 32px 0;
        }
        
        .stat-box {
            padding: 20px;
            background: var(--light-bg);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        
        .stat-label {
            font-size: 0.875rem;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        
        .stat-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-green);
        }
        
        .equivalence {
            background: linear-gradient(135deg, rgba(45, 80, 22, 0.05), rgba(0, 168, 107, 0.05));
            padding: 24px;
            border-radius: 12px;
            margin: 24px 0;
            border-left: 4px solid var(--accent-green);
        }
        
        .equivalence-text {
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--text-dark);
        }
        
        .equivalence-emoji {
            font-size: 2rem;
            margin-right: 12px;
        }
        
        .recommendations {
            text-align: left;
            margin-top: 32px;
        }
        
        .recommendations h3 {
            font-size: 1.3rem;
            color: var(--primary-green);
            margin-bottom: 16px;
        }
        
        .recommendations ul {
            list-style: none;
            padding: 0;
        }
        
        .recommendations li {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-dark);
        }
        
        .recommendations li:last-child {
            border-bottom: none;
        }
        
        .recommendations li::before {
            content: "✓";
            color: var(--accent-green);
            font-weight: bold;
            margin-right: 12px;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 24px;
            border-top: 1px solid var(--border-color);
            color: var(--text-light);
            font-size: 0.875rem;
        }
        
        .back-link {
            display: inline-block;
            margin-bottom: 24px;
            color: var(--primary-green);
            text-decoration: none;
            font-weight: 500;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 24px 16px;
            }
            
            .card {
                padding: 24px;
            }
            
            .header h1 {
                font-size: 1.75rem;
            }
            
            .result-stats {
                grid-template-columns: 1fr;
            }
            
            .radio-option {
                flex: 1 1 100%;
            }
            
            button[onclick^="shareOn"] {
                padding: 10px 16px !important;
                font-size: 0.9rem !important;
                width: 100%;
                justify-content: center !important;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="index.html" class="back-link">← Back to Home</a>
        
        <div class="header">
            <h1>🌱 Carbon Footprint Calculator</h1>
            <p>Calculate your monthly carbon emissions in India</p>
        </div>
        
        <div class="card">
            <div class="progress-bar">
                <div class="progress-fill" id="progressBar"></div>
            </div>
            
            <form id="carbonForm">
                <!-- Food Delivery -->
                <div class="question-group">
                    <label for="blinkit">Food & Grocery Delivery (Blinkit, Swiggy Instamart, etc.)</label>
                    <p class="helper-text">How many orders per month?</p>
                    <input type="number" id="blinkit" name="blinkit" min="0" value="0">
                </div>
                
                <!-- Restaurant Delivery -->
                <div class="question-group">
                    <label for="swiggy">Restaurant Food Delivery (Swiggy, Zomato, etc.)</label>
                    <p class="helper-text">How many orders per month?</p>
                    <input type="number" id="swiggy" name="swiggy" min="0" value="0">
                </div>
                
                <!-- E-commerce -->
                <div class="question-group">
                    <label for="ecommerce">E-commerce Shopping (Amazon, Flipkart, etc.)</label>
                    <p class="helper-text">How many orders per month?</p>
                    <input type="number" id="ecommerce" name="ecommerce" min="0" value="0">
                </div>
                
                <!-- Travel by Mode -->
                <div class="question-group">
                    <label>Monthly Travel Distance (kilometers)</label>
                    <p class="helper-text">Enter kilometers for each mode of transport you use</p>
                    
                    <div style="display: grid; gap: 16px; margin-top: 16px;">
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">🚌 Bus/Public</label>
                            <input type="number" id="bus" name="bus" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">🚃 Train/Metro</label>
                            <input type="number" id="train" name="train" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">🚗 Carpool</label>
                            <input type="number" id="carpool" name="carpool" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">⛽ Petrol Car</label>
                            <input type="number" id="petrol" name="petrol" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">🚙 Diesel Car</label>
                            <input type="number" id="diesel" name="diesel" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">🚘 Hybrid Car</label>
                            <input type="number" id="hybrid" name="hybrid" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">⚡ Electric Car</label>
                            <input type="number" id="ev" name="ev" min="0" value="0" style="flex: 1;">
                        </div>
                    </div>
                </div>
                
                <!-- Clothes by Fabric Type -->
                <div class="question-group">
                    <label>Clothes Purchased Per Month</label>
                    <p class="helper-text">Enter number of items for each fabric type</p>
                    
                    <div style="display: grid; gap: 16px; margin-top: 16px;">
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">👕 Cotton</label>
                            <input type="number" id="cotton" name="cotton" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">🧥 Synthetic</label>
                            <input type="number" id="synthetic" name="synthetic" min="0" value="0" style="flex: 1;">
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <label style="min-width: 120px; margin: 0;">♻️ Recycled</label>
                            <input type="number" id="recycled" name="recycled" min="0" value="0" style="flex: 1;">
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn">Calculate My Carbon Footprint</button>
            </form>
        </div>
        
        <!-- Results Card -->
        <div class="card result-card" id="resultCard">
            <h2 style="color: var(--primary-green); margin-bottom: 24px;">Your Monthly Carbon Footprint</h2>
            
            <div class="emission-circle">
                <div class="emission-number" id="totalEmissions">0</div>
                <div class="emission-unit">kg CO₂</div>
            </div>
            
            <div class="result-stats">
                <div class="stat-box">
                    <div class="stat-label">vs. India Average</div>
                    <div class="stat-value" id="vsAverage">--</div>
                </div>
                <div class="stat-box">
                    <div class="stat-label">Annual Projection</div>
                    <div class="stat-value" id="annualTotal">-- kg</div>
                </div>
            </div>
            
            <div class="equivalence">
                <p class="equivalence-text">
                    <span class="equivalence-emoji">🌳</span>
                    <strong id="equivalenceText">Your emissions are equivalent to...</strong>
                </p>
            </div>
            
            <div class="recommendations">
                <h3 id="recommendationsTitle">Ways to Improve</h3>
                <ul id="recommendationsList">
                    <!-- Will be populated by JS -->
                </ul>
            </div>
            
            <div style="background: linear-gradient(135deg, rgba(45, 80, 22, 0.05), rgba(0, 168, 107, 0.05)); padding: 24px; border-radius: 12px; margin-top: 32px; text-align: center;">
                <p style="font-size: 1.1rem; color: var(--text-dark); line-height: 1.7;">
                    🌍 <strong>Thank you for taking this step!</strong><br>
                    By measuring your carbon footprint, you are already on the path to building a more sustainable future. Every small change counts.
                </p>
            </div>
            
            <div style="margin-top: 32px; text-align: center;">
                <h3 style="color: var(--primary-green); margin-bottom: 20px; font-size: 1.2rem;">Share Your Results</h3>
                
                <!-- Hidden shareable tile -->
                <div id="shareableTile" style="display: none; width: 1080px; height: 1080px; background: linear-gradient(135deg, #1a3a0f 0%, #2d5016 50%, #4a7c2d 100%); padding: 0; text-align: center; position: relative; font-family: 'Inter', sans-serif; overflow: hidden;">
                    <!-- Decorative circles -->
                    <div style="position: absolute; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; top: -200px; right: -200px;"></div>
                    <div style="position: absolute; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.03); border-radius: 50%; bottom: -150px; left: -150px;"></div>
                    
                    <div style="position: relative; z-index: 1; padding: 60px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
                        <!-- Header -->
                        <div>
                            <div style="font-size: 36px; color: white; font-weight: 700; letter-spacing: 1px;">MY CARBON IMPACT</div>
                            <div style="width: 120px; height: 4px; background: linear-gradient(90deg, #00a86b, #4a7c2d); margin: 20px auto;"></div>
                        </div>
                        
                        <!-- Main Score Circle -->
                        <div style="margin: 20px 0;">
                            <div style="width: 380px; height: 380px; margin: 0 auto; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); position: relative;">
                                <!-- Inner gradient circle -->
                                <div id="scoreCircleBackground" style="position: absolute; inset: 20px; border-radius: 50%; background: linear-gradient(135deg, #f0f7ed, #e8f4e1); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                                    <div id="tileScore" style="font-size: 130px; font-weight: 900; line-height: 1; margin-bottom: 12px;"></div>
                                    <div style="font-size: 26px; color: #666; font-weight: 600; margin-top: 8px;">of India Average</div>
                                </div>
                            </div>
                            
                            <!-- Status badge below circle -->
                            <div id="tileComparison" style="margin-top: 40px; font-size: 40px; font-weight: 800; padding: 18px 45px; background: white; border-radius: 60px; display: inline-block; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);"></div>
                        </div>
                        
                        <!-- Bottom CTA with QR Code -->
                        <div style="background: white; border-radius: 30px; padding: 40px 50px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);">
                            <!-- Text side -->
                            <div style="flex: 1; text-align: left;">
                                <div style="font-size: 28px; color: #666; margin-bottom: 8px; font-weight: 500;">Calculate Your Impact</div>
                                <div style="font-size: 52px; color: #2d5016; font-weight: 900; letter-spacing: -0.5px; line-height: 1;">confidentmeai.com</div>
                            </div>
                            
                            <!-- QR Code side -->
                            <div style="text-align: center;">
                                <div id="qrcode" style="background: white; padding: 15px; border-radius: 15px; border: 3px solid #2d5016;"></div>
                                <div style="font-size: 18px; color: #2d5016; margin-top: 12px; font-weight: 700;">SCAN NOW</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
                    <button onclick="shareOnLinkedIn()" style="padding: 12px 24px; background: #0077b5; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;">
                        <span>💼</span> LinkedIn
                    </button>
                    <button onclick="shareOnTwitter()" style="padding: 12px 24px; background: #1DA1F2; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;">
                        <span>🐦</span> Twitter
                    </button>
                    <button onclick="shareOnWhatsApp()" style="padding: 12px 24px; background: #25D366; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;">
                        <span>💬</span> WhatsApp
                    </button>
                    <button onclick="shareOnInstagram(this)" style="padding: 12px 24px; background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;">
                        <span>📷</span> Instagram
                    </button>
                    <button onclick="shareOnFacebook(this)" style="padding: 12px 24px; background: #1877F2; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;">
                        <span>👍</span> Facebook
                    </button>
                </div>
            </div>
            
            <button class="btn" onclick="window.location.reload()" style="margin-top: 32px;">Calculate Again</button>
        </div>
        
        <div class="footer">
            <p>Powered by <strong>Audacieuse AI</strong> | Data based on Indian emission factors</p>
            <p style="margin-top: 8px;">For enterprise carbon tracking solutions, visit <a href="index.html" style="color: var(--primary-green);">our homepage</a></p>
        </div>
    </div>
    
    <script>
        // Carbon emission factors (kg CO2 per unit) - India specific
        const emissionFactors = {
            blinkit: 0.5,      // per order (delivery + packaging)
            swiggy: 0.6,       // per order (delivery + packaging + food waste)
            ecommerce: 0.8,    // per order (delivery + packaging)
            transport: {
                bus: 0.04,         // per km
                train: 0.02,       // per km
                carpool: 0.06,     // per km (shared)
                petrol: 0.12,      // per km
                diesel: 0.13,      // per km
                hybrid: 0.07,      // per km
                ev: 0.04           // per km (India grid mix)
            },
            fabric: {
                cotton: 5.5,       // per item
                synthetic: 7.0,    // per item (polyester)
                recycled: 2.0      // per item
            }
        };
        
        const indiaAverage = 180; // kg CO2 per month per person (India average)
        
        // Store results for sharing
        let calculatedResults = {
            total: 0,
            vsAverage: 0,
            trees: 0
        };
        
        // Progress bar update
        const form = document.getElementById('carbonForm');
        const inputs = form.querySelectorAll('input[type="number"]');
        const progressBar = document.getElementById('progressBar');
        
        inputs.forEach(input => {
            input.addEventListener('input', updateProgress);
        });
        
        function updateProgress() {
            const filled = Array.from(inputs).filter(input => input.value > 0).length;
            const percentage = (filled / inputs.length) * 100;
            progressBar.style.width = percentage + '%';
        }
        
        // Social sharing functions
        function shareOnLinkedIn() {
            const text = `I just calculated my carbon footprint: ${calculatedResults.total} kg CO₂/month (${calculatedResults.vsAverage}% of India average). ${calculatedResults.trees} trees needed to offset my annual emissions. Calculate yours:`;
            const url = window.location.href;
            window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}&summary=${encodeURIComponent(text)}`, '_blank');
        }
        
        function shareOnTwitter() {
            const text = `I calculated my carbon footprint: ${calculatedResults.total} kg CO₂/month 🌱 Calculate yours and join the journey to sustainability! #CarbonFootprint #Sustainability`;
            const url = window.location.href;
            window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
        }
        
        function shareOnWhatsApp() {
            const text = `🌍 I just calculated my carbon footprint: ${calculatedResults.total} kg CO₂/month. Calculate yours and see how you can reduce your impact: ${window.location.href}`;
            window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
        }
        
        async function shareOnInstagram(btn) {
            const originalText = btn.innerHTML;
            btn.innerHTML = '<span>⏳</span> Generating...';
            btn.disabled = true;
            
            try {
                // Show tile temporarily
                const tile = document.getElementById('shareableTile');
                tile.style.display = 'block';
                
                // Clear any existing QR code
                const qrContainer = document.getElementById('qrcode');
                qrContainer.innerHTML = '';
                
                // Generate QR code
                new QRCode(qrContainer, {
                    text: window.location.href,
                    width: 140,
                    height: 140,
                    colorDark: '#2d5016',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                });
                
                // Wait for QR code to render
                await new Promise(resolve => setTimeout(resolve, 200));
                
                // Generate image
                const canvas = await html2canvas(tile, {
                    scale: 2,
                    backgroundColor: null,
                    logging: false
                });
                
                // Hide tile
                tile.style.display = 'none';
                
                // Convert to blob
                canvas.toBlob(function(blob) {
                    // Download image
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `carbon-impact-${calculatedResults.vsAverage}percent.png`;
                    a.click();
                    URL.revokeObjectURL(url);
                    
                    // Copy caption to clipboard
                    const status = calculatedResults.vsAverage < 100 ? 
                        `✅ ${calculatedResults.vsAverage}% - Below India average! Doing great!` : 
                        calculatedResults.vsAverage <= 150 ?
                        `⚡ ${calculatedResults.vsAverage}% - Room to improve` :
                        `🚨 ${calculatedResults.vsAverage}% - Time to take action`;
                    
                    const caption = `🌱 My Carbon Impact: ${status}\n\nEvery small change counts! 📱 Scan the QR code to calculate your carbon footprint and join the journey to a sustainable future 🌍\n\n🔗 confidentmeai.com\n\n#CarbonFootprint #Sustainability #ClimateAction #NetZero #GoGreen #EcoFriendly #SustainableLiving #ClimateChange #Environment`;
                    
                    navigator.clipboard.writeText(caption).then(() => {
                        alert('✅ Image downloaded & caption copied!\n\nThe image includes a QR code linking to the calculator!\n\nNow:\n1. Open Instagram\n2. Create new post\n3. Select the downloaded image\n4. Paste caption (Ctrl+V or long-press)\n5. Share!');
                    }).catch(() => {
                        alert('✅ Image downloaded!\n\nCaption:\n' + caption + '\n\nCopy this and paste in Instagram!');
                    });
                    
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }, 'image/png');
            } catch (error) {
                console.error('Error generating image:', error);
                alert('Error generating image. Please try again.');
                btn.innerHTML = originalText;
                btn.disabled = false;
            }
        }
        
        async function shareOnFacebook(btn) {
            const originalText = btn.innerHTML;
            btn.innerHTML = '<span>⏳</span> Generating...';
            btn.disabled = true;
            
            // For Facebook, we'll generate and download the image, then open Facebook
            try {
                const tile = document.getElementById('shareableTile');
                tile.style.display = 'block';
                
                // Clear any existing QR code
                const qrContainer = document.getElementById('qrcode');
                qrContainer.innerHTML = '';
                
                // Generate QR code
                new QRCode(qrContainer, {
                    text: window.location.href,
                    width: 140,
                    height: 140,
                    colorDark: '#2d5016',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                });
                
                // Wait for QR code to render
                await new Promise(resolve => setTimeout(resolve, 200));
                
                const canvas = await html2canvas(tile, {
                    scale: 2,
                    backgroundColor: null,
                    logging: false
                });
                
                tile.style.display = 'none';
                
                canvas.toBlob(function(blob) {
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `carbon-impact-${calculatedResults.vsAverage}percent.png`;
                    a.click();
                    URL.revokeObjectURL(url);
                    
                    const status = calculatedResults.vsAverage < 100 ? 
                        `✅ ${calculatedResults.vsAverage}% - Below India average!` : 
                        calculatedResults.vsAverage <= 150 ?
                        `⚡ ${calculatedResults.vsAverage}% of India average` :
                        `🚨 ${calculatedResults.vsAverage}% - Time to reduce`;
                    
                    const text = `🌱 I calculated my carbon impact: ${status}\n\n📱 Scan the QR code in the image to calculate yours!\n\nJoin me in building a sustainable future: ${window.location.href}\n\n#Sustainability #ClimateAction`;
                    
                    // Open Facebook with text
                    setTimeout(() => {
                        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(text)}`, '_blank');
                        alert('✅ Image downloaded with QR code!\n\n1. Upload the downloaded image to Facebook\n2. Add the pre-filled text\n3. Share!\n\nPeople can scan the QR code to visit your calculator!');
                        btn.innerHTML = originalText;
                        btn.disabled = false;
                    }, 500);
                }, 'image/png');
            } catch (error) {
                console.error('Error:', error);
                // Fallback to text-only share
                const text = `I calculated my carbon impact: ${calculatedResults.vsAverage}% of India average. ${calculatedResults.vsAverage < 100 ? '✅ Below average!' : 'Working to reduce it!'} Calculate yours:`;
                window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(text)}`, '_blank');
                btn.innerHTML = originalText;
                btn.disabled = false;
            }
        }
        
        // Form submission
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get delivery values
            const blinkitInput = document.getElementById('blinkit');
            const swiggyInput = document.getElementById('swiggy');
            const ecommerceInput = document.getElementById('ecommerce');
            
            const blinkit = parseFloat(blinkitInput.value) || 0;
            const swiggy = parseFloat(swiggyInput.value) || 0;
            const ecommerce = parseFloat(ecommerceInput.value) || 0;
            
            console.log('Delivery:', { blinkit, swiggy, ecommerce });
            
            // Get transport values (new method)
            const busDist = parseFloat(document.getElementById('bus').value) || 0;
            const trainDist = parseFloat(document.getElementById('train').value) || 0;
            const carpoolDist = parseFloat(document.getElementById('carpool').value) || 0;
            const petrolDist = parseFloat(document.getElementById('petrol').value) || 0;
            const dieselDist = parseFloat(document.getElementById('diesel').value) || 0;
            const hybridDist = parseFloat(document.getElementById('hybrid').value) || 0;
            const evDist = parseFloat(document.getElementById('ev').value) || 0;
            
            console.log('Transport:', { busDist, trainDist, carpoolDist, petrolDist, dieselDist, hybridDist, evDist });
            
            // Get clothes values (new method)
            const cotton = parseFloat(document.getElementById('cotton').value) || 0;
            const synthetic = parseFloat(document.getElementById('synthetic').value) || 0;
            const recycled = parseFloat(document.getElementById('recycled').value) || 0;
            
            console.log('Clothes:', { cotton, synthetic, recycled });
            
            // Calculate emissions
            const deliveryEmissions = (blinkit * emissionFactors.blinkit) + 
                                     (swiggy * emissionFactors.swiggy) + 
                                     (ecommerce * emissionFactors.ecommerce);
            
            const travelEmissions = (busDist * emissionFactors.transport.bus) +
                                   (trainDist * emissionFactors.transport.train) +
                                   (carpoolDist * emissionFactors.transport.carpool) +
                                   (petrolDist * emissionFactors.transport.petrol) +
                                   (dieselDist * emissionFactors.transport.diesel) +
                                   (hybridDist * emissionFactors.transport.hybrid) +
                                   (evDist * emissionFactors.transport.ev);
            
            const clothesEmissions = (cotton * emissionFactors.fabric.cotton) +
                                    (synthetic * emissionFactors.fabric.synthetic) +
                                    (recycled * emissionFactors.fabric.recycled);
            
            const totalEmissions = deliveryEmissions + travelEmissions + clothesEmissions;
            
            console.log('Emissions breakdown:', {
                delivery: deliveryEmissions,
                travel: travelEmissions,
                clothes: clothesEmissions,
                total: totalEmissions
            });
            
            // DEBUG: Show alert if total is 0
            if (totalEmissions === 0) {
                alert('Debug: Total emissions is 0. Inputs - Blinkit: ' + blinkit + ', Swiggy: ' + swiggy + ', Bus: ' + busDist + ', Petrol: ' + petrolDist + ', Cotton: ' + cotton + ', Synthetic: ' + synthetic);
            }
            
            // Calculate stats
            const vsAverage = ((totalEmissions / indiaAverage) * 100).toFixed(0);
            const annualTotal = (totalEmissions * 12).toFixed(0);
            
            // Tree equivalence (1 tree absorbs ~20kg CO2 per year)
            const treesNeeded = Math.ceil(annualTotal / 20);
            
            // Determine if below average
            const isBelowAverage = parseFloat(vsAverage) < 100;
            
            // Store for sharing
            calculatedResults = {
                total: totalEmissions.toFixed(1),
                vsAverage: vsAverage,
                trees: treesNeeded
            };
            
            // Populate shareable tile
            const percentNum = parseInt(vsAverage);
            document.getElementById('tileScore').textContent = vsAverage + '%';
            
            if (isBelowAverage) {
                // Green theme for below average (good!)
                document.getElementById('tileScore').style.color = '#00a86b';
                document.getElementById('scoreCircleBackground').style.background = 'linear-gradient(135deg, #e8f5e9, #c8e6c9)';
                document.getElementById('tileComparison').textContent = 'DOING GREAT!';
                document.getElementById('tileComparison').style.color = '#00a86b';
                document.getElementById('tileComparison').style.background = '#e8f5e9';
            } else if (percentNum <= 150) {
                // Orange theme for moderate
                document.getElementById('tileScore').style.color = '#ff9800';
                document.getElementById('scoreCircleBackground').style.background = 'linear-gradient(135deg, #fff3e0, #ffe0b2)';
                document.getElementById('tileComparison').textContent = 'ROOM TO IMPROVE';
                document.getElementById('tileComparison').style.color = '#ff9800';
                document.getElementById('tileComparison').style.background = '#fff3e0';
            } else {
                // Red theme for high
                document.getElementById('tileScore').style.color = '#f44336';
                document.getElementById('scoreCircleBackground').style.background = 'linear-gradient(135deg, #ffebee, #ffcdd2)';
                document.getElementById('tileComparison').textContent = 'TIME TO ACT';
                document.getElementById('tileComparison').style.color = '#f44336';
                document.getElementById('tileComparison').style.background = '#ffebee';
            }
            
            // Update results
            document.getElementById('totalEmissions').textContent = totalEmissions.toFixed(1);
            document.getElementById('vsAverage').textContent = vsAverage + '%';
            document.getElementById('annualTotal').textContent = annualTotal + ' kg';
            
            // Update equivalence with congratulations if below average
            if (isBelowAverage) {
                document.getElementById('equivalenceText').innerHTML = 
                    `🎉 <strong>Congratulations!</strong> You are doing better than the India average! Your annual emissions equal <strong>${treesNeeded} trees</strong> needed for 1 year to offset.`;
            } else {
                document.getElementById('equivalenceText').innerHTML = 
                    `Your annual emissions equal <strong>${treesNeeded} trees</strong> needed for 1 year to offset, or <strong>${(annualTotal / 411).toFixed(1)} flights</strong> from Delhi to Mumbai.`;
            }
            
            // Generate health-focused recommendations
            const recommendations = [];
            
            if (isBelowAverage) {
                recommendations.push('🌟 Great job maintaining a low carbon footprint! Your efforts are making a real difference.');
            }
            
            if (swiggy + blinkit > 15) {
                recommendations.push('🍳 <strong>Boost your health:</strong> Cooking at home not only reduces emissions by 70%, but also improves nutrition and saves money. Your body and wallet will thank you!');
            } else if (swiggy + blinkit > 5) {
                recommendations.push('🥗 <strong>Wellness tip:</strong> Reducing food delivery to special occasions helps both your carbon footprint and digestive health.');
            }
            
            if (ecommerce > 8) {
                recommendations.push('🚶 <strong>Physical wellness:</strong> Shopping at local stores gets you moving, supports your community, and reduces delivery emissions. Walking to nearby shops is great exercise!');
            } else if (ecommerce > 3) {
                recommendations.push('🏪 <strong>Mental health boost:</strong> Shopping locally creates human connections and reduces screen time. Try visiting neighborhood stores for a mindful break from digital life.');
            }
            
            if (petrolDist + dieselDist > 200) {
                recommendations.push('🚴 <strong>Active lifestyle:</strong> Consider cycling or walking for short trips. Even 30 minutes of walking daily improves cardiovascular health significantly.');
            } else if (petrolDist + dieselDist > 100) {
                recommendations.push('🚇 <strong>Stress reduction:</strong> Public transport lets you read, relax, or work instead of dealing with traffic stress. Your mental health matters!');
            }
            
            if (busDist + trainDist > 100) {
                recommendations.push('✅ <strong>You are already making great transport choices!</strong> Public transport users report lower stress levels and more reading time.');
            }
            
            if (synthetic > cotton + recycled) {
                recommendations.push('👗 <strong>Quality over quantity:</strong> Investing in fewer, high-quality natural or recycled fabric clothes is better for both the environment and your skin health.');
            }
            
            if (cotton + synthetic + recycled < 2) {
                recommendations.push('♻️ <strong>Excellent shopping habits!</strong> Buying less clothing and choosing quality pieces reduces waste and saves money.');
            }
            
            // Balance suggestion
            if (recommendations.length > 0) {
                recommendations.push('⚖️ <strong>Remember:</strong> Enjoy restaurant meals and social experiences occasionally—balance is key to both sustainability and happiness!');
            }
            
            if (recommendations.length === 0) {
                recommendations.push('🌟 Fantastic! Your carbon footprint is already quite low. Keep up these sustainable habits!');
                recommendations.push('📢 <strong>Share your success:</strong> Inspire others by sharing your results and showing that sustainable living is achievable.');
            }
            
            // Update recommendation title based on performance
            const recTitle = document.getElementById('recommendationsTitle');
            if (isBelowAverage) {
                recTitle.textContent = '🎉 You are Doing Great! Ways to Enhance Your Health & Impact:';
            } else {
                recTitle.textContent = '💪 Ways to Improve Your Health & Reduce Your Impact:';
            }
            
            const recList = document.getElementById('recommendationsList');
            recList.innerHTML = '';
            recommendations.forEach(rec => {
                const li = document.createElement('li');
                li.innerHTML = rec;
                recList.appendChild(li);
            });
            
            // Show results
            form.parentElement.style.display = 'none';
            document.getElementById('resultCard').classList.add('show');
            
            // Scroll to results
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>
</body>
</html>