async function loadConfig() {
  const response = await fetch('config/services.json', { cache: 'no-store' });
  if (!response.ok) throw new Error(`Config load failed: ${response.status}`);
  return response.json();
}

function renderStatus(items) {
  const grid = document.getElementById('status-grid');
  grid.innerHTML = items.map(item => `
    <article class="status-card">
      <div class="status-top">
        <span class="status-name">${item.name}</span>
        <span class="status-state ${item.state}">
          <span class="status-dot"></span>${item.label}
        </span>
      </div>
      <div class="status-value">${item.value}</div>
      <div class="status-detail">${item.detail}</div>
    </article>
  `).join('');
}

function renderServices(targetId, items, disabled = false) {
  const grid = document.getElementById(targetId);
  grid.innerHTML = items.map(item => {
    const classes = `service-card${disabled ? ' disabled' : ''}`;
    const tag = disabled ? 'div' : 'a';
    const href = disabled ? '' : ` href="${item.url}"`;
    return `
      <${tag} class="${classes}"${href}>
        <div class="service-icon">${item.icon}</div>
        <h3>${item.name}</h3>
        <p>${item.description}</p>
        <div class="service-foot">
          <span>${item.category}</span>
          <span>${disabled ? 'Pending' : 'Open ↗'}</span>
        </div>
      </${tag}>
    `;
  }).join('');
}

loadConfig()
  .then(config => {
    renderStatus(config.status);
    renderServices('service-grid', config.services);
    renderServices('home-grid', config.home, true);
  })
  .catch(error => {
    console.error(error);
    document.getElementById('status-grid').innerHTML =
      '<article class="status-card"><div class="status-name">Configuration</div><div class="status-value">Unavailable</div><div class="status-detail">Could not load services.json</div></article>';
  });