const FIRST_JOB_EXPENSES = [
  'Work shoes/clothes', 'Gas or bus fare', 'Phone bill', 'Lunch/snacks',
  'Emergency fund starter', 'ID/uniform costs',
];

function formatMoney(n) {
  return n.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
}

function renderExpenses() {
  document.getElementById('expenses').innerHTML = FIRST_JOB_EXPENSES
    .map((label) => `<span class="chip">${label}</span>`)
    .join('');
}

function updateBreakdown() {
  const input = document.getElementById('paycheck-amount');
  const resultEl = document.getElementById('breakdown-result');
  const amount = parseFloat(input.value);

  if (!amount || amount <= 0) {
    resultEl.innerHTML = '';
    return;
  }

  const needs = amount * 0.5;
  const wants = amount * 0.3;
  const savings = amount * 0.2;

  resultEl.innerHTML = `
    <div class="card">
      <div class="breakdown-row"><span>Needs (bills, transportation, essentials) — 50%</span><strong>${formatMoney(needs)}</strong></div>
      <div class="breakdown-row"><span>Wants (fun, eating out, extras) — 30%</span><strong>${formatMoney(wants)}</strong></div>
      <div class="breakdown-row"><span>Savings — 20%</span><strong>${formatMoney(savings)}</strong></div>
    </div>
  `;
}

document.getElementById('paycheck-amount').addEventListener('input', updateBreakdown);

renderExpenses();