// VANTA BACKGROUND
VANTA.NET({
  el: "#vanta-bg",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0xf97316,
  backgroundColor: 0x111827,
  points: 10.00,
  maxDistance: 25.00,
  spacing: 18.00
});

// DUMMY GAMES
const games = [
  {
    title: "Quantum Holograms",
    desc: "Solve mind-bending AR puzzles in your living room.",
    img: "http://static.photos/technology/640x360/42",
    tags: ["AR", "Puzzle"],
    link: "#"
  },
  {
    title: "Sky Drifters VR",
    desc: "Fly through neon skies in a fully immersive VR racer.",
    img: "http://static.photos/outdoor/640x360/99",
    tags: ["VR", "Racing"],
    link: "#"
  },
  {
    title: "Echo Chamber",
    desc: "A social MR club where music becomes visible.",
    img: "http://static.photos/gradient/640x360/11",
    tags: ["MR", "Social"],
    link: "#"
  }
];

// RENDER CARDS
const grid = document.getElementById("game-grid");
games.forEach(g => {
  const card = document.createElement("a");
  card.href = g.link;
  card.className = "block rounded-xl overflow-hidden card-3d bg-gray-800 border border-gray-700";
  card.innerHTML = `
    <img src="${g.img}" alt="${g.title}" class="w-full h-48 object-cover">
    <div class="p-4">
      <div class="flex gap-2 mb-2">
        ${g.tags.map(t => `<span class="text-xs px-2 py-1 rounded-full bg-orange-500/20 text-orange-300">${t}</span>`).join("")}
      </div>
      <h3 class="text-xl font-bold mb-1">${g.title}</h3>
      <p class="text-gray-400 text-sm">${g.desc}</p>
    </div>
  `;
  grid.appendChild(card);
});

// UPLOAD FORM
document.getElementById("upload-form").addEventListener("submit", e => {
  e.preventDefault();
  alert("Upload simulated! In production, we'd POST to the API.");
  e.target.reset();
});