<!-- Project 365: Mansfield Unplugged — Live Event Listing -->
<div id="mu-events"></div>
<script>
(function(){
  var c=document.getElementById('mu-events');
  var appUrl='https://project365mansfield.base44.app';
  function fmt(d){return new Date(d).toLocaleDateString('en-US',{weekday:'short',month:'short',day:'numeric',year:'numeric'});}
  function fmtT(d){return new Date(d).toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit'});}
  function card(e){
    var badgeImgs={'city':'https://media.base44.com/images/public/6966e488170253e8cb19e6d5/6dd33ec0b_3653.png','parks_rec':'https://media.base44.com/images/public/6966e488170253e8cb19e6d5/7085987be_3652.png','project_365':'https://media.base44.com/images/public/6966e488170253e8cb19e6d5/a4b6e63b6_3651.png'};
    var badge=e.host_category&&badgeImgs[e.host_category]?'<img src="'+badgeImgs[e.host_category]+'" style="position:absolute;top:0;right:8px;width:40px;height:40px;object-fit:contain;z-index:2;" alt="">':'';
    var imgBlock='<a href="'+appUrl+'/EventDetails?id='+e.id+'" target="_blank" style="display:block;position:relative;width:100%;height:160px;background:linear-gradient(135deg,#1c3557,#73b7b9);border-radius:8px 8px 0 0;overflow:hidden;text-decoration:none;cursor:pointer;">'+(e.image_url?'<img src="'+e.image_url+'" style="width:100%;height:100%;object-fit:cover;display:block;">':'')+badge+'</a>';
    var loc=e.location?'<div style="font-size:13px;color:#6b7280;margin-top:4px;">📍 '+e.location+'</div>':'';
    var title=e.host?e.title+' with '+e.host:e.title;
    var regStar=e.registration_required?'*':'';
    var time=fmtT(e.date)+(e.end_date?' – '+fmtT(e.end_date):'');
    var regBtn=e.registration_required?'<a href="'+(e.registration_url||'#')+'" target="_blank" style="display:inline-block;background:#cb2f29;color:white;text-decoration:none;padding:7px 16px;border-radius:6px;font-size:13px;font-weight:600;width:100%;box-sizing:border-box;text-align:center;">Register</a>':'<a href="'+appUrl+'/EventDetails?id='+e.id+'" target="_blank" style="display:inline-block;background:#1c3557;color:white;text-decoration:none;padding:7px 16px;border-radius:6px;font-size:13px;font-weight:600;">Learn More →</a>';
    return '<div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;">'+imgBlock+'<div style="padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;"><h3 style="margin:0 0 6px;font-size:16px;font-weight:700;color:#1c3557;line-height:1.3;">'+title+regStar+'</h3><div style="font-size:13px;color:#374151;">📅 '+fmt(e.date)+'</div><div style="font-size:13px;color:#374151;margin-top:3px;">🕐 '+time+'</div>'+loc+'<div style="margin-top:auto;padding-top:12px;">'+regBtn+'</div></div></div>';
  }
  c.innerHTML='<div style="text-align:center;padding:30px;color:#6b7280;">Loading events…</div>';
  fetch('https://project365mansfield.base44.app/api/functions/getPublicEvents',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'})
    .then(function(r){return r.json();})
    .then(function(d){
      var ev=d.events||[];
      
      if(!ev.length){c.innerHTML='<p style="text-align:center;color:#6b7280;">No upcoming events.</p>';return;}
      c.innerHTML='<div style="font-family:system-ui,sans-serif;"><h2 style="font-size:22px;font-weight:800;color:#1c3557;margin:0 0 6px;">Upcoming Events</h2><p style="font-size:14px;color:#6b7280;margin:0 0 16px;">Discover new ways to unplug together!</p><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;">'+ev.map(card).join('')+'</div><p style="margin-top:16px;font-size:12px;color:#9ca3af;text-align:center;">Powered by <a href="'+appUrl+'" style="color:#73b7b9;text-decoration:none;">Project 365: Mansfield Unplugged</a></p></div>';
    })
    .catch(function(){c.innerHTML='<p style="text-align:center;color:#6b7280;">Events could not be loaded.</p>';});
})();
</script>