const bComplexData = {
    "pistachio": { 
        name: "پسته", 
        b1: 0.87, b2: 0.16, b3: 1.3, b6: 1.7, b9: 51, 
        icon: "🥜" 
    },
    "almond": { 
        name: "بادام درختی", 
        b1: 0.21, b2: 1.1, b3: 3.6, b6: 0.14, b9: 44, 
        icon: "🌰" 
    },
    "peanut": { 
        name: "بادام زمینی", 
        b1: 0.6, b2: 0.1, b3: 12.0, b6: 0.3, b9: 240, 
        icon: "🥜" 
    },
    "walnut": { 
        name: "گردو", 
        b1: 0.34, b2: 0.15, b3: 1.1, b6: 0.54, b9: 98, 
        icon: "🧠" 
    },
    "sunflower": { 
        name: "تخمه آفتابگردان", 
        b1: 1.48, b2: 0.35, b3: 8.3, b6: 1.35, b9: 227, 
        icon: "🌻" 
    },
    "raisin": { 
        name: "کشمش", 
        b1: 0.1, b2: 0.08, b3: 0.7, b6: 0.17, b9: 5, 
        icon: "🍇" 
    }
};

const dailyValues = { b1: 1.2, b2: 1.3, b3: 16, b6: 1.7, b9: 400 };

<div class="b-calc-container">
    <div class="calc-head">
        <h3>⚡ محاسبه‌گر انرژی و ویتامین B</h3>
        <p>مخلوط آجیل خود را بسازید تا ببینید چقدر انرژی می‌گیرید.</p>
    </div>

    <div class="input-zone">
        <select id="nut-select">
            <option value="pistachio">پسته (بمب B6)</option>
            <option value="almond">بادام (بمب B2)</option>
            <option value="peanut">بادام زمینی (بمب B3)</option>
            <option value="sunflower">تخمه آفتابگردان (بمب B1)</option>
            <option value="walnut">گردو</option>
            <option value="raisin">کشمش</option>
        </select>
        
        <div class="weight-input">
            <input type="number" id="nut-weight" value="30" min="10">
            <span>گرم</span>
        </div>
        
        <button onclick="addNut()" class="action-btn">افزودن +</button>
    </div>

    <div id="nut-list"></div>

    <div class="results-zone">
        <h4>📊 وضعیت ویتامین‌های شما:</h4>
        
        <div class="bar-group">
            <div class="label">B1 (تیامین - انرژی‌زا)</div>
            <div class="progress-track"><div id="bar-b1" class="progress-fill b1">0%</div></div>
        </div>

        <div class="bar-group">
            <div class="label">B2 (ریبوفلاوین - بینایی)</div>
            <div class="progress-track"><div id="bar-b2" class="progress-fill b2">0%</div></div>
        </div>

        <div class="bar-group">
            <div class="label">B3 (نیاسین - اعصاب)</div>
            <div class="progress-track"><div id="bar-b3" class="progress-fill b3">0%</div></div>
        </div>

        <div class="bar-group">
            <div class="label">B6 (خواب و خون‌سازی)</div>
            <div class="progress-track"><div id="bar-b6" class="progress-fill b6">0%</div></div>
        </div>

        <div class="bar-group">
            <div class="label">B9 (فولات - ایمنی)</div>
            <div class="progress-track"><div id="bar-b9" class="progress-fill b9">0%</div></div>
        </div>
        
        <div id="smart-tip" class="tip-box" style="display:none"></div>
    </div>
</div>

