<div class="iron-calc-wrapper">
    <h3>🧲 ماشین‌حساب خون‌ساز (محاسبه آهن)</h3>
    
    <div class="gender-toggle">
        <label>جنسیت شما:</label>
        <select id="gender-select">
            <option value="18">خانم (۱۸ میلی‌گرم نیاز روزانه)</option>
            <option value="8">آقا (۸ میلی‌گرم نیاز روزانه)</option>
            <option value="27">خانم باردار (۲۷ میلی‌گرم)</option>
        </select>
    </div>

    <div class="input-group">
        <select id="fruit-select">
            <option value="2.7">برگه زردآلو</option>
            <option value="2.0">انجیر خشک</option>
            <option value="1.9">کشمش / مویز</option>
            <option value="3.9">پسته خام</option>
            <option value="8.8">تخمه کدو</option>
            <option value="6.7">بادام هندی</option>
        </select>
        <input type="number" id="weight-input" placeholder="گرم" value="30">
        <button onclick="addFruit()">➕ افزودن</button>
    </div>

    <ul id="selected-list"></ul>

    <div class="result-box">
        <div class="progress-bg">
            <div id="iron-progress" style="width: 0%"></div>
        </div>
        <p>آهن دریافتی: <strong id="total-iron">0</strong> mg</p>
        <p class="status-msg" id="status-msg">هنوز چیزی نخورده‌اید.</p>
    </div>
</div>

<style>
.iron-calc-wrapper {
    background: #fff5f5; border: 2px solid #ffcccc; 
    padding: 20px; border-radius: 15px; max-width: 400px; margin: 20px auto;
}
.gender-toggle select, .input-group select, .input-group input {
    padding: 8px; border: 1px solid #ddd; border-radius: 5px; margin: 5px 0;
}
.input-group { display: flex; gap: 5px; align-items: center; }
.input-group button {
    background: #d32f2f; color: white; border: none; padding: 8px 15px; cursor: pointer; border-radius: 5px;
}
#selected-list { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: #555; }
#selected-list li { border-bottom: 1px dashed #eee; padding: 5px 0; display: flex; justify-content: space-between; }

.progress-bg {
    background: #e0e0e0; height: 20px; border-radius: 10px; overflow: hidden; margin-top: 15px;
}
#iron-progress {
    height: 100%; background: linear-gradient(90deg, #ff8a80, #d32f2f); transition: width 0.5s;
}
.status-msg { font-size: 12px; color: #777; margin-top: 5px; }
</style>

<script>
let totalIron = 0;
let dailyNeed = 18; // پیش‌فرض خانم‌ها

// تغییر نیاز روزانه با تغییر جنسیت
document.getElementById('gender-select').addEventListener('change', function() {
    dailyNeed = parseFloat(this.value);
    updateUI();
});

function addFruit() {
    const select = document.getElementById('fruit-select');
    const weightInput = document.getElementById('weight-input');
    
    const ironPer100 = parseFloat(select.value);
    const fruitName = select.options[select.selectedIndex].text;
    const weight = parseFloat(weightInput.value);

    if (!weight || weight <= 0) return alert("لطفاً وزن را وارد کنید");

    // فرمول: (آهن در ۱۰۰ گرم * وزن ورودی) / ۱۰۰
    const ironInPortion = (ironPer100 * weight) / 100;
    
    totalIron += ironInPortion;

    // اضافه کردن به لیست بصری
    const list = document.getElementById('selected-list');
    const li = document.createElement('li');
    li.innerHTML = `<span>${fruitName} (${weight}g)</span> <span>+${ironInPortion.toFixed(1)} mg</span>`;
    list.appendChild(li);

    updateUI();
}

function updateUI() {
    // آپدیت عدد
    document.getElementById('total-iron').innerText = totalIron.toFixed(1);

    // آپدیت نوار درصد
    let percentage = (totalIron / dailyNeed) * 100;
    if (percentage > 100) percentage = 100;
    
    const bar = document.getElementById('iron-progress');
    bar.style.width = percentage + "%";

    // پیام هوشمند
    const msg = document.getElementById('status-msg');
    if (percentage < 30) {
        msg.innerText = "⚠️ خیلی کم! نیاز به تقویت دارید.";
        bar.style.background = "#ff8a80"; // قرمز کم‌رنگ
    } else if (percentage < 80) {
        msg.innerText = "👍 خوبه، ولی هنوز کافی نیست.";
        bar.style.background = "#ffb74d"; // نارنجی
    } else {
        msg.innerText = "🎉 عالی! نیاز روزانه آهن شما تأمین شد.";
        bar.style.background = "#4caf50"; // سبز
    }
}
</script>