Events

<h2 style="text-align:center; font-family:'Helvetica Neue', sans-serif; color:#14325c;">Las Lomas Upcoming Events</h2>
<div class="events-container" id="church-events" style="display:flex; flex-direction:column; gap:40px; max-width:1000px; margin:30px auto;"></div>
<script>
fetch('https://script.google.com/macros/s/AKfycbxY4SpYGvQFXDmTdf-ESbIxCj8rdHMQvL080E5m3qyuMV9fbQi_2--b8c5qHMxSLdMf/exec')
.then(res => res.json())
.then(events => {
const container = document.getElementById('church-events');
events.forEach((event, index) => {
if (index > 0) {
const hr = document.createElement('hr');
hr.style = 'border:none; border-top:2px solid #ccc; margin:20px 0;';
container.appendChild(hr);
}
const card = document.createElement('div');
card.style = `
display:flex;
flex-direction:${index % 2 === 1 ? 'row-reverse' : 'row'};
background:#fff;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
overflow:hidden;
transition:transform .3s;
`;
const imageUrl = event.imageurl || 'https://via.placeholder.com/400x250.png?text=Church+Event';
const imageDiv = document.createElement('div');
imageDiv.style = `
flex:1;
min-height:240px;
background: url('${imageUrl}') center/cover no-repeat;
`;
const detailsDiv = document.createElement('div');
detailsDiv.style = `
flex:1;
padding:24px;
font-family:'Helvetica Neue', sans-serif;
display:flex;
flex-direction:column;
justify-content:space-between;
`;
detailsDiv.innerHTML = `
<h3 style="margin:0 0 12px;color:#1b1b1b;font-size:20px">${event.eventtitle}</h3>
<p><strong>Date:</strong> ${event.date} &nbsp; <strong>Time:</strong> ${event.time}</p>
<p><strong>Location:</strong> ${event.location}</p>
<p>${event.description}</p>
<p><strong>Audience:</strong> ${event.audience}</p>
<a href="${event.linkurl}" target="_blank" style="margin-top:10px;background:#006b9f;color:#fff;padding:8px 16px;border-radius:6px;text-decoration:none;font-weight:bold">${event.linktext}</a>
`;
card.appendChild(imageDiv);
card.appendChild(detailsDiv);
container.appendChild(card);
});
})
.catch(err => {
console.error('Error loading events:', err);
document.getElementById('church-events').innerHTML = '<p style="text-align:center; color:red;">Failed to load events. Please check the API connection.</p>';
});
</script>