galleryData = await FileAttachment("./assets/data/gallery-master-index.json").json()

// Gallery configurations with IEEE colors and descriptions
galleries = [
  {
    id: "games",
    title: "Educational Games",
    icon: "🎮",
    description: "Interactive scenario-based games teaching IoT concepts with scoring and feedback",
    color: "#16A085", // Teal
    path: "apps/content-hub/index.html?tab=games"
  },
  {
    id: "simulations",
    title: "Interactive Simulations",
    icon: "🔬",
    description: "Advanced simulators for protocols, architectures, and system design",
    color: "#2C3E50", // Navy
    path: "apps/content-hub/index.html?tab=simulations"
  },
  {
    id: "animations",
    title: "Visual Animations",
    icon: "🎨",
    description: "Observable JS animations demonstrating IoT concepts and protocols",
    color: "#E67E22", // Orange
    path: "apps/content-hub/index.html?tab=animations"
  },
  {
    id: "labs",
    title: "Hands-On Labs",
    icon: "🧪",
    description: "Wokwi ESP32 simulation labs for practical IoT programming experience",
    color: "#2E5B3A", // Green
    path: "apps/content-hub/index.html?tab=labs"
  },
  {
    id: "knowledge-checks",
    title: "Knowledge Checks",
    icon: "✅",
    description: "Interactive MCQs with immediate feedback embedded throughout chapters",
    color: "#6B2D5B", // Purple
    path: "apps/content-hub/index.html?tab=knowledge-checks"
  },
  {
    id: "sensor-squad",
    title: "Sensor Squad",
    icon: "👶",
    description: "Kid-friendly explanations using character-based storytelling",
    color: "#D4A500", // Yellow/Gold
    path: "apps/content-hub/index.html?tab=sensor-squad"
  }
]

// Get counts from gallery data
galleryCounts = galleries.map(g => ({
  ...g,
  count: galleryData.galleries[g.id]?.count || 0
}))

// Create gallery cards HTML - entire card is clickable
html`<div class="gallery-grid">
  ${galleryCounts.map(gallery => `
    <a href="${gallery.path}" class="gallery-card" style="border-top: 4px solid ${gallery.color};">
      <div class="gallery-icon" style="color: ${gallery.color};">${gallery.icon}</div>
      <h3 class="gallery-title">${gallery.title}</h3>
      <p class="gallery-description">${gallery.description}</p>
      <div class="gallery-count" style="color: ${gallery.color};">
        ${gallery.count} items available
      </div>
      <span class="gallery-link">Explore →</span>
    </a>
  `).join('')}
</div>

<style>
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 30px;
}

@media(min-width: 900px) {
  .gallery-grid {
    margin: 40px 50px;
  }
}

@media(min-width: 1200px) {
  .gallery-grid {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

.gallery-card {
  background: #41454E;
  border-radius: 12px;
  padding: 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  min-height: 240px;
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
}

.gallery-card * {
  pointer-events: none;
}

.gallery-icon {
  font-size: 48px;
  margin-bottom: 15px;
  line-height: 1;
}

.gallery-title {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 12px 0;
}

.gallery-description {
  color: #A2A8B4;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 15px 0;
  flex-grow: 1;
}

.gallery-count {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gallery-link {
  color: #009AF1;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  margin-top: auto;
}

.gallery-link:hover {
  text-decoration: underline;
}
</style>`