script.js

const toggle = document.getElementById('billingToggle');
const themeSwitch = document.getElementById('themeSwitch');
const cardContainer = document.getElementById('cardContainer');

// Mock API data
const plans = [
  {
    name: "Basic",
    price: { monthly: 19.99, annually: 199.99 },
    features: ["500 GB Storage", "2 Users Allowed", "Send up to 3 GB"]
  },
  {
    name: "Professional",
    highlight: true,
    price: { monthly: 24.99, annually: 249.99 },
    features: ["1 TB Storage", "5 Users Allowed", "Send up to 10 GB"]
  },
  {
    name: "Master",
    price: { monthly: 39.99, annually: 399.99 },
    features: ["2 TB Storage", "10 Users Allowed", "Send up to 20 GB"]
  }
];

// Generate cards dynamically
function renderCards(billing = "monthly") {
  cardContainer.innerHTML = "";
  plans.forEach(plan => {
    const card = document.createElement('div');
    card.className = 'card';
    if (plan.highlight) card.classList.add('highlight');

    card.innerHTML = `
      <h3>${plan.name}</h3>
      <p class="price" data-monthly="${plan.price.monthly}" data-annually="${plan.price.annually}">
        $${plan.price[billing]}
      </p>
      <ul>
        ${plan.features.map(f => `<li>${f}</li>`).join("")}
      </ul>
      <button>Learn More</button>
    `;
    cardContainer.appendChild(card);
  });
}

renderCards("monthly");

// Toggle billing
toggle.addEventListener('change', () => {
  const billing = toggle.checked ? "monthly" : "annually";
  document.querySelectorAll('.price').forEach(price => {
    price.textContent = `$${price.dataset[billing]}`;
  });
});

// Theme switch
themeSwitch.addEventListener('change', () => {
  document.body.classList.toggle('dark');
});