// 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.

// US-01-02 Leistungsübersicht
document.addEventListener("DOMContentLoaded", async () => {
    const section = document.getElementById("leistungen");
    if (!section) return;

    let daten;
    try {
        const response = await fetch("json/pakete.json");
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        daten = await response.json();
    } catch (error) {
        section.querySelector(".pakete__text").textContent = "Die Pakete konnten nicht geladen werden. Bitte lade die Seite erneut.";
        console.error("Pakete konnten nicht geladen werden:", error);
        return;
    }

    const titel = section.querySelector(".pakete__titel");
    const text = section.querySelector(".pakete__text");
    const grid = section.querySelector(".pakete__grid");

    titel.textContent = daten.intro.titel;
    text.textContent = daten.intro.text;

    grid.innerHTML = "";

    // Platzhalter-Pfade für die drei generierten Bilder
    const bilderMap = {
        "STARTER": "images/paket-starter.jpg",
        "STANDARD": "images/paket-standard.jpg",
        "PREMIUM": "images/paket-premium.jpg"
    };

    daten.pakete.forEach(paket => {
        const karte = document.createElement("article");
        karte.classList.add("paket-karte");

        if (paket.empfohlen) {
            karte.classList.add("paket-karte--empfohlen");
        }

        // 1. Bild oben (Platzhalter)
        const imgWrapper = document.createElement("div");
        imgWrapper.classList.add("paket-karte__image-wrapper");

        const img = document.createElement("img");
        img.src = bilderMap[paket.name] || "images/paket-placeholder.jpg";
        img.alt = `Vorschau ${paket.name}`;
        img.classList.add("paket-karte__image");
        imgWrapper.appendChild(img);

        karte.appendChild(imgWrapper);

        // Content-Container für die Texte & Abstände
        const body = document.createElement("div");
        body.classList.add("paket-karte__body");

        // 2. Header: Paketname + Badge nebeneinander
        const header = document.createElement("div");
        header.classList.add("paket-karte__header");

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

        if (paket.badge) {
            const badge = document.createElement("span");
            badge.classList.add("paket-karte__badge");
            badge.textContent = paket.badge;
            header.appendChild(badge);
        }

        body.appendChild(header);

        // 3. 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);
        body.appendChild(preis);

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

        // 5. 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);
        });

        body.appendChild(liste);

        // 6. 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;
        button.setAttribute("aria-pressed", "false");

        button.addEventListener("click", () => {
            grid.querySelectorAll(".paket-karte").forEach(andereKarte => {
                andereKarte.classList.remove("paket-karte--ausgewaehlt");
                andereKarte.querySelector("button").setAttribute("aria-pressed", "false");
            });
            karte.classList.add("paket-karte--ausgewaehlt");
            button.setAttribute("aria-pressed", "true");
            document.dispatchEvent(new CustomEvent("paket:ausgewaehlt", {
                detail: { paket: button.dataset.paket }
            }));
        });

        body.appendChild(button);
        karte.appendChild(body);

        grid.appendChild(karte);
    });
});