document.addEventListener("DOMContentLoaded", async function () {
  const res = await fetch("assets/services.json");
  const data = await res.json();

  const pakete = data.pakete;

  function render(paketName, ziel, preisZiel, dauerId) {
    const paket = pakete[paketName];
    let sum = 0;

    ziel.innerHTML = paket.leistungen.map(id => {
      const s = data.services.find(x => x.id === id);
      if (!s) return "";
      sum += s.preis;
      return `• ${s.name}`;
    }).filter(Boolean).join("<br>");

    preisZiel.textContent = `CHF ${sum.toFixed(2)}`;

    const dauerEl = document.getElementById(dauerId);
    if (dauerEl && paket.dauer) {
      dauerEl.textContent = `Dauer: ca. ${paket.dauer} Arbeitstage`;
    }
  }

  const kategorien = {
    "räder": "Räder",
    "bremsen": "Bremsen",
    "antrieb": "Antrieb",
    "rahmen": "Rahmen",
    "steuerung": "Steuerung",
    "grundwartung": "Grundwartung",
    "service": "Servicepakete"
  };

  const gruppiert = {};
  data.services.forEach(s => {
    if (s.id.includes("H")) return; // nur vorne behalten
    if (!gruppiert[s.system]) gruppiert[s.system] = [];
    gruppiert[s.system].push(s);
  });

  const container = document.getElementById("service-tabelle").parentElement;
  container.innerHTML = "";

  Object.keys(gruppiert).forEach(system => {
    const title = document.createElement("h2");
    title.textContent = kategorien[system] || system;
    container.appendChild(title);

    const table = document.createElement("table");
    table.className = "service-table";
    const thead = document.createElement("thead");
    thead.innerHTML = "<tr><th>Leistungsbeschreibung</th><th>Preis (CHF)</th></tr>";
    table.appendChild(thead);

    const tbody = document.createElement("tbody");
    gruppiert[system].forEach(s => {
      const tr = document.createElement("tr");

      const preis = isNaN(s.preis) ? "-" : `CHF ${s.preis.toFixed(2)}`;
      const beschreibung = document.createElement("div");
      beschreibung.className = "beschreibung";
      beschreibung.style.display = "none";
      beschreibung.textContent = s.beschreibung;

      const button = document.createElement("span");
      button.textContent = "Mehr anzeigen";
      button.className = "mehr-anzeigen";
      button.style.cursor = "pointer";
      button.addEventListener("click", () => {
        beschreibung.style.display = beschreibung.style.display === "block" ? "none" : "block";
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: "mehr_anzeigen",
          service_name: s.name
        });
      });

      const tdName = document.createElement("td");
      const angepassterName = s.name.replace(" (vorne)", " (pro Rad)");
      tdName.appendChild(document.createTextNode(`(${s.id}) ${angepassterName} `));
      tdName.appendChild(button);
      tdName.appendChild(beschreibung);

      const tdPreis = document.createElement("td");
      tdPreis.textContent = preis;

      tr.appendChild(tdName);
      tr.appendChild(tdPreis);
      tbody.appendChild(tr);
    });

    table.appendChild(tbody);
    container.appendChild(table);
  });

  render("Service – Velo mit Felgenbremsen",
         document.getElementById("paket-basis"),
         document.getElementById("preis-basis"),
         "dauer-basis");

  render("Service – Velo mit Scheibenbremsen",
         document.getElementById("paket-komplett"),
         document.getElementById("preis-komplett"),
         "dauer-komplett");
});