.b-calc-container {
    background: #fff; border-radius: 15px; padding: 25px;
    box-shadow: 0 8px 24px rgba(255, 152, 0, 0.15);
    max-width: 500px; margin: 20px auto; font-family: sans-serif;
    border: 1px solid #ffe0b2;
}
.calc-head h3 { color: #f57c00; margin: 0 0 10px; }
.input-zone { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}
select, input { padding: 10px; border: 1px solid #ddd; border-radius: 8px; flex: 1; }
.action-btn {
    background: #ff9800; color: white; border: none; padding: 10px 20px;
    border-radius: 8px; cursor: pointer; font-weight: bold; flex-basis: 100%;
}
.action-btn:hover { background: #e65100; }

#nut-list { margin-bottom: 20px; max-height: 150px; overflow-y: auto; }
.nut-item {
    background: #fff3e0; padding: 8px; margin-bottom: 5px;
    border-radius: 6px; display: flex; justify-content: space-between;
    font-size: 14px;
}
.del-btn { color: red; cursor: pointer; font-weight: bold; }

.bar-group { margin-bottom: 12px; }
.label { font-size: 13px; margin-bottom: 4px; color: #555; }
.progress-track { background: #eee; height: 18px; border-radius: 9px; overflow: hidden; }
.progress-fill {
    height: 100%; color: #fff; font-size: 11px; text-align: center;
    line-height: 18px; transition: width 0.6s ease;
}
/* رنگ‌بندی ویتامین‌ها */
.b1 { background: #ffca28; color: #333; }
.b2 { background: #ffb74d; }
.b3 { background: #ff9800; }
.b6 { background: #f57c00; }
.b9 { background: #e65100; }

.tip-box {
    background: #e8f5e9; border: 1px solid #c8e6c9; color: #2e7d32;
    padding: 10px; border-radius: 8px; font-size: 13px; margin-top: 15px;
}

<script>
let userSelection = [];

function addNut() {
    const select = document.getElementById('nut-select');
    const key = select.value;
    const name = select.options[select.selectedIndex].text;
    const weight = parseFloat(document.getElementById('nut-weight').value);

    if (weight <= 0 || isNaN(weight)) { alert("وزن صحیح نیست"); return; }

    userSelection.push({ key, name, weight });
    render();
}

function removeNut(index) {
    userSelection.splice(index, 1);
    render();
}

function render() {
    // 1. نمایش لیست
    const listEl = document.getElementById('nut-list');
    listEl.innerHTML = userSelection.map((item, i) => `
        <div class="nut-item">
            <span>${bComplexData[item.key].icon} ${item.name} (${item.weight}g)</span>
            <span class="del-btn" onclick="removeNut(${i})">×</span>
        </div>
    `).join('');

    // 2. محاسبه مجموع
    let totals = { b1:0, b2:0, b3:0, b6:0, b9:0 };
    
    userSelection.forEach(item => {
        const data = bComplexData[item.key];
        totals.b1 += (data.b1 * item.weight) / 100;
        totals.b2 += (data.b2 * item.weight) / 100;
        totals.b3 += (data.b3 * item.weight) / 100;
        totals.b6 += (data.b6 * item.weight) / 100;
        totals.b9 += (data.b9 * item.weight) / 100;
    });

    // 3. آپدیت نمودارها
    updateBar('bar-b1', totals.b1, dailyValues.b1);
    updateBar('bar-b2', totals.b2, dailyValues.b2);
    updateBar('bar-b3', totals.b3, dailyValues.b3);
    updateBar('bar-b6', totals.b6, dailyValues.b6);
    updateBar('bar-b9', totals.b9, dailyValues.b9);

    // 4. پیام هوشمند (Smart Tip)
    checkDeficiency(totals);
}

function updateBar(id, val, goal) {
    const percent = Math.min((val / goal) * 100, 100);
    const el = document.getElementById(id);
    el.style.width = percent + "%";
    el.innerText = Math.round(percent) + "%";
}

function checkDeficiency(totals) {
    const tipBox = document.getElementById('smart-tip');
    let msg = "";

    // منطق پیشنهادی
    if (totals.b6 < dailyValues.b6 * 0.3) {
        msg = "⚠️ ویتامین B6 شما کم است! برای انرژی بیشتر، کمی **پسته** اضافه کنید.";
    } else if (totals.b1 < dailyValues.b1 * 0.3) {
        msg = "⚠️ تیامین (B1) کم است. **تخمه آفتابگردان** بهترین منبع آن است.";
    } else if (totals.b9 < dailyValues.b9 * 0.3) {
        msg = "⚠️ فولات (B9) نیاز دارید. **بادام زمینی یا تخمه** اضافه کنید.";
    } else {
        msg = "✅ عالی! ترکیب شما انرژی‌بخش و کامل است.";
    }

    if (userSelection.length > 0) {
        tipBox.style.display = 'block';
        tipBox.innerHTML = msg;
    } else {
        tipBox.style.display = 'none';
    }
}
</script>