document.addEventListener('DOMContentLoaded', () => {
	
    // Newsletter form submission
    const form = document.getElementById('newsletter-form');
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const email = e.target.querySelector('input[type="email"]').value;
        const subscribe = e.target.querySelector('input[id="subscribe"]').value;
        const message = e.target.querySelector('input[id="sub_message"]');
		    message.setAttribute('type','text');
		    message.type = 'text';
		    const response = await fetch('/api/newsletter', {
            method: 'POST',
            body: JSON.stringify({
                "email": email,
                "subscribe": subscribe
                }), 
            headers: {
              'Content-Type': 'application/json'
            }
            });  
    });
		
    // Add subtle parallax effect to video background
    document.addEventListener('mousemove', (e) => {
        const mouseX = e.clientX / window.innerWidth;
        const mouseY = e.clientY / window.innerHeight;
        
        const video = document.getElementById('background-video');
        video.style.transform = `scale(1.1) translate(${mouseX * -20}px, ${mouseY * -20}px)`;
    });


	//retrieve steam events
	(async () => {
		const container = document.querySelector("#steam-events");
		console.log(container);
		if (!container) return; 

		const appId = container.dataset.appid || "3622810";
		const count = 5;

		async function loadSteamEvents({ appId, count }) {
		  const url = `/api/steamevents?appId=${appId}&count=${count}`;
		  const res = await fetch(url);
		  if (!res.ok) throw new Error("Unable to retrieve events");
		  return res.json();
		}

		function escapeHTML(str) {
		  const p = document.createElement("p");
		  p.textContent = str || "";
		  return p.innerHTML;
		}

		function renderSteamEvents(container, data) {
		  if (!data.items?.length) {
			container.innerHTML = "<p>No event available.</p>";
			return;
		  }

		  const list = document.createElement("ul");
		  list.style.listStyle = "none";
		  list.style.padding = "0";
		  list.style.margin = "0";

		  data.items.forEach(item => {
			const li = document.createElement("li");
			li.style.border = "1px solid #ddd";
			li.style.borderRadius = "12px";
			li.style.padding = "12px 16px";
			li.style.margin = "8px 0";
			li.style.background = "#fff";
			li.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";

			const title = document.createElement("a");
			title.href = item.url;
			title.target = "_blank";
			title.rel = "noopener";
			title.textContent = item.title || "Update";

			const meta = document.createElement("div");
			meta.style.fontSize = "12px";
			meta.style.opacity = "0.7";
			const d = item.date ? new Date(item.date).toLocaleString() : "";
			meta.textContent = [d, item.feedlabel].filter(Boolean).join(" • ");

			const excerpt = document.createElement("p");
			const short = (item.contents || "").replace(/\s+/g, " ").trim().slice(0, 240);
			excerpt.innerHTML = escapeHTML(short) + (short.length >= 240 ? "…" : "");

			li.appendChild(title);
			li.appendChild(meta);
			li.appendChild(excerpt);
			list.appendChild(li);
		  });

		  container.innerHTML = "";
		  container.appendChild(list);
		}

		try {
		  const data = await loadSteamEvents({ appId, count });
		  renderSteamEvents(container, data);
		} catch (e) {
		  container.innerHTML = "<p>Error loading Steam events.</p>";
		  console.error(e);
		}
	 })();

});