// US-01-02 Leistungsübersicht
// Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
// damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.

document.addEventListener("DOMContentLoaded", async () => {

    // JSON-Datei laden
    const response = await fetch("data/pakete.json");
    const daten = await response.json();

    // Elemente aus dem HTML holen
    const titel = document.querySelector(".pakete__titel");
    const text = document.querySelector(".pakete__text");
    const grid = document.querySelector(".pakete__grid");

    // Intro mit Daten aus JSON füllen
    titel.textContent = daten.intro.titel;
    text.textContent = daten.intro.text;

    // Vorhandenen Inhalt entfernen
    grid.innerHTML = "";

    // Für jedes Paket eine Karte erstellen
    daten.pakete.forEach(paket => {

        // Artikel erstellen
        const karte = document.createElement("article");
        karte.classList.add("paket-karte");

        // Empfohlenes Paket bekommt zusätzliche Klasse
        if (paket.empfohlen) {
            karte.classList.add("paket-karte--empfohlen");
        }

        // Badge nur erstellen, wenn eines vorhanden ist
        if (paket.badge) {
            const badge = document.createElement("p");
            badge.classList.add("paket-karte__badge");
            badge.textContent = paket.badge;
            karte.appendChild(badge);
        }

        // Name
        const name = document.createElement("h3");
        name.classList.add("paket-karte__name");
        name.textContent = paket.name;
        karte.appendChild(name);

        // Preis
        const preis = document.createElement("p");
        preis.classList.add("paket-karte__preis");

        const betrag = document.createElement("span");
        betrag.classList.add("paket-karte__betrag");
        betrag.textContent = `${paket.preis} €`;

        const zeitraum = document.createElement("span");
        zeitraum.classList.add("paket-karte__zeitraum");
        zeitraum.textContent = `/ ${paket.zeitraum}`;

        preis.appendChild(betrag);
        preis.appendChild(zeitraum);
        karte.appendChild(preis);

        // Beschreibung
        const beschreibung = document.createElement("p");
        beschreibung.classList.add("paket-karte__beschreibung");
        beschreibung.textContent = paket.beschreibung;
        karte.appendChild(beschreibung);

        // Leistungen
        const liste = document.createElement("ul");
        liste.classList.add("paket-karte__leistungen");

        paket.leistungen.forEach(leistung => {
            const punkt = document.createElement("li");
            punkt.textContent = leistung;
            liste.appendChild(punkt);
        });

        karte.appendChild(liste);

        // Button
        const button = document.createElement("button");
        button.classList.add("paket-karte__cta");
        button.type = "button";
        button.textContent = "Paket wählen";
        button.dataset.paket = paket.dataPaket;

        karte.appendChild(button);

        // Karte ins Grid einfügen
        grid.appendChild(karte);
    });
});