// Grab ?id=XXX
const params=new URLSearchParams(window.location.search);
const id=params.get('id');
const container=document.getElementById('project');

if(!id){
  container.textContent='No project id 🙃';
  throw new Error('Missing id param');
}

fetch('projects/projects.json')
  .then(r=>r.json())
  .then(list=>{
    const proj=list.find(p=>p.id===id);
    if(!proj) throw new Error('Unknown project');

    container.innerHTML=`
      <h1 style="text-transform:uppercase;margin-bottom:1rem">${proj.title}</h1>
      <iframe src="${proj.embed}" allowfullscreen style="width:100%;height:56vw;max-height:70vh;border:0;border-radius:4px"></iframe>
      <section style="margin-top:2rem" id="info"></section>
      <section style="margin-top:2rem" id="credits"></section>
    `;

    // Pull in optional text files
    ['info','credits'].forEach(key=>{
      if(!proj[key]) return;
      fetch(proj[key])
        .then(r=>r.text())
        .then(txt=>{
          document.getElementById(key).innerHTML=
            `<h2 style="text-transform:uppercase;margin-bottom:.5em">${key}</h2>
             <p>${txt.replace(/\n/g,'<br>')}</p>`;
        });
    });
  })
  .catch(err=>{
    console.error(err);
    container.innerHTML='<p>Project not found.</p>';
  });