function updateLinkInterval(link, interval) {
  const currentHref = link.getAttribute("href");
  const newHref = currentHref.replace(
    /default_interval=[om]/,
    `default_interval=${interval}`
  );
  link.setAttribute("href", newHref);
}

function updateAmountDisplay(link, amount, interval) {
  const boldText = link.querySelector(".bold");
  if (!boldText) return;

  const suffix = interval === "m" ? "€/mois" : "€";
  boldText.innerHTML = `<span class="amount-value">${amount}</span>${suffix}`;
}

function switchActiveTab(clickedButton, allButtons) {
  allButtons.forEach((btn) => btn.classList.remove("is-selected"));
  clickedButton.classList.add("is-selected");
}

function handleDonationIntervalChange(interval) {
  const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
  const freeAmountLink = document.querySelector(".btn--donation:not([data-amount])");

  donationLinks.forEach((link) => {
    const amount = link.getAttribute("data-amount");
    updateLinkInterval(link, interval);
    updateAmountDisplay(link, amount, interval);
  });

  if (freeAmountLink) {
    updateLinkInterval(freeAmountLink, interval);
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const tabButtons = document.querySelectorAll(".nav--tabs__btn");
  const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");

  if (tabButtons.length === 0 || donationLinks.length === 0) return;

  tabButtons.forEach((button) => {
    button.addEventListener("click", function () {
      const interval = this.getAttribute("data-interval");
      switchActiveTab(this, tabButtons);
      handleDonationIntervalChange(interval);
    });
  });
});