/**
 * pricing.js
 *
 * Powers the Pricing page.
 *
 * Features:
 *   - Loads the three plan definitions from `./data/pricing.json`
 *     asynchronously via fetch().
 *   - Dynamically renders one card per plan, highlighting the
 *     "featured" plan with a coloured border and a "Most popular"
 *     badge.
 *   - Shows a graceful error message if the JSON file cannot be
 *     loaded.
 *
 * Keeping plan data in a separate JSON file means marketing copy and
 * prices can be updated without touching the page markup.
 */

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

async function loadPricing() {
  try {
    const response = await fetch('./data/pricing.json');
    if (!response.ok) {
      throw new Error(`Failed to load pricing: ${response.status}`);
    }
    const data = await response.json();
    renderPlans(data.plans);
  } catch (error) {
    console.error('Error:', error);
    pricingContainer.innerHTML = `<p class="text-white text-center">Unable to load pricing. Please try again later.</p>`;
  }
}

function renderPlans(plans) {
  pricingContainer.innerHTML = '';
  plans.forEach(plan => {
    const col = document.createElement('div');
    col.className = 'col-12 col-md-4 mb-4';

    const featuresHtml = plan.features
      .map(f => `<li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">${f}</li>`)
      .join('');

    const highlight = plan.featured ? 'pinkBorder' : '';
    const badge = plan.featured
      ? '<span class="badge bg-primary mb-2">Most popular</span>'
      : '';

    col.innerHTML = `
      <div class="rounded shadow bg-translucent p-4 h-100 d-flex flex-column ${highlight}">
        ${badge}
        <h3 class="text-white">${plan.name}</h3>
        <p class="text-white-50">${plan.tagline}</p>
        <div class="mb-3">
          <span class="display-4 text-white">$${plan.price}</span>
          <span class="text-white-50 ms-2">${plan.period}</span>
        </div>
        <ul class="list-unstyled text-white flex-grow-1">${featuresHtml}</ul>
        <a href="${plan.href}" class="btn btn-primary mt-3">${plan.cta}</a>
      </div>
    `;
    pricingContainer.appendChild(col);
  });
}

window.addEventListener('DOMContentLoaded', loadPricing);