<div class="diet-calculator-wrapper">
    <div class="calc-header">
        <h3>🥗 محاسبه‌گر هوشمند سهمیه غذایی</h3>
        <p>مشخصات خود را وارد کنید تا برنامه غذایی‌تان را تحویل بگیرید.</p>
    </div>

    <form id="macroForm">
        <div class="form-group">
            <label>جنسیت:</label>
            <div class="radio-group">
                <label><input type="radio" name="gender" value="male" checked> 👨 مرد</label>
                <label><input type="radio" name="gender" value="female"> 👩 زن</label>
            </div>
        </div>

        <div class="input-row">
            <div class="form-group">
                <label>وزن (kg)</label>
                <input type="number" id="weight" placeholder="مثلاً 75" required>
            </div>
            <div class="form-group">
                <label>قد (cm)</label>
                <input type="number" id="height" placeholder="مثلاً 175" required>
            </div>
            <div class="form-group">
                <label>سن</label>
                <input type="number" id="age" placeholder="مثلاً 25" required>
            </div>
        </div>

        <div class="form-group">
            <label>میزان فعالیت روزانه:</label>
            <select id="activity">
                <option value="1.2">بدون تحرک (پشت میز نشین)</option>
                <option value="1.375">کم تحرک (۱-۳ روز ورزش)</option>
                <option value="1.55">متوسط (۳-۵ روز ورزش)</option>
                <option value="1.725">زیاد (۶-۷ روز ورزش سنگین)</option>
            </select>
        </div>

        <div class="form-group">
            <label>هدف شما چیست؟</label>
            <select id="goal">
                <option value="lose">کاهش وزن (چربی‌سوزی)</option>
                <option value="maintain">ثبیت وزن</option>
                <option value="gain">افزایش وزن (عضله‌سازی)</option>
            </select>
        </div>

        <button type="button" onclick="calculateDiet()" class="calc-btn">محاسبه برنامه غذایی 🚀</button>
    </form>

    <div id="results" style="display:none;">
        <h4>📊 سهمیه روزانه شما:</h4>
        <div class="result-box">
            <span class="big-cal" id="total-cals">0</span>
            <span class="unit">کالری</span>
        </div>
        
        <div class="macros-container">
            <div class="macro-item protein">
                <span>پروتئین 🍗</span>
                <strong id="prot-g">0g</strong>
            </div>
            <div class="macro-item carbs">
                <span>کربوهیدرات 🍞</span>
                <strong id="carb-g">0g</strong>
            </div>
            <div class="macro-item fats">
                <span>چربی سالم 🥑</span>
                <strong id="fat-g">0g</strong>
            </div>
        </div>
    </div>
</div>

.diet-calculator-wrapper {
    background: #fff; padding: 25px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); max-width: 500px; margin: 20px auto;
    font-family: 'Vazir', sans-serif; border: 1px solid #eee;
}
.calc-header h3 { color: #2e7d32; margin-bottom: 5px; }
.input-row { display: flex; gap: 10px; }
.form-group { margin-bottom: 15px; flex: 1; }
input, select { 
    width: 100%; padding: 10px; border: 2px solid #e0e0e0; 
    border-radius: 8px; transition: 0.3s;
}
input:focus, select:focus { border-color: #2e7d32; outline: none; }
.calc-btn {
    width: 100%; background: #2e7d32; color: white; border: none;
    padding: 12px; border-radius: 8px; font-size: 16px; cursor: pointer;
    transition: 0.3s;
}
.calc-btn:hover { background: #1b5e20; }

/* استایل نتایج */
#results { margin-top: 25px; padding-top: 20px; border-top: 2px dashed #eee; animation: fadeIn 0.5s; }
.result-box { text-align: center; margin-bottom: 20px; }
.big-cal { font-size: 36px; font-weight: bold; color: #2e7d32; }
.macros-container { display: flex; justify-content: space-between; gap: 10px; }
.macro-item { 
    flex: 1; text-align: center; padding: 10px; border-radius: 10px; 
    display: flex; flex-direction: column; gap: 5px; font-size: 13px;
}
.protein { background: #e3f2fd; color: #1565c0; }
.carbs { background: #fff3e0; color: #ef6c00; }
.fats { background: #fce4ec; color: #c2185b; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

<script>
function calculateDiet() {
    // 1. دریافت ورودی‌ها
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);
    const age = parseFloat(document.getElementById('age').value);
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const activity = parseFloat(document.getElementById('activity').value);
    const goal = document.getElementById('goal').value;

    if (!weight || !height || !age) {
        alert("لطفاً تمام فیلدها را پر کنید!");
        return;
    }

    // 2. محاسبه BMR (Mifflin-St Jeor)
    let bmr;
    if (gender === 'male') {
        bmr = (10 * weight) + (6.25 * height) - (5 * age) + 5;
    } else {
        bmr = (10 * weight) + (6.25 * height) - (5 * age) - 161;
    }

    // 3. محاسبه TDEE و تنظیم هدف
    let tdee = bmr * activity;
    
    // تنظیم کالری بر اساس هدف
    let targetCalories = tdee;
    if (goal === 'lose') targetCalories -= 500; // 500 کالری کمتر برای لاغری
    if (goal === 'gain') targetCalories += 300; // 300 کالری بیشتر برای حجم

    // 4. محاسبه ماکروها (درصد استاندارد: 50% کربوهیدرات، 30% پروتئین، 20% چربی)
    // هر گرم پروتئین/کربوهیدرات = 4 کالری | هر گرم چربی = 9 کالری
    
    const proteinGrams = (targetCalories * 0.30) / 4;
    const carbGrams = (targetCalories * 0.50) / 4;
    const fatGrams = (targetCalories * 0.20) / 9;

    // 5. نمایش نتایج
    document.getElementById('results').style.display = 'block';
    
    // انیمیشن اعداد (اختیاری)
    document.getElementById('total-cals').innerText = Math.round(targetCalories);
    document.getElementById('prot-g').innerText = Math.round(proteinGrams) + " گرم";
    document.getElementById('carb-g').innerText = Math.round(carbGrams) + " گرم";
    document.getElementById('fat-g').innerText = Math.round(fatGrams) + " گرم";
}
</script>