const healthData = {
    "sunflower": { name: "تخمه آفتابگردان", e: 35.17, orac: 2000, color: "#fdd835" },
    "almond": { name: "بادام درختی", e: 25.63, orac: 4454, color: "#8d6e63" },
    "hazelnut": { name: "فندق", e: 15.03, orac: 9645, color: "#795548" },
    "pistachio": { name: "پسته", e: 2.86, orac: 7675, color: "#c5e1a5" },
    "walnut": { name: "گردو", e: 0.70, orac: 13541, color: "#6d4c41" },
    "pecan": { name: "پکان (گردو آمریکایی)", e: 1.40, orac: 17940, color: "#5d4037" }
};

const dailyGoals = { e: 15, orac: 7000 }; // اهداف روزانه

<div class="vitality-calc-box">
    <div class="calc-header-grad">
        <h3>💎 اکسیر جوانی و ایمنی</h3>
        <p>ببینید آجیل شما چقدر از پیری جلوگیری می‌کند!</p>
    </div>

    <div class="calc-inputs">
        <label>انتخاب مغز مغذی:</label>
        <select id="nut-type">
            <option value="sunflower">تخمه آفتابگردان (سلطان ویتامین E)</option>
            <option value="almond">بادام درختی</option>
            <option value="pecan">پکان (سلطان آنتی‌اکسیدان)</option>
            <option value="walnut">گردو</option>
            <option value="hazelnut">فندق</option>
            <option value="pistachio">پسته</option>
        </select>

        <label>مقدار مصرف (گرم):</label>
        <div class="input-row">
            <input type="number" id="nut-amount" value="30">
            <button onclick="calcVitality()" class="calc-btn">آنالیز کن ✨</button>
        </div>
    </div>

    <div id="result-panel" style="display:none;">
        
        <div class="metric-box">
            <div class="metric-title">
                <span>ویتامین E (سلامت پوست)</span>
                <span id="val-e">0 mg</span>
            </div>
            <div class="progress-bg">
                <div id="bar-e" class="progress-bar e-color">0%</div>
            </div>
            <p id="msg-e" class="mini-msg"></p>
        </div>

        <div class="metric-box">
            <div class="metric-title">
                <span>آنتی‌اکسیدان (قدرت ایمنی)</span>
                <span id="val-orac">0 ORAC</span>
            </div>
            <div class="progress-bg">
                <div id="bar-orac" class="progress-bar orac-color">0%</div>
            </div>
            <p id="msg-orac" class="mini-msg"></p>
        </div>

        <div class="final-verdict" id="verdict-text"></div>
    </div>
</div>

.vitality-calc-box {
    background: #fff; border-radius: 20px;
    box-shadow: 0 15px 40px rgba(103, 58, 183, 0.15);
    max-width: 480px; margin: 30px auto; overflow: hidden;
    font-family: 'Vazir', sans-serif; border: 1px solid #ede7f6;
}
.calc-header-grad {
    background: linear-gradient(135deg, #673ab7, #9575cd);
    color: white; padding: 25px; text-align: center;
}
.calc-header-grad h3 { margin: 0; font-size: 20px; }
.calc-header-grad p { margin: 5px 0 0; opacity: 0.9; font-size: 13px; }

.calc-inputs { padding: 25px; }
select, input {
    width: 100%; padding: 12px; margin: 8px 0 20px;
    border: 2px solid #eee; border-radius: 10px; font-size: 15px;
}
.input-row { display: flex; gap: 10px; }
.calc-btn {
    background: #ffca28; color: #333; border: none; padding: 12px 25px;
    border-radius: 10px; font-weight: bold; cursor: pointer; flex: 1;
    transition: 0.3s;
}
.calc-btn:hover { background: #ffb300; }

#result-panel { padding: 0 25px 25px; animation: slideUp 0.5s; }
.metric-box { margin-bottom: 20px; }
.metric-title { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; color: #555; }
.progress-bg { background: #f0f0f0; height: 12px; border-radius: 6px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; transition: width 1s ease-out; border-radius: 6px; }

.e-color { background: linear-gradient(90deg, #ffca28, #ff6f00); } /* طلایی */
.orac-color { background: linear-gradient(90deg, #b39ddb, #673ab7); } /* بنفش */

.mini-msg { font-size: 11px; color: #777; margin-top: 5px; font-style: italic; }

.final-verdict {
    background: #ede7f6; color: #512da8; padding: 15px;
    border-radius: 12px; text-align: center; font-weight: bold; font-size: 14px;
    border: 1px dashed #b39ddb;
}

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

<script>
function calcVitality() {
    // 1. دریافت ورودی
    const type = document.getElementById('nut-type').value;
    const weight = parseFloat(document.getElementById('nut-amount').value);
    
    if (!weight || weight <= 0) { alert("لطفاً وزن را وارد کنید"); return; }

    const data = healthData[type];

    // 2. محاسبات
    const intakeE = (data.e * weight) / 100;
    const intakeORAC = (data.orac * weight) / 100;

    // 3. درصد پیشرفت
    let pctE = (intakeE / dailyGoals.e) * 100;
    let pctORAC = (intakeORAC / dailyGoals.orac) * 100;

    // محدود کردن گرافیک به 100% (اگر بیشتر شد، سرریز نشود)
    const displayPctE = Math.min(pctE, 100);
    const displayPctORAC = Math.min(pctORAC, 100);

    // 4. نمایش در DOM
    document.getElementById('result-panel').style.display = 'block';
    
    // پر کردن بارها با تاخیر کم برای انیمیشن
    setTimeout(() => {
        document.getElementById('bar-e').style.width = displayPctE + "%";
        document.getElementById('bar-orac').style.width = displayPctORAC + "%";
    }, 100);

    // متن اعداد
    document.getElementById('val-e').innerText = intakeE.toFixed(1) + " mg";
    document.getElementById('val-orac').innerText = Math.round(intakeORAC) + " ORAC";

    // 5. پیام‌های هوشمند
    let msgE = "";
    if (pctE >= 100) msgE = "✨ عالی! نیاز روزانه پوست شما کاملاً تأمین شد.";
    else if (pctE >= 50) msgE = "👍 خوبه! نصف راه جوانی رو رفتی.";
    else msgE = "💡 نکته: برای پوست بهتر، تخمه آفتابگردان اضافه کن.";
    document.getElementById('msg-e').innerText = msgE;

    let msgORAC = "";
    if (pctORAC >= 100) msgORAC = "🛡️ فوق‌العاده! بدن شما ضدضربه شد.";
    else msgORAC = "💡 نکته: گردو یا پکان آنتی‌اکسیدان خیلی بیشتری دارند.";
    document.getElementById('msg-orac').innerText = msgORAC;

    // پیام نهایی ترکیبی
    const verdictBox = document.getElementById('verdict-text');
    if (type === 'sunflower') {
        verdictBox.innerHTML = "این انتخاب یعنی: <b>ضدچروک قوی</b> (به خاطر ویتامین E بالا).";
    } else if (type === 'walnut' || type === 'pecan') {
        verdictBox.innerHTML = "این انتخاب یعنی: <b>محافظت قوی در برابر بیماری</b> (آنتی‌اکسیدان بالا).";
    } else {
        verdictBox.innerHTML = "انتخابی متعادل برای سلامتی روزانه.";
    }
}
</script>