async function init() {
  const listEl = document.getElementById('catalog-list');
  const viewerEl = document.getElementById('viewer');

  let objetos = [];
  try {
    const res = await fetch('data/objects.json');
    objetos = await res.json();
  } catch (err) {
    viewerEl.innerHTML = '<p class="viewer__empty">No se pudo cargar el catálogo (data/objects.json).</p>';
    console.error(err);
    return;
  }

  listEl.innerHTML = objetos.map(obj => `
    <li class="catalog__item">
      <button type="button" data-id="${obj.id}">
        <span class="name">${obj.nombre}</span>
        <span class="cat">${obj.catalogo}</span>
      </button>
    </li>
  `).join('');

  function mostrarObjeto(obj) {
    viewerEl.innerHTML = `
      <dl class="viewer__log">
        <div><dt>Catálogo</dt><dd>${obj.catalogo}</dd></div>
        <div><dt>Tipo</dt><dd>${obj.tipo}</dd></div>
        <div><dt>Constelación</dt><dd>${obj.constelacion}</dd></div>
        <div><dt>Magnitud</dt><dd>${obj.magnitud}</dd></div>
        <div><dt>A.R.</dt><dd>${obj.ar}</dd></div>
        <div><dt>Dec.</dt><dd>${obj.dec}</dd></div>
      </dl>
      <div class="viewer__image-wrap">
        <img src="${obj.imagen}" alt="Fotografía de ${obj.nombre}" loading="lazy"
             onerror="this.closest('.viewer__image-wrap').innerHTML='<p class=\\'viewer__empty\\'>Falta la imagen: ${obj.imagen}</p>'">
      </div>
      <div class="viewer__body">
        <h2>${obj.nombre}</h2>
        <p class="desc">${obj.descripcion}</p>
        <a class="viewer__wiki-link" href="${obj.wikipedia}" target="_blank" rel="noopener noreferrer">
          Ver en Wikipedia →
        </a>
      </div>
    `;

    document.querySelectorAll('.catalog__item button').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.id === obj.id);
    });
  }

  listEl.addEventListener('click', (e) => {
    const btn = e.target.closest('button[data-id]');
    if (!btn) return;
    const obj = objetos.find(o => o.id === btn.dataset.id);
    if (obj) mostrarObjeto(obj);
  });

  // Muestra el primer objeto por defecto
  if (objetos.length) mostrarObjeto(objetos[0]);
}

document.addEventListener('DOMContentLoaded', init);