const SUPPORTED_GATEWAY_GROUPS = [
  {
    title: "Core Gateways",
    items: [
      "Stripe",
      "Airwallex",
      "Adyen",
      "Checkout.com",
      "Checkout",
      "Braintree",
      "Square"
    ]
  },
  {
    title: "Alternative Billing",
    items: [
      "Paddle",
      "Xsolla",
      "NordPay",
      "HiPay",
      "Smart Glocal",
      "EdfaPay"
    ]
  },
  {
    title: "Platform Stores",
    items: [
      "Steam",
      "GOG"
    ]
  }
];

function escapeHtml(value) {
  return String(value ?? "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

export function renderOnce(root, render) {
  if (!root || root.dataset.rendered === "true") {
    return;
  }

  root.innerHTML = typeof render === "function" ? render() : "";
  root.dataset.rendered = "true";
}

export function buildSupportedGatewaysMarkup() {
  return SUPPORTED_GATEWAY_GROUPS.map((group) => {
    const itemsMarkup = group.items
      .map(
        (item) =>
          `<div class="gateway-pill"><span class="gateway-pill-dot"></span>${escapeHtml(item)}</div>`
      )
      .join("");

    return [
      '<section class="gateway-group">',
      `<h4 class="gateway-group-title">${escapeHtml(group.title)}</h4>`,
      `<div class="gateway-pill-grid">${itemsMarkup}</div>`,
      "</section>"
    ].join("");
  }).join("");
}
