/**
 * features.js
 *
 * Powers the Features page.
 *
 * Features:
 *   - Loads the feature list from `./data/features.json` via fetch().
 *   - Dynamically renders each feature as a Bootstrap card (icon,
 *     title, description) inside the #featuresContainer grid.
 *   - Shows an error message if the JSON file cannot be loaded.
 *
 * The feature list lives in JSON so that marketing can add, remove
 * or reorder features without the page template changing.
 */

const featuresContainer = document.getElementById('featuresContainer');

async function loadFeatures() {
  try {
    const response = await fetch('./data/features.json');
    if (!response.ok) {
      throw new Error(`Failed to load features: ${response.status}`);
    }
    const data = await response.json();
    renderFeatures(data.features);
  } catch (error) {
    console.error('Error:', error);
    featuresContainer.innerHTML = `<p class="text-white text-center">Unable to load features.</p>`;
  }
}

function renderFeatures(features) {
  featuresContainer.innerHTML = '';
  features.forEach(f => {
    const col = document.createElement('div');
    col.className = 'col-12 col-md-6 col-lg-4 mb-4';
    col.innerHTML = `
      <div class="rounded shadow bg-translucent p-4 h-100 text-white">
        <img src="${f.icon}" alt="" height="48" width="auto" class="mb-3">
        <h3 class="h5">${f.title}</h3>
        <p class="text-white-50 mb-0">${f.description}</p>
      </div>
    `;
    featuresContainer.appendChild(col);
  });
}

window.addEventListener('DOMContentLoaded', loadFeatures);